Three.js: HLS sur Safari / IOS ne fonctionne plus

Il dessine sur la toile et rend avec le moteur de rendu de la toile, bien que la suppression des images. Quelque chose est requis avec webgl.

C'est une beauté. J'ai un peu modifié une démo de kpano avec le flux HLS proxy.

Il fonctionne maintenant sur Safari OSX mais pas sur IOS 9. Avez-vous une idée de la différence ? Je ne suis malheureusement pas un expert des drapeaux webgl ou de ce qu'ils font même. Sur IOS9, c'est toujours un cadre noir.

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

ce dernier lien est noir rect / son uniquement dans safari 9.1.3 / mac os x 10.11.6

Qu'est-ce que HLS ?

@makc vraiment ? J'ai OSX 10.10 et Safari 10. Cela explique le récent sabotage d'Apple. Safari 10. Donc, si nous sommes Safari 10, nous sommes tous bons.

@mrdoob HLS = Streaming Apple. c'est-à-dire pour les flux en direct mais aussi la VOD. La diffusion en direct va devenir une norme avec l'équipement Terradeck. c'est-à-dire http://dev.electroteque.org/video/360/hls/ultra_light_flight.m3u8

Avez-vous des idées sur les différences possibles ? J'ai essayé de changer certaines choses dans le premier exemple. Le deuxième exemple concerne les fonctions webgl brutes.

donc texImage2D rendra partiellement HLS mais pas encore sur IOS peut-être parce que ce n'est pas Safari 10 ?

Veuillez m'excuser, j'ai signalé quelques tickets de bogue webkit.

Ils sont allés saboter le piratage du proxy CORS sur une mise à jour IOS. macOS n'aurait pas non plus résolu le problème CORS dans Safari.

Je dois maintenant trouver comment contourner leur sabotage. Je dois faire en sorte que cela fonctionne pour tester davantage le fonctionnement de HLS sur IOS. Apple me fait sérieusement transpirer pour éteindre leurs incendies hahah.

Si je peux obtenir un rendu OSX, ce serait un début. J'ai juste besoin de comprendre ce qui est différent dans three.js ?

J'essaie toujours de faire des méthodes de réduction pour comparer ce qui est différent. Une fois que j'aurai compris cela, il se peut que l'IOS fonctionne aussi.

Peut-être que les programmes de shader supplémentaires dans three.js causent des problèmes de rendu ? Je ne le connais pas, mais j'essaie de reproduire dans l'exemple webgl brut ce que three.js fait dans cet exemple équirectangulaire. Existe-t-il un exemple de code shader pour cela ?

J'ai trouvé ici quelques fonctions brutes qui, espérons-le, pourront reproduire pleinement ce que fait three.js. Je ne peux pas simplement copier les programmes de shader directement car certaines variables sont définies en externe comme la position mondiale.

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

Je viens peut-être de rencontrer ce problème ou peut-être un problème connexe. J'ai des fichiers h264 mp4 situés sur un compartiment S3 et je les charge dans un fichier video.src en tant que blob.

Si je télécharge sur mon compartiment S3 à l'aide du téléchargeur Web Amazon, les vidéos sont lues correctement lorsqu'elles sont directement chargées dans Mobile Safari (iOS 10.0.1), mais si j'essaie de les lire à l'aide de ma visionneuse three.js, j'obtiens juste un écran noir. Cependant, si je télécharge dans le compartiment S3 avec Cyberduck, ils jouent bien directement dans Mobile Safari et dans three.js.

Il semble que Cyberduck définisse les métadonnées 'Content-Type=video/mp4' et le téléchargeur AWS est 'Content-Type=application/octet-stream'. Lorsque je définis manuellement ces métadonnées sur vidéo/mp4, tout fonctionne correctement.

Problème étrange, et qui m'a causé beaucoup de grattage de la tête. Faites-moi savoir s'il s'agit du même problème sous-jacent que ce ticket, ou si je dois en créer un nouveau.

Merci,
Dustin

Ceci est pour HLS mate comme dans les fragments mpegts ou les fichiers fragmentés et non mp4. Mp4 est bien sur Safari et IOS. J'ai vérifié le type mime dans cyberduck et il indique que les mpegts sont corrects.

Le même flux fonctionne pour moi dans l'exemple webgl brut, mais pas sur IOS bien sûr. Votre problème semble similaire au mien, comme dans un cadre noir. Aucun rendu du tout.

@danrossi ok cool. Je vais créer un nouveau ticket spécifiquement pour mon problème. Merci.

Je pense que c'est le problème : www.krpano.com/ios/bugs/ios10-webgl-video-texture-crash/
J'essaie actuellement d'implémenter la même solution de contournement pour three.js, mais je ne vais pas très loin.

@première phase. C'est un problème de safari à la fois sur OSX et IOS. Mp4 fonctionne très bien pour IOS et OSX. Je vais bricoler avec l'antialias.

Je n'arrive toujours pas à comprendre les différences entre les deux. L'exemple webgl brut ne fonctionnera toujours pas sur IOS, mais le faire fonctionner sur OSX est un début.

Je me demande si je peux trouver un programme de shader équirectangle fonctionnel dans lequel je peux déposer.

Plus d'informations ici : http://stackoverflow.com/questions/39123109/rendering-a-video-with-webgl-in-ios-10-beta-7-safari-shows-weird-purplish-co.

Je me rends compte qu'il s'agit d'un bogue du navigateur, mais la mise en œuvre d'une solution de contournement peut être nécessaire compte tenu du temps que ces bogues WebGL prennent pour être corrigés.

Dans le cas d'utiliser la texture à travers la toile, la vidéo a été affichée en safari.
Cependant, comme il y a toujours des problèmes CORS dans iOS, cela ne fonctionnait que dans la même origine.
https://bugs.webkit.org/show_bug.cgi?id=135379

Je ne connais pas le webgl, mais veuillez vous référer à ce qui suit.
https://github.com/NishimuraT/videojs-panorama/commit/bd99200d8831c7ad0d10d742e087953da0f44169

@NishimuraT Je pense que je sais ce que vous voulez dire, utilisez le canavasrender. J'ai essayé cela pour faire la méthode de réduction.

Je pense que cela fonctionnait, mais cela entraînait de graves pertes d'images et des problèmes de performances de lecture en raison du processeur. Évidemment pire sur IOS. Ipad 3 supprime déjà les cadres pour webgl.

@danrossi j'ai eu un petit malentendu. Je suis désolé. J'avais envoyé une chose malavisée.

J'ai confirmé le même problème avec le projet elevr qui utilise raw webgl et shaders. Je devrai pirater celui-ci pour revenir en arrière. Quelque chose là-dedans cause des problèmes de rendu et affecterait le même fichier three.js.

J'ai confirmé dans elevr qu'il efface automatiquement la liaison de la texture qui la fait casser, c'est-à-dire

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

Si cela est commenté, cela fonctionne.

Cela posait également un problème, je ne sais pas à quoi cela sert.

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

Peut-être existe-t-il une propriété d'effacement automatique qui fait la même chose dans three.js ?

Je vois de nombreuses références à

state.bindTexture(_gl.TEXTURE_2D, null);

Mais je ne sais pas où cela pourrait être. Est-ce obligatoire de le faire ?

le code est trop fou pour trouver la cause du problème de dessin de texture. Semble avoir quelque chose avec cette liaison de texture.

@danrossi existe-t-il une page qui le rend correctement ?

Désolé pour le bruit mate. J'ai fait plus de tests AB. C'est en effet ce que j'ai mentionné, car je devais également le commenter pour la démo d'elevr.

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

C'est ce qui cause le problème. Cependant, sans elle, la texture est à l'envers. Je vais ajouter un autre test pour montrer qu'il fonctionne maintenant.

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

Un autre exemple brut que j'ai trouvé, a commenté FLIP_Y. Bug Webkit possible maintenant ?

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

La seule référence à flipY est la suivante, mais webkit nightly pose toujours problème

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

Si je désactive flipY, ce qui, je suppose, interrompt l'accélération matérielle, cela fonctionne-t-il ?

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

Essayer de voir s'il s'agit d'un bug du kit Web maintenant. Comment est-il possible de faire pivoter la texture pour la contourner pour l'instant ?

Comment est-il possible de faire pivoter la texture pour la contourner pour l'instant ?

pourquoi ne pas simplement retourner la géométrie uv ou le faire dans le shader

@makc, je ne sais pas comment m'y prendre.

Juste pour aller plus loin. Ce "correctif" FlipY n'aide pas sur IOS 9, je viens de le tester.

Quelque chose d'autre est un problème là-bas maintenant. Il a fallu des jours pour retrouver celui-ci.

Il se peut que tout le problème de webkit ne soit pas Three.JS à première vue. Comme d'habitude désolé pour ça.

J'ai déposé un rapport là aussi https://bugs.webkit.org/show_bug.cgi?id=163866

Je n'ai aucune idée de comment m'y prendre.

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

@makc confirmant que le retournement de l'uv aide. Comment l'inverse-t-il avec cela?

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

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

