Three.js: सफारी/आईओएस पर एचएलएस अब काम नहीं कर रहा

यह कैनवास पर आरेखित कर रहा है और कैनवास रेंडरर के साथ रेंडरिंग कर रहा है, हालांकि ड्रॉपिंग फ़्रेम। webgl के साथ कुछ आवश्यक है।

यह एक सुंदरता है। मैंने प्रॉक्सी एचएलएस स्ट्रीम के साथ एक केपैनो डेमो को थोड़ा संशोधित किया है।

यह अब सफारी ओएसएक्स पर काम कर रहा है लेकिन आईओएस 9 पर नहीं। कोई विचार क्या अंतर है? मैं दुर्भाग्य से webgl झंडे का विशेषज्ञ नहीं हूं या वे क्या करते भी हैं। IOS9 पर यह अभी भी एक काला फ्रेम है।

http://dev.electroteque.org/threejs/webgl.html

यह अंतिम लिंक केवल सफारी 9.1.3 / मैक ओएस x 10.11.6 . में ब्लैक रेक्ट / ध्वनि है

एचएलएस क्या है?

@makc सच में? मेरे पास OSX 10.10 और Safari 10 है। वैसे यह Apple द्वारा हाल ही में किए गए तोड़फोड़ परिवर्तन की व्याख्या करता है। सफारी 10. तो अगर हम सफारी 10 हैं तो हम सब अच्छे हैं।

@mrdoob HLS = Apple Streaming. यानी लाइव स्ट्रीम के लिए लेकिन वीओडी भी। टेराडेक गियर के साथ लाइव स्ट्रीमिंग एक आदर्श बनने जा रही है। यानी http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

कोई विचार क्या मतभेद हो सकते हैं? मैंने पहले उदाहरण में कुछ चीजों को बदलने की कोशिश की। दूसरा उदाहरण कच्चा वेबग्ल फ़ंक्शन है।

तो texImage2D आंशिक रूप से एचएलएस प्रस्तुत करेगा लेकिन आईओएस पर नहीं, शायद इसलिए कि यह सफारी 10 नहीं है?

कृपया मुझे क्षमा करें मैंने कुछ वेबकिट बग टिकटों की सूचना दी है।

वे चले गए हैं और IOS अपडेट पर CORS प्रॉक्सी हैक को तोड़फोड़ किया है। macOS ने भी सफारी में CORS समस्या को ठीक नहीं करने की सूचना दी है।

मुझे अब यह पता लगाना है कि उनके तोड़फोड़ के आसपास कैसे काम किया जाए। मुझे आईओएस पर काम कर रहे एचएलएस को और परीक्षण करने के लिए काम करना है। Apple गंभीरता से मुझे अपनी आग बुझाने के लिए पसीना बहा रहा है।

अगर मैं OSX रेंडरिंग प्राप्त कर सकता हूं तो यह एक शुरुआत होगी। मुझे बस यह पता लगाने की जरूरत है कि तीन.जेएस में क्या अलग है?

जो अलग है उसकी तुलना करने के लिए मैं अभी भी कमी के तरीकों को करने की कोशिश कर रहा हूं। एक बार जब मैं यह पता लगा लेता हूं कि मैं आईओएस भी काम कर सकता हूं।

शायद तीन.जेएस के भीतर अतिरिक्त शेडर प्रोग्राम प्रतिपादन समस्याओं का कारण बन रहा है? मैं इसके पार नहीं हूं, लेकिन कच्चे वेबग्ल उदाहरण में दोहराने की कोशिश कर रहा हूं कि उस समकोण उदाहरण में three.js क्या कर रहा है। क्या इसके लिए उदाहरण शेडर कोड है?

मुझे यहां कुछ कच्चे कार्य मिले जो उम्मीद है कि मैं पूरी तरह से दोहरा सकता हूं कि तीन.जेएस क्या कर रहा है। मैं सीधे शेडर कार्यक्रमों की प्रतिलिपि नहीं बना सकता क्योंकि कुछ चर बाहरी रूप से विश्व स्थिति की तरह सेट होते हैं।

https://bl.ocks.org/mbostock/5446416

हो सकता है कि मैंने अभी-अभी इस या संभवतः संबंधित मुद्दे पर भाग लिया हो। मेरे पास एक S3 बाल्टी पर स्थित h264 mp4 फ़ाइलें हैं और मैं उन्हें एक video.src पर एक ब्लॉब के रूप में लोड कर रहा हूं।

अगर मैं अमेज़ॅन वेब-आधारित अपलोडर का उपयोग करके अपने एस 3 बाल्टी पर अपलोड करता हूं, तो वीडियो सीधे मोबाइल सफारी (आईओएस 10.0.1) में लोड होने पर ठीक चलता है, लेकिन अगर मैं अपने तीन.जेएस व्यूअर का उपयोग करके उन्हें चलाने की कोशिश करता हूं तो मुझे बस एक मिलता है काला चित्रपट। हालांकि, अगर मैं साइबरडक के साथ S3 बाल्टी में अपलोड करता हूं, तो वे सीधे मोबाइल सफारी और तीन.जेएस में ठीक खेलते हैं।

ऐसा लगता है कि साइबरडक मेटा-डेटा 'सामग्री-प्रकार = वीडियो/mp4' सेट कर रहा है और एडब्ल्यूएस अपलोडर 'सामग्री-प्रकार = एप्लिकेशन/ऑक्टेट-स्ट्रीम' है। जब मैं मैन्युअल रूप से इस मेटा-डेटा को वीडियो/mp4 पर सेट करता हूं तो सब कुछ सही तरीके से काम करता है।

अजीब मुद्दा, और एक जिसके कारण मुझे बहुत सिर खुजलाना पड़ा। मुझे बताएं कि क्या यह टिकट के समान अंतर्निहित मुद्दा है, या यदि मुझे एक नया बनाना चाहिए।

धन्यवाद,
डस्टिन

यह एचएलएस मेट के लिए है जैसा कि mpegts के टुकड़ों या खंडित फाइलों में mp4 नहीं है। Mp4 सफारी और आईओएस दोनों पर ठीक है। मैंने साइबरडक में माइमटाइप की जाँच की और यह कहता है कि mpegts सही है।

वही स्ट्रीम मेरे लिए कच्चे वेबलॉग उदाहरण में काम कर रही है, न कि आईओएस पर। आपका मुद्दा मेरे जैसा ही लगता है, हालांकि एक काले फ्रेम में। कोई प्रतिपादन बिल्कुल नहीं।

@danrossi ओके कूल। मैं विशेष रूप से अपने मुद्दे के लिए एक नया टिकट बनाऊंगा। धन्यवाद।

मुझे लगता है कि यह मुद्दा है: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
मैं वर्तमान में तीन.जेएस के लिए एक ही समाधान को लागू करने की कोशिश कर रहा हूं, लेकिन बहुत दूर नहीं जा रहा हूं।

@पहला चरण। यह एक सफारी मुद्दा है क्योंकि ओएसएक्स और आईओएस दोनों पर एक समस्या है। Mp4 IOS और OSX के लिए ठीक काम कर रहा है। मैं एंटीअलियास के साथ छेड़छाड़ करूंगा।

अभी भी दोनों के बीच मतभेदों को दूर नहीं कर सकते हैं। कच्चा वेबलॉग उदाहरण अभी भी IOS पर काम नहीं करेगा, लेकिन इसे OSX पर काम करना एक शुरुआत है।

मैं सोच रहा हूं कि क्या मुझे एक काम करने वाला इक्विरेक्टेंगल शेडर प्रोग्राम मिल सकता है जिसे मैं छोड़ सकता हूं।

अधिक जानकारी यहाँ: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co।

मुझे एहसास है कि यह एक ब्राउज़र बग है, लेकिन इन वेबजीएल बग्स को ठीक होने में कितना समय लगता है, यह देखते हुए वर्कअराउंड को लागू करना आवश्यक हो सकता है।

कैनवास के माध्यम से बनावट का उपयोग करने के मामले में, वीडियो को सफारी में प्रदर्शित किया गया था।
हालाँकि, चूँकि अभी भी iOS में CORS समस्याएँ हैं, इसने केवल उसी मूल में काम किया।
https://bugs.webkit.org/show_bug.cgi?id=135379

मैं वेबलॉग से परिचित नहीं हूं, लेकिन कृपया निम्नलिखित का संदर्भ लें।
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@ निशिमुरा टी मुझे लगता है कि मुझे पता है कि आपका क्या मतलब है कैनवसरेंडर का उपयोग करें। मैंने कोशिश की कि कमी विधि करने के लिए।

मुझे लगता है कि यह काम कर रहा था, लेकिन यह सीपीयू के कारण गंभीर ड्रॉप फ्रेम और प्लेबैक प्रदर्शन के मुद्दों का कारण बनता है। आईओएस पर स्पष्ट रूप से बदतर। Ipad 3 पहले से ही webgl के लिए फ्रेम छोड़ देता है।

@danrossi मुझे थोड़ी गलतफहमी हुई। मुझे क्षमा करें। मैंने गुमराह करने वाली बात भेजी थी।

मैंने एलेवर प्रोजेक्ट के साथ उसी समस्या की पुष्टि की है जो कच्चे वेबग्ल और शेडर्स का उपयोग करती है। मुझे वापस काम करने के लिए उसे हैक करना होगा। वहां कुछ रेंडरिंग समस्याएं पैदा कर रहा है और तीन.जेएस को समान रूप से प्रभावित करेगा।

मैंने एलेवर में पुष्टि की है कि यह बनावट को बाध्य करने वाला ऑटो समाशोधन है जो इसे तोड़ने का कारण बन रहा है यानी

webGL.gl.bindTexture(webGL.gl.TEXTURE_2D, null);

अगर यह टिप्पणी की गई है तो यह काम कर रहा है।

यह भी एक समस्या पैदा कर रहा था, मुझे यकीन नहीं है कि यह किस लिए है।

webGL.gl.pixelStorei(webGL.gl.UNPACK_FLIP_Y_WEBGL, true);

हो सकता है कि एक ऑटो क्लियर प्रॉपर्टी हो जो तीन.जेएस में एक ही काम कर रही हो?

मुझे कई संदर्भ दिखाई देते हैं

state.bindTexture(_gl.TEXTURE_2D, null);

लेकिन यह नहीं पता कि यह कहां हो सकता है। क्या ऐसा करना जरूरी है?

बनावट ड्राइंग समस्या का कारण बनने के लिए कोड बहुत पागल है। ऐसा लगता है कि बनावट के इस बंधन के साथ कुछ है।

@danrossi वहाँ कोई पृष्ठ है जो इसे ठीक से प्रस्तुत करता है?

शोर दोस्त के बारे में खेद है। मैंने अधिक एबी परीक्षण किया। यह वास्तव में ऐसा लगता है जो मैंने उल्लेख किया है, क्योंकि मुझे इसे एलेवर डेमो के लिए भी टिप्पणी करनी थी।

_gl.pixelStorei (_gl.UNPACK_FLIP_Y_WEBGL, बनावट.flipY);
https://github.com/mrdoob/three.js/blob/6c7f000734f8579da37fb39e5c2e9e5e2dfb14f8/src/renderers/webgl/WebGLTextures.js#L411

इस वजह से समस्या हो रही है। हालांकि इसके बिना बनावट उल्टा है। मैं इसे अब काम करने के लिए दिखाने के लिए एक और परीक्षण जोड़ूंगा।

http://dev.electroteque.org/threejs/hlsbroken.html
http://dev.electroteque.org/threejs/hls.html

एक और कच्चा उदाहरण मैंने पाया, FLIP_Y पर टिप्पणी की। संभावित वेबकिट बग अब ?

http://dev.electroteque.org/threejs/webgl3.html

फ्लिपवाई का एकमात्र संदर्भ यह है लेकिन वेबकिट रात में अभी भी एक मुद्दा है

https://bugs.webkit.org/show_bug.cgi?id=162491

अगर मैं फ्लिपवाई को अक्षम करता हूं जो मुझे लगता है कि हार्डवेयर त्वरण को तोड़ता है तो यह काम कर रहा है?

texture = new THREE.VideoTexture( video );
                texture.minFilter = THREE.LinearFilter;
                texture.format = THREE.RGBFormat;
                texture.magFilter = THREE.LinearFilter;
                texture.flipY = false;

http://dev.electroteque.org/threejs/hlsflipy.html

यह देखने की कोशिश की जा रही है कि क्या यह अब वेबकिट बग है। अभी के लिए इसके चारों ओर काम करने के लिए बनावट को घुमाना कैसे संभव है?

अभी के लिए इसके चारों ओर काम करने के लिए बनावट को घुमाना कैसे संभव है?

क्यों न सिर्फ ज्योमेट्री uv को फ्लिप करें या शेडर में करें

@makc मुझे नहीं पता कि इसके बारे में कैसे जाना है।

बस आगे सिर करना है। यह FlipY "फिक्स" IOS 9 पर मदद नहीं करता है, बस इसका परीक्षण किया।

वहाँ अब कुछ और समस्या है। इसे नीचे ट्रैक करने में बस कुछ दिन लग गए।

यह सब वेबकिट की समस्या हो सकती है तीन नहीं। जेएस इसे दिखने से। हमेशा की तरह इसके लिए खेद है।

मैंने वहां भी एक रिपोर्ट दर्ज की है https://bugs.webkit.org/show_bug.cgi?id=163866

मुझे नहीं पता कि इसके बारे में कैसे जाना है।

http://jsfiddle.net/hfj7gm6t/2182/

@makc यूवी के चारों ओर

uv.setY (i, 1 - uv.getY (i));

http://dev.electroteque.org/threejs/hls.html

हालांकि आईओएस पर समस्या अभी भी स्पष्ट है।

@makc. यह बहुत संभव है कि यह शेडर प्रोग्राम फ्लिप कर रहा है, यह डेमो स्रोतों में से एक में था।

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

यह मूल डेमो में पाया गया है जो काम कर रहा था क्योंकि यह फ़्लिपी ध्वज का उपयोग नहीं करता है, ऐसा लगता है कि यह शेडर प्रोग्राम में कर रहा है।

http://dev.electroteque.org/threejs/webglnoflip.html

यह नहीं पता कि इसे तीन.जेएस में कैसे एकीकृत किया जाए? क्या एक शेडर प्रोग्राम का उपयोग करना बेहतर होगा?

मैं अभी भी आईओएस डीबग कर रहा हूं।

यह दिलचस्प है। उस गणना को इस उदाहरण में दोहराने का प्रयास करके ऐसा लगता है कि यह इसे फ़्लिप कर रहा है लेकिन इसे अभी भी बुरी तरह से स्केल करता है।

http://dev.electroteque.org/threejs/webglflipped.html

