Three.js: HLS di Safari / iOS sekarang tidak berfungsi

Itu menggambar ke kanvas dan merender dengan penyaji kanvas meskipun menjatuhkan bingkai. Sesuatu diperlukan dengan webgl.

Ini adalah keindahan. Saya telah sedikit memodifikasi demo kpano dengan aliran HLS yang diproksi.

Ini berfungsi sekarang di Safari OSX tetapi tidak di iOS 9. Adakah yang tahu apa bedanya? Saya bukan ahli dengan bendera webgl dengan sedih atau apa yang mereka lakukan. Di IOS9 itu masih bingkai hitam.

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

link terakhir ini black rect / sound only di safari 9.1.3 / mac os x 10.11.6

Apa itu HLS?

@makc benarkah? Saya memiliki OSX 10.10 dan Safari 10. Nah itu menjelaskan perubahan sabotase baru-baru ini oleh Apple. Safari 10. Jadi jika kita Safari 10 kita semua baik-baik saja.

@mrdoob HLS = Apple Streaming. yaitu untuk streaming langsung tetapi juga VOD. Streaming langsung akan menjadi norma dengan peralatan Terradeck. yaitu http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

Adakah ide perbedaan apa yang mungkin ada di sana? Saya mencoba mengubah beberapa hal pada contoh pertama. Contoh kedua adalah fungsi webgl mentah.

jadi texImage2D sebagian akan membuat HLS tetapi belum di iOS mungkin karena itu bukan Safari 10?

Maafkan saya, saya telah melaporkan beberapa tiket bug webkit.

Mereka telah pergi dan menyabotase peretasan proxy CORS pada pembaruan iOS. macOS juga dilaporkan tidak memperbaiki masalah CORS di Safari.

Sekarang saya harus mencari cara untuk mengatasi sabotase mereka. Saya harus membuatnya berfungsi untuk menguji lebih lanjut HLS yang berfungsi di iOS. Apple benar-benar membuatku berkeringat untuk memadamkan api mereka hahah.

Jika saya bisa mendapatkan rendering OSX, itu akan menjadi permulaan. Saya hanya perlu mencari tahu apa yang berbeda di three.js ?

Saya masih mencoba melakukan metode reduksi untuk membandingkan apa yang berbeda. Setelah saya mengetahuinya, saya mungkin juga membuat IOS berfungsi.

Mungkin program shader ekstra dalam three.js menyebabkan masalah rendering? Saya tidak memahaminya, tetapi mencoba mereplikasi dalam contoh webgl mentah apa yang dilakukan three.js dalam contoh persegi panjang itu. Apakah ada contoh kode shader untuk ini?

Saya menemukan beberapa fungsi mentah di sini yang mudah-mudahan saya dapat mereplikasi sepenuhnya apa yang dilakukan three.js. Saya tidak bisa hanya menyalin program shader secara langsung karena beberapa variabel diatur secara eksternal seperti posisi dunia.

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

Saya mungkin baru saja mengalami ini atau mungkin masalah terkait. Saya memiliki file mp4 h264 yang terletak di ember S3 dan saya memuatnya ke video.src sebagai gumpalan.

Jika saya mengunggah ke ember S3 saya menggunakan pengunggah berbasis web Amazon, video diputar dengan baik saat dimuat langsung di Mobile Safari (iOS 10.0.1), tetapi jika saya mencoba memutarnya menggunakan penampil three.js saya, saya hanya mendapatkan layar hitam. Namun, jika saya mengunggah ke ember S3 dengan Cyberduck, mereka bermain dengan baik secara langsung di Mobile Safari dan di three.js.

Sepertinya Cyberduck sedang mengatur meta-data 'Content-Type=video/mp4' dan pengunggah AWS adalah 'Content-Type=application/octet-stream'. Ketika saya secara manual mengatur meta-data ini ke video/mp4 semuanya berfungsi dengan benar.

Masalah aneh, dan salah satu yang menyebabkan saya banyak menggaruk kepala. Beri tahu saya jika ini adalah masalah mendasar yang sama dengan tiket ini, atau jika saya harus membuat yang baru.

Terima kasih,
dustin

Ini untuk HLS mate seperti dalam fragmen mpegts atau file terfragmentasi bukan mp4. Mp4 baik-baik saja di Safari dan iOS. Saya memeriksa mimetype di cyberduck dan dikatakan mpegts benar.

Aliran yang sama berfungsi untuk saya dalam contoh webgl mentah, tentu saja tidak di iOS. Masalah Anda tampaknya mirip dengan masalah saya meskipun seperti dalam bingkai hitam. Tidak ada rendering sama sekali.

@danrossi oke keren. Saya akan membuat tiket baru khusus untuk masalah saya. Terima kasih.

Saya pikir ini masalahnya: www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
Saat ini saya mencoba menerapkan solusi yang sama untuk three.js, tetapi tidak terlalu jauh.

@tahap satu. Ini adalah masalah safari karena keduanya merupakan masalah pada OSX dan iOS. Mp4 berfungsi dengan baik untuk iOS dan OSX. Saya akan bermain-main dengan antialias.

Masih belum bisa menemukan perbedaan di antara keduanya. Contoh webgl mentah masih tidak akan berfungsi di iOS tetapi membuatnya berfungsi di OSX adalah permulaan.

Saya ingin tahu apakah saya dapat menemukan program shader persegi panjang yang berfungsi yang dapat saya kunjungi.

Info lebih lanjut di sini: http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

Saya menyadari bahwa ini adalah bug browser, tetapi menerapkan solusi mungkin diperlukan mengingat berapa lama bug WebGL ini perlu diperbaiki.

Dalam hal menggunakan tekstur melalui kanvas, video ditampilkan dalam safari.
Namun, karena masih ada masalah CORS di iOS, itu hanya berfungsi di Asal yang Sama.
https://bugs.webkit.org/show_bug.cgi?id=135379

Saya tidak terbiasa dengan webgl, tetapi silakan merujuk ke yang berikut ini.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Saya pikir saya tahu apa yang Anda maksud menggunakan canavasrender. Saya memang mencobanya untuk melakukan metode reduksi.

Saya pikir itu berhasil tetapi menyebabkan penurunan frame yang parah dan masalah kinerja pemutaran karena cpu. Jelas lebih buruk di iOS. Ipad 3 sudah menjatuhkan bingkai untuk webgl.

@danrossi saya punya sedikit kesalahpahaman. Maafkan saya. Saya telah mengirim hal yang salah arah.

Saya telah mengkonfirmasi masalah yang sama dengan proyek elevr yang menggunakan webgl dan shader mentah. Harus meretas yang itu untuk kembali. Sesuatu di sana menyebabkan masalah rendering dan akan memengaruhi three.js sama.

Saya telah mengkonfirmasi di elevr itu adalah pembersihan otomatis yang mengikat tekstur yang menyebabkannya pecah yaitu

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

Jika ini dikomentari itu berfungsi.

Ini juga menyebabkan masalah, saya tidak yakin untuk apa.

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

Mungkin ada properti auto clear yang melakukan hal yang sama di three.js ?

Saya melihat banyak referensi untuk

state.bindTexture(_gl.TEXTURE_2D, null);

Tapi tidak tahu di mana itu mungkin. Apakah diperlukan untuk melakukan itu?

kode terlalu gila untuk melacak apa yang menyebabkan masalah gambar tekstur. Sepertinya ada sesuatu dengan pengikatan tekstur ini.

@danrossi apakah ada halaman di luar sana yang merendernya dengan benar?

Maaf tentang kebisingan sobat. Saya melakukan lebih banyak pengujian AB. Sepertinya memang seperti yang saya sebutkan, karena saya juga harus mengomentarinya untuk demo elevr.

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

Ini menyebabkan masalah. Namun tanpa itu teksturnya terbalik. Saya akan menambahkan tes lain untuk menunjukkannya sekarang berfungsi.

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

Contoh mentah lain yang saya temukan, berkomentar FLIP_Y. Kemungkinan bug Webkit sekarang?

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

Satu-satunya referensi ke flipY adalah ini tetapi webkit nightly masih menjadi masalah

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

Jika saya menonaktifkan flipY yang saya anggap merusak akselerasi perangkat keras, itu berfungsi?

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

Mencoba melihat apakah itu bug webkit sekarang. Bagaimana mungkin untuk memutar tekstur sekitar untuk bekerja di sekitarnya untuk saat ini?

Bagaimana mungkin untuk memutar tekstur sekitar untuk bekerja di sekitarnya untuk saat ini?

mengapa tidak membalik geometri uv atau melakukannya di shader

@makc Saya tidak tahu bagaimana cara melakukannya.

Hanya untuk melakukan kepala lebih jauh. "Perbaikan" FlipY ini tidak membantu di iOS 9, baru saja mengujinya.

Sesuatu yang lain adalah masalah di sana sekarang. Butuh berhari-hari hanya untuk melacak yang satu ini.

Mungkin semua masalah webkit bukan Three.JS dari kelihatannya. Seperti biasa mohon maaf atas hal ini.

Saya telah mengajukan laporan di sana juga https://bugs.webkit.org/show_bug.cgi?id=163866

Saya tidak tahu bagaimana cara melakukannya.

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

@makc mengonfirmasi membalik uv membantu. Bagaimana cara membalikkannya dengan ini?

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

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

Masalah masih terlihat jelas di iOS.

@makc. Sangat mungkin program shader ini melakukan flip, ini ada di salah satu sumber demo.

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;}

Itu ditemukan di demo asli yang tampaknya berfungsi karena tidak menggunakan flag FlipY, tampaknya melakukannya di program shader.

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