Problème toujours évident sur IOS cependant.

@makc. Il est tout à fait possible que ce programme de shader fasse le flip, c'était dans l'une des sources de démonstration.

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

Il se trouve dans la démo originale qui semblait fonctionner car il n'utilise pas le drapeau FlipY, il semble le faire dans le programme shader.

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

Aucune idée de comment l'intégrer dans three.js ? Serait-il préférable d'utiliser un programme shader ?

Je suis toujours en train de déboguer IOS maintenant.

Celui-ci est intéressant. En essayant de reproduire ce calcul dans cet exemple, il semble le retourner mais le redimensionne encore mal.

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

Donc gl_Position contrôle sa position.

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

Serait-il préférable d'utiliser un programme shader ?

le programme shader est exécuté une fois par image, au lieu de retourner les uvs dans la géométrie une seule fois avant que tout ne commence.

@makc vaut probablement mieux simplement définir les valeurs au début. Si j'ai raison, ces valeurs uv sont des variables dans le programme shader et utilisées dans le calcul ?

Je vois dans les sources quelques références à gl_Position. Je ne sais pas si c'est le bon mais il y en a un comme ça

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

Merci.

J'ai essayé toutes sortes d'astuces avec webgl sur IOS Safari pour voir si je peux obtenir une image à rendre et elle est juste noire pour le moment. Mp4 est bien.

Pas beaucoup de ressources à ce sujet. Je crois que ma découverte que les gens recherchent aussi. C'est pour le streaming en direct mais aussi pour la VOD.

J'ai demandé à quelqu'un de tester certaines choses. Ils pensent que cet exemple webgl brut avec le correctif FLIPY fonctionne sur IOS 10, mais la version three.js ne plante pas sur eux.

J'ai remarqué qu'il utilisait le filtre LE PLUS PROCHE qui rend la texture en blocs, j'ai essayé de reproduire cela mais même problème pour eux.

donc ni l'un ni l'autre de ces travaux

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

Mais c'est pour eux bien que IOS 9 pour moi ne fonctionne pas

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

Après quelques tests très lourds et douloureux, j'ai affiné les démos et le problème.

La solution de contournement FlipY est requise pour HLS sur OSX 10.11 et macOS, IOS 9 et 10. L'exemple webgl brut n'utilise pas FlipY car il est intégré au programme de shader. Avec three.js, la géométrie doit être inversée.

Le rendu HLS sur IOS 10 s'affiche mais présente de graves problèmes d'artefacts de couleur. Les cadres cessent de fonctionner, mais je pense que c'est un problème avec l'émulateur et la chute des cadres. Je n'ai maintenant aucun appareil pouvant être mis à jour vers IOS 10. Il ne s'affiche pas du tout sur IOS 9. Les deux nécessitent le proxy CORS pour mp4 et HLS.

Je devrai peut-être maintenant fournir un autre ticket concernant le problème de rendu des couleurs avec HLS sur IOS 10 une fois que j'aurai confirmé qu'il ne s'agissait pas de l'émulateur.

C'est absolument douloureux, pas étonnant que personne ne veuille prendre en charge Safari, mais les gens ont besoin que cela fonctionne.

J'ai dû fournir ici différents paramètres de format RVB. La valeur par défaut produit des barres de couleur verticales, la rgba les couleurs sont incorrectes. Mais dans l'émulateur. Je ne parviens plus à tester correctement IOS 10 car mon appareil Ipad n'est plus pris en charge. Je vais essayer de me procurer un Iphone avec IOS 10 pour confirmer.

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

Veuillez vous concentrer sur ces deux exemples. les drapeaux RVB ne font aucune différence sur un appareil réel, le simulateur produit une sortie défectueuse mais une sortie similaire lors de l'utilisation du format RGBA.

Le contournement de FlipY est requis pour IOS 9/10/OSX Safari avec HLS.

J'ai pu reproduire un problème de couleur avec le rendu HLS webGL qui a maintenant besoin d'un deuxième ticket bien que je ne sois pas sûr qu'un bogue Webkit flakey soit un problème de three.js.

Autant de défauts et de bugs massifs qui en font un obstacle au spectacle.

Ainsi, une telle sortie Webgl HLS ne fonctionne que partiellement sur IOS 10 et non sur IOS 9. De nombreux périphériques sont bloqués sur 9 maintenant. J'ai besoin de trouver un boulot pour 9.

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

Salut! J'ai le même problème. Avez-vous une solution maintenant ?

oui, c'est dans ces démos, mais vérifiez le deuxième ticket concernant un problème d'espace colorimétrique avec IOS 10. Il semble qu'il n'y aura aucun effort de la part de Webkit / Apple pour le faire fonctionner sur IOS 9, ce qui signifie que les appareils plus anciens comme l'Ipad 3 sont laissés de côté bien que il pouvait à peine rendre 5fps de toute façon. Je dois d'abord me concentrer pour faire fonctionner IOS 10.

C'est une solution de contournement à ce problème qui a été signalée à Webkit. C'est un problème sur tous les Safari.

http://dev.electroteque.org/webgl/webgl.html semble ne pas fonctionner. J'ai testé la page sur ios10. Mais safari crash lors du chargement de la page.

Utilisez l'exemple threejs.

J'ai testé tous les exemples répertoriés sur ce problème. Il semble que seul http://dev.electroteque.org/webgl/webglrgba.html fonctionne. Mais il a un problème d'espace colorimétrique.

@wuyingfengsui cela fonctionne sur IOS 10 Iphone.

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

Vous vérifiez probablement sur un simulateur, je parie. C'est un énorme problème. Non seulement il ne mettra pas à jour le cadre, il affiche des barres de couleur vertes. Cependant, lorsque vous utilisez le drapeau RGBA, cela fonctionnera sur un simulateur. Il y a un problème graphique étrange.

Sur un IDevice réel, vous verrez le problème d'espace de couleur lors de l'utilisation du drapeau RVB comme vous le faites avec le drapeau RVBA dans le simulateur !

Je suis poussé à tester correctement IOS 10 pour l'instant car l'Ipad 3 est devenu obsolète mais heureusement, j'avais accès à un Iphone.

Notez également l'URL du proxy CORS.

Référez-vous à ceci concernant le problème de l'espace colorimétrique maintenant

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

et ce ticket de kit Web dont je doute qu'ils prennent jamais la peine de le réparer et de faire pousser une version.

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

Je trouve que cela fonctionne lorsque je change de RGB en RGBA sur ios 10 iphone 7.

ok donc c'est différent pour différents appareils sympa. Je l'ai mis à jour en RGBA. Comment c'est ?

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

@danrossi Ça marche.

@wuyingfengsui Je devrai mettre à jour le ticket du

Vous pouvez voir dans les constantes three.js qu'il existe une plage de valeurs avec lesquelles jouer. c'est-à-dire ceux-ci. Il existe également des indicateurs de type d'octet qui sont gérés. Essais et erreurs et essais et erreurs très fatigants.

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

Donc, malheureusement, IOS 9 a été rendu complètement redondant avec cela, cela ne fonctionnera pas. Les appareils plus anciens n'auront jamais IOS 10.

Je crois qu'il y a une sorte de sabotage en cours et je pense que cela fonctionnait avant la sortie de Safari 10 ? ma phase de test a pris des mois à cause de toutes les incohérences avec Apple et parfois Android. Je suis assez certain que lorsque j'ai testé HLS, cela fonctionnait.

Je ne connais pas WebGL. Je pense que cela ne peut pas être résolu tant que le webkit ne le résout pas.

C'est ce qui télécharge la texture sur webgl. ces drapeaux là-dedans sont intéressants.

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

@wuyingfengsui s'il leur a fallu plus de 5 ans pour "réparer" partiellement le problème CORS dans macOS, ne retenez pas votre souffle.

C'est pourquoi quelqu'un doit s'asseoir là et trouver des solutions de contournement et, malheureusement, c'est moi-même hahah.

Si vous prenez l'exemple brut de webgl, ces indicateurs peuvent être modifiés. Ou faites-le via three.js en utilisant les constantes et les propriétés "format" et "type", le type est le type d'octet, le format est le format de couleur que vous avez vu que RGBA est nécessaire pour le faire fonctionner à peine.

Je vais passer un peu de temps demain pour passer en revue chaque drapeau et j'espère qu'une combinaison fonctionnera.

@danrossi Comment ça va ?

J'ai juste essayé de jouer avec tous les drapeaux possibles et rien. Il ne peut accepter que les drapeaux RVB et RVBA et le type d'octet n'est pas signé. D'autres options affichaient simplement une toile noire. Je ne sais pas quoi faire d'autre ?

@danrossi Merci pour votre travail. Je trouve que Hls.js lit la vidéo

@wuyingfengsui c'est un problème HLS natif avec IOS maintenant, mes correctifs ci-dessus fonctionnent autour du bogue pour Safari OSX.

avec le streaming Dash, l'ancien Safari avait des problèmes CORS même avec le contournement du proxy. Peut-être que dans macOS, ils ont également corrigé cela ?