तो gl_Position इसकी स्थिति को नियंत्रित करता है।

 gl_Position = vec4(aVertexPosition.x*2.0-1.0,1.0-aVertexPosition.y*2.0,0,1);

क्या एक शेडर प्रोग्राम का उपयोग करना बेहतर होगा?

शेडर प्रोग्राम को हर फ्रेम में एक बार निष्पादित किया जाता है, बनाम पूरी चीज शुरू होने से ठीक पहले ज्यामिति में यूवी को फ़्लिप करना।

@makc शायद शुरुआत में मूल्यों को सबसे अच्छा सेट करें। अगर मैं सही हूं, तो ये यूवी मान शेडर प्रोग्राम में चर हैं और गणना में उपयोग किए जाते हैं?

मैं स्रोतों में gl_Position के कुछ संदर्भ देखता हूं। सुनिश्चित नहीं है कि यह सही है, लेकिन ऐसा एक है

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

धन्यवाद।

मैंने IOS सफारी पर webgl के साथ सभी प्रकार की तरकीबें आजमाईं, यह देखने के लिए कि क्या मुझे रेंडर करने के लिए एक फ्रेम मिल सकता है और यह अभी के लिए काला है। Mp4 ठीक है।

इसके बारे में ज्यादा संसाधन नहीं हैं। मुझे विश्वास है कि मेरी खोज लोग भी ढूंढ रहे हैं। यह लाइव स्ट्रीमिंग बीटीडब्ल्यू के लिए है लेकिन वीओडी भी।

मैंने किसी ने कुछ चीजों का परीक्षण किया था। उनका मानना ​​है कि FLIPY फिक्स के साथ यह कच्चा webgl उदाहरण IOS 10 पर काम करता है लेकिन three.js संस्करण वास्तव में उन पर क्रैश नहीं हो रहा है।

मैंने देखा कि यह निकटतम फ़िल्टर का उपयोग करता है जो बनावट को अवरुद्ध बनाता है, मैंने इसे दोहराने की कोशिश की लेकिन उनके लिए एक ही समस्या है।

तो इनमें से कोई भी काम नहीं

http://dev.electroteque.org/threejs/hls.html
http://dev.electroteque.org/threejs/hls2.html

लेकिन यह उनके लिए है हालांकि मेरे लिए आईओएस 9 नहीं है

http://dev.electroteque.org/threejs/webglworking.html

कुछ बहुत भारी और दर्दनाक परीक्षण के बाद मैंने डेमो और मुद्दे को ट्यून किया है।

OSX 10.11 और macOS, IOS 9 और 10 दोनों में HLS के लिए FlipY वर्कअराउंड आवश्यक है। कच्चा webgl उदाहरण FlipY का उपयोग नहीं करता है क्योंकि यह शेडर प्रोग्राम में कर रहा है। तीन.जेएस के साथ ज्यामिति को इधर-उधर करना पड़ता है।

IOS 10 पर HLS रेंडरिंग प्रदर्शित हो रही है, लेकिन इसमें गंभीर रंग विरूपण साक्ष्य हैं। फ्रेम काम करना बंद कर देते हैं लेकिन मुझे विश्वास है कि यह एमुलेटर और फ्रेम छोड़ने के साथ एक मुद्दा है। मेरे पास अब ऐसा कोई उपकरण नहीं है जिसे IOS 10 में अपडेट किया जा सके। यह IOS 9 पर बिल्कुल भी दिखाई नहीं देता है। दोनों को mp4 और HLS के लिए CORS प्रॉक्सी की आवश्यकता होती है।

एक बार जब मैं पुष्टि कर दूं कि यह एम्यूलेटर नहीं है, तो मुझे आईओएस 10 पर एचएलएस के साथ रंग प्रतिपादन समस्या के संबंध में एक और टिकट प्रदान करना पड़ सकता है।

यह बिल्कुल दर्दनाक है कोई आश्चर्य नहीं कि कोई भी सफारी का समर्थन नहीं करना चाहता है लेकिन लोगों को इसे काम करने की ज़रूरत है।

मुझे यहां अलग-अलग आरजीबी प्रारूप सेटिंग्स प्रदान करनी पड़ी है। डिफ़ॉल्ट वर्टिकल कोऑरबार उत्पन्न करता है, आरजीबीए एक रंग गलत है। लेकिन एमुलेटर में। मैं अब आईओएस 10 का ठीक से परीक्षण करने में असमर्थ हूं क्योंकि मेरा आईपैड डिवाइस असमर्थित हो गया है। मैं पुष्टि करने के लिए आईओएस 10 के साथ आईफोन पकड़ने की कोशिश करूंगा।

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/threejsrgba-hls.html

http://dev.electroteque.org/webgl/webgl.html
http://dev.electroteque.org/webgl/webglrgba.html

कृपया इन दो उदाहरणों पर ध्यान दें। आरजीबी झंडे वास्तविक डिवाइस पर कोई फर्क नहीं पड़ता, सिम्युलेटर दोषपूर्ण आउटपुट उत्पन्न करता है लेकिन आरजीबीए प्रारूप का उपयोग करते समय समान आउटपुट उत्पन्न करता है।

HLS के साथ IOS 9/10/ OSX Safari के लिए FlipY वर्कअराउंड आवश्यक है।

मैं एचएलएस वेबजीएल प्रतिपादन के साथ एक रंग समस्या को दोहराने में सक्षम हूं जिसे अब दूसरे टिकट की आवश्यकता है, हालांकि मुझे यकीन नहीं है कि वेबकिट फ्लेकी बग तीन.जेएस मुद्दा है या नहीं।

इतनी बड़ी खामियां और बग्स के कारण यह शो स्टॉपर बन गया है।

तो ऐसे HLS webgl आउटपुट केवल आंशिक रूप से IOS 10 पर काम कर रहे हैं, IOS 9 पर नहीं। कई डिवाइस अभी 9 पर अटके हुए हैं। मुझे 9 के लिए एक कामकाज खोजने की जरूरत है।

http://dev.electroteque.org/webgl/threejs-hls.html
http://dev.electroteque.org/webgl/webgl.html

नमस्ते! मेरी भी यही समस्या है। क्या आपके पास अब कोई उपाय है?

हाँ यह उन डेमो में है, लेकिन IOS 10 के साथ एक कलरस्पेस समस्या के बारे में दूसरे टिकट की जाँच करें। ऐसा लगता है कि इसे IOS 9 पर काम करने के लिए Webkit/Apple की ओर से कोई प्रयास नहीं किया जाएगा, जिसका अर्थ है कि Ipad 3 जैसे पुराने डिवाइस छोड़ दिए गए हैं, हालांकि यह वैसे भी मुश्किल से 5fps रेंडर कर सकता था। IOS 10 को काम करने के लिए पहले ध्यान केंद्रित करना होगा।

यह इस समस्या का समाधान है, हालांकि इसकी सूचना वेबकिट को दी गई है। यह सभी सफारी पर एक समस्या है।

ऐसा लगता है कि http://dev.electroteque.org/webgl/webgl.html काम नहीं कर रहा है। मैंने ios10 पर पेज का परीक्षण किया। लेकिन पेज लोड होने पर सफारी क्रैश हो जाती है।

तीनjs उदाहरण का प्रयोग करें।

मैंने इस मुद्दे पर सूचीबद्ध सभी उदाहरणों का परीक्षण किया। ऐसा लगता है कि केवल http://dev.electroteque.org/webgl/webglrgba.html ही काम करता है। लेकिन इसमें कलरस्पेस की समस्या है।

@wuyingfengsui यह आईओएस 10

http://dev.electroteque.org/webgl/threejs-hls.html

आप शायद एक सिम्युलेटर पर जाँच कर रहे हैं जो मैं शर्त लगाता हूँ। यह एक बड़ी समस्या है। इतना ही नहीं यह हरे रंग की पट्टियों को प्रदर्शित करने वाले फ्रेम को अपडेट नहीं करेगा। आरजीबीए ध्वज का उपयोग करते समय यह एक सिम्युलेटर पर काम करेगा हालांकि। वहाँ एक अजीब ग्राफिक्स मुद्दा चल रहा है।

वास्तविक IDevice पर आपको RGB ध्वज का उपयोग करते समय रंगस्थान की समस्या दिखाई देगी जैसे आप सिम्युलेटर में RGBA ध्वज के साथ करते हैं!

मुझे अभी के लिए IOS 10 का परीक्षण ठीक से करने के लिए धकेल दिया गया है क्योंकि Ipad 3 को अप्रचलित कर दिया गया है, लेकिन शुक्र है कि मेरे पास एक Iphone तक पहुंच थी।

इस पर CORS प्रॉक्सी url पर भी ध्यान दें।

कलरस्पेस समस्या के संबंध में इसे अभी देखें

https://github.com/mrdoob/three.js/issues/10067

और यह वेबकिट टिकट जिस पर मुझे संदेह है कि वे इसे ठीक करने और रिलीज को आगे बढ़ाने के लिए कभी परेशान होंगे।

https://bugs.webkit.org/show_bug.cgi?id=164540

जब मैं आईओएस 10 आईफोन 7 पर आरजीबी को आरजीबीए में बदलता हूं तो मुझे यह काम लगता है।

ठीक है तो यह विभिन्न उपकरणों के लिए अलग है एक अच्छा। मैंने इसे आरजीबीए में अपडेट कर दिया है। यह कैसा हैं ?

http://dev.electroteque.org/webgl/threejs-hls.html

@danrossi यह काम करता है।

@wuyingfengsui मुझे इसके संबंध में वेबकिट टिकट अपडेट करना होगा। मैं देख रहा हूं कि गड़बड़ करने के लिए अन्य रंग के झंडे हैं और उम्मीद है कि एक सही है। मैंने विभिन्न एचएलएस धाराओं की कोशिश की और वे वही थे।

आप तीन.जेएस स्थिरांक में देख सकते हैं कि खेलने के लिए मूल्यों की एक श्रृंखला है। यानी ये। बाइट प्रकार के झंडे भी हैं जिन्हें संभाला जाता है। परीक्षण और त्रुटि और बहुत थका देने वाला परीक्षण और त्रुटि।

https://github.com/mrdoob/three.js/blob/dev/src/constants.js#L126

तो दुख की बात है कि IOS 9 को पूरी तरह से बेमानी बना दिया गया है, इससे यह काम नहीं करेगा। पुराने उपकरणों को कभी भी IOS 10 नहीं मिलेगा।

मेरा मानना ​​​​है कि किसी तरह की तोड़फोड़ हो रही है और मेरा मानना ​​​​है कि यह सफारी 10 की रिलीज से पहले काम कर रहा था? ऐप्पल और कभी-कभी एंड्रॉइड के साथ सभी विसंगतियों के कारण मेरे परीक्षण चरण में महीनों लग गए। मुझे पूरा यकीन है कि जब मैंने एचएलएस का परीक्षण किया तो यह काम कर रहा था।

मैं वेबजीएल से परिचित नहीं हूं। मुझे लगता है कि इसे तब तक हल नहीं किया जा सकता जब तक कि वेबकिट इसे ठीक न करे।

यह वही है जो बनावट को webgl पर अपलोड करता है। वहां वे झंडे रुचि के हैं।

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

@wuyingfengsui अगर

इसलिए किसी को वहां बैठकर काम करना पड़ता है और दुख की बात है कि मैं हाहा हूं।

यदि आप कच्चे वेबलॉग उदाहरण लेते हैं, तो उन झंडों के साथ खिलवाड़ किया जा सकता है। या इसे तीन.जेएस के माध्यम से स्थिरांक का उपयोग करके करें और गुण "प्रारूप" और "प्रकार" प्रकार बाइट प्रकार है, प्रारूप रंग प्रारूप है जिसे आपने देखा है आरजीबीए को मुश्किल से इसे कार्य करने के लिए आवश्यक है।

मैं कल कुछ समय प्रत्येक झंडे को देखने के लिए बिताऊंगा और उम्मीद है कि एक संयोजन काम करेगा।

@danrossi यह कैसा चल रहा है?

मैंने बस हर संभव झंडे के साथ खिलवाड़ करने की कोशिश की और कुछ भी नहीं। यह केवल RGB और RGBA झंडे ले सकता है और बाइट प्रकार अहस्ताक्षरित है। अन्य विकल्पों ने सिर्फ एक काला कैनवास दिखाया। नहीं जानते कि इसके अलावा क्या किया जाए ?

@danrossi आपके काम के लिए धन्यवाद। मुझे लगता है कि Hls.js, MSE के साथ hls वीडियो चला रहा है। लेकिन सफारी मोबाइल एमएसई को सपोर्ट नहीं करता है।

@wuyingfengsui यह अब IOS के साथ एक मूल HLS समस्या है, ऊपर दिए गए मेरे सुधार सफारी OSX के लिए बग के आसपास काम करते हैं।

डैश स्ट्रीमिंग के साथ, पुराने सफ़ारी में CORS समस्याएँ थीं, यहाँ तक कि प्रॉक्सी के काम के साथ भी। हो सकता है कि macOS में उन्होंने वह भी तय कर लिया हो?

उपरोक्त कोड फिक्स का उपयोग करके तीन.जेएस में वर्कअराउंड विधि प्रदान करने के अलावा संभवतः कुछ भी नहीं किया जा सकता है।

मुझे संदेह है कि वेबकिट और ऐप्पल इसे कभी भी ठीक कर देंगे। तो अब सबकी निगाहें इस टिकट पर हैं। आरजीबी ध्वज सामग्री अब आईओएस 10 प्रतिपादन से संबंधित है। IOS 9 और उस पर फंसे पुराने डिवाइस भर गए हैं।

https://github.com/mrdoob/three.js/issues/10067

यहां कोई अपडेट? क्या किसी को यह आईओएस पर निश्चित रंग प्रतिपादन के साथ काम कर रहा है?

कृपया इस टिकट को देखें।

https://github.com/mrdoob/three.js/issues/10067

मुझे संदेह है कि एचएलएस का कामकाज तीन में चला जाएगा। जेएस को इसके बाहर जाना होगा।

उस कार्य के लिए कोड इस प्रकार है

texture = new THREE.VideoTexture( video );
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBAFormat;
texture.magFilter = THREE.LinearFilter;
texture.generateMipmaps = false;
texture.flipY = false;

var geometry = new THREE.SphereBufferGeometry( 500, 64, 44 );
geometry.scale( - 1, 1, 1 );

var uv = geometry.getAttribute('uv');
for (var i = 0; i < uv.count; i++) {
     uv.setY (i, 1 - uv.getY (i));
}

यदि आप वेबलॉग फ़्लैग के साथ खिलवाड़ करना चाहते हैं, तो कच्चे वेबलॉग उदाहरण का उपयोग करें। मैंने सभी संभावित विकल्पों की कोशिश की और अभी कुछ भी नहीं है। यह अच्छी तरह से और सही मायने में तोड़फोड़ है और वेबकिट से कोई प्रतिक्रिया नहीं है।