Tidak tahu bagaimana mengintegrasikannya ke dalam three.js? Apakah lebih baik menggunakan program shader?

Saya masih men-debug iOS sekarang.

Yang satu ini menarik. Dengan mencoba mereplikasi perhitungan itu ke dalam contoh ini, tampaknya membaliknya tetapi skalanya masih buruk.

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

Jadi gl_Position mengontrol posisinya.

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

Apakah lebih baik menggunakan program shader?

program shader dijalankan sekali setiap frame, vs membalik uvs dalam geometri hanya sekali sebelum semuanya dimulai.

@makc mungkin yang terbaik hanya mengatur nilai di awal. Jika saya benar, nilai uv ini adalah variabel dalam program shader dan digunakan dalam perhitungan?

Saya melihat di sumber beberapa referensi ke gl_Position. Tidak yakin apakah ini yang benar tetapi ada yang seperti ini

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

Terima kasih.

Saya mencoba semua jenis trik dengan webgl di IOS Safari untuk melihat apakah saya bisa mendapatkan bingkai untuk dirender dan untuk saat ini hanya hitam. Mp4 baik-baik saja.

Tidak banyak sumber daya tentang ini. Saya percaya penemuan saya juga dicari orang. Ini untuk live streaming btw tapi juga VOD.

Saya meminta seseorang menguji beberapa hal. Mereka percaya contoh webgl mentah ini dengan perbaikan FLIPY berfungsi di iOS 10 tetapi versi three.js sebenarnya tidak mogok pada mereka.

Saya perhatikan itu menggunakan filter TERDEKAT yang membuat teksturnya kuning, saya mencoba mereplikasi itu tetapi masalah yang sama untuk mereka.

jadi tidak satu pun dari ini yang berfungsi

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

Tapi ini untuk mereka meskipun iOS 9 untuk saya tidak

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

Setelah beberapa pengujian yang sangat berat dan menyakitkan, saya telah mendenda demo dan masalahnya.

Pekerjaan FlipY diperlukan untuk HLS di OSX 10.11 dan macOS , IOS 9 dan 10. Contoh webgl mentah tidak menggunakan FlipY karena dilakukan di dalam program shader. Dengan three.js geometri harus dibalik.

Render HLS pada iOS 10 ditampilkan tetapi memiliki masalah artefak warna yang parah. Bingkai berhenti berfungsi tetapi saya yakin ini masalah dengan emulator dan bingkai jatuh. Saya sekarang tidak memiliki perangkat yang dapat diperbarui ke iOS 10. Itu tidak muncul sama sekali di iOS 9. Keduanya memerlukan proxy CORS untuk mp4 dan HLS.

Sekarang saya mungkin harus memberikan tiket lain sehubungan dengan masalah rendering warna dengan HLS di iOS 10 setelah saya mengonfirmasi bahwa itu bukan emulator.

Ini benar-benar menyakitkan, tidak heran tidak ada yang ingin mendukung Safari tetapi orang-orang membutuhkannya untuk berfungsi.

Saya harus menyediakan pengaturan format rgb yang berbeda di sini. Yang default menghasilkan coiourbars vertikal, yang rgba warnanya salah. Tapi di emulatornya. Saya sekarang tidak dapat menguji IOS 10 dengan benar karena perangkat Ipad saya menjadi tidak didukung. Saya akan mencoba memegang Iphone dengan iOS 10 untuk mengonfirmasi.

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

Harap berkonsentrasi pada dua contoh ini. flag RGB tidak membuat perbedaan pada perangkat yang sebenarnya, simulator menghasilkan output yang salah tetapi output yang sama saat menggunakan format RGBA.

Pekerjaan FlipY diperlukan untuk IOS 9/10/ OSX Safari dengan HLS.

Saya telah dapat mereplikasi masalah warna dengan rendering webGL HLS yang sekarang membutuhkan tiket kedua meskipun saya tidak yakin apakah bug serpihan Webkit adalah masalah three.js.

Begitu banyak kekurangan dan bug besar yang menyebabkan ini menjadi penghenti pertunjukan.

Jadi output webgl HLS seperti itu hanya berfungsi sebagian di iOS 10 bukan iOS 9. Banyak perangkat macet di 9 sekarang. Saya perlu mencari pekerjaan untuk 9.

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

Hai! Saya memiliki masalah yang sama. Apakah Anda punya solusi sekarang?

ya itu dalam demo itu tetapi periksa tiket kedua mengenai masalah ruang warna dengan iOS 10. Tampaknya tidak akan ada upaya atas nama Webkit / Apple untuk membuatnya berfungsi di iOS 9 yang berarti perangkat yang lebih tua seperti Ipad 3 ditinggalkan meskipun itu hampir tidak bisa membuat 5fps. Harus berkonsentrasi dulu agar iOS 10 berfungsi.

Ini adalah solusi untuk masalah ini yang telah dilaporkan ke Webkit. Ini masalah di semua Safari.

http://dev.electroteque.org/webgl/webgl.html sepertinya tidak berfungsi. Saya menguji halaman di ios10. Tapi safari macet saat halaman dimuat.

Gunakan contoh threejs.

Saya menguji semua contoh yang tercantum pada masalah ini. Tampaknya hanya http://dev.electroteque.org/webgl/webglrgba.html yang berfungsi. Tapi itu memiliki masalah colorspace.

@wuyingfengsui ini berfungsi di IOS 10 Iphone.

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

Anda mungkin memeriksa simulator, saya yakin. Itu adalah masalah besar. Tidak hanya itu tidak akan memperbarui bingkai yang ditampilkan bilah warna hijau. Saat menggunakan flag RGBA, itu akan berfungsi pada simulator. Ada masalah grafik aneh yang terjadi di sana.

Pada IDevice yang sebenarnya Anda akan melihat masalah colorspace saat menggunakan flag RGB seperti yang Anda lakukan dengan flag RGBA di simulator!

Saya didorong untuk menguji IOS 10 dengan benar untuk saat ini karena Ipad 3 sudah usang tetapi untungnya saya memiliki akses ke Iphone.

Perhatikan juga url proxy CORS di dalamnya.

Lihat ini mengenai masalah ruang warna sekarang

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

dan tiket webkit ini yang saya ragu mereka akan repot-repot memperbaikinya dan mendorong rilisnya.

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

Saya merasa ini berfungsi ketika saya mengubah RGB ke RGBA di ios 10 iphone 7.

ok jadi berbeda untuk perangkat yang berbeda bagus. Saya telah memperbaruinya ke RGBA. Bagaimana dengan ini ?

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

@danrossi Berhasil .

@wuyingfengsui Saya harus memperbarui tiket webkit sehubungan dengan itu. Saya melihat ada bendera warna lain yang harus dipusingkan dan mudah-mudahan yang benar. Saya mencoba aliran HLS yang berbeda dan semuanya sama.

Anda dapat melihat dalam konstanta three.js ada rentang nilai untuk dimainkan. yaitu ini. Ada juga flag tipe byte yang ditangani. Trial and error dan trial and error yang sangat melelahkan.

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

Jadi sayangnya IOS 9 telah dibuat sepenuhnya berlebihan dengan ini tidak akan berfungsi. Perangkat yang lebih tua tidak akan pernah mendapatkan iOS 10.

Saya percaya ada semacam sabotase yang terjadi dan saya yakin itu berhasil sebelum rilis Safari 10? fase pengujian saya memakan waktu berbulan-bulan karena semua inkonsistensi dengan Apple dan terkadang Android. Saya cukup yakin ketika saya menguji HLS itu berfungsi.

Saya tidak terbiasa dengan webGL. Saya pikir itu tidak dapat diselesaikan sampai webkit memperbaikinya.

Inilah yang mengupload tekstur ke webgl. bendera-bendera di sana menarik.

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

@wuyingfengsui jika butuh lebih dari 5 tahun untuk "memperbaiki" sebagian masalah CORS di macOS maka jangan menahan napas.

Itulah mengapa seseorang harus duduk di sana dan mencari solusi dan sayangnya itu adalah diri saya sendiri hahah.

Jika Anda mengambil contoh webgl mentah, tanda-tanda itu dapat dikacaukan. Atau lakukan melalui three.js menggunakan konstanta dan properti "format" dan "ketik" tipenya adalah tipe byte, formatnya adalah format warna yang Anda lihat RGBA diperlukan untuk membuatnya berfungsi.

Saya akan meluangkan waktu besok untuk melewati setiap bendera dan mudah-mudahan satu kombinasi berhasil.

@danrossi Bagaimana

Saya baru saja mencoba mengotak-atik setiap bendera yang mungkin dan tidak ada apa-apa. Itu hanya dapat mengambil bendera RGB dan RGBA dan tipe byte tidak ditandatangani. Pilihan lain hanya menunjukkan kanvas hitam. Tidak yakin apa lagi yang harus dilakukan ?

@danrossi Terima kasih atas pekerjaan Anda. Saya menemukan Hls.js memutar video hls dengan MSE. Tapi Safari Mobile tidak mendukung MSE.

@wuyingfengsui ini adalah masalah HLS asli dengan IOS sekarang, perbaikan saya di atas mengatasi bug untuk Safari OSX.

dengan streaming Dash, Safari yang lebih lama memiliki masalah CORS bahkan dengan proxy yang bekerja. Mungkin di macOS mereka telah memperbaikinya juga?

Mungkin tidak ada yang bisa dilakukan selain menyediakan metode penyelesaian di three.js menggunakan perbaikan kode di atas.