Il n'y a peut-être rien d'autre à faire que de fournir une méthode de contournement dans three.js en utilisant les correctifs de code ci-dessus.

Je doute que Webkit et Apple le répare un jour. Alors tous les yeux sur ce billet maintenant. le truc du drapeau RVB est maintenant lié au rendu IOS 10. IOS 9 et les appareils plus anciens piégés dessus sont bourrés.

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

Des mises à jour ici ? Est-ce que quelqu'un l'a fait fonctionner avec un rendu des couleurs fixe sur iOS ?

Veuillez vous référer à ce billet.

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

Je doute que le travail HLS aille dans three.js, il doit sortir.

Le code pour cette solution de contournement est le suivant

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

Si vous souhaitez jouer avec les drapeaux webgl, utilisez l'exemple webgl brut. J'ai essayé toutes les options possibles et rien pour le moment. C'est bel et bien saboté et aucune réponse de webkit.

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

Merci. Existe-t-il d'autres formats vidéo à diffuser sur le drapeau vidéo iOS en plus de HLS ? Est-il possible de diffuser du H.264 sans problèmes de rendu ?

@pedrofranceschi mp4 va bien. C'est juste HLS qui propose des options pour la diffusion en direct de vidéos 360 sur IOS.

Le correctif flipY lié à ce ticket doit être appliqué aux flux HLS et sur Safari uniquement. Ce correctif FlipY ne fonctionne pas sur IOS 9 qui ferme les appareils plus anciens qui ne peuvent pas obtenir IOS 10.

Mon Ipad 3 que j'utilise pour les tests ne fera jamais fonctionner HLS et WebGl. J'ai dû tester sur un Iphone plus récent. Le simulateur IOS 10 fonctionnait à peine et présentait des problèmes d'artefacts de couleur similaires à l'autre problème.

Au moins, les drapeaux en ligne pour Iphone sur IOS 10 ont fonctionné, la vidéo en ligne et le webgl sont désormais possibles, mais CORS reste un problème. CORS n'est corrigé que dans Safari sur macOS.

Je n'insiste sur Safari que car il s'agit d'un autre bug classique du kit Web et que le streaming HLS.JS sur d'autres navigateurs est correct.

J'ai trouvé que cela pouvait être corrigé en ajoutant une toile supplémentaire. Mais cela ne fonctionne que sur iOS 10. Regardez ce commit : https://github.com/yanwsh/videojs-panorama/commit/0122b1bbd31093b77ca7f09900afa74e2c537037

C'était un non-événement. Il utilise le rendu canvas avec drawImage. Pas WebGL. Comme si vous utilisiez le moteur de rendu canvas three.js. Le moteur de rendu Canvas est vraiment nul sur IOS, ce qui provoque des pertes d'images, inutilisables. Est-ce votre solution ?

La qualité n'est pas très bonne. Mais ça marche :)

La chute des images est plus qu'un problème de qualité :)

@mrdoob J'ai essayé le moteur de rendu

Il supprime toujours les images en faisant cela.

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

@danrossi

@mrdoob Ce problème concerne HLS sur Safari. C'est vraiment difficile de faire toutes ces démos. Mais j'ai fait quelques combinaisons.

Je viens également de découvrir que Chrome refuse de lire le mp4 maintenant à moins qu'il n'utilise la version proxy Safari CORS du mp4 ahh.

En ce qui concerne l'étrange problème de CanvasRenderer, qui peut résoudre temporairement le problème HLS pour IOS 10. Voici des combinaisons afin de montrer ce qu'il fait et d'étranges décalages de valeurs de rotation possibles. Le code est le même. Il y a une grille de maillage sur la texture.

Pour Safari

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

Pour Chrome

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

@danrossi La version Safari ne fonctionne pas non plus sur iOS 10…

Cela devrait fonctionner sur IOS 10 mais vous devriez voir des artefacts de couleur.

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

Ces autres sont des tests CanvasRenderer pour essayer de contourner le problème IOS, il devrait au moins fonctionner sur les navigateurs de bureau et ne l'est pas.

Cela devrait fonctionner sur n'importe quel IOS, mais je ne suis pas trop préoccupé par celui-ci.

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

Je ne pense pas que la solution CanvasRender soit une bonne solution pour IOS, mais c'est une option. Parce que non seulement il a toujours besoin du proxy CORS, le dessin sur toile ne fera que provoquer la perte d'images. Safari OSX peut utiliser le contournement de FlipY dans threejs-hls.html

J'ai mis à jour les démos de canevas, il ne semble pas qu'il faille dessiner en externe.

Cependant, il y a un problème étrange avec la géométrie de la sphère que je ne peux pas comprendre, donc l'image ne s'affiche pas ou ne tourne pas correctement, tout est biaisé en un point.

Cliquez sur la zone en haut à gauche et essayez de faire glisser avec les commandes d'orbite.

Le problème du maillage est que je dois ajouter "overdraw: 0.5" au MeshBasicMaterial pour l'empêcher d'afficher le maillage.

Ni l'un ni l'autre n'exigent des proxys CORS sur safari lors de l'utilisation de CanvasRenderer. Je vais essayer de regarder SoftwareRenderer ensuite pour voir si cela fonctionnera mieux car CanvasRenderer supprime trop d'images.

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

Considérant que CanvasRenderer a été marqué comme déprécié en raison de la chute évidente des images. Je suppose que le seul dernier recours est d'essayer les textures vidéo avec SoftwareRenderer. Ce changement ne semble pas encore fonctionner et je ne trouve pas d'exemple de configuration. C'est juste une toile noire.

Des solutions de contournement pour le problème de couleur? Tout est bleuté

@andreabadesso J'ai configuré deux tickets, je devrais peut-être les fusionner.

Pour OSX, le contournement de FlipY résoudra ce problème désagréable. Pour IOS 10 , autre chose est entièrement requis.

Le dessin sur toile est un énorme échec, il n'est même pas rendu correctement hors de la boîte, la gémologie est déformée, semble-t-il. Il laisse tomber des cadres aussi.

Je tente maintenant ma chance avec "SoftwareRenderer" qui repose toujours sur le dessin sur toile. Tout ce que je reçois est une toile noire pour le moment donc rien. Il n'y a aucune documentation sur la façon de faire fonctionner les textures vidéo avec.

Il n'y a tout simplement pas d'autre option, webkit ne répondra pas et j'ai essayé tous les drapeaux webgl possibles. Je pourrais revenir en arrière et essayer de jouer avec les encodages, mais le HLS est emballé à partir du fichier mp4 de travail.

Pendant ce temps, si quelqu'un a besoin d'une solution désespérée, cela surveillera les fichiers .ts, les convertira en .mp4 et émettra un websocket afin que le client puisse télécharger le prochain fragment en mp4 (qui fonctionne sur ios10) :

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

Je peux fournir la solution complète si quelqu'un est intéressé.

@andreabadesso Avez-vous l'implémentation client de votre solution ?

C'est extrêmement louche. Non seulement vous avez toujours besoin d'un proxy CORS, mais il essaie de passer par FFMPEG en temps réel :O Est-ce que IOS fait même des websockets ? Je sais qu'il ne peut pas faire webrtc.

Essayer d'obtenir une texture vidéo via le dessin de la toile toujours via l'option SoftwareRenderer est également mauvais. C'est juste un cadre noir. Les deux options ont été une impasse, j'espérais qu'au moins celle de SoftwareRenderer fonctionne avec des textures vidéo, seule une texture d'image s'affiche.

Salut tout le monde, je travaille sur le problème des couleurs depuis un jour et j'ai trouvé une solution de contournement qui fonctionne pour mon cas d'utilisation. Ce fil a été très utile et j'aimerais contribuer.
Le problème est simplement que les couleurs rouge et bleu sont échangées. J'ai donc utilisé ffmpeg pour pré-changer ces couleurs. Au fur et à mesure que les couleurs changent sur trois, la vidéo revient à son apparence normale.
Ce n'est pas une solution optimale mais ça marche. (testé sur IOS 10.2)

@Yralec

J'ai pensé que c'était un problème d'encodage ou un problème d'encodage.

Cela ne va pas aider à dire pour le streaming en direct wowza cependant. Personne n'aura probablement le contrôle sur le fonctionnement des encodeurs en direct. Pour la VOD peut-être.

Avez-vous le drapeau ffmpeg pour confirmer cela ?

Toujours incroyable. Il semble que ce ne soit pas un problème avec three.js, à l'exception du problème FlipY qui est toujours nécessaire.

Je ne peux tout simplement pas comprendre pourquoi Webkit est comme ça.

@danrossi

Voici la commande que j'ai utilisée :
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
Comme vous pouvez le voir, je retourne également la sortie, donc je n'ai pas besoin de le faire moi-même en trois.

ok j'allais demander à ce sujet.

Ne serait-il pas plus simple d'écrire un shader qui échange le bleu et le vert ?

