Three.js: Sprite rendering problem in VR mode.

[swomack]

Description of the problem

Sprites dont get rendered properly in VR mode. In non-VR mode, it works perfectly. In VR mode, i can only see the sprite in the right camera and the position is also getting changed. Please check the screenshots -

Non-VR mode:

VR mode:

Is it happening because ArrayCamera hasn't been checked while rendering sprites?

Three.js version

• [ ] Dev
• [x] r86
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

HTC Vive or Oculus

[swomack]

@mrdoob Is it possible to check this issue for the next release?

[swomack]

Looks like there are other regressions from the ArrayCamera implementation. Now skybox only appears in one eye in VR mode.

[pelkamarcin]

I do have the same problem. Non-vr works fine. New 87 didn't fix that. I cannot revert to 85 (it dosen't support native WebVR which i need for DayDream support)

Any suggestions?

[pelkamarcin]

@mrdoob any ideas? r88 didn't fix that.

[chrislarcombe]

Hi everyOne :+1: I'm new to WebVR... this is the best library I can find right now for what I have in mind - really loving it... :grinning: awesome work.

This bug however is holding me back as the only convenient/straight-forward way I can find to create text labels in VR requires sprites.... and also a lot of other stuff I'm doing requires sprites (in particle clouds, for instance)...

Right now all the sprites only appear in one eye (camera). I had a look at the code but it's a bit beyond me... any idea if this is something easy to fix?

Thank youu ^^

[chrislarcombe]

I tested this on my Gear VR and the bug is present on this setup too. @mrdoob

[pelkamarcin]

@larkychris Hi
Bug still present on r89 as well. About text try canvas text (canvas texture). I use this and it works. All my sprites are current just 3d objects which in need to rotate manually.

[chrislarcombe]

Ah, this works for me, for text:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_text_shapes.html

Might not be as efficient as sprites but it works and looks good! :grin:

I will try that too! What geometry did you use? Like a flat surface plane or something?

I'm assuming you mean like this:
https://threejs.org/examples/webgl_materials_texture_canvas.html
?

Thanks for response. Merry Christmas! :grinning:

[pelkamarcin]

@larkychris I do not remember in this moment i can come back to you in january when i go back to work :D
Merry Christmas to you too:)

[Mugen87]

Solved via #14411