http://dev.electroteque.org/webgl/webgl.html

धन्यवाद। क्या एचएलएस के अलावा आईओएस वीडियो फ्लैग को स्ट्रीम करने के लिए कोई अन्य वीडियो प्रारूप है? क्या यह संभव है कि एच.264 को बिना रेंडरिंग समस्याओं के स्ट्रीम किया जाए?

@pedrofranceschi mp4 ठीक है। यह सिर्फ एचएलएस है जो आईओएस पर लाइव स्ट्रीमिंग 360 वीडियो के लिए विकल्प प्रदान करता है।

इस टिकट से संबंधित फ्लिपवाई फिक्स को केवल एचएलएस स्ट्रीम और सफारी पर लागू करने की आवश्यकता है। यह FlipY फिक्स IOS 9 पर काम नहीं करता है जो पुराने डिवाइस को बंद कर देता है जिन्हें IOS 10 नहीं मिल सकता है।

मेरा आईपैड 3 मैं परीक्षण के लिए उपयोग कर रहा हूं कभी भी एचएलएस और वेबजीएल काम नहीं करेगा। मुझे एक नए Iphone पर परीक्षण करना था। IOS 10 सिम्युलेटर ने मुश्किल से काम किया और अन्य समस्या के समान रंग आर्टिफैक्ट मुद्दे थे।

आईओएस 10 पर आईफोन के लिए कम से कम इनलाइन झंडे काम करते हैं, इनलाइन वीडियो और वेबलॉग अब संभव है लेकिन सीओआरएस अभी भी एक समस्या है। सीओआरएस केवल मैकओएस पर सफारी में तय किया गया है।

मैं सफारी की बात केवल इसलिए करता हूं क्योंकि यह एक और क्लासिक वेबकिट बग है और अन्य ब्राउज़रों पर एचएलएस.जेएस स्ट्रीमिंग ठीक है।

मैंने पाया कि इसे एक अतिरिक्त कैनवास जोड़कर ठीक किया जा सकता है। लेकिन यह केवल iOS 10 पर काम करता है। इस कमिट को देखें: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

वह एक गैर घटना थी। यह DrawImage के साथ कैनवास प्रतिपादन का उपयोग कर रहा है। वेबजीएल नहीं। तो तीन.जेएस कैनवास रेंडरर का उपयोग करना पसंद है। कैनवास रेंडरर वास्तव में आईओएस पर बेकार है, गिराए गए फ्रेम का कारण बनता है, प्रयोग योग्य नहीं। क्या यह आपका फिक्स है?

गुणवत्ता बहुत अच्छी नहीं है। लेकिन यह काम करता है :)

फ्रेम गिराना एक गुणवत्ता के मुद्दे से अधिक है :)

@mrdoob मैंने कैनवास रेंडरर को एक काम के रूप में आजमाया है लेकिन यह मेरे लिए करता है। मुझे यकीन नहीं है कि इसकी समस्या क्या है, यह एक जाल प्रदर्शित कर रहा है। घुमाना भी ठीक नहीं है। एक mp4 फ़ाइल लोड कर रहा है यह ठीक से प्रदर्शित करता है लेकिन फिर भी जाल रेखाएं।

यह अभी भी ऐसा करने वाले फ्रेम को गिराता है।

http://dev.electroteque.org/webgl/canvas-hls.html

@danrossi

@mrdoob यह मुद्दा सफारी पर एचएलएस के बारे में है। इन सभी डेमो को करना वाकई मुश्किल है। लेकिन मैंने कुछ संयोजन किए हैं।

मैंने अभी भी काम किया है जब तक कि एमपी 4 आह के सफारी सीओआरएस प्रॉक्सी संस्करण का उपयोग नहीं कर रहा है, तब तक क्रोम एमपी 4 को वापस चलाने से इंकार कर देता है।

जहां तक ​​विचित्र कैनवास रेंडरर मुद्दा जाता है जो आईओएस 10 के लिए अस्थायी रूप से एचएलएस समस्या को ठीक कर सकता है। यहां संयोजन है तो दिखाएं कि यह क्या कर रहा है और कुछ अजीब रोटेशन वैल्यू ऑफ़सेट संभव है। कोड सभी समान है। बनावट के ऊपर एक जालीदार जाली है।

सफारी के लिए

http://dev.electroteque.org/webgl/webgl-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

क्रोम के लिए

http://dev.electroteque.org/webgl/webgl-webm.html
http://dev.electroteque.org/webgl/canvas-webm.html

@danrossi सफारी संस्करण भी आईओएस 10 पर काम नहीं करता है ...

यह आईओएस 10 पर काम करना चाहिए लेकिन आपको रंगीन कलाकृतियों को देखना चाहिए।

http://dev.electroteque.org/webgl/threejs-hls.html

आईओएस मुद्दे के आसपास कोशिश करने और काम करने के लिए वे अन्य कैनवास रेंडरर परीक्षण हैं, इसे कम से कम डेस्कटॉप ब्राउज़र पर काम करना चाहिए और नहीं।

यह किसी भी आईओएस पर काम करना चाहिए लेकिन मैं इसके बारे में ज्यादा चिंतित नहीं हूं।

http://dev.electroteque.org/webgl/webgl-mp4.html

मुझे विश्वास नहीं है कि कैनवासरेंडर समाधान आईओएस के लिए एक अच्छा काम होगा लेकिन यह एक विकल्प है। क्योंकि न केवल इसे अभी भी CORS प्रॉक्सी की आवश्यकता है, कैनवास ड्राइंग केवल गिराए गए फ़्रेम का कारण बनने वाला है। Safari OSX, तीनjs-hls.html में FlipY वर्कअराउंड का उपयोग कर सकता है

मैंने कैनवास डेमो को अपडेट कर दिया है, ऐसा नहीं लगता कि इसे बाहरी रूप से चित्रित करने की आवश्यकता है।

हालाँकि, गोले की ज्यामिति के साथ एक अजीब समस्या है जिसका मैं पता नहीं लगा सकता इसलिए चित्र सही ढंग से प्रस्तुत या घूमता नहीं है, यह सब एक बिंदु में तिरछा है।

ऊपरी बाएँ क्षेत्र पर क्लिक करें, और orbitcontrols के साथ खींचने का प्रयास करें।

मेष समस्या यह है कि मुझे मेष को दिखाने से रोकने के लिए MeshBasicMaterial में "ओवरड्रा: 0.5" जोड़ने की आवश्यकता है।

कैनवास रेंडरर का उपयोग करते समय सफारी पर सीओआरएस प्रॉक्सी की आवश्यकता नहीं होती है। मैं यह देखने के लिए सॉफ़्टवेयर रेंडरर को देखने का प्रयास करूंगा कि क्या यह बेहतर काम करेगा क्योंकि कैनवास रेंडरर बहुत सारे फ्रेम छोड़ देता है।

http://dev.electroteque.org/webgl/canvas-mp4.html
http://dev.electroteque.org/webgl/canvas-hls.html

कैनवास रेंडरर को ध्यान में रखते हुए स्पष्ट ड्रॉपिंग फ्रेम के कारण मूल्यह्रास के रूप में चिह्नित किया गया है। मुझे लगता है कि सॉफ़्टवेयर रेंडरर के साथ वीडियो बनावट का प्रयास करने का एकमात्र अंतिम उपाय है। ऐसा लगता है कि यह परिवर्तन अभी तक काम नहीं कर रहा है और एक उदाहरण सेटअप नहीं मिल रहा है। यह सिर्फ एक काला कैनवास है।

रंग गड़बड़ी के लिए कोई कामकाज? सब कुछ नीला-ईश है

@andreabadesso मेरे पास दो टिकट सेटअप हैं शायद मुझे उन्हें मर्ज करना चाहिए।

OSX के लिए, FlipY को इधर-उधर करने से वह गंदी समस्या ठीक हो जाएगी। IOS 10 के लिए, पूरी तरह से कुछ और चाहिए।

कैनवास ड्राइंग एक बड़ी विफलता है, यह बॉक्स से बाहर भी ठीक से प्रस्तुत नहीं कर रहा है, ऐसा लगता है कि जेमोट्री विकृत है। यह फ्रेम भी गिराता है।

मैं अब "सॉफ्टवेयर रेंडरर" के साथ अपनी किस्मत आजमा रहा हूं जो अभी भी कैनवास ड्राइंग पर निर्भर है। मुझे बस एक काला कैनवास मिलता है इसलिए कुछ भी नहीं। इसके साथ काम करने वाले वीडियो बनावट कैसे प्राप्त करें, शून्य दस्तावेज है।

बस कोई अन्य विकल्प नहीं है, वेबकिट प्रतिक्रिया नहीं देगा और मैंने सभी संभावित वेबलॉग झंडे का प्रयास किया है। मैं वापस जा सकता था और कोशिश कर सकता था और एन्कोडिंग के साथ गड़बड़ कर सकता था लेकिन एचएलएस काम कर रहे mp4 फ़ाइल से पैक किया गया है।

इस बीच, अगर किसी को एक हताश समाधान की आवश्यकता है, तो यह .ts फ़ाइलों के लिए देखेगा, उन्हें .mp4 में परिवर्तित करेगा और एक वेबसोकेट उत्सर्जित करेगा ताकि क्लाइंट mp4 में अगला टुकड़ा डाउनलोड कर सके (जो ios10 पर काम कर रहा है):

https://github.com/Lab21k/node-hls-mp4-ws/

अगर कोई दिलचस्पी लेता है तो मैं पूरा समाधान प्रदान कर सकता हूं।

@andreabadesso क्या आपने अपने समाधान के बारे में क्लाइंट कार्यान्वयन किया है?

यह तो बेहद बेहूदा है। न केवल आपको अभी भी एक सीओआरएस प्रॉक्सी की आवश्यकता है, यह रीयलटाइम में एफएफएमपीईजी से गुजरने का प्रयास कर रहा है: ओ क्या आईओएस भी websockets करता है? मुझे पता है कि यह webrtc नहीं कर सकता।

सॉफ़्टवेयर रेंडरर विकल्प के माध्यम से अभी भी कैनवास ड्राइंग के माध्यम से वीडियो बनावट प्राप्त करने का प्रयास करना भी खराब है। यह सिर्फ एक काला फ्रेम है। दोनों विकल्प एक मृत अंत रहे हैं मैं उम्मीद कर रहा था कि कम से कम SoftwareRenderer एक वीडियो बनावट के साथ काम करता है केवल एक छवि बनावट प्रदर्शित करता है।

हे सब लोग, मैं पिछले एक दिन से रंग के मुद्दे पर काम कर रहा हूं और मुझे एक काम मिल गया है जो मेरे उपयोग-मामले के लिए काम करता है। यह सूत्र बहुत उपयोगी रहा है और मैं इसमें योगदान देना चाहता हूं।
मुद्दा सिर्फ इतना है कि लाल और नीले रंग की अदला-बदली हो जाती है। इसलिए मैंने उन रंगों को पूर्व-स्विच करने के लिए ffmpeg का उपयोग किया। जैसे ही तीनj पर रंग फिर से स्विच हो जाते हैं, वीडियो अपने सामान्य स्वरूप में वापस आ जाता है।
यह एक इष्टतम समाधान नहीं है लेकिन यह काम करता है। (आईओएस 10.2 पर परीक्षण किया गया)

@Yralec

मुझे लगा कि यह एक एन्कोडिंग समस्या थी या एन्कोडिंग के साथ मिल रही थी।

हालांकि यह वाह लाइव स्ट्रीमिंग के लिए कहने में मदद नहीं करेगा। लाइव एन्कोडर कैसे काम करते हैं, इस पर किसी का नियंत्रण नहीं होगा। शायद वीओडी के लिए।

क्या आपके पास इसकी पुष्टि करने के लिए ffmpeg ध्वज है?

अभी भी अद्भुत। ऐसा लगता है कि यह FlipY मुद्दे के अलावा तीन.js के साथ कोई समस्या नहीं है, जिसकी अभी भी आवश्यकता है।

मैं समझ नहीं पा रहा हूं कि वेबकिट ऐसा क्यों है।

@danrossi

यहां वह आदेश है जिसका मैंने उपयोग किया था:
ffmpeg -i in.mp4 -hls_time 10 -hls_list_size 0 -vf "colorchannelmixer=rr=0.0:rb=1.0:bb=0.0:br=1.0,vflip" -pix_fmt yuv420p out.m3u8
जैसा कि आप देख सकते हैं कि मैं आउटपुट भी फ़्लिप कर रहा हूं, इसलिए मुझे इसे तीनjs में स्वयं करने की आवश्यकता नहीं है।

ठीक है, मैं इसके बारे में पूछने जा रहा था।

क्या नीले और हरे रंग की अदला-बदली करने वाला एक शेडर लिखना आसान नहीं होगा?

@mrdoob मुझे शेडर्स के बारे में बहुत कम जानकारी है, इसलिए मेरे लिए यह नहीं था (मैंने इसके बारे में सोचा भी नहीं था), लेकिन अगर आप जानते हैं कि लाल और नीले रंग को स्वैप करने वाले को कैसे लिखना है तो यह लगभग निश्चित रूप से एक बेहतर समाधान है।
इसके अलावा लाइव स्ट्रीमिंग आखिरकार काम कर सकती है।

@mrdoob मुझे लगता है कि आप कुछ पर हैं। मुझे खेद है दोस्त फिर से यह एक और वेबकिट समस्या बन गई है। हालांकि FlipY फिक्स अभी भी टालने योग्य नहीं है।

मैंने कुछ शोध किया और ऐसा लगता है कि इस तरह एक चैनल ऑर्डर स्वैप है, मैं अब शेडर्स के साथ एक विशेषज्ञ हूं।

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob मेरे कच्चे

अभी तक कोई विचार नहीं है कि इससे कार्यशील समाधान कैसे प्राप्त किया जाए।

 gl.shaderSource(ps, "precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,txt).bgra;}");

केवल कॉपी और पेस्ट करने में एक प्रोग्राम त्रुटि थी।

उपरोक्त इस कोड का उपयोग करना। मैं पुष्टि कर सकता हूं कि जो प्रस्तुत किया जा रहा है वह आईओएस 10 में दिखाई दे रहा है, इसलिए इसे शेडर में स्वैप किए गए लाल और धुंधले रंगों को उम्मीद से उलटना चाहिए?

http://dev.electroteque.org/webgl/webglbgra.html

@Yralec शेडर पर कलर चैनल ऑर्डर को IOS10 में वापस उल्टा हो जाता है। सिम्युलेटर में मुझे इसके माध्यम से अजीब लाइनों के बिना प्रतिपादन प्राप्त करने के लिए रंग प्रारूप को आरजीबीए में बदलना पड़ा।

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, वीडियो);