Saya ragu webkit dan Apple akan memperbaikinya. Jadi semua mata tertuju pada tiket ini sekarang. hal-hal bendera RGB terkait dengan rendering iOS 10 sekarang. Perangkat iOS 9 dan yang lebih lama yang terperangkap di dalamnya penuh.

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

Ada pembaruan di sini? Adakah yang membuatnya bekerja dengan rendering warna tetap di iOS?

Silakan merujuk ke tiket ini.

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

Saya ragu pekerjaan HLS akan masuk ke three.js itu harus keluar.

Kode untuk itu bekerja di sekitar adalah sebagai berikut

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));
}

Jika Anda ingin bermain-main dengan flag webgl, gunakan contoh webgl mentah. Saya mencoba semua opsi yang mungkin dan tidak ada apa-apa sekarang. Itu baik dan benar-benar disabotase dan tidak ada tanggapan dari webkit.

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

Terima kasih. Apakah ada format video lain untuk streaming ke bendera video iOS selain HLS? Apakah mungkin untuk melakukan streaming H.264 tanpa masalah rendering?

@pedrofranceschi mp4 baik-baik saja. Hanya HLS yang menyediakan opsi untuk live streaming video 360 di iOS.

Perbaikan flipY yang terkait dengan tiket ini perlu diterapkan pada aliran HLS dan hanya di Safari . Perbaikan FlipY ini tidak berfungsi pada IOS 9 yang menutup perangkat lama yang tidak bisa mendapatkan IOS 10.

Ipad 3 saya yang saya gunakan untuk pengujian tidak akan pernah membuat HLS dan WebGl berfungsi. Saya harus menguji pada Iphone yang lebih baru. Simulator IOS 10 hampir tidak berfungsi dan memiliki masalah artefak warna yang mirip dengan masalah lainnya.

Setidaknya flag inline untuk Iphone pada iOS 10 berfungsi, video inline dan webgl dimungkinkan sekarang tetapi CORS masih menjadi masalah. CORS hanya diperbaiki di Safari di macOS.

Saya menekankan Safari hanya karena ini adalah bug webkit klasik lainnya dan streaming HLS.JS di browser lain tidak masalah.

Saya menemukan itu dapat diperbaiki dengan menambahkan kanvas ekstra. Tapi itu hanya berfungsi di iOS 10. Lihat komit ini: https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

Itu bukan acara. Ini menggunakan rendering kanvas dengan drawImage. Bukan WebGL. Jadi seperti menggunakan perender kanvas three.js. Penyaji kanvas benar-benar menyebalkan pada iOS menyebabkan bingkai jatuh, tidak dapat digunakan. Apakah ini perbaikan Anda?

Kualitasnya tidak terlalu bagus. Tapi itu berhasil :)

Menjatuhkan bingkai lebih dari masalah kualitas :)

@mrdoob Saya sudah mencoba perender kanvas sebagai solusi tetapi melakukan ini untuk saya. Saya tidak yakin apa masalahnya di sana, ini menampilkan mesh. putarannya juga kurang pas. Memuat file mp4 itu ditampilkan dengan benar tetapi masih garis mesh.

Itu masih menjatuhkan bingkai melakukan ini.

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

@danrossi

@mrdoob Masalah ini tentang HLS di Safari. Sangat sulit melakukan semua demo ini. Tapi saya telah membuat beberapa kombinasi.

Saya juga baru saja berhasil Chrome menolak untuk memutar ulang mp4 sekarang kecuali jika menggunakan versi proxy Safari CORS dari mp4 ahh.

Sejauh masalah CanvasRenderer yang aneh terjadi yang dapat memperbaiki masalah HLS sementara untuk iOS 10. Berikut adalah kombinasi jadi tunjukkan apa yang dilakukannya dan beberapa offset nilai rotasi yang aneh mungkin. Kodenya sama semua. Ada kisi-kisi jala di atas tekstur.

Untuk Safari

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

Untuk Chrome

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

@danrossi Versi Safari juga tidak berfungsi di iOS 10…

Ini harus bekerja pada IOS 10 tetapi Anda akan melihat artefak warna.

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

Yang lainnya adalah tes CanvasRenderer untuk mencoba dan mengatasi masalah iOS, setidaknya harus berfungsi di browser desktop dan tidak.

Ini harus bekerja pada iOS apa pun tetapi saya tidak terlalu khawatir tentang yang itu.

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

Saya tidak percaya solusi CanvasRender akan menjadi solusi yang baik untuk iOS tetapi ini adalah pilihan. Karena tidak hanya masih membutuhkan proksi CORS, gambar kanvas hanya akan menyebabkan bingkai jatuh. Safari OSX dapat menggunakan pekerjaan FlipY di threejs-hls.html

Saya telah memperbarui demo kanvas, sepertinya tidak perlu menggambar secara eksternal.

namun ada masalah aneh dengan geometri bola yang tidak dapat saya pahami karena itu gambar tidak ditampilkan atau diputar dengan benar, semuanya miring ke satu titik.

Klik area kiri atas, dan coba seret dengan orbitcontrols.

Masalah mesh adalah saya perlu menambahkan "overdraw: 0.5" ke MeshBasicMaterial untuk menghentikannya menampilkan mesh.

Tidak memerlukan proxy CORS di safari saat menggunakan CanvasRenderer. Saya akan mencoba untuk melihat SoftwareRenderer berikutnya untuk melihat apakah itu akan bekerja lebih baik karena CanvasRenderer menjatuhkan terlalu banyak frame.

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

Mengingat CanvasRenderer telah ditandai terdepresiasi karena bingkai yang jelas jatuh. Saya kira satu-satunya pilihan terakhir adalah mencoba tekstur video dengan SoftwareRenderer. Perubahan itu tampaknya belum berfungsi dan tidak dapat menemukan contoh pengaturan. Itu hanya kanvas hitam.

Adakah solusi untuk kesalahan warna? Semuanya biru-ish

@andreabadesso Saya memiliki dua pengaturan tiket mungkin saya harus menggabungkannya.

Untuk OSX, melakukan pekerjaan FlipY akan memperbaiki masalah buruk itu. Untuk IOS 10 , sesuatu yang lain diperlukan sepenuhnya.

Gambar kanvas adalah kegagalan besar, bahkan tidak ditampilkan dengan benar di luar kotak, permata tampaknya terdistorsi. Ini menjatuhkan frame juga.

Saya sekarang mencoba peruntungan dengan "SoftwareRenderer" yang masih mengandalkan gambar kanvas. Yang saya dapatkan hanyalah kanvas hitam sekarang jadi tidak ada apa-apa. Tidak ada dokumentasi bagaimana membuat tekstur video bekerja dengannya.

Tidak ada pilihan lain, webkit tidak akan merespons dan saya telah mencoba semua kemungkinan flag webgl. Saya bisa kembali dan mencoba mengacaukan penyandian tetapi HLS dikemas dari file mp4 yang berfungsi.

Sementara itu, jika ada yang membutuhkan solusi putus asa, ini akan melihat file .ts, mengonversinya menjadi .mp4 dan memancarkan soket web sehingga klien dapat mengunduh fragmen berikutnya dalam mp4 (yang berfungsi di ios10):

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

Saya dapat memberikan solusi lengkap jika ada yang tertarik.

@andreabadesso Sudahkah Anda menerapkan klien tentang solusi Anda?

Itu sangat cerdik. Anda tidak hanya masih memerlukan proksi CORS, tetapi juga mencoba melewati FFMPEG secara realtime :O Apakah IOS bahkan melakukan soket web? Saya tahu itu tidak bisa melakukan webrtc.

Mencoba mendapatkan tekstur video melalui gambar kanvas masih melalui opsi SoftwareRenderer juga buruk. Itu hanya bingkai hitam. Kedua opsi telah menjadi jalan buntu. Saya berharap setidaknya SoftwareRenderer berfungsi dengan tekstur video hanya menampilkan tekstur gambar.

Hai semuanya, saya telah mengerjakan masalah warna selama beberapa hari terakhir dan saya telah menemukan solusi yang sesuai untuk kasus penggunaan saya. Utas ini sangat berguna dan saya ingin berkontribusi.
Masalahnya hanya warna merah dan biru yang tertukar. Jadi saya menggunakan ffmpeg untuk pra-beralih warna-warna itu. Saat warna diaktifkan kembali pada threejs, video kembali ke tampilan normalnya.
Ini bukan solusi optimal tetapi berhasil. (diuji pada iOS 10.2)

@Yralec

Saya pikir itu adalah masalah penyandian atau bermain-main dengan penyandian.

Itu tidak akan membantu mengatakan untuk streaming langsung wowza. Tidak seorang pun kemungkinan besar akan memiliki kendali atas cara kerja pembuat enkode langsung. Untuk VOD mungkin.

Apakah Anda memiliki bendera ffmpeg untuk mengonfirmasi itu?

Masih menakjubkan. Sepertinya ini bukan masalah dengan three.js selain dari masalah FlipY yang masih diperlukan.

Saya tidak dapat memahami mengapa Webkit seperti ini.

@danrossi

Berikut perintah yang saya gunakan:
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
Seperti yang Anda lihat, saya juga membalik output jadi saya tidak perlu melakukannya di threejs sendiri.

ok saya akan bertanya tentang itu.

Bukankah lebih mudah untuk menulis shader yang menukar biru dan hijau?

@mrdoob Saya memiliki sedikit pengetahuan tentang shader jadi bagi saya tidak (saya juga tidak memikirkan itu), tetapi jika Anda tahu cara menulis yang menukar merah dan biru, itu hampir pasti merupakan solusi yang lebih baik.
Juga streaming langsung mungkin akhirnya berfungsi.

