I’m seeing a strange visual issue only on the Meta Quest 3 browser. The same images looks perfectly smooth on desktop, but inside Quest the texture looks jagged / “cut” or shimmering (see screenshots below) make me able to see the topology cuts.
I’m using Three.js r165 tested to r180.
i have tried to setting texture filters (Linear / mipmaps), flipY consistency and tested different browsers on Quest and Nothing changes, the problem only happens in Quest browser.
Has anyone seen this kind of aliasing / shimmering issue specifically in WebXR on Quest 3? Any known renderer/XR settings that help?
Those are the 2 images of the same place from Chrome on my Pc and quest broswer:
Chrome
Quest Browser:
I managed to figure out the cause of the visual artifacts I was seeing on the Meta Quest 3.
It turned out that the problem was the precision in my shader. I was using:
precision mediump float;
precision mediump sampler2D;
On the Quest, mediump isn’t enough for smooth cube map sampling and tone mapping, it caused the mesh topology to become visible as “squares” even when textures were applied.
Changing it to high precision solved the issue:
precision highp float;
precision highp sampler2D;
Now everything renders correctly on the Quest, just like on desktop browsers.
So, if anyone else experiences weird blocky artifacts on VR devices but not on desktop, check your shader precision first,it can save hours of debugging.
I realized I wrote these shaders about 3 months ago and have been using them since then. At the time, I probably chose mediump for reasons like reducing memory usage, improving performance on some devices, or just out of habit to avoid overkill precision. I can’t remember exactly why, but clearly in this case it wasn’t enough for the Meta Quest.
for any one wants to see exactly how was and how it is now :
mediump
highp
4 Likes