@mrdoob बिल्ट इन शेडर प्रोग्राम पर इस बनावट रंग परिवर्तन को कैसे लागू करना संभव है?

gl_FragColor=texture2D(sm,txt).bgra;

@मरदूब। सुधार। यह वही हो सकता है जिसका लोग उपयोग कर रहे होंगे।

gl_FragColor = texture2D( tEquirect, sampleUV )

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

इसे बदलने के लिए इसे कैसे एक्सेस करें?

@danrossi आप JS . में कुछ इस तरह हैक कर सकते हैं

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );

मेरा मानना ​​​​है कि मुझे शेडर्स को तीन में कॉपी करने की आवश्यकता है। ShaderMaterial, लेकिन बनावट को लागू करने का कोई विचार नहीं है?

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV );\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";


                var uniforms =  {
                    tEquirect: { value: null },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

यह दूसरा तरीका अनम्य है क्योंकि इसे केवल IOS में HLS स्ट्रीम के लिए लागू किया जाना है।

वास्तव में यह सफारी में प्रस्तुत करता है लेकिन FlipY फिक्स टूट जाता है। यह उल्टा खेलता है। दिमाग चकरा जाता है। यह सब प्रयास Apple और Webkit haha ​​की वजह से है।

var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: - 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

@WestLangley पैच काम नहीं कर रहा है। मुझे रंग उल्टे दिख रहे होंगे लेकिन नहीं।

gl_FragColor=texture2D(sm,txt).bgra;

[बी] ल्यू और [आर] एड को स्वैप करने के लिए यह सही शेडर है: डिफ़ॉल्ट ऑर्डर आरजीबीए है, इसलिए बीजीआर उन्हें स्वैप करता है।

FlipY फिक्स ब्रेक

txt -> vec2 (txt.x, 1.0 - txt.y) उदाहरण के लिए

पता नहीं कैसे

http://jsfiddle.net/p2duvg51/14/

पैच काम नहीं कर रहा है। मुझे रंग उल्टे दिख रहे होंगे लेकिन नहीं।

हो सकता है कि आप पैच को बहुत देर से लगा रहे हों

@makc हाँ मेरे कच्चे

मेरा मानना ​​​​है कि अगर यूवी कोड पर फ्लिप किया जाता है जो मेरे तीनj उदाहरण में पोस्ट किया गया है तो यह फ्रेम में फ्रेम द्वारा फ़्लिप नहीं किया जाता है। मैंने सोचा था कि प्रक्रिया के लिए एक अनावश्यक गणना को हटा देगा।

कच्चे वेबजीएल उदाहरण में यह वर्टेक्स शेडर पर फ़्लिप किया गया है

attribute vec2 vx;varying vec2 tx;void main(){gl_Position=vec4(vx.x*2.0-1.0,1.0-vx.y*2.0,0,1);tx=vx;}

फिर टुकड़े टुकड़े में यह रंग चैनलों को बदल देता है।

precision mediump float;uniform sampler2D sm;varying vec2 tx;void main(){gl_FragColor=texture2D(sm,tx).bgra;}

इसे तीन.जेएस में दोहराने की कोशिश अब समस्या है।

क्षमा करें यह काम करता प्रतीत होता है लेकिन FlipY फिक्स काम नहीं करता है। मैं bgra जोड़ना भूल गया।

var equirect_frag = "uniform sampler2D tEquirect;\nuniform float tFlip;\nvarying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvec3 direction = normalize( vWorldPosition );\n\tvec2 sampleUV;\n\tsampleUV.y = saturate( tFlip * direction.y * -0.5 + 0.5 );\n\tsampleUV.x = atan( direction.z, direction.x ) * RECIPROCAL_PI2 + 0.5;\n\tgl_FragColor = texture2D( tEquirect, sampleUV ).bgra;\n}\n";

                var equirect_vert = "varying vec3 vWorldPosition;\n#include <common>\nvoid main() {\n\tvWorldPosition = transformDirection( position, modelMatrix );\n\t#include <begin_vertex>\n\t#include <project_vertex>\n}\n";




                var uniforms =  {
                    tEquirect: { value: texture },
                    tFlip: { value: 1 }
                };

                var material = new THREE.ShaderMaterial( {
                    uniforms: uniforms,
                    vertexShader: equirect_vert,
                    fragmentShader: equirect_frag
                });

अगर मैं डिफ़ॉल्ट tFlip मान को 1 में बदलता हूं तो यह सही तरीके से प्रदर्शित हो रहा है, इसलिए HLS के साथ FlipY समस्या के लिए एक और फिक्स विकल्प?

tFlip: { value: 1 }

वीडियो ने सिम्युलेटर में प्रतिपादन बंद करने का निर्णय लिया है, लेकिन कम से कम मुझे एक रंग परिवर्तन दिखाई दे रहा है। पैच उदास रूप से काम नहीं करता है, हालांकि इसे डिबग करना निश्चित रूप से शेडर कोड को बदल देता है।

ऐसा लगता है कि मैं उस मूल्य के साथ एक फ्लिप कर सकता हूं जो इसे नकारात्मक के बजाय सकारात्मक 1 देता है।

मैंने IOS10 तक पहुंच खो दी, एक बार जब उन्होंने पुराने उपकरणों को मेरे आईपैड 3 की तरह प्राप्त कर लिया। मुझे बाहरी ड्राइव पर बूट किए गए मैकओएस पर सिम्युलेटर लोड करना होगा क्योंकि मेरे पास सॉफ्टवेयर है जो केवल 10.10 में चलता है। इस सब तोड़फोड़ के साथ मजेदार समय।

मुझे नहीं पता कि यह फ्रेम को अपडेट कर रहा है और अभी तक ठीक से घूम रहा है।

उम्मीद है कि यह उदाहरण IOS 10 पर काम करता है। इसका सबसे अच्छा मैं अभी कर सकता हूं। सफारी में इसे उल्टे रंग दिखाना चाहिए।

http://dev.electroteque.org/webgl/threejs-hls.html

छायांकन सामग्री का उपयोग छवि स्केलिंग, ज्यामिति को पेंच करता है और कैमरा रोटेशन को इस तरह काम करने से रोकता है

camera.position.x = (Math.PI / 2);

कोशिश करनी होगी और इस पैच को काम में लाना होगा।

यह काम करने लगता था, हालांकि यह अभी भी कैमरे की स्थिति के साथ खिलवाड़ करता है। मुझे नहीं लगता कि यह एक व्यवहार्य विकल्प है। यह इस तरह से करने से और भी अधिक कीड़े पैदा करता है। MeshBasicMaterial का उपयोग करने के समान प्रस्तुत नहीं करता है।

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                THREE.ShaderLib[ 'equirect'].uniforms.tEquirect = { value: texture };
                THREE.ShaderLib[ 'equirect'].uniforms.tFlip = { value: 1 };

                var material2 = new THREE.ShaderMaterial( {
                    uniforms: THREE.ShaderLib[ 'equirect'].uniforms,
                    vertexShader: THREE.ShaderLib[ 'equirect'].vertexShader,
                    fragmentShader: THREE.ShaderLib[ 'equirect' ].fragmentShader
                });

अगर मैंने मूल सामग्री का उपयोग करने की कोशिश की तो यह काम नहीं करेगा। अर्थात

THREE.ShaderLib[ 'equirect' ].fragmentShader = THREE.ShaderLib[ 'equirect' ].fragmentShader.replace( "texture2D( tEquirect, sampleUV );", "texture2D( tEquirect, sampleUV ).bgra;" );
                var material  = new THREE.MeshBasicMaterial( { map : texture } );

बिल्ट-इन शेडर को हैक करने की कोशिश करने के बजाय, मैं सिर्फ एक कस्टम शेडर बनाऊंगा।

हेयर यू गो! मैं

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 75, WIDTH / HEIGHT );

var scene = new THREE.Scene();

// geometry

var geometry = new THREE.SphereGeometry( 1, 32, 16 );

// material

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

// material

var material = new THREE.ShaderMaterial( {
    uniforms: {
        texture: new THREE.Uniform( texture )
    },
    vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( 1.0 - uv.x, uv.y );", // fipY: 1.0 - uv.y
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
    ].join( "\n" ),
    fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        "   gl_FragColor = texture2D( texture, vUV ).bgra;",
        "}"
    ].join( "\n" ),
    side: THREE.BackSide
} );

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( WIDTH, HEIGHT );
document.body.appendChild( renderer.domElement );

function animate( time ) {
    requestAnimationFrame( animate );
    mesh.rotation.y = time * 0.0001;
    renderer.render( scene, camera );
}

animate();

https://jsfiddle.net/9jy92zxn/

केवल एक काली स्क्रीन प्रस्तुत नहीं करता है।

@danrossi यह मेरे लिए काम करता है।

var material = new THREE.ShaderMaterial({
      uniforms: {
        texture: { value: texture }
      },
      vertexShader: [
        "varying vec2 vUV;",
        "void main() {",
        "   vUV = vec2( uv.x, 1.0 - uv.y );",
        "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
        "}"
      ].join("\n"),
      fragmentShader: [
        "uniform sampler2D texture;",
        "varying vec2 vUV;",
        "void main() {",
        " gl_FragColor = texture2D( texture, vUV  ).bgra;",
        "}"
      ].join("\n")
    });

याद रखें रंग प्रकार और चर नाम अपडेट करें

यह यहाँ प्रस्तुत करता है... (Chrome 55, OSX)

यह मुद्दा एचएलएस स्ट्रीम और सफारी के साथ वीडियो बनावट के बारे में है विशेष रूप से आईओएस मुझे डर है:|

मैं नहीं देख सकता कि मेशबेसिक_फ्रैग कैसे काम करता है और इस पर बनावट कैसे लागू होती है। वही इसका उपयोग कर रहा है।

इक्विरेक्ट_फ्रैग प्रोग्राम जिसे मैं उपयोग या चयनित नहीं देख सकता।

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

यही सब मैं देखता हूं।

मुझे लगता है कि आपको meshbasic_frag और equirect_frag बारे में भूल जाना चाहिए। मेरे कोड को आधार के रूप में उपयोग करने का प्रयास करें और इसे बदलें:

var loader = new THREE.TextureLoader();
var texture = loader.load( 'https://threejs.org/examples/textures/2294472375_24a3b8ef46_o.jpg');

कुछ इस तरह के साथ:

var video = document.getElementById( 'video' );
var texture = new THREE.VideoTexture( video );

@mrdoob

बैकसाइड समस्या पैदा कर रहा था। यह शेडर कार्यक्रम निश्चित रूप से सामान्य की तुलना में बहुत साफ है। क्या अंतर है ?

कस्टम शेडर का उपयोग करके मैं मूल FlipY फिक्स खो देता हूं।

for (var i = 0; i < uv.count; i++) {
    uv.setY (i, 1 - uv.getY (i));
}

मुझे वर्टेक्स कोड को थोड़ा संशोधित करना पड़ा, x फ़्लिप किया गया, और y को इनवर्टिंग की आवश्यकता थी। मैं इसे एक सेकंड में रख दूँगा।

var uniforms = {
    texture: { value: texture }
};

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, 1.0 - uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV ).bgra;",
    "}"
].join( "\n" );

var material = new THREE.ShaderMaterial( {
    uniforms: uniforms,
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    //side: THREE.BackSide
});

यह शेडर कार्यक्रम निश्चित रूप से सामान्य की तुलना में बहुत साफ है। क्या अंतर है ?

जादू! मैं

@mrdoob धन्यवाद विजेता। शोर के लिए खेद है, लेकिन इसके लिए फिर से Apple को दोष दें।

तो समकोण वीडियो के लिए, क्या इसका उपयोग करने के लिए डेमो को अपडेट नहीं किया जाना चाहिए? तो MeshBasicMaterial द्वारा उपयोग किया जा रहा शेडर प्रोग्राम ऐसे वीडियो टेक्सचर के लिए अनावश्यक है? मैं ब्राउज़र और विभिन्न वीडियो प्रारूपों में इसका परीक्षण करूंगा।

क्या हम बंद करें?

यहाँ अद्यतन डेमो है

http://dev.electroteque.org/webgl/threejs-bgra.html

तो समकोण वीडियो के लिए, क्या इसका उपयोग करने के लिए डेमो को अपडेट नहीं किया जाना चाहिए? तो MeshBasicMaterial द्वारा उपयोग किया जा रहा शेडर प्रोग्राम ऐसे वीडियो टेक्सचर के लिए अनावश्यक है?

खैर, MeshBasicMaterial अधिक लचीला है और लोगों को शेडर लिखने की आवश्यकता नहीं है। यह सिर्फ इतना है कि, इस विशिष्ट मामले के लिए, इस मुद्दे के आसपास काम करने के लिए एक कस्टम शेडर लिखना आसान था।

क्या हम बंद करें?

हां!

यह आईओएस 10 पर ठीक काम कर रहा है। केवल फ्रेम सिम्युलेटर पर अपडेट नहीं हो रहे हैं। हार्डवेयर के लिए करना होगा इंतजार मैं दूसरा टिकट बंद कर दूंगा।

var vertexShader = [
    "varying vec2 vUV;",
    "void main() {",
    "   vUV = vec2( uv.x, uv.y );", // fipY: 1.0 - uv.y
    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
    "}"
].join( "\n" );

var fragmentShader = [
    "uniform sampler2D texture;",
    "varying vec2 vUV;",
    "void main() {",
    "   gl_FragColor = texture2D( texture, vUV );",
    "}"
].join( "\n" );

फ़्लिपी में थोड़े से समायोजन के साथ, वही प्रोग्राम वेब के साथ क्रोम पर काम कर रहा है।

@mrdoob मेरा मानना ​​​​है कि यह शेडर वीडियो बनावट वाले सभी ब्राउज़रों पर काम करता है। फ्लिप फिक्स, "1.0 - uv.y" केवल सफारी पर एचएलएस के लिए आवश्यक है। रंग चैनल उलटा केवल IOS10 के लिए HLS के साथ आवश्यक है।

सीओआरएस प्रॉक्सी समेत काम की बहुत ही पागल परतें।

मेरा मानना ​​​​है कि यह मेशबेसिकमटेरियल द्वारा आपूर्ति किए गए शेडर से बेहतर प्रदर्शन करता है। क्या यह वीडियो बनावट के लिए मानक होना चाहिए? रोटेशन वर्टेक्स कोड के साथ काम करता प्रतीत होता है।