@mrdoob Saya pikir Anda

Saya melakukan riset dan sepertinya ada pertukaran urutan saluran seperti ini, saya sekarang ahli dengan shader.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob dalam contoh webgl mentah saya, saya mencoba sesuatu seperti ini tetapi programnya rusak dan menyebabkan kesalahan. Jadi di sinilah ia memperoleh warna dari tekstur yang jelas sangat palsu dan "bgra" menukar saluran merah dan biru.

Belum ada ide bagaimana mendapatkan solusi yang berfungsi dari ini.

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

Ada kesalahan program hanya menyalin dan menempel.

Menggunakan kode ini di atas. Saya dapat mengkonfirmasi apa yang sedang dirender adalah apa yang terlihat di IOS 10 sehingga diharapkan dapat membalikkan warna merah dan blur yang ditukar di shader?

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

@Yralec mengonfirmasi pembalikan urutan saluran warna pada shader akan dibalikkan kembali di IOS10. Di simulator saya harus mengubah format warna menjadi rgba untuk membuatnya dirender tanpa garis aneh melewatinya.

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

@mrdoob bagaimana mungkin menerapkan perubahan warna tekstur ini pada program shader bawaan?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Koreksi. Ini mungkin yang akan digunakan orang.

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";

Bagaimana cara mendapatkan akses untuk mengubahnya?

@danrossi Anda dapat meretas sesuatu seperti ini di JS

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

Saya yakin saya perlu menyalin shader menjadi THREE.ShaderMaterial, tetapi tidak tahu bagaimana menerapkan teksturnya?

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
                });

Cara lain itu tidak fleksibel karena harus diterapkan hanya untuk aliran HLS di iOS.

sebenarnya ini merender di safari tetapi perbaikan FlipY rusak. Ini bermain terbalik. pikiran kacau. Semua usaha ini karena Apple dan Webkit haha.

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

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

@WestLangley tambalannya sepertinya tidak berfungsi. Saya seharusnya melihat warna terbalik tetapi tidak.

gl_FragColor=texture2D(sm,txt).bgra;

ini shader yang benar untuk menukar [b]lue dan [r]ed: urutan defaultnya adalah rgba, jadi bgra menukarnya.

FlipY memperbaiki jeda

txt -> vec2(txt.x, 1.0 - txt.y) misalnya

tidak tahu bagaimana caranya

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

tambalannya sepertinya tidak berfungsi. Saya seharusnya melihat warna terbalik tetapi tidak.

mungkin Anda menerapkan tambalan terlambat

@makc ya dalam contoh webgl mentah saya melakukan flip di shader.

Saya percaya jika flip dilakukan pada kode UV yang diposting dalam contoh threejs saya, itu tidak dibalik bingkai demi bingkai di shader. Saya pikir itu akan menghapus perhitungan yang tidak perlu untuk diproses.

dalam contoh webgl mentah itu dibalik pada vertex shader

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;}

kemudian di shader fragmen ini membalikkan saluran warna.

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

mencoba meniru itu di three.js adalah masalahnya sekarang.

Permisi, ini sepertinya berhasil tetapi perbaikan FlipY tidak berfungsi. Saya lupa menambahkan 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
                });

Jika saya mengubah nilai tFlip default menjadi 1, itu ditampilkan dengan benar, jadi opsi perbaikan lain untuk masalah FlipY dengan HLS?

tFlip: { value: 1 }

video telah memutuskan untuk berhenti merender di simulator tetapi setidaknya saya melihat perubahan warna. Tambalan tidak bekerja dengan sedih meskipun men-debug itu pasti menggantikan kode shader.

Sepertinya saya bisa melakukan flip dengan nilai itu hanya memberikannya positif 1 daripada negatif.

Saya kehilangan akses ke IOS10 setelah mereka tidak lagi menggunakan perangkat yang lebih lama seperti Ipad 3 saya. Saya harus memuat simulator di macOS yang di-boot pada drive eksternal karena saya memiliki perangkat lunak yang hanya berjalan di 10.10. Saat-saat menyenangkan dengan semua sabotase ini.

Saya tidak tahu apakah ini memperbarui bingkai dan berputar dengan benar.

Semoga contoh ini berfungsi di iOS 10. Ini yang terbaik yang bisa saya lakukan saat ini. Di Safari itu harus menunjukkan warna terbalik.

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

Menggunakan shadermaterial mengacaukan penskalaan gambar, geometri, dan menghentikan rotasi kamera agar tidak bekerja seperti ini

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

Harus mencoba dan membuat tambalan ini berfungsi.

Ini sepertinya berhasil meskipun masih mengacaukan posisi kamera. Saya tidak berpikir itu pilihan yang layak. Ini menghasilkan lebih banyak bug hanya dengan melakukannya dengan cara ini. Tidak merender sama dengan menggunakan 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
                });

Jika saya mencoba menggunakan bahan dasar itu tidak akan berhasil. yaitu

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

Daripada mencoba meretas shader bawaan, saya hanya akan membuat shader khusus.

Ini dia! 😀

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/

Tidak hanya membuat layar hitam.

@danrossi Ini bekerja untuk saya.

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")
    });

Ingat perbarui jenis warna dan nama variabel

Itu merender di sini... (Chrome 55, OSX)

Masalah ini tentang tekstur Video dengan aliran HLS dan Safari terutama IOS Saya khawatir :|

Saya tidak dapat melihat cara kerja meshbasic_frag dan bagaimana tekstur diterapkan padanya. Itulah yang digunakannya.

Program equirect_frag yang saya lihat tidak digunakan atau dipilih.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

Ini semua yang saya lihat.

Saya pikir Anda harus melupakan meshbasic_frag dan equirect_frag . Coba gunakan kode saya sebagai basis dan ganti ini:

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

Dengan sesuatu seperti ini:

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

@mrdoob

bagian belakang menyebabkan masalah. Program shader ini tentunya jauh lebih bersih dari biasanya. Apa bedanya ?

Menggunakan shader khusus, saya kehilangan perbaikan FlipY asli.

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

Saya harus sedikit memodifikasi kode vertex, x dibalik, dan y perlu inverting. Aku akan meletakkannya sebentar lagi.

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
});

Program shader ini tentunya jauh lebih bersih dari biasanya. Apa bedanya ?

Sihir! 😉

@mrdoob terima kasih juara. maaf tentang kebisingan tetapi salahkan Apple lagi untuk yang satu ini.

Jadi untuk video persegi panjang, bukankah demo harus diperbarui untuk menggunakan ini mungkin? Jadi program shader yang digunakan oleh MeshBasicMaterial tidak diperlukan untuk tekstur video seperti itu? Saya akan mengujinya di browser dan format video yang berbeda.

Kita tutup?

Berikut adalah demo yang diperbarui

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

Jadi untuk video persegi panjang, bukankah demo harus diperbarui untuk menggunakan ini mungkin? Jadi program shader yang digunakan oleh MeshBasicMaterial tidak diperlukan untuk tekstur video seperti itu?

Nah, MeshBasicMaterial lebih fleksibel dan orang tidak perlu menulis shader. Hanya saja, untuk kasus khusus ini, lebih mudah untuk menulis shader khusus untuk mengatasi masalah tersebut.

Kita tutup?

Ya!

Ini berfungsi dengan baik di iOS 10. Hanya saja frame tidak diperbarui pada simulator. Harus menunggu perangkat keras. saya akan menutup tiket lainnya.

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" );

Dengan sedikit penyesuaian pada flipy, program yang sama bekerja pada chrome dengan webm.

@mrdoob Saya percaya shader ini berfungsi di semua browser dengan tekstur video. Perbaikan flip, "1.0 - uv.y" hanya diperlukan untuk HLS di Safari. Pembalikan saluran warna hanya diperlukan untuk IOS10 dengan HLS.

Lapisan pekerjaan yang cukup gila termasuk proksi CORS.

Saya percaya ini berkinerja lebih baik daripada shader yang disediakan oleh meshbasicmaterial. Haruskah ini menjadi standar untuk tekstur video? rotasi tampaknya bekerja dengan kode vertex.

Halo semua
Saya mencoba membuat pemutar 360vr dengan three.js yang menampilkan streaming langsung HLS (.m3u8 dimainkan dengan hls.js)
Ini berfungsi di Safari osx dengan webgl diaktifkan tetapi di ipad 10.2 semua percobaan saya hilang di kanvas hitam (suaranya berfungsi)
Jika saya menonaktifkan mode vr360, aliran video berfungsi dengan baik di semua perangkat.
Saya mencoba beberapa metode yang disarankan tetapi saya masih memiliki rendering kanvas hitam.
Seseorang yang tahu bagaimana untuk bekerja di sekitar?

Perbaikan inversi FlipY dan saluran warna ada di utas ini.

Bug Webkit yang saya lacak sudah basi dan akhirnya mengatasi beberapa arogansi tentang hal itu. Itu masih terbuka tapi tak seorang pun akan repot-repot melihat mereka.

Anda memerlukan perbaikan FlipY untuk Safari. Jadi nonaktifkan masih pada tekstur three.js.

Berikut adalah metode es6 formal yang saya buat untuk solusi pemutar saya. Saya masih mengalami mimpi buruk berbulan-bulan setelah berburu omong kosong ini haha.

Terima kasih kepada mrdoob sang juara karena telah menghadirkan solusi shadermaterial. Saya menggunakan ini untuk semua browser sekarang. Ini adalah shader yang lebih sederhana daripada yang dihasilkan juga. Ini hanya untuk tekstur video.

 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)
        });
    }