@mrdoob J'ai très peu de connaissances sur les shaders, donc pour moi ce n'était pas le cas (je n'y ai même pas pensé non plus), mais si vous savez comment en écrire un qui échange le rouge et le bleu, c'est presque sûrement une meilleure solution.
La diffusion en direct pourrait également fonctionner.

@mrdoob Je pense que vous êtes sur quelque chose. Je suis désolé, encore une fois, c'est devenu un autre problème Webkit. Le correctif FlipY n'est toujours pas évitable.

J'ai fait quelques recherches et il semble qu'il y ait un échange d'ordre de canal comme celui-ci, je ne suis pas du tout un expert des shaders.

gl_FragColor = texture2D(u_image, v_texCoord).bgra;

@mredoob dans mon exemple brut de webgl, j'ai essayé quelque chose comme ça, mais le programme est cassé et provoque des erreurs. C'est donc là qu'il obtient des couleurs à partir de la texture qui est évidemment très bidon et "bgra" permute les canaux rouge et bleu.

Aucune idée encore de comment obtenir une solution de travail à partir de cela.

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

Il y a eu une erreur de programme en copiant et collant simplement.

En utilisant ce code ci-dessus. Je peux confirmer que ce qui est rendu est ce qui est visible dans IOS 10, donc il devrait, espérons-le, inverser les couleurs rouge et flou qui sont échangées dans le shader ?

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

@Yralec confirmant l'inversion de l'ordre des canaux de couleur sur le shader est inversé dans IOS10. Dans le simulateur, j'ai dû changer le format de couleur en rgba pour obtenir un rendu sans lignes étranges.

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, vidéo);

@mrdoob comment est-il possible d'appliquer ce changement de couleur de texture sur les programmes de shader intégrés ?

gl_FragColor=texture2D(sm,txt).bgra;

@mrdoob. Correction. C'est peut-être celui que les gens utiliseraient.

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

Comment y accéder pour le changer ?

@danrossi Vous pouvez pirater quelque chose comme ça en JS

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

Je crois que je dois copier les shaders dans un THREE.ShaderMaterial, mais aucune idée de comment appliquer la texture ?

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

Cette autre méthode est rigide car elle doit être appliquée uniquement pour les flux HLS dans IOS.

en fait, cela s'affiche dans safari mais le correctif FlipY s'interrompt. Il joue à l'envers. l'esprit est ahurissant. Tous ces efforts grâce à Apple et Webkit haha.

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

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

@WestLangley, le correctif ne semble pas fonctionner. Je devrais voir les couleurs inversées, mais ce n'est pas le cas.

gl_FragColor=texture2D(sm,txt).bgra;

c'est le bon shader pour échanger [b]lue et [r]ed : l'ordre par défaut est rgba, donc bgra les échange.

FlipY corrige les pauses

txt -> vec2(txt.x, 1.0 - txt.y) par exemple

aucune idée de comment

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

le patch ne semble pas fonctionner. Je devrais voir les couleurs inversées, mais ce n'est pas le cas.

peut-être appliquez-vous le patch trop tard

@makc oui dans mon exemple webgl brut, il fait le retournement dans le shader.

Je pense que si le retournement est effectué sur le code UV qui est affiché dans mon exemple threejs, il n'est pas retourné image par image dans le shader. Je pensais que cela supprimerait un calcul inutile à traiter.

dans l'exemple brut de webgl, il est retourné sur le 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;}

puis dans le shader de fragment, cela inverse les canaux de couleur.

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

essayer de reproduire cela dans three.js est le problème maintenant.

Excusez-moi, cela semble fonctionner mais le correctif FlipY ne fonctionne pas. J'ai oublié d'ajouter 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
                });

Si je change la valeur par défaut du tFlip en 1, il s'affiche dans le bon sens, donc une autre option de correction pour le problème FlipY avec HLS ?

tFlip: { value: 1 }

la vidéo a décidé d'arrêter le rendu dans le simulateur mais au moins je vois un changement de couleur. Le correctif ne fonctionne malheureusement pas, bien que le débogage remplace définitivement le code du shader.

Il semble que je puisse faire un flip avec cette valeur en ne lui donnant qu'un 1 positif plutôt que négatif.

J'ai perdu l'accès à IOS10 une fois qu'ils ont déprécié les appareils plus anciens, comme mon Ipad 3. Je dois charger le simulateur sur macOS démarré sur un lecteur externe car j'ai un logiciel qui ne fonctionne qu'en 10.10. Des moments amusants avec tout ce sabotage.

Je n'ai aucune idée s'il met à jour le cadre et tourne correctement pour le moment.

Espérons que cet exemple fonctionne sur IOS 10. C'est le mieux que je puisse faire pour le moment. Dans Safari, les couleurs devraient être inversées.

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

L'utilisation du shadermaterial bousille la mise à l'échelle de l'image, la géométrie et empêche la rotation de la caméra de fonctionner comme ça

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

Je dois essayer de faire fonctionner ce patch.

Cela a semblé fonctionner même si cela perturbe toujours la position de la caméra. Je ne pense pas que ce soit une option viable. Cela produit encore plus de bogues en procédant de cette façon. Ne rend pas le même rendu que l'utilisation de 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
                });

Si j'ai essayé d'utiliser le matériel de base, cela ne fonctionnera pas. c'est à dire

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

Plutôt que d'essayer de pirater le shader intégré, je créerais simplement un shader personnalisé.

Voici! ??

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/9jy92zzn/

Ne rend pas juste un écran noir.

@danrossi Cela fonctionne pour moi.

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

N'oubliez pas de mettre à jour le type de couleur et les noms des variables

Il rend ici... (Chrome 55, OSX)

Ce problème concerne les textures vidéo avec les flux HLS et Safari, en particulier IOS, j'en ai peur :|

Je ne vois pas comment fonctionne le meshbasic_frag et comment une texture lui est appliquée. C'est ce qu'il utilise.

Le programme equirect_frag que je ne vois pas être utilisé ou sélectionné.

gl_FragColor = vec4( outgoingLight, diffuseColor.a );

C'est tout ce que je vois.

Je pense que vous devriez oublier meshbasic_frag et equirect_frag . Essayez d'utiliser mon code comme base et remplacez ceci :

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

Avec quelque chose comme ça :

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

@mrdoob

l'arrière était à l'origine du problème. Ce programme de shader est certainement beaucoup plus propre que l'habituel. Quelle est la différence ?

En utilisant le shader personnalisé, je perds le correctif FlipY d'origine.

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

J'ai dû modifier un peu le code du vertex, x a été inversé et y a dû être inversé. Je vais mettre ça dans une seconde.

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

Ce programme de shader est certainement beaucoup plus propre que l'habituel. Quelle est la différence ?

La magie! ??

@mrdoob merci champion. désolé pour le bruit mais blâmez encore Apple pour celui-ci.

Donc pour la vidéo équirectangle, la démo ne devrait-elle pas être mise à jour pour l'utiliser peut-être ? Le programme de shader utilisé par le MeshBasicMaterial n'est donc pas nécessaire pour de telles textures vidéo ? Je vais le tester sur différents navigateurs et différents formats vidéo.

Allons-nous fermer ?

Voici la démo mise à jour

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

Donc pour la vidéo équirectangle, la démo ne devrait-elle pas être mise à jour pour l'utiliser peut-être ? Le programme de shader utilisé par le MeshBasicMaterial n'est donc pas nécessaire pour de telles textures vidéo ?

Eh bien, MeshBasicMaterial est plus flexible et les gens n'ont pas besoin d'écrire des shaders. C'est juste que, pour ce cas précis, il était plus simple d'écrire un shader personnalisé pour contourner le problème.

Allons-nous fermer ?

Ouais!

Cela fonctionne bien sur IOS 10. Seulement que les trames ne sont pas mises à jour sur le simulateur. Il faudra attendre le matériel. je vais fermer l'autre ticket.

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

Avec de légers ajustements au flipy, le même programme fonctionne sur chrome avec webm.

@mrdoob Je crois que ce shader fonctionne sur tous les navigateurs avec des textures vidéo. Le correctif "1.0 - uv.y" n'est requis que pour HLS sur Safari. L'inversion du canal de couleur n'est requise que pour IOS10 avec HLS.

Des couches de contournement assez folles, y compris le proxy CORS.

Je pense que cela fonctionne mieux que le shader fourni par meshbasicmaterial. Cela devrait-il être la norme pour les textures vidéo alors ? la rotation semble fonctionner avec le code vertex.

salut tout le monde
J'essaie de créer un lecteur 360vr avec three.js qui affiche un flux en direct HLS (.m3u8 joué avec hls.js)
Cela fonctionne sur Safari osx avec webgl activé mais sur ipad 10.2 tous mes essais se perdent dans une toile noire (le son fonctionne)
Si je désactive le mode vr360, le flux vidéo fonctionne correctement sur tous les appareils.
J'ai essayé certaines des méthodes suggérées, mais j'ai toujours le rendu de la toile noire.
Quelqu'un sait comment contourner ?

Les correctifs de FlipY et d'inversion des canaux de couleur sont dans ce fil.