नमस्ते
मैं तीन.जेएस के साथ एक 360vr प्लेयर बनाने की कोशिश कर रहा हूं जो एक एचएलएस लाइव स्ट्रीम दिखाता है (.m3u8 hls.js के साथ खेला जाता है)
यह वेबलॉग सक्षम के साथ सफारी ओएसएक्स पर काम करता है लेकिन आईपैड 10.2 पर मेरी सारी कोशिश एक काले कैनवास में खो जाती है (ध्वनि काम कर रही है)
अगर मैं vr360 मोड को अक्षम करता हूं, तो वीडियो स्ट्रीम सभी उपकरणों में ठीक काम करती है।
मैंने कुछ सुझाए गए तरीकों की कोशिश की लेकिन मेरे पास अभी भी काला कैनवास प्रतिपादन है।
किसी को पता है कि कैसे काम करना है?

FlipY और कलर चैनल इनवर्जन फिक्स इस थ्रेड में हैं।

मैंने जिन वेबकिट बग्स को ट्रैक किया, वे बासी हैं और इसके बारे में कुछ अहंकार का मुकाबला कर रहे हैं। यह अभी भी खुला है लेकिन कोई भी उन्हें देखने की जहमत नहीं उठाएगा।

सफारी के लिए आपको FlipY फिक्स की आवश्यकता है। तो इसे अभी भी तीन.जेएस बनावट पर अक्षम करें।

यहाँ औपचारिक es6 विधियाँ हैं जो मैंने अपने खिलाड़ी समाधान के लिए तैयार की हैं। इस बकवास को शिकार करने के बाद भी मुझे अभी भी बुरे सपने आ रहे हैं।

शैडरमटेरियल सॉल्यूशन लाने के लिए चैंपियन को धन्यवाद। मैं अब सभी ब्राउज़रों के लिए इसका उपयोग कर रहा हूं। यह उत्पन्न होने वाले एक से अधिक सरल शेडर है। यह सिर्फ वीडियो बनावट के लिए है।

 static getVertexShader(unflipY) {
        return [
            "varying vec2 vUV;",
            "void main() {",
            "   vUV = vec2( uv.x, " + (unflipY ? "1.0 - uv.y" : "uv.y") + ");", // fipY: 1.0 - uv.y
            "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
            "}"
        ].join( "\n" );
    }

    static getFragmentShader(invertColour) {
        return  [
            "uniform sampler2D texture;",
            "varying vec2 vUV;",
            "void main() {",
            "   gl_FragColor = texture2D( texture, vUV )" + (invertColour ? ".bgra" : "") + ";",
            "}"
        ].join( "\n" );
    }

    static createShaderMaterial(texture, unflipY, invertColour) {

        texture.flipY = !unflipY;

        if (invertColour) {
            texture.format = THREE.RGBAFormat;
        }

        return new THREE.ShaderMaterial( {
            uniforms: { texture: { value: texture } },
            vertexShader: WebVRUtils.getVertexShader(unflipY),
            fragmentShader: WebVRUtils.getFragmentShader(invertColour)
        });
    }

प्रयोग

 let invertColour = false;

        if (WebVRUtils.isSafari) {
            this.hasHLS = hasHls;
            invertColour = hasHls && WebVRUtils.isIpad;
        }

        this.material = WebVRUtils.createShaderMaterial(this.texture, this.hasHLS, invertColour);

ठीक है लाइन _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, बनावट.flipY) पर तीन.js पर टिप्पणी सफारी में वीडियो प्रदर्शित करती है (10.0.2, पिछले संस्करण में यह केवल विकास टूल में webgl को सक्षम करने के लिए आवश्यक था, यह विकल्प अभी उपलब्ध नहीं है) लेकिन मुझे अभी भी iPad और iPhone पर समस्या है (यह मेरा लक्ष्य है)
ShaderMaterial समाधान के बारे में, मुझे नहीं पता कि इसे अपने कोड में कैसे लागू किया जाए ...
आपके समर्थन के लिए धन्यवाद

मेरे परीक्षणों में FlipY अक्षम करना MacOs Safari 10 के लिए भी आवश्यक था।