penggunaan

 let invertColour = false;

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

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

ok komentar di baris _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) di three.js membuat tampilan video di Safari (10.0.2, di versi sebelumnya hanya perlu mengaktifkan webgl di alat pengembangan, ini opsi tidak tersedia sekarang) tetapi saya masih memiliki masalah di iPad dan iPhone (yang merupakan target saya)
Tentang solusi shaderMaterial, saya tidak tahu bagaimana tepatnya menerapkannya dalam kode saya ...
Terima kasih atas dukunganmu

Penonaktifan FlipY dalam pengujian saya juga diperlukan untuk MacOs Safari 10.

Ya juga untuk saya (kecuali untuk versi 9.xx sebelumnya)
Tapi saya perlu menggunakan pemutar di perangkat seluler sehingga solusi bukan solusi saya :-(

Anda memerlukan perbaikan FlipY dan inversi saluran warna di iOS. Dan hanya untuk IOS 10. Tidak bagus di IOS 9. Yang meninggalkan banyak perangkat yang lebih tua. Karena Apple telah mendepresiasi mereka seperti Ipad 3 saya. IOS 10 mendukung pemutaran inline jadi akan lebih baik.

Saya sedang melihat memperbaiki ini di iOS sekarang. Tapi saya agak bingung dengan komentarnya.

Untuk video HLS:

• iOS menyediakan saluran warna dalam urutan yang salah (bgra bukan rgba). Nilai-nilai sebaliknya benar sekalipun.
• macOS menghasilkan tekstur yang memerlukan membalik sumbu X. Ini dapat diatasi dengan menggunakan setPixelStorei(UNPACK_FLIP_Y_WEBGL, true)
• iOS menghasilkan tekstur yang memerlukan membalik sumbu X, tetapi solusi di atas tidak berhasil.

Apakah ini benar?

Jawabannya ada di tiket di atas.

Sebagai peringatan untuk kalian, tampaknya pembaruan iOS 10.3.3 terbaru memperbaiki masalah bgr , yang akan membuat solusinya ... bekerja sebaliknya. Saya tidak menggunakan three.js jadi untuk pertanyaan/triase apa pun, rujuk ke pengujian Anda sendiri atau pertanyaan SO.

Seperti yang diharapkan. cukup standar. Terima kasih atas perhatiannya.

Mereka harus melakukan hal yang benar dan memperbarui tiket yang saya buat dan dibiarkan terbuka dan basi. Untuk memperbarui semua pengembang jika ada perbaikan. Mereka belum. Jadi harus memeriksa versi minor sekarang?

IOS 11 seharusnya memiliki perbaikan CORS tetapi belum.

Saya berhasil mendapatkan xcode 9 beta. Itu tidak datang dengan simulator 10.3.3 hanya 10.3.1 dan 11. Saya menguji di 11 dan rgba terbalik tampaknya masih diperlukan. Saya seharusnya melihat layar hijau jika tidak atau tidak sama sekali. Saya harus menjalankan lebih banyak tes dengan menonaktifkan perbaikan.

Simulator IOS11 tidak berguna. Tidak ada simulator iOS 10.3.3. IOS11 tampaknya telah memperbaiki CORS.

Sekarang iOS 11 keluar ke publik, saya telah menjalankan beberapa tes dan saya tidak dapat menggunakan perbaikan di utas ini untuk iPhone iOS 11 (belum mencoba iPad).

Saya dapat membuatnya berfungsi (menggunakan peretasan CORS, FlipY, dan perbaikan warna) untuk iOS 10.3.3 di iPhone dan iPad dengan HLS.
Di iPhone iOS 11 saya memiliki layar hitam dengan HLS (menggunakan peretasan CORS, FlipY, dan perbaikan warna). Saya pikir ada hal lain yang harus diperbaiki, tetapi sejauh ini saya belum meletakkan jari saya di atasnya.

Mengenai masalah CORS, tampaknya telah meningkat di iOS 11 setidaknya untuk unduhan progresif MP4 tetapi saya tidak dapat mengonfirmasi untuk HLS karena hal di atas.

Jika seseorang lebih beruntung, harap perbarui:/

Saya mencoba yang terbaik untuk mendapatkan ipad baru bahkan untuk bisa mendapatkan IOS11.

Emulator tidak memiliki perbaikan jadi gagal.

Saya harus mengkonfirmasi jika saya harus melakukan counter hack di sana. Atau jika saluran warna rgb dapat dialihkan kembali.

Render hitam untuk HLS bukanlah awal yang baik dan hanya sabotase biasa yang akan memakan waktu bertahun-tahun untuk mengembalikan regresi. Itulah yang terjadi pada iOS9.

CORS seharusnya diperbaiki di IOS11 dan tidak memerlukan proxy

@danrossi Saya juga menghadapi masalah ini sekarang dengan iOS 11, jika Anda menemukan solusi untuk masalah ini, beri tahu saya. iOS 10 masih berfungsi dengan baik dengan perbaikan CORS dan Flip Y, tetapi iOS 11 hanya memutar audio..

Saya masih perlu mendapatkan ipad baru dengan IOS11. HLS bekerja di simulator beta IOS11? Ini mungkin terkait dengan CORS. Flip saluran rgb akan menampilkan warna terbalik. Jadi hitam mungkin terkait CORS ?

Saya telah mencoba tanpa proxy CORS saya dan dengan itu, dan saya masih memiliki masalah yang sama. Saya juga sudah mencoba tanpa Flip Y hanya untuk kepentingan itu, dan itu tidak mengubah apa pun. Hanya suara, tidak ada video :/

Masih ada masalah yang sama pada perangkat ios11, hanya suara, tidak ada video。 Siapapun telah memecahkan masalah ini？

Saya membuatnya bekerja dengan menggambar video ke kanvas 2D dan menggunakan kanvas 2D itu sebagai tekstur di webgl.

Saya tidak bisa mendapatkan tekstur kanvas 2D dengan benar di ios11， bisakah Anda memposting kodenya？

Itu adalah ide yang sangat buruk. Gambar kanvas membutuhkan prosesor yang intensif.

Saya telah memperbarui tiket webkit sehubungan dengan masalah ini. Mereka belum membahasnya sama sekali. Saya bahkan menyediakan pekerjaan saya dengan shader penuh dan kode sumber. Yang Anda klaim sekarang tidak berfungsi.

Saya tahu orang lain sedang mengalami masalah. Tapi saya belum bisa mengujinya dengan benar sampai saya mendapatkan perangkat baru yang sebenarnya. Simulator menunjukkannya dengan benar. telah bertemu dengan keusangan yang direncanakan di mana bahkan Iphone 5 tidak bisa mendapatkan IOS 11.

ini tiketnya lagi. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU di sini adalah contoh kode saya: https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (Buka HANYA di ios)
@danrossi benar, itu bukan solusi terbaik. Ini pada dasarnya melakukan memcopy array byte daripada mengikat pointer. namun, ia melakukan pekerjaan itu sementara apel mempertahankan proyek. Saya masih mengevaluasi pendekatan ini dan memiliki metode mundur mp4 yang siap digunakan juga.

Saya menghabiskan dua bulan penuh untuk menemukan solusi di atas dengan bantuan semua orang menyetel shader dengan baik, tentu saja, terima kasih. Itu hanya berarti lebih banyak waktu kita melawan mereka untuk menemukan pekerjaan lain.

Saya berharap ada satu.

Mereka tidak repot-repot mencoba dan memperbaiki masalah flipy / HLS / webgl sama sekali, Anda dapat melihat di tiket yang saya buat.

Mereka baru saja memperbaiki masalah CORS. Meskipun saya belum yakin apakah mereka berhasil membuat Dash berfungsi.

Apple / webkit adalah duri di sisi saya. Ini mungkin berarti saya harus pergi dan mencoba untuk memperbaikinya sendiri dan saya tidak melakukan c++. Akan sangat lucu jika saya memperbaikinya tetapi saya ingin menjaga rambut saya.

Dapatkah seseorang memposting kode mereka untuk saya lihat, hanya untuk memastikan FlipY diaktifkan/dinonaktifkan.

Lihat komentar saya di sini. Saya memiliki keberanian mutlak dari kekacauan sabotase ini. Menonaktifkan flipY pada tekstur seharusnya menampilkan gambar tetapi terbalik. Ini bingkai hitam di sini. Kembali ke awal. Mereka telah menyebabkan regresi yang menjadi masalah di IOS9.

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

Saya menutup tiket webkit asli yang bahkan tidak pernah dilihat atau ditangani. Dan memulai yang baru segera karena akan membutuhkan waktu untuk mengumpulkan bukti.

Ini telah melampaui masalah FlipY asli. Sepertinya mereka tidak pernah repot-repot memeriksa HLS bekerja dengan WebGL sebelum merilis OS.

Saya telah menutup tiket webkit asli untuk memulai yang baru khususnya tekstur video HLS dengan webgl benar-benar rusak tanpa kemungkinan penyelesaian. Pekerjaan FlipY asli tidak relevan lagi.

Saya telah menemukan semua tes kesesuaian webkit webgl menggunakan Mp4.

Mereka tidak pernah repot-repot menguji dengan format streaming milik Apple sendiri. Karenanya mengapa itu rusak dan masih rusak dengan pembaruan iOS 11 yang baru.

Lihat di sini untuk lebih lanjut

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

@danrossi Apakah Anda memiliki tautan ke tiket yang baru dibuka untuk webkit? Saya sendiri baru saja menemukan masalah ini di iOS11 dan ingin terus melacak perkembangan apa pun.

Saya mendanai sendiri pekerjaan mereka untuk mereka. Saya menjalankan tes kesesuaian dengan HLS yang dihasilkan dari file mp4 uji Khronos. Ia mengklaim lulus tetapi tes gagal membuktikan apakah itu menampilkan sesuatu. Kanvas bahkan tidak ditampilkan di sini. Sebenarnya saya bahkan tidak berpikir tes berfungsi dengan baik di iOS sama sekali. Tidak ada log.

Saya harus menggunakan file pengujian mereka sendiri untuk membuktikan bahwa tekstur HLS tidak berfungsi. Saya telah membuat file pengujian lain dan akan mengunggah untuk membuat tiket.

Saya berharap ada beberapa param webgl yang diperlukan atau yang lain yang perlu dinonaktifkan seperti terakhir kali.

Ok sejauh yang saya lihat dengan file uji webkit. Mereka tidak dirancang untuk pengujian IOS. Tidak ada fungsi klik pengguna untuk bermain. Mp4 untuk beberapa alasan dapat memutar otomatis yang saya temukan di iOS 11 meskipun tidak ada atribut yang ditentukan tetapi HLS tetap tidak bisa.

Saya tidak percaya ada tes yang dilakukan khusus untuk IOS dan yang paling pasti tidak ada tes yang dibuat untuk HLS.

Oleh karena itu masalah. Ini sangat buruk.

Saya memiliki apa yang saya butuhkan untuk menyerahkan tiket.

Sejauh yang saya bisa lihat. Tes webgl webkit cacat. Mereka tidak peduli dengan keluaran kanvas webgl. Mereka menggambar video ke kanvas sebagai output pratinjau dengan ukuran yang sangat kecil.

Mereka memiliki kanvas webgl tetapi ukurannya sangat kecil sehingga Anda bahkan tidak akan melihat apakah itu dirender atau tidak.

Saya harus memodifikasi tes untuk HLS dan tidak lulus. Dan sekarang saya telah meningkatkan ukuran kanvas webgl menjadi hitam.

Setelah saya memodifikasi kode untuk menambahkan klik pengguna, tes benar-benar mulai berjalan di iOS.

Sejauh yang saya lihat tidak ada pengujian yang pernah dilakukan untuk HLS dan pengujiannya cacat. Dan itu benar-benar menyabotase semua orang.

Ini dia. Saya benar-benar kehilangan kesabaran dengan Apple dan berapa banyak pekerjaan pribadi yang diperlukan untuk memperbaiki masalah mereka dan menjalankan tes untuk mereka.

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

Dua hari dan tidak ada urgensi untuk melihatnya. Saya menduga ini tidak akan pernah ditangani. Butuh bertahun-tahun, dan beberapa versi iOS dan peningkatan perangkat untuk diperbaiki CORS?

Saya akan mencoba dan bermain dengan flag webgl dan kode shader untuk melihat apakah ada yang bisa dilakukan.

Bisakah orang-orang pergi ke sana dan menimbulkan kebisingan. Karena masih belum terlihat. Sepertinya mereka sama sekali tidak peduli dengan pengujian HLS di browser mereka sendiri.

@jernoble dapatkah Anda menunjukkan siapa yang dapat membantu kami di tim webkit dalam masalah ini? Akan sangat dihargai jika seseorang dapat memeriksanya atau memberi kami pembaruan. Masalah di sini di GitHub cukup panjang tetapi telah diringkas di sini: https://bugs.webkit.org/show_bug.cgi?id=179417. Terima kasih sebelumnya.

Hai @radiantmediaplayer. Baik @grorg dan saya adalah orang yang tepat untuk melakukan ping pada masalah ini. Saya akan CC sendiri ke bug WebKit itu dan membuat Radar yang melacaknya.

Hai teman-teman. Saya memposting contoh solusi untuk iOS 11 menggunakan kanvas sementara seperti yang dijelaskan oleh @sorob . Anda dapat melihatnya bekerja di http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . Saya tidak terbiasa dengan Three.js, jadi ini hanya javascript biasa.

KanvasRenderer. yaitu rendering perangkat lunak. Tidak layak produksi.

Saya dengan @danrossi yang satu ini. Masalah kinerja selain mempertahankan 2 solusi lengkap yang berbeda untuk menampilkan konten HLS akan menjadi tidak praktis. Kita perlu memahami masalah webkit iOS. Tiket webkit baru menunjukkan aktivitas yang merupakan tanda positif. Semoga kami dapat menemukan sesuatu meskipun itu berarti menunggu iOS 11.*.

@danrossi Saya baru menyadari bahwa masalah ini sudah ditutup. Maukah Anda membukanya kembali?

Masalah baru ada di sini. Ini tidak terkait dengan Three.JS jadi saya kira disimpan untuk arsip.

Tingkat tes yang dibutuhkan sangat gila. Punggung saya patah seperti menemukan pekerjaan IOS10. lihat di sana.

Tidak ada yang berhasil sejauh ini. Seseorang akhirnya melihat dan tidak dalam kendali kita. Ada hubungannya dengan referensi bersama ke konteks untuk tekstur yang melihat HLS berbeda dengan Mp4 yang mungkin memperbaikinya. Sejauh yang saya kumpulkan tetapi mereka sebenarnya harus meluangkan waktu untuk melakukannya. Saya tidak memiliki sarana untuk mengatur lingkungan build seperti saya di Windows.

Tetapi melihat kode webkit menjelaskan, saya pikir mengapa IOS10 memiliki masalah warna yang aneh dengan HLS. Itu tidak menggunakan kode ruang warna. Karenanya kode untuk mengatasi kedua masalah di sana untuk IOS10/Safari.

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

Hai, yang di sana. Sepertinya saya sendiri harus memutar kembali dan mengimplementasikan penyaji kanvas untuk dukungan tekstur video IE11. Ini tidak bekerja dengan WebGL. Seseorang bertanya tentang hal itu.

Saya rasa pada tingkat yang diperlukan untuk dilihat, mungkin perlu sekitar 2 tahun untuk memperbaikinya.

IOS 11 harus menderita dengan rendering perangkat lunak yang saya pikir untuk HLS. Di tempat sampah, seluruh masalah IOS adalah untuk VR. Saya akan menerapkan ini sendiri.

@redgetan , ada ide bagaimana menerapkan dengan three.js ? Saya mencoba menggunakan CanvasRenderer dan saya mendapatkan bingkai mesh yang terlihat di atas tekstur dan tidak membuat spheregeometry dengan benar.

Demo kanvas tiga hanya menampilkan video 2D yang sedang dirender.

Maaf Anda menggunakan render webgl tetapi menggunakan kanvas sebagai sumber gambar tekstur. Melihat apakah saya bisa meniru itu. Itu tidak merender dan memutar dengan benar untuk saya saat menggunakan kanvas sebagai teksturnya.

ok untuk beberapa alasan saya harus melakukan ini.

Gunakan perender webgl seperti biasa. Tapi untuk tekstur kanvas dan gambar video saya harus mengatur dimensi

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

Ini sedang merender dengan benar sekarang. Akan menjalankan tes pada iOS 11.

@danrossi beri tahu kami bagaimana kelanjutannya di iOS 11. Saya mungkin benar-benar perlu menempuh jalan itu juga di beberapa titik.

OK tidak masalah. Saya akan segera menambahkan tes dasar dengan tampilan statistik fps online jika tampaknya berhasil. Mungkin butuh apa saja sekarang.

Apakah ada cara untuk memeriksa kinerja prosesor di iOS?

Saya telah membuat tes tekstur kanvas. Ini berfungsi tetapi video resolusi yang lebih besar mungkin membuatnya jatuh.

HLS ini berkualitas rendah sehingga tetap pada 40 fps. Resolusi mp4 yang lebih besar tetapi juga kualitas rendah tetap pada 30fps.

File resolusi produksi mungkin mendapatkan 10fps darinya. Ini untuk iPad baru.

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

Apakah masalah ini ada hubungannya dengan masalah yang saya hadapi di halaman ini sekarang: https://digitalejulegaver.firebaseapp.com/#catarina

Buka di browser safari Anda di mac, atau perangkat macOS. Ipad atau iphone tidak dapat menangani halaman yang satu ini meskipun di browser chrome atau mozilla.

Saya mendapatkan halaman hitam, tetapi di chrome normal di mac, itu berfungsi

@vongohren Anda perlu menggunakan pekerjaan FlipY yang saya temukan untuk HLS dengan macOS Safari dan shader yang kami kerjakan di tiket ini.

Namun saya baru saja kembali ke tiket webkit saya dan mereka mengklaim telah memperbaiki masalah FlipY untuk 10.13. Saya percaya ini adalah Sierra Tinggi. Tidak ada kesempatan untuk mengujinya bagi saya karena saya menggunakan macOS berbasis cloud.

Ini akan memerlukan pemeriksaan versi platform lain untuk tidak memerlukan pekerjaan FlipY untuk 10.13. jadi apa pun di bawah versi 13 akan membutuhkannya. Saya memiliki sekitar 4 platform yang berbeda dan pemeriksaan versi browser untuk macOS dan iOS untuk mengatasi banyak bug. Pemeriksaan IOS 11 adalah untuk mengaktifkan rendering tekstur perangkat lunak!

Jika Anda dapat memeriksa 10.13 ini mungkin bisa membantu.

Ini rincian semua tiket saya.

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 mendapat 10.13, tetapi Anda mendapat demo yang dapat diuji?

Versi three.js yang saya gunakan sekarang adalah versi baru untuk perbaikan ini, jadi tidak yakin di mana harus menerapkannya.
Saya menemukan sesuatu yang disebut data.flipY, dan menyetelnya ke false. Tetapi tidak melakukan apa pun untuk aplikasi saya.

Saya menggunakan three.js melalui perpustakaan ini: https://github.com/iberezansky/flip-book-jquery

masalah CORS?

Apakah ini bekerja?

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

atau ini

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

Daftar besar file pengujian saya ada di tiket itu.

FlipY dapat dinonaktifkan pada tekstur

texture.flipY = false;

Semuanya secara lokal jadi jangan lihat mengapa kor harus dilakukan. Tetapi kedua tautan itu hanya menampilkan warna hitam di safari dan chrome, di Mac 10.13

Dan fitur flipY, tidak berbuat banyak, daripada hanya membalikkan gambar. Tapi itu masih hitam

Kedengarannya seperti di 10.13 mengalami masalah yang sama dengan IOS 11 di mana pekerjaan FlipY rusak. Ini adalah informasi yang bagus. dan bug lain untuk dilaporkan. Ini sangat berantakan sehingga membuatku gila. Saya akan memperbarui ini di tiket iOS. di 10.12 bug FlipY perlu diatasi dan dibuat tiket terpisah untuk itu.

Jadi seperti di fitur VR saya sekarang. Anda harus melakukan pemeriksaan versi platform untuk IOS 11 dan 10.13 dan menyediakan mode tekstur kanvas rendering perangkat lunak untuk hls.

berikut adalah beberapa utilitas statis yang saya gunakan untuk pemeriksaan fitur terutama dukungan cors atau menggunakan sumber proxy cors. Jelas sekarang saya harus memeriksa versi yang lebih besar dari 13 untuk sementara mengaktifkan rendering perangkat lunak seperti IOS 11.

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;
    }