Les bogues Webkit que j'ai suivis sont obsolètes et ont fini par faire preuve d'arrogance à ce sujet. C'est toujours ouvert mais personne ne prendra la peine de les regarder.

Vous avez besoin du correctif FlipY pour Safari. Désactivez-le donc toujours sur la texture three.js.

Voici les méthodes formelles es6 que j'ai conçues pour ma solution de lecteur. Je fais encore des cauchemars des mois après avoir chassé cette merde haha.

Merci à mrdoob le champion d'avoir proposé la solution shadermaterial. Je l'utilise maintenant pour tous les navigateurs. C'est un shader plus simple que celui qui est également généré. C'est juste pour les textures vidéo.

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

usage

 let invertColour = false;

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

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

ok le commentaire sur la ligne _gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY) dans three.js rend l'affichage de la vidéo dans Safari (10.0.2, dans la version précédente il suffisait d'activer le webgl dans les outils de développement, cela l'option n'est pas disponible maintenant) mais j'ai toujours le problème sur iPad et iPhone (qui sont ma cible)
A propos de la solution shaderMaterial, je ne sais pas comment l'appliquer exactement dans mon code...
Merci pour votre aide

La désactivation de FlipY dans mes tests était également requise pour MacOs Safari 10.

Oui aussi pour le mien (sauf pour la version 9.xx précédente)
Mais j'ai besoin d'utiliser le lecteur sur des appareils mobiles pour que cette solution ne soit pas ma solution :-(

Vous avez besoin à la fois du correctif FlipY et de l'inversion des canaux de couleur sur IOS. Et seulement pour IOS 10. Pas bon sur IOS 9. Ce qui laisse de côté de nombreux appareils plus anciens. Parce qu'Apple les a dépréciés comme mon Ipad 3. IOS 10 prend en charge la lecture en ligne, ce serait donc préférable de toute façon.

Je suis en train de chercher à résoudre ce problème dans iOS maintenant. Mais je suis un peu confus par les commentaires.

Pour les vidéos HLS :

• iOS fournit des canaux de couleur dans le mauvais ordre (bgra au lieu de rgba). Les valeurs sont par ailleurs correctes.
• macOS produit une texture qui nécessite un retournement dans l'axe X. Cela peut être contourné en utilisant setPixelStorei(UNPACK_FLIP_Y_WEBGL, true)
• iOS produit une texture qui nécessite un retournement sur l'axe X, mais la solution de contournement ci-dessus ne fonctionne pas.

Est-ce correct?

La réponse est dans ce ticket ci-dessus.

Juste pour vous prévenir, apparemment, la dernière mise à jour d'iOS 10.3.3 a corrigé le problème bgr , ce qui ferait que la solution de contournement... fonctionnerait dans l'autre sens. Je n'utilise pas three.js, donc pour toute question/triage, référez-vous à vos propres tests ou à la question SO.

Comme prévu. assez standard. Merci pour la mise en garde.

Ils devraient faire la bonne chose et mettre à jour le ticket que j'ai fait et laissé ouvert et périmé. Pour mettre à jour tous les développeurs s'il y a un correctif. Ils n'ont pas. Alors faut-il vérifier les versions mineures maintenant ?

IOS 11 est censé avoir des correctifs CORS, mais ce n'est pas encore le cas.

J'ai réussi à obtenir la version bêta de xcode 9. Il ne vient pas avec le simulateur 10.3.3 seulement 10.3.1 et 11. J'ai testé en 11 et le rgba inversé est toujours requis, semble-t-il. Je devrais voir un affichage vert sinon ou pas du tout. Je vais devoir faire plus de tests en désactivant le correctif.

Le simulateur IOS11 est un raté. Il n'y a pas de simulateur IOS 10.3.3. IOS11 a apparemment corrigé le CORS.

Maintenant que iOS 11 est rendu public, j'ai effectué des tests et je ne suis pas en mesure d'utiliser le correctif de ce fil pour iPhone iOS 11 (pas encore essayé iPad).

Je peux le faire fonctionner (en utilisant le hack CORS, FlipY et les corrections de couleurs) pour iOS 10.3.3 sur iPhone et iPad avec HLS.
Sur iPhone iOS 11, j'ai un écran noir avec HLS (en utilisant le hack CORS, FlipY et les corrections de couleurs). Je pense qu'il y a autre chose à corriger, mais pour l'instant je n'ai pas mis le doigt dessus.

En ce qui concerne le problème CORS, il semble s'être amélioré dans iOS 11 au moins pour le téléchargement progressif MP4, mais je ne suis pas en mesure de confirmer pour HLS à cause de ce qui précède.

Si quelqu'un a plus de chance, veuillez mettre à jour :/

Je fais de mon mieux pour obtenir un tout nouvel ipad pour pouvoir même obtenir IOS11.

L'émulateur n'a pas les correctifs, donc c'était un échec.

Je vais devoir confirmer si je dois faire un contre-piratage là-bas. Ou si les canaux de couleur RVB peuvent être inversés.

Le rendu noir pour HLS n'est pas un bon début et juste leur sabotage habituel qui prendra des années pour inverser une régression. C'est ce qui se passe sur IOS9.

CORS aurait dû être corrigé dans IOS11 et n'a pas besoin de proxy

@danrossi Je suis également confronté à ce problème maintenant avec iOS 11, si vous trouvez une solution à ce problème, faites-le moi savoir. iOS 10 fonctionne toujours très bien avec le correctif CORS et Flip Y, mais iOS 11 ne lit que l'audio.

J'ai encore besoin d'un nouvel ipad avec IOS11. HLS fonctionne dans le simulateur bêta IOS11 ? Cela pourrait être lié au CORS. Le retournement du canal RVB afficherait des couleurs inversées. Donc le noir pourrait être lié au CORS ?

J'ai essayé sans mon proxy CORS et avec, et j'ai toujours le même problème. J'ai aussi essayé sans le Flip Y juste pour le plaisir, et cela ne change rien. Seulement du son, pas de vidéo :/

Il y a toujours le même problème sur l'appareil ios11, uniquement du son, pas de vidéo。 Tout le monde a résolu ce problème？

Je l'ai fait fonctionner en dessinant la vidéo sur un canevas 2D et en utilisant ce canevas 2D comme texture dans webgl.

Je n'arrive pas à obtenir correctement la texture de la toile 2D sur ios11， pourriez-vous poster le code？

C'est une très mauvaise idée. Le dessin sur toile est gourmand en processeur.

J'ai mis à jour le ticket webkit en ce qui concerne ce problème. Ils ne l'ont pas du tout abordé. J'ai même fourni à mes solutions de contournement un shader complet et un code source. Que vous prétendez ne fonctionnent pas maintenant.

Je sais que quelqu'un d'autre a un problème. Mais je ne peux pas encore le tester correctement jusqu'à ce que j'obtienne un tout nouvel appareil. Le simulateur l'affiche correctement. ont rencontré une obsolescence planifiée où même un Iphone 5 ne peut pas obtenir IOS 11.

voici à nouveau le billet. https://bugs.webkit.org/show_bug.cgi?id=163866#c17

@LoveLetterIloveU voici mon exemple de code : https://htmlvideocanvas-sibabi.c9users.io/hello-world.html (Ouvert UNIQUEMENT sur ios)
@danrossi a raison, ce n'est pas la meilleure solution. Il s'agit essentiellement de copier des tableaux d'octets plutôt que de lier le pointeur. Cependant, il fait le travail pendant qu'Apple maintient le projet. J'évalue toujours cette approche et j'ai également une méthode de secours mp4 prête à l'emploi.

J'ai passé deux mois entiers à trouver cette solution ci-dessus avec l'aide de tout le monde pour peaufiner le shader bien sûr, alors merci. Cela signifie simplement que nous passons plus de temps à les contrer pour trouver une autre solution.

J'espère qu'il y en a un.

Ils n'ont pas du tout pris la peine d'essayer de résoudre le problème flipy / HLS / webgl, vous pouvez le voir dans ce ticket que j'ai créé.

Ils viennent juste de résoudre le problème CORS après tout. Bien que je ne sois pas encore sûr s'ils ont réussi à faire fonctionner Dash.

Apple / webkit est l'épine dans mon pied. Cela peut signifier que je dois essayer de le réparer moi-même et que je ne fais pas de c++. Ce serait vraiment drôle si je le réparais mais j'aimerais garder mes cheveux.

Quelqu'un peut-il poster son code pour que je puisse y jeter un œil, juste pour s'assurer que FlipY est activé / désactivé.

Voir mon commentaire ici. J'ai eu un estomac absolu de ce gâchis de sabotage. La désactivation de flipY sur la texture devrait afficher une image mais à l'envers. C'est un cadre noir ici. Retour au début. Ils ont provoqué une régression qui posait problème dans IOS9.

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

Je ferme le ticket webkit d'origine qui n'a même jamais été regardé ou adressé. Et en commencer un nouveau dès qu'il faudra du temps pour rassembler des preuves.

Il est allé au-delà du problème FlipY d'origine. Il semble qu'ils ne prennent même jamais la peine de vérifier que HLS fonctionne avec WebGL avant de publier le système d'exploitation.

J'ai fermé le ticket webkit d'origine pour en démarrer un nouveau, en particulier les textures vidéo HLS avec webgl sont complètement cassées sans solution de contournement pour le moment. Le contournement original de FlipY n'est plus pertinent.

J'ai découvert que tous les tests de conformité de webkit webgl utilisent Mp4.

Ils n'ont jamais pris la peine de tester avec le propre format de streaming d'Apple. C'est pourquoi il a été cassé et toujours cassé avec une toute nouvelle mise à jour IOS 11.

Voir ici pour plus

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

@danrossi Avez-vous un lien vers le ticket nouvellement ouvert pour le

Je finance eux-mêmes leur travail pour eux. J'exécute des tests de conformité avec HLS généré à partir des fichiers mp4 de test Khronos. Il prétend qu'il réussit, mais le test ne parvient pas à prouver s'il affiche quelque chose. La toile ne s'affiche même pas ici. En fait, je ne pense même pas que le test fonctionne correctement sur IOS. Il n'y a pas de journaux.

Je dois utiliser leurs propres fichiers de test pour prouver que les textures HLS ne fonctionnent pas. J'ai construit d'autres fichiers de test et je vais les télécharger pour créer le ticket.

J'espère qu'il y a un paramètre webgl requis ou un autre qui doit être désactivé comme la dernière fois.

D'après ce que je vois avec les fichiers de test Webkit. Ils ne sont pas conçus pour les tests IOS. Aucune fonctionnalité de clic de l'utilisateur pour jouer. Mp4, pour une raison quelconque, peut être lu automatiquement que j'ai découvert sur IOS 11 bien qu'aucun attribut ne soit spécifié, mais HLS ne le peut toujours pas.

Je ne crois pas qu'aucun test ne soit fait spécifiquement pour IOS et très certainement aucun test n'est fait pour HLS.

D'où les problèmes. C'est au-delà du mal.

J'ai ce dont j'ai besoin pour soumettre le ticket.

D'aussi loin que je puisse voir. Les tests du kit web de webgl sont défectueux. Ils ne se soucient pas de la sortie du canevas webgl. Ils dessinent la vidéo sur un canevas en tant que sortie d'aperçu à une très petite taille.

Ils ont le canevas webgl mais c'est une très petite taille donc vous ne verrez même pas si son rendu ou non.

J'ai dû modifier les tests pour HLS et ils ne passent pas. Et maintenant, j'ai augmenté la taille de la toile webgl, elle est noire.

Après avoir modifié le code pour ajouter un utilisateur, cliquez sur les tests commencent réellement à s'exécuter sur IOS.

Autant que je sache, aucun test n'a jamais été effectué pour HLS et les tests sont défectueux. Et donc cela a saboté absolument tout le monde.

Voici. Je perds vraiment patience avec Apple et combien de travail personnel est nécessaire pour résoudre leurs problèmes et exécuter des tests pour eux.

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

Deux jours et aucune urgence pour le regarder. Je soupçonne que cela ne sera jamais abordé. Il a fallu des années et plusieurs versions d'IOS et de mises à niveau d'appareils pour CORS ont été corrigées ?

Je vais essayer de jouer avec les drapeaux webgl et le code shader pour voir si quelque chose peut être fait.

Les gens peuvent-ils y aller et faire du bruit. Comme il n'est même pas encore regardé. Comme s'ils ne se souciaient pas du tout de tester HLS dans leur propre navigateur.

@jernoble pouvez-vous indiquer qui pourrait nous aider dans l'équipe du https://bugs.webkit.org/show_bug.cgi?id=179417. Merci d'avance.

Salut @radiantmediaplayer. @grorg et moi sommes tous les deux les bonnes personnes pour envoyer un ping sur ce problème. Je vais me mettre en copie de ce bogue WebKit et créer un radar pour le suivre.

Salut les gars. Je publie un exemple de solution de contournement pour iOS 11 à l'aide d'un canevas temporaire, comme décrit par @sorob . Vous pouvez le voir fonctionner dans http://redgetan.cc/demo/ios_11_hls_webgl_canvas_workaround/index.html . Je ne connais pas Three.js, donc c'est juste du javascript .

CanvasRenderer. c'est le rendu logiciel. Pas digne de la production.

Je suis avec @danrossi sur celui-ci. Les problèmes de performances mis à part le maintien de 2 solutions différentes complètes pour afficher le contenu HLS ne seraient pas pratiques. Nous devons aller au fond du problème du kit Web iOS. Le nouveau ticket du kit Web montre une activité, ce qui est un signe positif. Espérons que nous pourrons trouver quelque chose même si cela signifie attendre iOS 11.*.

@danrossi Je viens de remarquer que ce problème est clos. Souhaitez-vous le rouvrir?

Le tout nouveau numéro est là. Ce n'est pas lié à Three.JS, donc conservé pour une archive, je suppose.

Le niveau de tests requis était insensé. Je me suis cassé le dos comme trouver le contournement de l'IOS10. jetez un oeil là-bas.

Rien n'y fait pour l'instant. Quelqu'un jette enfin un œil et n'est pas sous notre contrôle. Quelque chose à voir avec une référence partagée au contexte pour la texture voyant HLS est différent de Mp4 qui pourrait le corriger. Pour autant que je sache, mais ils doivent en fait passer du temps à le faire. Je n'ai aucun moyen de configurer un tel environnement de construction comme je le suis sous Windows.

Mais en regardant le code du kit Web, je pense que pourquoi IOS10 avait des problèmes de couleur étranges avec HLS. Il n'utilise pas de code d'espace colorimétrique. D'où le code pour contourner les deux problèmes pour IOS10 / Safari.

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

Salut. Il semble que je doive moi-même revenir en arrière et implémenter un moteur de rendu de canevas pour la prise en charge de la texture vidéo IE11. Cela ne fonctionne pas avec WebGL. Quelqu'un a posé la question.

Je pense qu'au rythme qu'il faut pour l'examiner, cela peut prendre environ 2 ans pour le réparer.

IOS 11 devra souffrir du rendu logiciel je pense pour HLS. Dans la poubelle, tout le truc IOS est pour la VR. Je vais mettre cela en œuvre moi-même.

@redgetan , des idées pour implémenter avec three.js ? J'ai essayé d'utiliser CanvasRenderer et j'obtiens un cadre de maillage visible sur la texture et ne rend pas correctement une géométrie de sphère.

La démo de canvas trois ne montre que la vidéo 2D en cours de rendu.

Désolé, vous utilisez un rendu webgl mais vous utilisez un canevas comme source d'image de texture. Voir si je peux reproduire ça. Le rendu et la rotation ne sont pas corrects pour moi lorsque j'utilise canvas comme texture.

ok pour une raison quelconque, je devais le faire.

Utilisez le moteur de rendu webgl normalement. Mais pour la texture de la toile et le dessin vidéo, j'ai dû définir les dimensions

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

Il est rendu correctement maintenant. Exécutera des tests sur IOS 11.

@danrossi nous a fait savoir comment cela se passe sur iOS 11. Je

OK, pas de problème. J'ajouterai bientôt un test de base avec une vue des statistiques fps en ligne si cela semble fonctionner. Il peut avoir besoin de quelque chose en ce moment.

Existe-t-il un moyen de vérifier les performances du processeur sur IOS ?

J'ai fait un test de texture de toile. Cela fonctionne, mais une vidéo à plus grande résolution pourrait la faire tomber.

Ce HLS est de mauvaise qualité et reste donc à 40 ips. Un mp4 de plus grande résolution mais également de faible qualité est resté à 30 images par seconde.

Un fichier de résolution de production peut en tirer 10 ips. C'est pour un nouvel Ipad.

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

Ce problème doit-il faire quelque chose avec le problème auquel je suis confronté actuellement sur cette page : https://digitalejulegaver.firebaseapp.com/#catarina

Ouvrez-le dans votre navigateur Safari sur un mac ou un appareil macOS. Un ipad ou un iphone ne peut pas gérer cette page même s'il se trouve dans un navigateur chrome ou mozilla.

J'obtiens une page noire, mais en chrome normal sur mac, ça marche

@vongohren Vous devez utiliser les solutions de contournement FlipY que j'ai découvertes pour HLS avec macOS Safari et le shader que nous avons élaboré dans ce ticket.

Cependant, je viens de revenir à mes tickets de kit Web et ils ont affirmé avoir résolu le problème de FlipY pour 10.13. Je crois que c'est High Sierra. Il n'y a aucune chance de tester cela pour moi car j'utilise un macOS basé sur le cloud.

Cela nécessitera encore une autre vérification de la version de la plate-forme pour ne pas nécessiter de contournement FlipY pour 10.13. donc tout ce qui est en dessous de la version 13 l'exigera. J'ai environ 4 vérifications de version de plate-forme et de navigateur différentes pour macOS et IOS pour contourner plusieurs bogues. La vérification IOS 11 consiste à activer le rendu logiciel des textures !

Si vous pouvez vérifier 10.13, cela pourrait être utile.

Voici les détails de tous mes billets.

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 a obtenu 10.13, mais vous avez une démo qui peut être testée ?

La version three.js que j'utilise maintenant est nouvelle pour ces correctifs, donc je ne sais pas où les appliquer.
J'ai trouvé quelque chose appelé data.flipY et je l'ai défini sur false. Mais n'a rien fait pour mon application.

J'utilise three.js via cette bibliothèque : https://github.com/iberezansky/flip-book-jquery

Problème CORS ?

Est-ce que ça marche ?

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

ou ca

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

Mes listes massives de fichiers de test sont dans ces tickets.

FlipY peut être désactivé sur la texture

texture.flipY = false;

Tout est local, alors ne voyez pas pourquoi les cors devraient être effectués. Mais ces deux liens s'affichent simplement en noir sur Safari et Chrome, sur Mac 10.13

Et la fonction flipY n'a pas fait grand-chose, plutôt que de simplement renverser la situation. Mais il faisait toujours noir

Il semble que la version 10.13 souffre du même problème que IOS 11 où le contournement de FlipY est cassé. C'est une bonne information. et encore un autre bug à signaler. C'est tellement désordonné que ça me rend fou. Je mettrai à jour cela dans le ticket IOS. dans 10.12 le bug FlipY doit être contourné et fait un ticket séparé pour cela.

Alors comme dans ma fonction VR maintenant. Vous devez effectuer une vérification de la version de la plate-forme pour IOS 11 et 10.13 et fournir un mode de texture de toile de rendu logiciel pour hls.

voici quelques utilitaires statiques que j'utilise pour les vérifications de fonctionnalités, en particulier la prise en charge de cors ou l'utilisation de sources proxy cors. Évidemment, maintenant, je dois vérifier la version supérieure à 13 pour activer temporairement le rendu logiciel comme 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;
    }