हाँ मेरे लिए भी (पिछले 9.xx संस्करण को छोड़कर)
लेकिन मुझे मोबाइल उपकरणों पर प्लेयर का उपयोग करने की आवश्यकता है ताकि समाधान मेरा समाधान न हो :-(

आपको IOS पर FlipY फिक्स और कलर चैनल इनवर्जन दोनों की जरूरत है। और केवल IOS 10 के लिए। IOS 9 पर अच्छा नहीं है। जो कई पुराने उपकरणों को छोड़ देता है। क्योंकि ऐप्पल ने उन्हें मेरे आईपैड 3 की तरह मूल्यह्रास किया है। आईओएस 10 इनलाइन प्लेबैक का समर्थन करता है इसलिए वैसे भी बेहतर होगा।

मैं अब आईओएस में इसे ठीक करने पर एक नज़र डाल रहा हूं। लेकिन मैं टिप्पणियों से थोड़ा भ्रमित हूं।

एचएलएस वीडियो के लिए:

• आईओएस गलत क्रम में रंग चैनल प्रदान कर रहा है (आरजीबीए के बजाय बीजीआर)। हालांकि मान अन्यथा सही हैं।
• macOS एक ऐसी बनावट तैयार कर रहा है जिसके लिए X अक्ष में फ़्लिप करने की आवश्यकता होती है। इसे setPixelStorei(UNPACK_FLIP_Y_WEBGL, true) का उपयोग करके हल किया जा सकता है।
• आईओएस एक बनावट तैयार कर रहा है जिसके लिए एक्स अक्ष में फ़्लिपिंग की आवश्यकता है, लेकिन उपरोक्त वर्कअराउंड काम नहीं करता है।

क्या यह सही है?

जवाब ऊपर इस टिकट में है।

बस आप लोगों के लिए एक हेडअप के रूप में, जाहिरा तौर पर नवीनतम iOS 10.3.3 अपडेट ने bgr समस्या को ठीक कर दिया , जो वर्कअराउंड बना देगा ... दूसरे तरीके से काम करेगा। मैं three.js का उपयोग नहीं कर रहा हूं, इसलिए किसी भी प्रश्न/ट्राइजिंग के लिए अपने स्वयं के परीक्षण या SO प्रश्न का संदर्भ लें।

आशा के अनुसार। सुंदर मानक। चेतावनी देने के लिए आपका धन्यवाद।

उन्हें सही काम करना चाहिए और मेरे द्वारा बनाए गए टिकट को खुला और बासी छोड़ देना चाहिए। यदि कोई फिक्स है तो सभी डेवलपर्स को अपडेट करने के लिए। उन्होंने नहीं किया है। तो अब छोटे संस्करणों की जांच करनी है?

IOS 11 में CORS फिक्स होना चाहिए था लेकिन यह अभी तक नहीं हुआ है।

मैं xcode 9 बीटा प्राप्त करने में सफल रहा। यह 10.3.3 सिम्युलेटर के साथ केवल 10.3.1 और 11 के साथ नहीं आता है। मैंने 11 में परीक्षण किया और उलटा आरजीबीए अभी भी आवश्यक है ऐसा लगता है। मुझे हरे रंग का डिस्प्ले दिखाई देना चाहिए अन्यथा या बिल्कुल भी नहीं। मुझे सुधार को अक्षम करके और परीक्षण चलाने होंगे।

IOS11 सिम्युलेटर एक बकवास है। कोई 10.3.3 आईओएस सिम्युलेटर नहीं है। IOS11 में स्पष्ट रूप से CORS फिक्स है।

अब जब आईओएस 11 जनता के लिए बाहर हो गया है तो मैं कुछ परीक्षण चला रहा हूं और मैं आईफोन आईओएस 11 (अभी तक आईपैड की कोशिश नहीं की) के लिए इस धागे में फिक्स का उपयोग करने में सक्षम नहीं हूं।

मैं इसे एचएलएस के साथ iPhone और iPad पर iOS 10.3.3 के लिए (CORS हैक, FlipY और रंग सुधार का उपयोग करके) काम कर सकता हूं।
IPhone iOS 11 पर मेरे पास HLS (CORS हैक, FlipY और कलर फिक्स का उपयोग करके) के साथ एक ब्लैक स्क्रीन है। मुझे लगता है कि ठीक करने के लिए कुछ और है, लेकिन अभी तक मैंने उस पर अपनी उंगली नहीं डाली है।

CORS मुद्दे के संबंध में ऐसा प्रतीत होता है कि कम से कम MP4 प्रगतिशील डाउनलोड के लिए iOS 11 में सुधार हुआ है, लेकिन मैं उपरोक्त के कारण HLS के लिए पुष्टि करने में सक्षम नहीं हूं।

अगर किसी की किस्मत अच्छी है तो कृपया अपडेट करें: /

मैं IOS11 प्राप्त करने में सक्षम होने के लिए एक नया iPad प्राप्त करने की पूरी कोशिश कर रहा हूं।

एम्यूलेटर में फिक्स नहीं है इसलिए विफलता थी।

मुझे पुष्टि करनी होगी कि मुझे वहां काउंटर हैक करना है या नहीं। या अगर आरजीबी रंग चैनलों को वापस चारों ओर स्विच किया जा सकता है।

एचएलएस के लिए ब्लैक रेंडरिंग एक अच्छी शुरुआत नहीं है और केवल उनकी सामान्य तोड़फोड़ है जो एक प्रतिगमन को वापस लाने में वर्षों लगेंगे। IOS9 पर यही होता है।

CORS को IOS11 में ठीक किया जाना चाहिए था और उसे प्रॉक्सी की आवश्यकता नहीं है

@danrossi मैं भी अब iOS 11 के साथ इस मुद्दे का सामना कर रहा हूं, अगर आप इस समस्या का समाधान लेकर आते हैं तो कृपया मुझे बताएं। iOS 10 अभी भी CORS फिक्स और Flip Y के साथ ठीक काम कर रहा है, लेकिन iOS 11 केवल ऑडियो चलाता है।

मुझे अभी भी IOS11 के साथ एक नया iPad प्राप्त करने की आवश्यकता है। एचएलएस आईओएस 11 बीटा सिम्युलेटर में काम कर रहा है? यह CORS से संबंधित हो सकता है। आरजीबी चैनल फ्लिप उल्टे रंग प्रदर्शित करेगा। तो काला CORS से संबंधित हो सकता है?

मैंने अपने CORS प्रॉक्सी के बिना और इसके साथ प्रयास किया है, और मुझे अभी भी वही समस्या है। मैंने इसके लिए फ्लिप वाई के बिना भी कोशिश की है, और यह कुछ भी नहीं बदलता है। केवल ध्वनि, कोई वीडियो नहीं: /

ios11 डिवाइस पर अभी भी वही समस्या है, केवल ध्वनि, कोई वीडियो नहीं。 किसी ने भी इस समस्या को हल किया है？

मैंने इसे 2डी कैनवास पर वीडियो बनाकर और वेबग्ल में बनावट के रूप में उस 2डी कैनवास का उपयोग करके काम किया।

मुझे ios11 पर 2D कैनवास बनावट सही ढंग से नहीं मिल सकती है， क्या आप कोड पोस्ट कर सकते हैं？

यह बहुत बुरा विचार है। कैनवास ड्राइंग प्रोसेसर गहन है।

Ive ने इस समस्या के संबंध में वेबकिट टिकट को अद्यतन किया है। उन्होंने इसे बिल्कुल भी संबोधित नहीं किया है। मैंने अपना काम पूर्ण शेडर और स्रोत कोड के साथ भी प्रदान किया। आप जो दावा करते हैं वह अब काम नहीं कर रहा है।

मुझे पता है कि किसी और को समस्या हो रही है। लेकिन मैं अभी तक इसका ठीक से परीक्षण नहीं कर सकता जब तक कि मुझे एक वास्तविक ब्रांड नया उपकरण न मिल जाए। सिम्युलेटर इसे सही ढंग से दिखा रहा है। नियोजित अप्रचलन के साथ मुलाकात की गई है जहां एक आईफोन 5 को भी आईओएस 11 नहीं मिल सकता है।

यहाँ फिर से टिकट है। https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU यहाँ मेरा नमूना कोड है: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (केवल ios पर खोलें)
@danrossi सही है, यह सबसे अच्छा समाधान नहीं है। यह मूल रूप से पॉइंटर को बाइंड करने के बजाय बाइट एरेज़ की मेमकॉपी कर रहा है। हालांकि, यह काम करता है जबकि सेब परियोजना को बनाए रखता है। मैं अभी भी इस दृष्टिकोण का मूल्यांकन कर रहा हूं और एक mp4 फ़ॉलबैक विधि भी जाने के लिए तैयार है।

मैंने पूरे दो महीने उस समाधान को खोजने में बिताए, जिसकी मदद से हर किसी की मदद से शेडर को ठीक किया गया, इसलिए धन्यवाद। इसका सीधा सा मतलब है कि हमारा अधिक समय उन्हें एक और काम खोजने के लिए मुकाबला करना है।

मुझे आशा है कि वहाँ एक है।

उन्होंने फ़्लिपी / एचएलएस / वेबग्ल मुद्दे को ठीक करने की कोशिश करने की जहमत नहीं उठाई, आप उस टिकट में देख सकते हैं जो मैंने बनाया था।

उन्होंने केवल CORS समस्या को ठीक किया। हालांकि मैं अभी तक अनिश्चित हूं कि क्या वे डैश को काम करने में कामयाब रहे।

सेब/वेबकिट मेरी तरफ का कांटा है। इसका मतलब यह हो सकता है कि मुझे जाना है और इसे स्वयं ठीक करने का प्रयास करना है और मैं सी ++ नहीं करता हूं। अगर मैं इसे ठीक कर दूं तो यह वास्तव में मज़ेदार होगा, लेकिन मैं अपने बालों को रखना पसंद करूँगी।

क्या कोई मेरे लिए अपना कोड पोस्ट कर सकता है, बस यह सुनिश्चित करने के लिए कि FlipY सक्षम/अक्षम है।

मेरी टिप्पणी यहाँ देखें। मैं इस तोड़फोड़ की गड़बड़ी से पूरी तरह से भरा हुआ हूं। बनावट पर फ्लिपवाई को अक्षम करने से एक तस्वीर दिखाई देनी चाहिए लेकिन उल्टा होना चाहिए। यह यहाँ एक काला फ्रेम है। शुरुआत से। उन्होंने एक प्रतिगमन का कारण बना दिया है जो IOS9 में एक समस्या थी।

https://bugs.webkit.org/show_bug.cgi?id=163866#c19

मैं मूल वेबकिट टिकट को बंद कर रहा हूं जिसे कभी देखा या संबोधित भी नहीं किया गया था। और जल्द ही एक नया शुरू करना क्योंकि सबूत इकट्ठा करने में समय लगेगा।

यह मूल FlipY समस्या से आगे निकल गया है। ऐसा लगता है कि वे कभी भी ओएस जारी करने से पहले वेबजीएल के साथ एचएलएस के काम की जांच करने की जहमत नहीं उठाते।

मैंने एक नया शुरू करने के लिए मूल वेबकिट टिकट बंद कर दिया है, विशेष रूप से वेबग्ल के साथ एचएलएस वीडियो बनावट पूरी तरह से टूटा हुआ है और अभी तक कोई संभावित काम नहीं है। मूल FlipY कार्य अब प्रासंगिक नहीं है।

मैंने पाया है कि सभी वेबकिट वेबजीएल अनुरूपता परीक्षण Mp4 का उपयोग करते हैं।

उन्होंने कभी भी Apple के अपने स्ट्रीमिंग प्रारूप के साथ परीक्षण करने की जहमत नहीं उठाई। इसलिए यह क्यों टूट गया है और अभी भी एक नए IOS 11 अपडेट के साथ टूटा हुआ है।

अधिक के लिए यहां देखें

https://bugs.webkit.org/show_bug.cgi?id=163866#c22

@danrossi क्या आपके पास वेबकिट के लिए नए खुले टिकट का लिंक है? मैं अभी आईओएस 11 पर इस मुद्दे पर ठोकर खाई हूं और किसी भी विकास का ट्रैक रखने के लिए उत्सुक हूं।

मैं उनके लिए उनके काम के लिए सेल्फ फंडिंग कर रहा हूं। मैं Khronos परीक्षण mp4 फ़ाइलों से उत्पन्न HLS के साथ अनुरूपता परीक्षण चला रहा हूँ। यह दावा करता है कि यह पास हो गया है लेकिन परीक्षण यह साबित करने में विफल रहता है कि यह कुछ भी प्रदर्शित कर रहा है या नहीं। कैनवास यहां भी प्रदर्शित नहीं होता है। असल में मुझे यह भी नहीं लगता कि आईओएस पर परीक्षण ठीक से काम करता है। कोई लॉग नहीं है।

मुझे यह साबित करने के लिए अपनी स्वयं की परीक्षण फ़ाइलों का उपयोग करना होगा कि एचएलएस बनावट काम नहीं करती है। मैंने अन्य परीक्षण फाइलें बनाई हैं और टिकट बनाने के लिए अपलोड करूंगा।

मुझे उम्मीद है कि कुछ वेबलॉग परम की आवश्यकता है या कोई अन्य जिसे पिछली बार की तरह अक्षम करने की आवश्यकता है।

ठीक है जहाँ तक मैं वेबकिट परीक्षण फ़ाइलों के साथ देखता हूँ। वे IOS परीक्षण के लिए डिज़ाइन नहीं किए गए हैं। कोई उपयोगकर्ता खेलने के लिए कार्यक्षमता पर क्लिक नहीं करता है। Mp4 किसी कारण से IOS 11 पर खोजे गए ऑटोप्ले को ऑटोप्ले कर सकता है, हालांकि कोई विशेषता निर्दिष्ट नहीं है लेकिन HLS अभी भी नहीं हो सकता है।

मुझे विश्वास नहीं है कि कोई भी परीक्षण विशेष रूप से आईओएस के लिए किया जाता है और निश्चित रूप से एचएलएस के लिए कोई परीक्षण नहीं किया जाता है।

इसलिए समस्याएं। यह बुरा से परे है।

टिकट जमा करने के लिए मुझे जो चाहिए वह मेरे पास है।

जहाँ तक मैं देख सकता हूँ। वेबजीएल वेबकिट परीक्षण त्रुटिपूर्ण हैं। वे वेबग्ल कैनवास आउटपुट की परवाह नहीं करते हैं। वे बहुत छोटे आकार में पूर्वावलोकन आउटपुट के रूप में वीडियो को कैनवास पर चित्रित कर रहे हैं।

उनके पास वेबलॉग कैनवास है लेकिन यह बहुत छोटा आकार है इसलिए आप यह भी नहीं देख पाएंगे कि इसका प्रतिपादन है या नहीं।

मुझे एचएलएस के लिए परीक्षणों को संशोधित करना पड़ा और वे पास नहीं हुए। और अब मैंने वेबग्ल कैनवास का आकार बढ़ा दिया है जो काला है।

उपयोगकर्ता को जोड़ने के लिए कोड को संशोधित करने के बाद परीक्षण वास्तव में आईओएस पर चलने लगते हैं।

जहां तक ​​मैं देख सकता हूं कि एचएलएस के लिए कभी कोई परीक्षण नहीं किया गया है और परीक्षण त्रुटिपूर्ण हैं। और इसलिए इसने सभी को पूरी तरह से तबाह कर दिया है।

हेयर यू गो। मैं वास्तव में Apple के साथ अपना धैर्य खो रहा हूं और उनकी समस्याओं को ठीक करने और उनके लिए परीक्षण चलाने के लिए कितने व्यक्तिगत काम की आवश्यकता है।

https://bugs.webkit.org/show_bug.cgi?id=179417

दो दिन और इसे देखने की कोई तात्कालिकता नहीं है। मुझे संदेह है कि इसे कभी संबोधित नहीं किया जाएगा। CORS को ठीक करने में वर्षों लग गए, और IOS के कई संस्करण और डिवाइस अपग्रेड?

मैं यह देखने के लिए वेबजीएल झंडे और शेडर कोड के साथ कोशिश करूंगा और खेलूंगा कि कुछ भी किया जा सकता है या नहीं।

क्या लोग कृपया वहां जा सकते हैं और कुछ शोर मचा सकते हैं। जैसा कि अभी तक देखा भी नहीं गया है। जैसे वे वास्तव में अपने ब्राउज़र में एचएलएस के परीक्षण की बिल्कुल भी परवाह नहीं करते हैं।

@jernoble क्या आप https://bugs.webkit.org/show_bug.cgi?id=179417। अग्रिम में धन्यवाद।

हाय @radiantmediaplayer। @grog और मैं दोनों इस मुद्दे पर पिंग करने के लिए सही लोग हैं। मैं खुद को उस वेबकिट बग में सीसी करूंगा और इसे ट्रैक करने वाला एक रडार तैयार करूंगा।

हे लोगों। मैं @sorob द्वारा वर्णित अस्थायी कैनवास का उपयोग करके आईओएस 11 के लिए नमूना हूं । आप इसे http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html में काम करते हुए देख सकते हैं। हालांकि मैं Three.js से परिचित नहीं हूं, इसलिए यह सिर्फ सादा जावास्क्रिप्ट है।

कैनवास रेंडरर। वह है सॉफ्टवेयर रेंडरिंग। उत्पादन के योग्य नहीं।

मैं इस पर @danrossi के साथ

@danrossi मैंने अभी देखा है कि यह मुद्दा बंद है। क्या आप इसे फिर से खोलेंगे?

एकदम नया मुद्दा यहाँ है। यह Three.JS से संबंधित नहीं है इसलिए मुझे लगता है कि एक संग्रह के लिए रखा गया है।

आवश्यक परीक्षणों का स्तर पागल था। IOS10 के आसपास काम करने की तरह मेरी पीठ तोड़ दी। वहाँ एक नज़र डालें।

इसके आसपास अब तक कुछ भी काम नहीं करता है। कोई अंत में देख रहा है और हमारे नियंत्रण में नहीं है। एचएलएस देखने वाली बनावट के संदर्भ के साझा संदर्भ के साथ कुछ करना Mp4 से अलग है जो इसे ठीक कर सकता है। जहां तक ​​मैं इकट्ठा होता हूं लेकिन उन्हें वास्तव में इसे करने के लिए समय देना पड़ता है। मेरे पास इस तरह के निर्माण वातावरण को स्थापित करने का कोई साधन नहीं है जैसा कि मैं विंडोज़ पर हूं।

लेकिन वेबकिट कोड को देखकर मुझे लगता है कि आईओएस 10 में एचएलएस के साथ अजीब रंग के मुद्दे क्यों थे। यह कलरस्पेस कोड का उपयोग नहीं करता है। इसलिए आईओएस 10/सफारी के लिए दोनों मुद्दों के आसपास काम करने के लिए कोड।

https://bugs.webkit.org/show_bug.cgi?id=179417

नमस्ते। ऐसा लगता है कि मुझे खुद को वापस रोल करना है और IE11 वीडियो बनावट समर्थन के लिए कैनवास रेंडरर लागू करना है। यह वेबजीएल के साथ काम नहीं करता है। कोई इसके बारे में पूछ रहा था।

मुझे लगता है कि जिस दर को देखा जा रहा है, उसे ठीक होने में लगभग 2 साल लग सकते हैं।

IOS 11 को एचएलएस के लिए मेरे विचार से सॉफ्टवेयर रेंडरिंग से पीड़ित होना पड़ेगा। बिन में पूरी आईओएस चीज वीआर के लिए है। मैं इसे स्वयं लागू करने जा रहा हूं।

@redgetan , कोई विचार है कि तीन.जेएस के साथ कैसे कार्यान्वित किया जाए? मैंने CanvasRenderer का उपयोग करने की कोशिश की और मुझे बनावट के ऊपर एक जालीदार फ्रेम दिखाई देता है और एक गोलाकार को सही ढंग से प्रस्तुत नहीं करता है।

कैनवस थ्री डेमो केवल 2डी वीडियो को रेंडर करते हुए दिखाता है।

क्षमा करें, आप वेबग्ल रेंडर का उपयोग कर रहे हैं लेकिन बनावट छवि स्रोत के रूप में कैनवास का उपयोग कर रहे हैं। देखें कि क्या मैं इसे दोहरा सकता हूं। बनावट के रूप में कैनवास का उपयोग करते समय यह मेरे लिए सही ढंग से प्रस्तुत और घुमाता नहीं है।

ठीक है किसी कारण से मुझे ऐसा करना पड़ा।

वेबजीएल रेंडरर का सामान्य रूप से उपयोग करें। लेकिन कैनवास बनावट और वीडियो ड्राइंग के लिए मुझे आयाम निर्धारित करने पड़े

imageContext.drawImage( video, 0, 0, image.width, image.height );

यह अब सही ढंग से प्रतिपादन कर रहा है। IOS 11 पर परीक्षण चलाएगा।

@danrossi हमें बताएं कि यह iOS 11 पर कैसे चलता है। मुझे वास्तव में किसी बिंदु पर उस सड़क से नीचे जाने की आवश्यकता हो सकती है।

ठीक है कोई बात नहीं। अगर यह काम करने लगता है तो मैं जल्द ही एक एफपीएस आंकड़े ऑनलाइन देखने के साथ एक बुनियादी परीक्षण जोड़ूंगा। इसे अभी कुछ भी चाहिए हो सकता है।

क्या आईओएस पर प्रोसेसर के प्रदर्शन की जांच करने का कोई तरीका है?

मैंने कैनवास बनावट परीक्षण किया है। यह काम कर रहा है लेकिन एक बड़ा रिज़ॉल्यूशन वाला वीडियो इसे गिरा सकता है।

यह एचएलएस कम गुणवत्ता वाला है इसलिए 40 एफपीएस पर रख रहा है। एक बड़ा रिज़ॉल्यूशन mp4 लेकिन कम गुणवत्ता भी 30fps पर रही।

एक उत्पादन रिज़ॉल्यूशन फ़ाइल इसमें से 10fps प्राप्त कर सकती है। यह एक नए आईपैड के लिए है।

http://dev.electroteque.org/webgl/three-canvas.html

क्या इस समस्या का इस पृष्ठ पर अभी सामना कर रही समस्या से कुछ लेना-देना है: https://digitalejulegaver.firebaseapp.com/#catarina

इसे अपने सफारी ब्राउज़र में मैक, या मैकोज़ डिवाइस पर खोलें। एक आईपैड या आईफोन इस एक पेज को हैंडल नहीं कर सकता, भले ही वह क्रोम ब्राउजर या मोज़िला में ही क्यों न हो।

मुझे एक काला पृष्ठ मिलता है, लेकिन मैक पर सामान्य क्रोम में, यह काम करता है

@vongohren आपको मैकोज़ सफारी के साथ एचएलएस के लिए खोजे गए फ्लिपवाई काम का उपयोग करने की ज़रूरत है और इस टिकट में हमने जिस शेडर पर काम किया है।

हालाँकि मैं अभी अपने वेबकिट टिकट पर वापस आया हूँ और उन्होंने दावा किया कि उन्होंने 10.13 के लिए FlipY समस्या को ठीक कर दिया है। मेरा मानना ​​है कि यह हाई सिएरा है। मेरे लिए कोई मौका परीक्षण नहीं है क्योंकि मैं क्लाउड आधारित मैकोज़ का उपयोग कर रहा हूं।

इसके लिए 10.13 के लिए FlipY वर्कअराउंड की आवश्यकता नहीं होने के लिए अभी तक एक और प्लेटफ़ॉर्म संस्करण की जाँच की आवश्यकता है। इसलिए संस्करण 13 के नीचे की किसी भी चीज़ की आवश्यकता होगी। मेरे पास कई बगों के आसपास काम करने के लिए macOS और IOS के लिए लगभग 4 अलग-अलग प्लेटफ़ॉर्म और ब्राउज़र संस्करण की जाँच है। IOS 11 चेक सॉफ्टवेयर टेक्सचर रेंडरिंग को चालू करना है!

यदि आप 10.13 की जाँच कर सकते हैं तो यह मददगार हो सकता है।

यहां मेरे सभी टिकटों का विवरण दिया गया है।

https://bugs.webkit.org/show_bug.cgi?id=179417#c8
https://bugs.webkit.org/show_bug.cgi?id=176491

https://bugs.webkit.org/show_bug.cgi?id=180863#c3

@danrossi Iv को 10.13 मिला, लेकिन आपको एक डेमो मिला जिसका परीक्षण किया जा सकता है?

इन सुधारों के लिए मैं अभी जिस तीन.जेएस संस्करण का उपयोग कर रहा हूं, वह बिल्कुल नया है, इसलिए सुनिश्चित नहीं है कि उन्हें कहां लागू किया जाए।
मुझे data.flipY नाम की कोई चीज़ मिली, और उसे असत्य पर सेट कर दिया। लेकिन मेरे ऐप के लिए कुछ नहीं किया।

मैं इस पुस्तकालय के माध्यम से तीन.जेएस का उपयोग कर रहा हूँ: https://github.com/iberezansky/flip-book-jquery

कॉर्स समस्या?

क्या यह काम करता हैं ?

http://dev.electroteque.org/webgl/three-hls.html

या यह

http://dev.electroteque.org/webgl/three-hls-flipy.html

परीक्षण फाइलों की मेरी विशाल सूची उन टिकटों में है।

FlipY को बनावट पर अक्षम किया जा सकता है

texture.flipY = false;

सब कुछ स्थानीय रूप से है इसलिए न देखें कि cors को क्यों प्रभावित किया जाना चाहिए। लेकिन वे दो लिंक मैक 10.13 . पर सफारी और क्रोम दोनों पर सिर्फ काला दिखाते हैं

और फ्लिपवाई फीचर, तस्वीर को घुमाने के बजाय ज्यादा कुछ नहीं करता है। लेकिन यह अभी भी काला था

ऐसा लगता है कि 10.13 में IOS 11 जैसी ही समस्या है, जहां FlipY का काम टूट गया है। यह अच्छी जानकारी है। और रिपोर्ट करने के लिए एक और बग। यह इतना गन्दा है कि यह मुझे पागल कर रहा है। मैं इसे आईओएस टिकट में अपडेट करूंगा। 10.12 में FlipY बग के आसपास काम करने की आवश्यकता है और इसके लिए एक अलग टिकट बनाया गया है।

तो अब मेरे VR फीचर की तरह। आपको आईओएस 11 और 10.13 के लिए प्लेटफॉर्म वर्जन चेक करना होगा और एचएलएस के लिए एक सॉफ्टवेयर रेंडरिंग कैनवास टेक्सचर मोड प्रदान करना होगा।

यहाँ कुछ स्थिर बर्तन हैं जिनका उपयोग मैं फीचर जाँच के लिए कर रहा हूँ विशेष रूप से cors समर्थन या cors प्रॉक्सी स्रोतों का उपयोग करें। जाहिर है अब मुझे आईओएस 11 जैसे सॉफ्टवेयर रेंडरिंग को अस्थायी रूप से चालू करने के लिए 13 से अधिक संस्करण की जांच करनी होगी।

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

    static isNewIOS(userAgent) {
        const version = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1];
        _isLatestIOS = (+version >= 11);
        return _isLatestIOS;
    }