Anda telah melakukan beberapa pekerjaan hebat dalam hal ini, semoga tiket Anda beres :D

Berikut adalah tekstur kanvas bekerja di sekitar. Saya harus mengaktifkannya untuk iOS 11. Saya mungkin perlu melakukan pemeriksaan versi macOS 13 dan mengaktifkannya juga. jika menurut Anda pekerjaan flipY rusak untuk 10,13? Saya harus melaporkan kembali kepada mereka.

Anda tidak tahu, saya tidak mendapatkan manfaat apa pun darinya, didanai sendiri, selain membuat perangkat lunak semua orang termasuk fitur saya sendiri hampir tidak berfungsi di Apple OS haha.

Inilah integrasi penuh saya sekarang, ini berfungsi termasuk perbaikan apel dan penyelesaiannya. Saya sekarang memiliki dukungan video cubemap.

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

Ini telah berlangsung sejak saya pertama kali melaporkannya beberapa tahun yang lalu yang duduk di sana tanpa melakukan apa-apa!

Apakah ini Bekerja untukmu ?

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

Ketika Anda mengatakan di sini adalah tekstur kanvas bekerja, ke mana Anda menunjuk?

Flowplayer itu terlihat manis! Apakah itu melihat banyak penggunaan?

Apa yang harus saya lihat di tautan ini: http://dev.electroteque.org/webgl/three-canvas.html?
Saat saya membukanya di Chrome - Versi 63.0.3239.84 (Builan Resmi) (64-bit) - di macOS 10.13.1:
Saya melihat latar belakang hitam dengan pengukur FPS di sudut kiri, dan tombol bertuliskan aktifkan AR di tengah bawah
Ketika saya mengklik itu, saya mendapatkan layar terpisah, dengan roda pengaturan dan tombol kembali. Tapi kanvasnya sendiri hanya hitam.