Vous avez fait du bon travail là-dessus, j'espère que vous aurez réglé les billets :D

Voici le travail de texture de la toile. J'ai dû l'activer pour IOS 11. Je devrais peut-être vérifier la version de macOS 13 et l'activer pour cela aussi. si vous pensez que le travail de flipY est cassé pour 10.13 ? Je dois leur faire rapport.

Mec, vous n'en avez aucune idée, je n'en tire aucun avantage, autofinancé, à part faire le logiciel de tout le monde, y compris ma propre fonctionnalité, qui fonctionne à peine sur Apple OS haha.

Voici mon intégration complète en ce moment, il a les travaux, y compris les correctifs Apple et les solutions de contournement. J'ai maintenant le support vidéo cubemap.

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

Cela dure depuis que je l'ai signalé pour la première fois il y a quelques années, qui restait là à ne rien faire !

Est-ce que ça marche pour toi ?

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

Quand vous dites que voici le travail de texture de la toile, vers où pointez-vous ?

Ce flowplayer a l'air sympa ! A-t-il vu beaucoup d'utilisation?

Que dois-je voir dans ce lien : http://dev.electroteque.org/webgl/three-canvas.html ?
Lorsque je l'ouvre dans Chrome - Version 63.0.3239.84 (version officielle) (64 bits) - sur macOS 10.13.1 :
Je vois un fond noir avec un compteur FPS dans le coin gauche et un bouton disant activer AR au milieu en bas
Lorsque je clique dessus, j'obtiens un écran partagé, avec une molette de paramètres et un bouton de retour. Mais la toile elle-même est juste noire.

