aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.66k stars 3.97k forks source link

360 video is broken #3288

Closed machenmusik closed 6 years ago

machenmusik commented 6 years ago

https://aframe.io/aframe/examples/boilerplate/360-video/ works. https://a-frobot.github.io/aframe/examples/boilerplate/360-video/ only shows black.

machenmusik commented 6 years ago

https://a-frobot.github.io/aframe/examples/test/videosphere/ is also broken and only shows black.

mkungla commented 6 years ago

duplicate of #3287

ngokevin commented 6 years ago

Reports that this can be fixed with material.side = back. Perhaps the negative Z scale thing isn't working out anymore?

machenmusik commented 6 years ago

@mkungla it's not a duplicate in the sense that text being broken is separate from 360 video being broken, right? although the root cause may be the same. @ngokevin hmm, so that isn't great... hadn't seen any reason for that to break with newer three.js?

machenmusik commented 6 years ago

So what did we decide to do here, change videosphere to use side:back, or make negative scale work again? (If the former, we probably want to note negative scale change as potentially breaking)

dmarcos commented 6 years ago

We bumped A-Frame to THREE.js r89 a couple of days ago. Is this still a problem?

dmarcos commented 6 years ago

Yep, it seems to reproduce on master.

machenmusik commented 6 years ago

(Sadly, yes)

ngokevin commented 6 years ago

https://github.com/mrdoob/three.js/pull/12787

You need to try to not use negative scale anymore

vincentfretin commented 6 years ago

I found this issue when trying to use aframe master on my project. I confirm the issue is related to mrdoob/three.js#12787 I have lots of the following warnings too: THREE.Matrix4: .getInverse() can't invert matrix, determinant is 0 THREE.Matrix3: .getInverse() can't invert matrix, determinant is 0 because of frontFaceCW calculation in mrdoob/three.js#12787 (I tested to set it to false and do my own aframe build, the warnings and the black texture issue are gone)

You need material="side:back; ..." and a negative scale like scale="-1 1 1" otherwise the texture is flipped. But I still have warnings .getInverse() can't invert matrix, determinant is 0.

dmarcos commented 6 years ago

@vincentfretin Thanks for investigating. It would be great if you have some bandwidth to open a PR with the fix.

machenmusik commented 6 years ago

My recollection is that changes are needed to a-sky, a-videosphere, and a-curvedimage although I haven't had time yet for PR. But I haven't seen that matrix error yet

vincentfretin commented 6 years ago

The matrix warnings are probably related to other entities in my scene, may not be related to a sphere geometry.

vincentfretin commented 6 years ago

@dmarcos @machenmusik https://github.com/aframevr/aframe/pull/3370