Ketika saya membukanya di Safari Versi 11.0.1 (13604.3.5) di macOS 10.13.1:
Saya melihat video terbang dengan pengukur FPS di sudut kiri, dan tombol yang bertuliskan aktifkan AR di tengah bawah. Saya juga dapat menggulir untuk mendapatkan pengalaman 360 penuh.
Ketika saya mengklik tombol VR, saya mendapatkan layar terpisah, dengan roda pengaturan dan tombol kembali. Dan kanvas video, tetapi tidak dapat digulir, saya kira itu untuk dikendalikan oleh gyro.

Tetapi jika saya menekan tombol kembali dari mode VR, video macet dalam mode VR, dan saya tidak dapat menggulir lagi, dan macet pada tampilan mode VR dimulai.

Demo itu untuk rendering HLS di Safari. Jika menurut Anda demo perbaikan flipY tidak berfungsi di Safari

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

lalu harus menggunakan tekstur kanvas dengan 10.13 dan IOS 11 Safari?

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

Beri tahu saya di antara keduanya. Saya tidak peduli tentang kontrol rotasi hanya itu membuat dan bukan bingkai hitam.

Penting tentang 10.13 karena saya telah menambahkannya ke tiket webkit iOS 11 yang dirujuk di sini sekarang. Dengan asumsi itu adalah "regresi" yang benar-benar merusak rendering HLS sama sekali.

@danrossi keduanya berfungsi di safari, kualitas lebih tinggi dengan versi hls. Keduanya adalah arah yang benar jika Anda bertanya-tanya.

Tetapi tidak ada yang berfungsi di chrome.

OKE. bagus saya harus membatalkan pelaporan saya.

Jadi ini masih masalah kan?

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

Jika demikian, gunakan FlipY sebagai standar untuk macOS.

Demo HLS di halaman ini harus berfungsi untuk kedua browser. Ini akan menggunakan streaming mediasource untuk chrome dengan plugin hls. Ini juga memiliki pekerjaan FlipY untuk macOS.

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

Anda benar
http://dev.electroteque.org/webgl/three-hls.html
Ini tidak berfungsi untuk chrome atau safari

Flowplayer tautan, berfungsi untuk kedua browser

Terima kasih juara. Saya punya cukup info untuk memperbarui tiket lagi. Masalah macOS Safari berbeda dengan iOS 11.

Anda perlu menggunakan contoh tekstur kanvas untuk iOS 11.

Dan untuk macOS Safari, nonaktifkan FlipY pada tekstur dan balikkan posisi Y pada shader untuk memutarnya ke arah yang benar. Anda perlu melakukan inversi saluran warna pada shader fragmen untuk IOS 10 HLS juga. Kode shader ada di atas.

Jadi saya senang sekitar 1 jam pagi ini ketika saya berhasil memecahkan kasus iOS 11 dengan solusi di atas ( @danrossi saya mengambil inspirasi dari contoh Anda di http://dev.electroteque.org/webgl/three-canvas.html) ... tapi kemudian saya memakai kacamata saya dan merasa seperti es batu di bawah matahari gurun.

Ini adalah hasil yang saya dapatkan pada iPhone 6 Plus dengan iOS 11.2.1, animasi sebenarnya cukup halus tetapi polos jelek, pixelated, alias ...

Perilaku yang diharapkan adalah sebagai berikut (Nexus 5X dengan Android 8 dan Chrome terbaru - ini tidak menggunakan solusi di atas).

Kasus penggunaan kami adalah pemutar HTML5 360 dan dalam kedua sampel di atas video adalah umpan bitrate tunggal HLS yang sama http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8

Jika saya menerapkan solusinya (lihat di bawah untuk kode saya) ke Android, saya mendapatkan rendering jelek yang sama. Apakah ini yang seharusnya saya dapatkan dengan solusi baru ini atau apakah saya melewatkan sesuatu?
Saya mencoba bermain dengan beberapa pengaturan tetapi saya tidak melihat peningkatan yang berarti.

    // 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);

Saya sedang melakukan ini. Saya cukup yakin ini harus mengukurnya dengan benar.

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);
                });

Jadi saya memakukannya setelah sedikit menusuk. Tampaknya dalam konfigurasi kami kanvas off-dom harus berukuran tepat dari rendisi HLS saat ini yang sedang diputar agar dapat dirender dengan benar (karenanya untuk ABR perlu diperbarui setiap kali rendisi berubah). Pengujian kami menunjukkan ini berfungsi dengan baik untuk iOS 11 (ok lebih baik daripada tidak sama sekali). Meninggalkan ini di sini jika itu membantu orang lain.

Ya, maka saya melakukannya di acara loadata untuk mendapatkan lebar video. Saya menemukan ini sebelumnya dan itu memiliki masalah yang sama dengan Anda.

Namun untuk HLS asli tidak ada peristiwa ketika bitrate berubah? Saya hanya mengatur sekali secara pribadi. Jumlah pekerjaan di sekitar Apple sudah cukup luar biasa.

Tidak ada peristiwa, yang saya ketahui, disediakan oleh Safari yang dapat digunakan untuk mendeteksi perubahan rendisi untuk ABR HLS. Kami baru saja memperbarui lebar dan tinggi kanvas off-dom dengan video.videoWidth dan video.videoHeight pada setiap AnimationFrame (yang mungkin tidak ideal pada sudut pandang kinerja tetapi pada tahap ini kami telah bekerja dan kami akan menyelesaikannya sampai yang lain pilihan menjadi tersedia). Pengujian kami menunjukkan bahwa video.videoWidth dan video.videoHeight harus diperbarui sesuai saat rendisi baru ditampilkan.

Ya untuk apa itu layak itu cukup hacky. Jadi melakukan itu berlebihan terutama jika ada pernyataan kondisi dalam panggilan balik bingkai. Apa pun yang berhasil untuk saat ini, kurasa.

Mereka masih tidak dapat menyediakan acara perubahan rendisi. Saya percaya ada spesifikasi untuk satu tetapi tidak pernah diimplementasikan?