Lorsque je l'ouvre dans Safari version 11.0.1 (13604.3.5) sur macOS 10.13.1 :
Je vois la vidéo volante avec un compteur FPS dans le coin gauche et un bouton disant activer AR au milieu en bas. Je peux également faire défiler pour une expérience 360 ​​complète.
Lorsque je clique sur le bouton VR, j'obtiens un écran partagé, avec une molette de paramètres et un bouton de retour. Et le canevas vidéo, mais ne peut pas faire défiler, je suppose que c'est au gyroscope de le contrôler.

Mais si j'appuie sur le bouton Retour depuis le mode VR, la vidéo est bloquée en mode VR, et je ne peux plus faire défiler, et elle est bloquée sur la vue dans laquelle le mode VR a démarré.

Cette démo concerne le rendu HLS sur Safari. Si vous pensez que la démo du correctif flipY ne fonctionne pas sur Safari

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

alors devoir utiliser des textures de canevas avec 10.13 et IOS 11 Safari ?

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

Faites-moi savoir entre les deux. Je ne me soucie pas des contrôles de rotation juste qu'il rend et pas d'un cadre noir.

C'est important à propos de 10.13 car je l'ai ajouté au ticket du kit Web IOS 11 référencé ici maintenant. En supposant qu'il s'agisse d'une "régression" qui a complètement cassé le rendu HLS.

@danrossi fonctionne tous les deux sur safari, de meilleure qualité avec la version hls. Ils sont tous les deux dans la bonne direction si vous vous le demandez.

Mais aucun n'a fonctionné sur le chrome.

D'ACCORD. super, je dois annuler mon rapport.

C'est donc toujours un problème, n'est-ce pas ?

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

Si tel est le cas, utilisez alors le contournement FlipY en standard pour macOS.

La démo HLS sur cette page devrait fonctionner pour les deux navigateurs. Il utilisera le streaming mediasource pour chrome avec le plugin hls. Il dispose également des solutions de contournement FlipY pour macOS.

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

Vous avez raison
http://dev.electroteque.org/webgl/three-hls.html
Cela ne fonctionne ni pour Chrome ni pour Safari

Le link flowplayer, fonctionne pour les deux navigateurs

Merci champion. J'ai eu assez d'informations pour mettre à jour les billets à nouveau. Le problème de macOS Safari est différent de celui d'IOS 11.

Vous devez utiliser l'exemple de texture canvas pour IOS 11.

Et pour macOS Safari, désactivez FlipY sur la texture et inversez la position Y sur le shader pour le retourner dans le bon sens. Vous devez également effectuer l'inversion du canal de couleur sur le shader de fragment pour IOS 10 HLS. Le code shader est ci-dessus.

J'ai donc été heureux pendant environ 1H ce matin quand j'ai réussi à cracker le boîtier iOS 11 avec la solution de contournement ci-dessus ( @danrossi je

C'est le résultat que j'obtiens sur un iPhone 6 Plus avec iOS 11.2.1, l'animation est en fait assez fluide mais elle est carrément moche, pixelisée, aliasée...

Le comportement attendu est le suivant (Nexus 5X avec Android 8 et Chrome le plus récent - cela n'utilise pas la solution de contournement ci-dessus).

Notre cas d'utilisation est un lecteur HTML5 360 et dans les deux exemples ci-dessus la vidéo est le même flux HLS à débit binaire unique http://www.rmp-streaming.com :1935/vod/sea360.mp4/playlist.m3u8

Si j'applique la solution de contournement (voir ci-dessous pour mon code) à Android, j'obtiens le même rendu moche. Est-ce ce que je suis censé obtenir avec cette nouvelle solution de contournement ou est-ce que j'ai raté quelque chose ?
J'ai essayé de jouer avec certains paramètres mais je ne vois aucune amélioration notable.

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

Je fais ça. Je suis à peu près certain que cela devrait le dimensionner correctement.

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

Alors je l'ai cloué après un peu de piqûre. Il semble que dans notre configuration, le canevas hors dom doit être de la taille exacte du rendu HLS en cours de lecture afin d'être rendu correctement (par conséquent, pour ABR, il doit être mis à jour chaque fois que le rendu change). Nos tests montrent que cela fonctionne bien pour iOS 11 (ok c'est mieux que rien). Laissez ceci ici si cela aide quelqu'un d'autre.

Ouais, donc je le fais dans l'événement loadata pour obtenir la largeur de la vidéo. J'ai compris cela avant et il a eu le même problème.

Cependant, pour le HLS natif, il n'y a pas d'événement lorsqu'un débit binaire change ? Je m'installe juste une fois personnellement. La quantité de solutions de contournement pour Apple est déjà assez incroyable.

À ma connaissance, il n'y a aucun événement fourni par Safari qui puisse être utilisé pour détecter un changement de rendu pour ABR HLS. Nous mettons simplement à jour la largeur et la hauteur du canevas hors dom avec video.videoWidth et video.videoHeight sur chaque AnimationFrame (ce qui n'est probablement pas idéal du point de vue des performances, mais à ce stade, cela fonctionne et nous nous en contenterons jusqu'à un autre option devient disponible). Nos tests montrent que video.videoWidth et video.videoHeight doivent être mis à jour en conséquence lorsqu'un nouveau rendu est affiché.

Ouais pour ce que ça vaut c'est assez hacky. Cela est donc excessif, surtout s'il y a des instructions de condition dans un rappel de trame. Tout ce qui fonctionne pour l'instant, je suppose.

Ils ne peuvent toujours pas fournir d'événement de changement de rendu. Je crois qu'il existe une spécification pour une mais n'a jamais été implémentée ?

Le proxy CORS pour contourner les anciens bogues Safari, le correctif HLS flipy et maintenant cela suffit.

Content que tout fonctionne. Je n'ai pas encore vu de mise à jour dans mes billets depuis un bon mois maintenant.

Je ne me souviens pas avoir vu quelque chose dans la spécification vidéo HTML5 concernant un événement de changement de qualité. Il existe la spécification HLS maintenue par Apple, mais elle ne décrit pas ce que le client doit faire lorsqu'un changement de qualité se produit. Les bibliothèques comme hls.js l'ont implémenté, mais cela n'est pas disponible pour la vidéo HLS vers HTML5 native dans Safari.

Je viens de réaliser que je pourrais "polyfiller" notre hack pour détecter un changement de rendu en interrogeant video.videoWidth à intervalles fixes et lorsqu'un changement est détecté, appeler le rappel de redimensionnement. Ce sera moins éprouvant. Je vais probablement implémenter cela à un stade ultérieur dans notre lecteur.

@radiantmediaplayer Vous devriez pouvoir utiliser l'événement "resize" pour détecter les modifications apportées aux propriétés .videoWidth et .videoHeight sous-jacentes.

Salut les gars voir mon commentaire ici. Ça marche.

Quelle épreuve que de faire des tests et de passer par les mouvements. Seulement pour obtenir aucune rétroaction ou réponse appropriée. J'en ai sérieusement fini ! Fini les régressions s'il vous plait !!

Installez OSX 11.3 bêta et cela fonctionnera. Le précédent OSX 11 a besoin d'un rendu logiciel, OSX 10 a besoin du flipY et du correctif de couleur. Un désordre de compatibilité compliqué et une détection de version de plate-forme sont requis.

Safari macOS a toujours le problème FlipY et je n'ai pas eu de réponse non plus, c'est dans un ticket séparé. Je ne peux pas tester correctement HLS là-bas de toute façon jusqu'à ce que je puisse essayer d'installer macOS sur mon poste de travail PC. HLS ne peut pas jouer dans vmware.

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

Les contournements de FlipY ne sont pas non plus nécessaires pour OSX 11.3 mais je pense l'avoir déjà mentionné.

Voici ma vérification complète de la compatibilité IOS et Safari commençant maintenant par CORS.

L'esprit est ahurissant. Celui-ci est fou. J'ai même dû faire preuve de pérennité et inclure autre chose que IOS 12.

Il travaille sur l'intégration ! Je ne peux pas encore vérifier ce qui se passe avec 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;
    }

Usage

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

        }
    }