आपने इस पर बहुत अच्छा काम किया है, आशा है कि आप टिकटों का निपटारा कर लेंगे :D

यहाँ कैनवास बनावट काम करती है। Ive को इसे IOS 11 के लिए सक्रिय करना पड़ा। मुझे उस macOS 13 संस्करण की जाँच करने और उसके लिए भी इसे सक्षम करने की आवश्यकता हो सकती है। अगर आपको लगता है कि फ्लिपवाई काम 10.13 के लिए टूटा हुआ है? मुझे उन्हें वापस रिपोर्ट करना है।

दोस्त, आपको पता नहीं है, मुझे इससे कोई लाभ नहीं मिलता है, स्व-वित्त पोषित, ऐप्पल ओएस पर मुश्किल से काम करने वाले मेरे अपने फीचर सहित हर किसी का सॉफ्टवेयर बनाने के अलावा।

यहाँ अभी मेरा पूर्ण एकीकरण है, इसमें ऐप्पल फ़िक्सेस और वर्कअराउंड सहित कार्य हैं। अब मेरे पास क्यूबमैप वीडियो सपोर्ट है।

https://flowplayer.electroteque.org/vr360/fp6

यह तब से चल रहा है जब मैंने पहली बार कुछ साल पहले इसकी सूचना दी थी जो कुछ भी नहीं कर रहा था!

क्या यह आपके लिए कार्य करता है ?

http://dev.electroteque.org/webgl/three-canvas.html

जब आप कहते हैं कि यहां कैनवास की बनावट काम कर रही है, तो आप किस ओर इशारा करते हैं?

वह फ्लोप्लेयर प्यारा लग रहा है! क्या इसने बहुत उपयोग देखा है?

मुझे इस लिंक में क्या देखना चाहिए: http://dev.electroteque.org/webgl/three-canvas.html?
जब मैं इसे क्रोम में खोलता हूं - संस्करण 63.0.3239.84 (आधिकारिक बिल्ड) (64-बिट) - macOS 10.13.1 पर:
मुझे बाएं कोने में एक FPS मीटर के साथ काली पृष्ठभूमि दिखाई दे रही है, और एक बटन कह रहा है कि मध्य तल में AR सक्रिय करें
जब मैं उस पर क्लिक करता हूं, तो मुझे सेटिंग व्हील और बैक बटन के साथ एक स्प्लिटस्क्रीन मिलती है। लेकिन कैनवास ही काला है।

जब मैं इसे macOS 10.13.1 पर सफारी संस्करण 11.0.1 (13604.3.5) में खोलता हूं:
मुझे बाएं कोने में एक FPS मीटर के साथ उड़ता हुआ वीडियो दिखाई दे रहा है, और एक बटन कह रहा है कि बीच में AR सक्रिय करें। मैं पूरे 360 अनुभव के लिए चारों ओर स्क्रॉल भी कर सकता हूं।
जब मैं वीआर बटन पर क्लिक करता हूं, तो मुझे सेटिंग्स व्हील और बैक बटन के साथ एक स्प्लिटस्क्रीन मिलती है। और वीडियो कैनवास, लेकिन स्क्रॉल नहीं कर सकता, मुझे लगता है कि यह gyro को नियंत्रित करने के लिए है।

लेकिन अगर मैं वीआर मोड से बैक बटन दबाता हूं, तो वीडियो वीआर मोड में फंस जाता है, और मैं अब स्क्रॉल नहीं कर सकता, और यह वीआर मोड में शुरू होने वाले दृश्य पर अटका हुआ है।

वह डेमो सफारी पर एचएलएस प्रतिपादन के लिए है। अगर आपको लगता है कि फ्लिपवाई फिक्स डेमो सफारी पर काम नहीं करता है

http://dev.electroteque.org/webgl/three-hls-flipy.html

फिर 10.13 और आईओएस 11 सफारी के साथ कैनवास बनावट का उपयोग करना है?

http://dev.electroteque.org/webgl/three-canvas.html

मुझे दोनों के बीच में बताएं। मुझे रोटेशन नियंत्रणों की परवाह नहीं है कि यह एक काला फ्रेम नहीं बल्कि प्रस्तुत करता है।

यह 10.13 के बारे में महत्वपूर्ण है क्योंकि मैंने इसे अब यहां संदर्भित IOS 11 वेबकिट टिकट में जोड़ा है। इसे "रिग्रेशन" मानते हुए जिसने एचएलएस प्रतिपादन को पूरी तरह से तोड़ दिया।

@danrossi दोनों सफारी पर काम करते हैं, एचएलएस संस्करण के साथ उच्च गुणवत्ता। अगर आपने सोचा तो वे दोनों सही दिशा हैं।

लेकिन क्रोम पर किसी ने काम नहीं किया।

ठीक है। बढ़िया मुझे अपनी रिपोर्टिंग को पूर्ववत करने की आवश्यकता है।

तो यह अभी भी एक समस्या सही है?

http://dev.electroteque.org/webgl/three-hls.html

यदि ऐसा है तो macOS के लिए FlipY कार्य को मानक के रूप में उपयोग करें।

इस पृष्ठ पर एचएलएस डेमो दोनों ब्राउज़रों के लिए काम करना चाहिए। यह एचएलएस प्लगइन के साथ क्रोम के लिए मीडियासोर्स स्ट्रीमिंग का उपयोग करेगा। इसके पास तब macOS के लिए FlipY वर्कअराउंड भी है।

https://flowplayer.electroteque.org/vr360/fp6

ठीक कह रहे हैं आप
http://dev.electroteque.org/webgl/three-hls.html
यह क्रोम या सफारी के लिए काम नहीं करता है

लिंक फ़्लोप्लेयर, दोनों ब्राउज़रों के लिए काम करता है

धन्यवाद विजेता। मेरे पास टिकटों को फिर से अपडेट करने के लिए पर्याप्त जानकारी थी। मैकोज़ सफारी मुद्दा आईओएस 11 एक से अलग है।

आपको IOS 11 के लिए कैनवास बनावट उदाहरण का उपयोग करने की आवश्यकता है।

और macOS सफारी के लिए FlipY को टेक्सचर पर अक्षम करें और इसे सही तरीके से मोड़ने के लिए शेडर पर Y स्थिति को उल्टा करें। आपको आईओएस 10 एचएलएस के लिए भी फ्रैगमेंट शेडर पर कलर चैनल इनवर्जन करने की जरूरत है। शेडर कोड ऊपर है।

इसलिए मैं आज सुबह लगभग 1 घंटे के लिए खुश था जब मैंने उपरोक्त समाधान के साथ iOS 11 मामले को हल करने में कामयाबी हासिल की (

आईओएस 11.2.1 के साथ आईफोन 6 प्लस पर मुझे यही परिणाम मिलता है, एनीमेशन वास्तव में बहुत आसान है लेकिन यह सादा बदसूरत, पिक्सेलयुक्त, उपनाम है ...

अपेक्षित व्यवहार इस प्रकार है (एंड्रॉइड 8 और नवीनतम क्रोम के साथ नेक्सस 5X - यह उपरोक्त वर्कअराउंड का उपयोग नहीं करता है)।

हमारा उपयोग मामला एक 360 HTML5 प्लेयर है और वीडियो के ऊपर के दोनों नमूनों में एक ही HLS सिंगल-बिटरेट फ़ीड है http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8

अगर मैं एंड्रॉइड पर वर्कअराउंड (मेरे कोड के लिए नीचे देखें) लागू करता हूं तो मुझे वही बदसूरत प्रतिपादन मिलता है। क्या मुझे इस नए कामकाज के साथ मिलना चाहिए या क्या मुझे कुछ याद आ रहा है?
मैंने कुछ सेटिंग्स के साथ खेलने की कोशिश की लेकिन मुझे कोई उल्लेखनीय सुधार नहीं दिख रहा है।

    // image 
    this.image360 = document.createElement('canvas');
    this.image360.width = this.width;
    this.image360.height = this.height;
    this.imageContext360 = this.image360.getContext('2d');
    this.imageContext360.fillStyle = '#000000';
    this.imageContext360.fillRect(0, 0, this.width, this.height);
    // texture 
    this.texture360 = new THREE.Texture(this.image360);
    this.texture360.format = THREE.RGBFormat;
    this.texture360.minFilter = THREE.LinearFilter;
    this.texture360.magFilter = THREE.LinearFilter;
    this.texture360.generateMipmaps = false;
    this.texture360.wrapS = THREE.ClampToEdgeWrapping;
    this.texture360.wrapT = THREE.ClampToEdgeWrapping;
    this.texture360.flipY = true;
    this.texture360.needsUpdate = true;
    // mesh
    let geometry = new THREE.SphereGeometry(500, 80, 50);
    geometry.scale(-1, 1, 1);
    let material = new THREE.MeshBasicMaterial({ map: this.texture360 });
    this.mesh360 = new THREE.Mesh(geometry, material);
    this.scene360.add(this.mesh360);
    // renderer
    this.renderer360 = new THREE.WebGLRenderer({ antialias: false });
    this.renderer360.setClearColor(0x101010);
    this.renderer360.setPixelRatio(window.devicePixelRatio);
    this.renderer360.setSize(this.width, this.height, true);

मैं यह कर रही हूँ। मुझे पूरा यकीन है कि इसे इसे सही तरीके से आकार देना चाहिए।

video.addEventListener("loadeddata", function() {
                      video.width = THREE.Math.ceilPowerOfTwo(video.videoWidth);
                      video.height = THREE.Math.ceilPowerOfTwo(video.videoHeight);

                      image.width = video.width;
                      image.height = video.height;
                      //image.width = video.videoWidth;
                      //image.height = video.videoHeight;
                      //imageContext.fillRect( 0, 0, video.videoWidth, video.videoHeight);
                      imageContext.fillRect( 0, 0, image.width, image.height);


                      //console.log(video.videoWidth);
                });

इसलिए मैंने थोड़ा प्रहार करने के बाद इसे पकड़ लिया। ऐसा प्रतीत होता है कि हमारे कॉन्फिग में ऑफ-डोम कैनवास वर्तमान एचएलएस प्रस्तुति के सटीक आकार का होना चाहिए ताकि सही ढंग से प्रस्तुत किया जा सके (इसलिए एबीआर के लिए इसे हर बार प्रस्तुतीकरण में बदलाव करने की आवश्यकता होती है)। हमारे परीक्षण से पता चलता है कि यह आईओएस 11 के लिए ठीक काम करता है (ठीक है कुछ भी नहीं से बेहतर है)। इसे यहां छोड़कर अगर यह किसी और की मदद करता है।

हाँ, इसलिए मैं वीडियो चौड़ाई प्राप्त करने के लिए इसे लोडाटा ईवेंट में करता हूं। मैंने इसे पहले ही समझ लिया था और आपकी भी यही समस्या थी।

हालांकि देशी एचएलएस के लिए कोई घटना नहीं होती है जब बिटरेट बदलता है? मैं सिर्फ एक बार व्यक्तिगत रूप से स्थापित कर रहा हूँ। ऐप्पल के लिए कामकाज की मात्रा पहले से ही अविश्वसनीय है।

ऐसी कोई घटना नहीं है, जिसके बारे में मुझे जानकारी है, जो कि सफारी द्वारा प्रदान की गई है जिसका उपयोग एबीआर एचएलएस के लिए प्रतिपादन में परिवर्तन का पता लगाने के लिए किया जा सकता है। हम सिर्फ ऑफ-डोम कैनवास की चौड़ाई और ऊंचाई को video.videoWidth और video.videoHeight के साथ प्रत्येक एनिमेशनफ्रेम पर अपडेट करते हैं (जो शायद प्रदर्शन के दृष्टिकोण से आदर्श नहीं है, लेकिन इस स्तर पर हमारे पास यह काम कर रहा है और हम इसके लिए एक और समय तक समझौता करेंगे। विकल्प उपलब्ध हो जाता है)। हमारे परीक्षण से पता चलता है कि video.videoWidth और video.videoHeight को उसी के अनुसार अपडेट किया जाना चाहिए जब कोई नया रेंडर प्रदर्शित होता है।

हाँ इसके लायक क्या है यह काफी हैकी है। तो ऐसा करना अत्यधिक है, खासकर अगर फ्रेम कॉलबैक में कंडीशन स्टेटमेंट हैं। अभी के लिए जो कुछ भी काम करता है मुझे लगता है।

वे अब भी एक प्रस्तुति परिवर्तन ईवेंट प्रदान नहीं कर सकते हैं। मेरा मानना ​​​​है कि एक के लिए एक युक्ति है लेकिन इसे कभी लागू नहीं किया गया था?

पुराने सफारी बग के आसपास काम करने के लिए सीओआरएस प्रॉक्सी, एचएलएस फ्लिपी फिक्स और अब यह पर्याप्त है।

खुशी है कि यह सब काम कर रहा है। मैंने अपने टिकटों में अभी तक एक अच्छे महीने के लिए कोई अपडेट नहीं देखा है।

मैं एक गुणवत्ता स्विच घटना के बारे में HTML5 वीडियो युक्ति में कुछ देखने को याद नहीं कर सकता। ऐप्पल द्वारा बनाए रखा एचएलएस स्पेक है लेकिन यह वर्णन नहीं करता है कि गुणवत्ता स्विच होने पर क्लाइंट द्वारा क्या किया जाना चाहिए। एचएलएस.जेएस जैसे लिब्स ने इसे लागू किया है लेकिन यह सफारी में एचएलएस से देशी एचटीएमएल 5 वीडियो के लिए उपलब्ध नहीं है।

मुझे बस एहसास हुआ कि मैं निश्चित अंतराल पर video.videoWidth से पूछताछ करके प्रतिपादन में परिवर्तन का पता लगाने के लिए हमारे हैक को "पॉलीफिल" कर सकता हूं और जब कोई बदलाव पाया जाता है तो आकार बदलें कॉलबैक को कॉल करें। इस पर कम टैक्स लगेगा। मैं शायद इसे अपने खिलाड़ी में बाद के चरण में लागू करूंगा।

@radiantmediaplayer अंतर्निहित .videoWidth और .videoHeight गुणों में परिवर्तनों का पता लगाने के लिए आपको "आकार बदलें" ईवेंट का उपयोग करने में सक्षम होना चाहिए।

हाय दोस्तों मेरी टिप्पणी यहाँ देखें। यह काम कर रहा है।

क्या परीक्षा थी जो परीक्षण कर रही थी, और गतियों से गुजर रही थी। केवल कोई उचित प्रतिक्रिया या प्रतिक्रिया प्राप्त करने के लिए नहीं। मैं गंभीरता से कर रहा हूँ! कृपया कोई और प्रतिगमन नहीं !!

OSX 11.3 बीटा इंस्टॉल करें और यह काम करेगा। पिछले OSX 11 को सॉफ़्टवेयर रेंडरिंग की आवश्यकता है, OSX 10 को फ़्लिपी और रंग फिक्स की आवश्यकता है। एक जटिल संगतता गड़बड़ी और प्लेटफ़ॉर्म संस्करण का पता लगाना आवश्यक है।

Safari macOS में अभी भी FlipY समस्या है और मुझे वहाँ भी कोई प्रतिक्रिया नहीं मिली, यह एक अलग टिकट में है। मैं वैसे भी एचएलएस का ठीक से परीक्षण नहीं कर सकता, जब तक कि मैं अपने पीसी वर्कस्टेशन पर मैकोज़ को स्थापित करने और स्थापित करने का प्रयास नहीं कर सकता। HLS को vmware में चलाने से रोक दिया गया है।

https://bugs.webkit.org/show_bug.cgi?id=179417#c43

OSX 11.3 के लिए FlipY वर्कअराउंड की आवश्यकता नहीं है, लेकिन मुझे लगता है कि मैंने पहले इसका उल्लेख किया था।

यहाँ मेरी पूरी IOS और Safari संगतता जाँच है जो अब CORS से शुरू हो रही है।

दिमाग चकरा जाता है। यह वाला पागल है। मुझे भविष्य का प्रमाण भी देना था और IOS 12 से आगे कुछ भी शामिल करना था।

यह एकीकरण पर काम कर रहा है! अभी जांच नहीं कर सकता कि macOS के साथ क्या हो रहा है।

static get supportsCORS() {
        let testVideo = document.createElement("video"),
            hasCORS = false,
            userAgent = navigator.userAgent;

        testVideo.crossOrigin = "anonymous";
        hasCORS = testVideo.hasAttribute("crossOrigin");
        testVideo = null;

        if (hasCORS) {

            //if (_isSafari = WebVRUtils.safariCheck(userAgent)) {
            //Safari still reports CORS support regardless a bug
            if (_isSafari) {
                return WebVRUtils.isNewSafari(userAgent);
            }

            //cors support check for IE 11 support. 
            _corsSupported = true;

            return true;
        }

        return false;

    }

static isNewSafari(userAgent) {
        const osxVersion = /Mac OS X (10[\.\_\d]+)/.exec(userAgent);

        if (osxVersion) {

            //check for safari test to fix HLS problems.
           // _olderSafari = _browserVersion.match(/(\d+).(\d+).?(\d+)?/)[1] <= 10;

            const version = osxVersion[1].split("_")[1];
            return +version >= 12;
        }

        return WebVRUtils.isNewIOS(userAgent);
    }

static isNewIOS(userAgent) {
        const platform = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),
        version = +platform[1];

        _isLatestIOS = version >= 11;

        //if greater than 11.3 or 12
        _iOSHlsSupported = (_isLatestIOS && +platform[2] >= 3 || version >= 12);

        return _isLatestIOS;
    }