Proksi CORS untuk mengatasi bug Safari yang lebih lama, perbaikan sembrono HLS dan sekarang ini sudah cukup.

Senang itu semua bekerja. Saya belum melihat pembaruan di tiket saya selama sebulan atau lebih sekarang.

Saya tidak ingat pernah melihat sesuatu dalam spesifikasi video HTML5 tentang peristiwa peralihan kualitas. Ada spesifikasi HLS yang dikelola Apple tetapi tidak menjelaskan apa yang harus dilakukan oleh klien saat terjadi peralihan kualitas. Libs seperti hls.js telah menerapkan ini tetapi ini tidak tersedia untuk HLS ke video HTML5 asli di Safari.

Saya baru menyadari bahwa saya dapat "mengisi ulang" peretasan kami untuk mendeteksi perubahan dalam rendisi dengan menanyakan video.videoWidth pada interval tetap dan ketika perubahan terdeteksi, panggil panggilan balik pengubahan ukuran. Ini akan lebih sedikit membebani. Saya mungkin akan menerapkan ini pada tahap selanjutnya di pemutar kami.

@radiantmediaplayer Anda harus dapat menggunakan acara "resize" untuk mendeteksi perubahan pada properti .videoWidth dan .videoHeight yang mendasarinya.

Hai guys lihat komentar saya di sini. Bekerja.

Sungguh suatu cobaan yang membuat tes, dan melalui gerakan. Hanya untuk tidak mendapatkan umpan balik atau tanggapan yang tepat. Aku serius selesai! Tolong jangan ada regresi lagi!!

Instal OSX 11.3 beta dan itu akan berhasil. OSX 11 sebelumnya membutuhkan rendering perangkat lunak, OSX 10 membutuhkan flipY dan perbaikan warna. Diperlukan kekacauan kompatibilitas yang rumit dan deteksi versi platform.

Safari macOS masih memiliki masalah FlipY dan saya juga tidak mendapat tanggapan di sana, itu dalam tiket terpisah. Saya tidak dapat menguji HLS dengan benar di sana sampai saya dapat mencoba dan menginstal macOS di workstation pc saya. HLS diblokir agar tidak diputar di vmware.

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

Pekerjaan FlipY juga tidak diperlukan untuk OSX 11.3 tapi saya rasa saya sudah menyebutkannya sebelumnya.

Ini adalah pemeriksaan kompatibilitas IOS dan Safari lengkap saya sekarang dimulai dengan CORS.

Pikiran kacau. Yang ini gila. Saya bahkan harus membuktikan di masa depan dan memasukkan apa pun selain iOS 12.

Ini bekerja pada integrasi! Belum dapat memeriksa apa yang terjadi dengan 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;
    }

Penggunaan

 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;
          }

        }
    }

Koreksi satu poin penting terakhir. Implementasi rendering HLS IOS berjalan dengan sedikit uang dan sangat sensitif. Render harus dimulai setelah loadingata.

Segera setelah mencapai kesalahan teximage2d , tidak ada rendering lebih lanjut yang terjadi, hanya rendering hitam, sepertinya perbaikan tidak pernah terjadi.

Jika rendering dimulai segera setelah ada data video, tidak apa-apa. Itu tidak masalah sebelum 11.3.

Sepertinya video berfungsi kembali (tanpa perbaikan kanvas sementara). Diverifikasi untuk ios versi 11.3 terbaru (diuji pada iphone 6s, 7).

Ya saya pikir saya diperbarui pada 15 Februari. Bekerja lagi di 11.3. Saya tidak pernah mendapat pembaruan. Saya harus secara khusus memeriksa kembali dan itu berhasil!

Kami memperbaiki banyak masalah dengan video -> tekstur di iOS 11.3 (dan rilis macOS yang setara). Maaf jika kami tidak menutup/memperbarui bug.

Beri tahu saya jika Anda masih mengalami masalah. Saya percaya bahwa aliran langsung (mis. mp4) dan Aliran Langsung HTTP harus berfungsi, dan flipy harus dicerminkan secara akurat.

Itu semua dilakukan dari Februari ketika dilaporkan. Tapi saya awalnya melaporkan tahun lalu kapan-kapan. Saya secara acak memperbarui beta IOS ke 11.3 dan itu mulai berfungsi. Kode pemeriksaan kompatibilitas di atas diperlukan untuk menangani beberapa pekerjaan platform.

IOS 10 membutuhkan perbaikan flipY. IOS 11.0 - 11.2 membutuhkan pekerjaan rendering perangkat lunak. 11.3 > dapat dirender seperti biasa.

Adakah yang bisa membagikan sampel yang berfungsi untuk ini, jsfiddle atau lebih? Saya masih bisa melihat layar hitam di iOS 11 Safari. Saya dapat mendengar audio tetapi tidak ada video untuk streaming HLS

@dhanishapa Apa versi iOS Anda? Apakah 11.3+?

Beberapa saat yang lalu (~ Mei 2018) saya juga mengalami masalah berikut dengan HLS (? <= 11.2):

• Segmen video terkadang berulang selama pemutaran
• Video terkadang berhenti dan menampilkan layar hitam
• Video buffer tetapi audio terus berlanjut

Setelah melakukan kontak dengan Vimeo (saya menggunakan layanan HLS mereka), mereka dapat menghubungi tim pengembangan Apple dan bekerja sama dalam perbaikan.

Kami baru saja menerima kabar dari tim pengembangan Apple bahwa versi baru iOS (11.3.1) telah dirilis, yang mencakup perbaikan untuk masalah pemutaran yang Anda laporkan. Perbaikan harus mencegah video berhenti di layar hitam, mengulangi segmen video, atau terjebak dalam status pemuatan tanpa akhir.

Saya perhatikan bahwa ketika saya menyediakan MP4 yang disandikan H264 sebagai sumber selama mengunggah, masalah pemutaran hilang pada versi iOS yang lebih rendah dari 11.3.1. Saya mengalami masalah saat menggunakan Quicktime sebagai format input saat mengunggah.

Saya melihat beberapa perbedaan antara manifes yang dihasilkan oleh setiap file video (codec video yaitu "avc1.64001E,mp4a.40.2" untuk yang berfungsi versus "hvc1.2.4.L63.90,mp4a.40.2" untuk yang tidak berfungsi ).

Mungkin informasi ini berguna bagi siapa saja.

Hai
Saya mengalami masalah dengan streaming HLS di safari IOS.
Saya menggunakan proksi cors. Saya mencoba menggunakan pemutar hls asli dan pemutar html5 dan bahkan baru saja mencoba memainkan tautan m3u8 langsung di iOS tetapi tidak berhasil, sementara itu berfungsi di safari (desktop - mac), chrome, firefox, hanya saja tidak di iOS (iphone)

cors telah diperbaiki di IOS 11.0. Perbaikan besar lainnya yang saya lakukan adalah di 11.3. 11.3 harus keluar sekarang. Proxy hanya diperlukan untuk iOS 10 dan 9.

Ini bekerja untuk saya ️

Berikut adalah demo Glitch dari aliran HLS yang dipetakan ke bola ( video 360 oleh playhouse-vr ).

Diuji pada macOS v10.13.4 + Safari v11.1 dan iOS 11.4.1 + Safari

Saya melihat masalah layar hitam BARU sekarang di iOS 14.0 Safari dan iPadOS 14.0 Safari. Pemutar yang sama persis bekerja dengan iOS 13.7 Safari dan iPadOS 13.7 Safari. Saya mencoba memperbarui ke three.js r120 (dari r116) tetapi tidak berhasil. macOS Safari 14 baik-baik saja. Apakah ada yang melihat hal yang sama? Adakah petunjuk tentang apa langkah selanjutnya untuk mendukung iOS 14?

Ya, periksa https://bugs.webkit.org/show_bug.cgi?id=215908 dan https://bugs.webkit.org/show_bug.cgi?id=216250 untuk regresi iOS 14. Semoga keduanya dapat ditangani dengan cepat karena banyak situs yang kemungkinan terkena dampak.

Ini adalah pertempuran tanpa akhir dengan Safari. Saya mengharapkan keluhan lagi untuk fitur 360 saya sendiri. Dibutuhkan waktu berbulan-bulan setiap kali untuk memperbaikinya. Saya menemukan pekerjaan asli di sekitar di atas. Jadi waktu untuk menemukan lebih banyak solusi!! Webkit tidak menguji HLS, mereka tidak memiliki tes HLS untuk WebGL. Saya harus membuatnya sendiri.

Saya menghapus semua pekerjaan yang membengkak untuk iOS yang berbeda di fitur saya. Tapi salah satunya harus menggunakan rendering software kanvas untuk 11.0 ... Saya masih harus melakukan pemeriksaan platform. Dengan iOS 13 mereka telah merusak pemeriksaan platform sekarang. Saya harus memperbaikinya di proyek kardus. Saya menemukan HLS tidak segera merender dan membutuhkan beberapa saat di IOS 13 tetapi harus meninjau kembali bagaimana saya memperbaiki masalah itu.

Mereka hanya tidak peduli. Tidak ada api WebXR, tidak ada api Wakelock seperti Android yang baru saja diimplementasikan.

menurut pekerjaan saya, saya harus mengkonfigurasi ulang pada perubahan rendisi. Dan nonaktifkan zoom pada kontrol orbit. Ini menghentikan rendering hitam di IOS 13. IOS 14 harus memeriksa.

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

Saya telah menguji 14.2. HLS Oke. Perbaiki di atas akan melakukannya ...