Text not rendering in VR mode

[heartbrokeninventor]

Description:

I'm trying to make a VR application for the browser & cardboard. I'm trying to show up some text, but every time I go to the VR mode, I just can't see it. I see the text in 3D mode, but once I click on the cardboard mode, all the text just disappears. I've tried a previous version (0.9.2) of A-Frame and it seems to work just fine. You can just copy and paste the example code from the documentation and it would not work.

I've also tried different web browsers, but I get the same result. Any help?

• A-Frame Version: 1.4.0
• Platform / Device: iPhone 12 Mini / Safari 16
• Reproducible Code Snippet or URL: <a-entity text="value: Hello World;" rotation="0 90 0" position="-8 5.6 -4" scale="13 13 13"></a-entity>

[dmarcos]

Does this work? https://glitch.com/edit/#!/nifty-aquamarine-dugong?path=index.html%3A9%3A8

What about VR with no cardboard on headset like the Quest? FYI, Cardboard mode is now deprecated in 1.4.1 on devices / browsers without a WebXR implementation like Webkit / iOS

[heartbrokeninventor]

I can't see the VR Button because vr-mode-ui="cardboardModeEnabled: true" is not present. I don't have a headset, my target platform is the cardboard. I'll try to use three.js text instead and see if it's working

[dmarcos]

It might be a clipping issue. nothing to do with the shader. I updated the example:

https://glitch.com/edit/#!/nifty-aquamarine-dugong?path=index.html%3A23%3A38

What I was trying to also say is that there are no plans so further support cardboard mode. That's why it's disabled by default in 1.4.1 and will be removed in future.

[heartbrokeninventor]

I've checked your example and I can only see the second text (Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, the one without the line spacing) while in cardboard mode, but I can't see the first one. I can only see it while in 3D mode (VR mode not enabled). I understand that the cardboard will no longer be supported, but in this case, my target platform is mobile/cardboard. Also I have tried the same in my code and now I can see one of my texts, but not the second one... Am I doing something wrong? And also what do you mean by "clipping issue", can you elaborate on that?

[dmarcos]

Cardboard when the webxr API is not available (iOS and some Android devices) is deprecated. I'm closing this but we should address if reproduces on a headset.

[coderofsalvation]

I can reproduce this on a headset, with <a-scene renderer="colorManagement:true; multiviewStereo: true>


The text renders on Quest 2 in non-immersive mode, but dissappears when entering immersive mode.

When removing multiviewStereo it works as expected.

[mrxz]

@coderofsalvation Could you provide a minimal reproduction (e.g. a Glitch: https://glitch.com/~aframe)?

I wasn't able to reproduce it with a simple scene on either a Quest 2 or a Quest 3. The text was visible both in non-immersive mode and during the immersive session. So there might be something else going on in your case.

<a-scene background="color: black" renderer="colorManagement: true; multiviewStereo: true">
    <a-text position="0 2.0 -1.2" value="Hello World"></a-text>
</a-scene>

If there is an issue with text + multiviewStereo, it's probably best to track it in a new issue as this one is specifically about Cardboard which doesn't support multiviewStereo and there have been many improvements/changes to the text component and shader since (see #5311, #5328, #5357, #5409)

[coderofsalvation]

iirc it was when adding it to this codepen: https://codepen.io/coderofsalvation/pen/yLwedvX

[mrxz]

iirc it was when adding it to this codepen: https://codepen.io/coderofsalvation/pen/yLwedvX

Thanks, the problem isn't with the text per se, but with the way your app renders a frame. With multiview you're not allowed to perform any texture operations once rendering has started. From the A-Frame docs:

(...) there are limitations to consider. multiview builds on the multisampled render to texture extension that discards the frame buffer if there are other texture operations during rendering.

The workaround implemented in A-Frame's fork of Three is to defer texture uploads to the end of the render method. This works for as long as a single frame is rendered with a single renderer.render(...) call. In your case it seems that video textures ensure a texture upload virtually every frame, followed by "portal" rendering which end up getting ignored. Effectively render() -> video texture upload -> render() (invisible).

This drawback is a key reason why support for multiview hasn't landed in Three.js upstream (yet). You'll either have to ensure all texture operations take place before rendering or defer them till after you're done with the frame. The latter would require some changes in the WebGLRenderer, so feel free to open a new issue (feature request) for it, if you want.

[coderofsalvation]

Thank you for the deep analysis.
Indeed the codepen indirectly wraps the render()-function, (so entities can hook into the renderloop without having to be visible, in contrast to the onAfterRender and onBeforeRender which only fire when the object is visible).
I's not a big deal just turning multiview off.