प्रयोग

 set hls(value) {

        //if had a HLS source and the current playlist source isn't clear scene and revert the material.
        if (this.hasHls && this.isSafari && !value) {
            this.clearScene();
            this.initScene(value);
        }

        //flipY fix
        this.hasHls = value && this.isSafari;
        //IOS10 colour inversion fix
        this.invertHLS = this.isIpad;

        //if we have hls and IOS 11 or greater
        if (this.hasHls && WebVRUtils.isLatestIOS) {

          //IOS 11.3 or greater disable flipY and colour inversion fixes
          if (WebVRUtils.iOSHlsSupported) {
              this.hasHls = false;
              this.invertHLS = false;
          } else {
            //anything below IOS 11.3 use software rendering
            this.config.software = true;
          }

        }
    }

सुधार एक अंतिम महत्वपूर्ण बिंदु। आईओएस एचएलएस प्रतिपादन कार्यान्वयन शॉस्ट्रिंग पर चल रहा है और बहुत ही मार्मिक है। लोडेटा के बाद प्रतिपादन शुरू होना चाहिए।

जैसे ही यह एक teximage2d त्रुटि को हिट करता है, कोई और प्रतिपादन नहीं होता है, बस काला प्रतिपादन होता है, ऐसा लगता है कि फिक्स कभी नहीं हुआ।

यदि वीडियो डेटा होते ही प्रतिपादन शुरू हो जाता है तो यह ठीक है। 11.3 से पहले यह कोई समस्या नहीं थी।

ऐसा लगता है कि वीडियो फिर से काम कर रहा है (बिना अस्थायी कैनवास सुधार के)। नवीनतम ios संस्करण 11.3 के लिए सत्यापित (iPhone 6s, 7 पर परीक्षण किया गया)।

हां, मुझे लगता है कि मैंने 15 फरवरी को अपडेट किया था। 11.3 में फिर से काम करना। मुझे कभी अपडेट नहीं मिला। मुझे विशेष रूप से वापस जांचना पड़ा और यह काम कर रहा था!

हमने iOS 11.3 (और समकक्ष macOS रिलीज़) में वीडियो -> बनावट के साथ बहुत सी समस्याओं को ठीक किया है। क्षमा करें यदि हमने बग्स को बंद/अपडेट नहीं किया है।

कृपया मुझे बताएं कि क्या आपको अभी भी समस्याएं दिखाई दे रही हैं। मेरा मानना ​​है कि डायरेक्ट स्ट्रीम (जैसे mp4) और HTTP लाइव स्ट्रीम दोनों को काम करना चाहिए, और फ्लिपी को सटीक रूप से प्रतिबिंबित होना चाहिए।

यह सब फरवरी से रिपोर्ट किया गया है। लेकिन मैंने मूल रूप से पिछले साल कभी-कभी रिपोर्ट किया था। मैंने बेतरतीब ढंग से IOS बीटा को 11.3 में अपडेट किया और इसने काम करना शुरू कर दिया। एकाधिक प्लेटफ़ॉर्म वर्कअराउंड से निपटने के लिए उपरोक्त संगतता जांच कोड आवश्यक है।

IOS 10 को फ्लिपवाई फिक्स की आवश्यकता है। IOS 11.0 - 11.2 को सॉफ्टवेयर रेंडरिंग वर्कअराउंड की आवश्यकता है। 11.3 > सामान्य रूप से प्रस्तुत कर सकते हैं।

क्या कोई इसके लिए एक कामकाजी नमूना साझा कर सकता है, एक jsfiddle या तो? मैं अभी भी IOS 11 सफारी में एक काली स्क्रीन देख सकता था। मैं ऑडियो सुन सकता था लेकिन एचएलएस स्ट्रीमिंग के लिए कोई वीडियो नहीं था

@धनिशपा आपका आईओएस संस्करण क्या है? क्या यह 11.3+ है?

कुछ समय पहले (~ मई 2018) मैं भी एचएलएस (? <= 11.2) के साथ निम्नलिखित मुद्दों का सामना कर रहा था:

• वीडियो के सेगमेंट कभी-कभी प्लेबैक के दौरान दोहराए जाते हैं
• वीडियो कभी-कभी रुक जाते हैं और काली स्क्रीन प्रदर्शित करते हैं
• वीडियो बफर लेकिन ऑडियो जारी है

Vimeo के साथ संपर्क करने के बाद (मैं उनकी HLS सेवा का उपयोग कर रहा हूं) वे Apple विकास टीम से संपर्क करने में सक्षम थे और एक साथ मिलकर काम करने में सक्षम थे।

हमें अभी-अभी Apple की विकास टीम से सूचना मिली है कि iOS का एक नया संस्करण (11.3.1) जारी किया गया है, जिसमें आपके द्वारा रिपोर्ट की गई प्लेबैक समस्याओं का समाधान शामिल है। फिक्स को वीडियो को काली स्क्रीन पर रुकने, वीडियो के खंडों को दोहराने, या अंतहीन लोडिंग स्थिति में पकड़े जाने से रोकना चाहिए।

मैंने देखा कि जब मैंने अपलोड करने के दौरान स्रोत के रूप में H264 एन्कोडेड MP4 की आपूर्ति की, तो iOS संस्करण 11.3.1 से कम पर प्लेबैक समस्याएँ दूर हो गईं। अपलोडिंग के दौरान इनपुट प्रारूप के रूप में क्विकटाइम का उपयोग करते समय मैंने समस्याओं का अनुभव किया।

मैंने प्रत्येक वीडियो फ़ाइल द्वारा उत्पन्न मैनिफेस्ट के बीच कुछ अंतर देखा (वीडियो कोडेक अर्थात् "avc1.64001E,mp4a.40.2" काम करने वाले के लिए बनाम "hvc1.2.4.L63.90,mp4a.40.2" गैर-काम करने वाले के लिए )

शायद यह जानकारी किसी के लिए उपयोगी है।

नमस्ते
मुझे आईओएस सफारी पर एचएलएस स्ट्रीमिंग में समस्या आ रही है।
मैं कॉर्स प्रॉक्सी का उपयोग कर रहा हूँ। मैंने देशी एचएलएस प्लेयर और एचटीएमएल 5 प्लेयर का उपयोग करने की कोशिश की और यहां तक ​​​​कि सीधे आईओएस में एम 3 यू 8 लिंक चलाने की कोशिश की लेकिन यह काम नहीं करता है, जबकि सफारी (डेस्कटॉप - मैक), क्रोम, फ़ायरफ़ॉक्स में इसका काम आईओएस (आईफोन) में नहीं है।

आईओएस 11.0.1 में cors तय किया गया था। मैंने जिस दूसरे बड़े सुधार पर काम किया वह 11.3.1 में है। 11.3 अभी बाहर होना चाहिए। प्रॉक्सी केवल IOS 10 और 9 के लिए आवश्यक है।

यह मेरे लिए काम कर रहा है ‍♂️

यहां एक क्षेत्र में मैप की गई एचएलएस स्ट्रीम 360 वीडियो प्लेहाउस-वीआर द्वारा )।

MacOS v10.13.4 + Safari v11.1 और iOS 11.4.1 + Safari पर परीक्षण किया गया

मुझे अब iOS 14.0 Safari और iPadOS 14.0 Safari पर एक नई ब्लैक स्क्रीन समस्या दिखाई दे रही है। ठीक यही प्लेयर iOS 13.7 Safari और iPadOS 13.7 Safari के साथ काम करता है। मैंने three.js r120 (r116 से) को अपडेट करने की कोशिश की, लेकिन कोई फायदा नहीं हुआ। macOS सफारी 14 ठीक है। क्या कोई वही देख रहा है? IOS 14 को सपोर्ट करने के लिए अगला कदम क्या है, इस पर कोई संकेत?

हाँ, iOS 14 प्रतिगमन के लिए https://bugs.webkit.org/show_bug.cgi?id=215908 और https://bugs.webkit.org/show_bug.cgi?id=216250 दोनों देखें । आशा है कि उन दोनों को शीघ्रता से संबोधित किया जा सकता है क्योंकि कई साइटों के प्रभावित होने की संभावना है।

यह सफारी के साथ कभी न खत्म होने वाली लड़ाई है। मैं अपनी 360 सुविधाओं के लिए फिर से शिकायतों की अपेक्षा करता हूं। हर बार इन्हें ठीक करने में महीनों लग जाते हैं। मुझे ऊपर के आसपास मूल कार्य मिला। तो समय और उपाय खोजने का है !! वेबकिट एचएलएस का परीक्षण नहीं करता है, उनके पास वेबजीएल के लिए कोई एचएलएस परीक्षण नहीं है मुझे कुछ स्वयं बनाना था।

मैंने अपने फीचर में अलग-अलग IOS के लिए सभी ब्लोटी वर्क को हटा दिया। लेकिन उनमें से एक को 11.0 के लिए कैनवास सॉफ़्टवेयर रेंडरिंग का उपयोग करना पड़ा ... मुझे अभी भी प्लेटफ़ॉर्म चेक करना है। IOS 13 के साथ उन्होंने अब प्लेटफॉर्म चेक तोड़ दिए हैं। मुझे इसे कार्डबोर्ड प्रोजेक्ट में ठीक करना था। मैंने पाया कि HLS तुरंत रेंडर नहीं करता है और IOS 13 में कुछ समय लेता है, लेकिन फिर से देखना होगा कि मैंने उस समस्या को कैसे ठीक किया।

उन्हें बस परवाह नहीं है। कोई वेबएक्सआर एपीआई नहीं, एंड्रॉइड की तरह कोई वैकलॉक एपीआई अभी लागू नहीं हुआ है।

मेरे काम के अनुसार, मुझे प्रतिपादन परिवर्तन पर पुन: कॉन्फ़िगर करना होगा। और कक्षा नियंत्रण पर ज़ूम अक्षम करें। यह IOS 13 में ब्लैक रेंडरिंग को रोकता है। IOS 14 को चेक करना होगा।

            video.addEventListener("resize", () => {
                vrVideo.update();
                vrVideo.fullScreenResize(false);
            });

मैंने 14.2 का परीक्षण किया है। एचएलएस ठीक है। ऊपर फिक्स यह करेगा ...