Hello! Like a few developers I picked up a Quest 2 and started playing with BabylonJS’s WebXR features. I’m having issues with a few pieces of Babylon that work in a regular scene but not with the WebXR camera. I’m wondering if these are intended and if there is a workaround for them.
1: The default scene clear background doesn’t render anything so it never gets cleared and you get that trippy kaleidoscope / visual echo effect. setting scene.clearColor = BABYLON.Color3.Blue() doesn’t have any effect. I imagine setting a skybox would solve this issue but I haven’t made that attempt yet.
This fog will appear in the default camera before entering WebXR but once in the XRCamera the fog disappears. Since WebXR has a high need for performance I really shorten the draw distance and was relaying on fog to hide the end of the draw plane (classic approach styles)
3: engine.setHardwareScalingLevel(5)
Setting the hardware scaling level higher than 1 seems to have no effect in the WebXR camera. I was using the scaling level and nearest neighbour upscaling for aesthetic reasons in order to create a pixelated retro fps, not just with low res textures and low poly models but also low fidelity rendering to mimic 90s era 3d.
I was curious to know what this would look like in VR and I’m wondering if it’s even possible or if the aesthetic design even translates well
4: Scale and world scale is 1 unit = 1 meter. I am familiar with this from my AR work but I was curious about scaling the whole scene up or down while leaving the player in the same relative spot. The effect would be akin to Alice in Wonderland and the “eat me” “drink me” effects. The scene should scale but the players y camera position should stay so that reaching down to the floor means traveling the same physical distance as before scaling.
Thanks!
I’ve been playing with Babylon for a few years now, always as a hobby, and I’ve enjoyed it a lot so I just wanted to add a little note of gratitude here : )
This is rather weird. The original quest does render the scene clear color. I am all for deliberate trippy effects, but not when they are unintentional. Does it happen on every scene? Even the examples from our playground? I will be very happy to test that, but I want to know I am testing what you see. you need to add “new” before setting the vector. I missed that in another answer as well
I have to admit I never tested fogs. So i went to my quest and tested a fogged scene. It does work on my quest 1, same goes to my Windows MR device. The scene I am testing is this - https://www.babylonjs-playground.com/#7G0IQW#128 . Does it not display correctly on the quest 2?
Hardware scaling is meant as a way to manipulate the canvas. As WebXR doesn’t use the canvas (but uses its own WebGL context that has a specific width and height), hardware scaling doesn’t work on it.
Yeah! Alice in wonderland sounds awesome . It was a feature request not so long ago, but I never got into doing that. I find the 1 unit=== 1 meter a nice approach that keeps the scene consistent. But I guess experienced developers can deal with that very well. The simplest way to achieve it right now is to resize your scene from the player’s standing point. But I don’t mind having that on github as a future feature to implement if you find it useful. Want to add it? Ping me there, I will label and assign it.
I think the fog was working but my value was too low for the xr scene compared to the lower resolution web scene. I also didn’t notice the fog due to the #1 issue since fog wasn’t rendering on the furthest parts of the scene. Bumping up the value clearly makes the fog visible on close objects.
I uploaded two images, the webxr image is from my phone and not quest 2 but they are seeing the same issue. Here we can see i set the scene clear colour to red instead of the same colour as the fog and it is visible outside of the xr. In the XR I still get that ghosting issue. Since I don’t see that issue on my phone with the playground XR demos it must be how I setup my scene. I don’t know which vector needs the “new” before setting in this comment: you need to add “new” before setting the vector.
3: is it possible to change the render size of the WebGL context that WebXR is using? maybe we can reduce its size and simulate rendering to a smaller screen? if the aspect ratio is kept the same do you know if the XR device will accept it and still draw it across the whole screen?
[edit] I looked a bit into the webgl context. I think after it’s instantiated we can’t change its buffer sizes. I think I might have to get this retro aesthetic with some post-processing pixel shaders. That’s not bad, I could also do colour clamping to reduce the colour range (reduce the pixel to 16bit or 8 bit colour). maybe a lookup table is possible to have specific palettes? shaders do provided more custom options, but just setting a value to 5 was also nice while it lasted : )
4: I’ll experiment with shifting the scales of the world and keeping the player’s feet as the pivot point and if it isn’t too crazy or complex i can at least make a playground for it to share
So - quickly about clean color - is this working for you - https://playground.babylonjs.com/#QN92LE#4 ? i tested it and it does work. If you have a demo where it doesn’t work, please share it with me so I can test it.
About changing the render size - it is technically possible to change the resolution. I haven’t tried it, and it will require a bit of changes to the code to publicly allow this. If you want to create a github issue for reference, please do. I will look into it after the 4.2 release. Same thing goes to the scene resizing factor
Okay so, I tested in the Q2 and the playground works. I updated my codebase to Babylonjs 4.2.0-beta.17 and I am no longer getting the issue with the clear background. It might be a bug specific to 4.1? the playground is in 4.2 right? so maybe that’s why playground was working but my codebase wasn’t.
I updated to 4.2 so I could get post processing working and lo-fi vr is… interesting, especially with flat polygonal shading. without aa and anisotropic filtering the horizon is a jumble of pixels. Also I think my pixels aren’t square so its a lot more like text-mode block-characters, that’s probably my fault with my shader code
You know, I suddenly thought about it - hardware scaling doesn’t work, but framebuffer rescaling does…
See here - https://www.babylonjs-playground.com/#5EQA9Y#3 . So no need for a shader, webxr will take care of it for you. I simply forgot this option exists and then suddenly found it today again. Maybe as the one who implemented it i should have remembered it is available…