Correction d'un dernier point important. L'implémentation du rendu IOS HLS s'exécute sur une petite taille et très délicate. Le rendu doit commencer après loaddata.

Dès qu'il rencontre une erreur teximage2d , aucun autre rendu ne se produit, juste un rendu noir, il semblera que le correctif ne s'est jamais produit.

Si le rendu démarre dès qu'il y a des données vidéo c'est bon. Ce n'était pas un problème avant le 11.3.

On dirait que la vidéo fonctionne à nouveau (sans correctif temporaire du canevas). Vérifié pour la dernière version ios 11.3 (testé sur iphone 6s, 7).

Oui, je pense avoir mis à jour le 15 février. Travailler à nouveau en 11.3. Je n'ai jamais eu de mise à jour. J'ai dû vérifier spécifiquement et cela fonctionnait !

Nous avons résolu de nombreux problèmes avec la vidéo -> la texture dans iOS 11.3 (et la version macOS équivalente). Désolé si nous n'avons pas fermé/mis à jour les bogues.

S'il vous plaît laissez-moi savoir si vous rencontrez toujours des problèmes. Je pense que les flux directs (par exemple, mp4) et les flux HTTP en direct devraient tous les deux fonctionner et que flipy devrait être reflété avec précision.

Tout est fait à partir de février lorsqu'il est signalé. Mais j'ai d'abord signalé l'année dernière à un moment donné. J'ai mis à jour au hasard la version bêta d'IOS à 11.3 et cela a commencé à fonctionner. Le code de vérification de compatibilité ci-dessus est nécessaire pour gérer les contournements de plusieurs plates-formes.

IOS 10 nécessite le correctif flipY. IOS 11.0 - 11.2 nécessite des solutions de contournement de rendu logiciel. 11.3 > peut rendre normalement.

Quelqu'un peut-il partager un échantillon de travail pour cela, un jsfiddle ou autre ? Je pouvais toujours voir un écran noir dans IOS 11 Safari. Je pouvais entendre l'audio mais pas de vidéo pour le streaming HLS

@dhanishapa Quelle est votre version iOS ? Est-ce 11.3+ ?

Il y a quelque temps (~ mai 2018), je rencontrais moi aussi les problèmes suivants avec HLS (? <= 11,2) :

• Des segments de vidéo se répètent parfois pendant la lecture
• Les vidéos s'interrompent parfois et affichent un écran noir
• Les vidéos se mettent en mémoire tampon mais le son continue

Après avoir contacté Vimeo (j'utilise leur service HLS), ils ont pu contacter l'équipe de développement Apple et travailler ensemble sur un correctif.

Nous venons d'apprendre de l'équipe de développement d'Apple qu'une nouvelle version d'iOS (11.3.1) a été publiée, qui inclut un correctif pour les problèmes de lecture que vous avez signalés. Le correctif devrait empêcher les vidéos de s'arrêter sur un écran noir, de répéter des segments de vidéo ou de se retrouver dans un état de chargement sans fin.

J'ai remarqué que lorsque j'ai fourni le MP4 codé en H264 comme source lors du téléchargement, les problèmes de lecture ont disparu sur les versions iOS inférieures à 11.3.1. J'ai rencontré des problèmes lors de l'utilisation de Quicktime comme format d'entrée lors du téléchargement.

J'ai repéré quelques différences entre les manifestes générés par chaque fichier vidéo (les codecs vidéo à savoir "avc1.64001E,mp4a.40.2" pour celui qui fonctionne contre "hvc1.2.4.L63.90,mp4a.40.2" pour celui qui ne fonctionne pas ).

Peut-être que cette information est utile à n'importe qui.

salut
J'ai un problème avec le streaming HLS sur IOS Safari.
J'utilise un proxy cors. J'ai essayé d'utiliser le lecteur hls natif et le lecteur html5 et j'ai même juste essayé de lire le lien m3u8 directement dans IOS mais cela ne fonctionne pas, alors que cela fonctionne dans safari (bureau - mac), chrome, firefox, mais pas dans IOS (iphone)

cors a été corrigé dans IOS 11.0. L'autre gros correctif que j'ai trouvé est en 11.3. 11.3 devrait être disponible maintenant. Proxy uniquement nécessaire pour IOS 10 et 9.

Ça marche pour moi 🙆🏽‍♂️

Voici une démo Glitch d'un flux HLS mappé sur une sphère ( vidéo 360 par playhouse-vr ).

Testé sur macOS v10.13.4 + Safari v11.1 et iOS 11.4.1 + Safari

Je vois maintenant un NOUVEAU problème d'écran noir sur iOS 14.0 Safari et iPadOS 14.0 Safari. Le même lecteur fonctionne exactement avec iOS 13.7 Safari et iPadOS 13.7 Safari. J'ai essayé de mettre à jour vers three.js r120 (à partir de r116) mais en vain. macOS Safari 14 est ok. Est-ce que quelqu'un voit la même chose ? Un indice sur la prochaine étape pour prendre en charge iOS 14 ?

Oui, consultez à la fois https://bugs.webkit.org/show_bug.cgi?id=215908 et https://bugs.webkit.org/show_bug.cgi?id=216250 pour les régressions iOS 14. J'espère qu'ils pourront tous les deux être traités rapidement car de nombreux sites sont probablement touchés.

C'est une bataille sans fin avec Safari. Je m'attends à nouveau à des plaintes pour mes propres fonctionnalités 360. Il faut des mois à chaque fois pour les réparer. J'ai trouvé le contournement original ci-dessus. Il est donc temps de trouver plus de solutions de contournement !! Webkit ne teste pas HLS, ils n'ont pas de tests HLS pour WebGL que j'ai dû faire moi-même.

J'ai supprimé toutes les solutions de contournement lourdes pour différents IOS dans ma fonctionnalité. Mais l'un d'eux a dû utiliser le rendu du logiciel canvas pour 11.0... Je dois encore faire des vérifications de plate-forme. Avec IOS 13, ils ont maintenant rompu les vérifications de la plate-forme. J'ai dû corriger cela dans le projet de carton. J'ai trouvé que HLS ne rend pas immédiatement et prend un certain temps dans IOS 13, mais je dois revoir comment j'ai résolu ce problème.

Ils s'en moquent. Aucune API WebXR, aucune API Wakelock comme Android vient d'être implémentée.

selon mon travail, je dois reconfigurer le changement de rendu. Et désactivez le zoom sur le contrôle de l'orbite. Cela arrête le rendu noir dans IOS 13. IOS 14 doit vérifier.

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

J'ai testé 14.2. SHI OK. Le correctif ci-dessus le fera ...