XR - multiview ( layers ) + water material crashes in Quest browser

Hello!

When using Water Material and “layers” ( “useMultiview” ) together, entering VR mode on Meta Quest crashes with following errors:

“232[.WebGL-0x7a08eeff00]GL ERROR :GL_INVALID_OPERATION : glDrawElements: uniform buffers : buffer or buffer range at index 1 not large enough

Here is how I am entering VR to force multi view:

  const options = {
            useMultiview: true,
            disablePointerSelection: true,
            disableNearInteraction: true,
            disableTeleportation: false,
            // Enable frame-rate feature
            defaultXrExperienceOptions: {
                optionalFeatures: ["frame-rate", WebXRFeatureName.LAYERS, "layers"]
            }
        };
        const xrHelper = await scene.createDefaultXRExperienceAsync(options);
        xrHelper.baseExperience.featuresManager.enableFeature(WebXRFeatureName.LAYERS, "latest", 
                   { 
                    preferMultiviewOnInit: true,
                    preferMultiviewOnUpdate: true,
                    multiviewTextureType: 'texture-array', // Ensure compatibility with Oculus Browser
                    colorTextureFormat: Constants.TEXTUREFORMAT_RGBA, // Use the correct RGBA format
                    depthTextureFormat: Constants.TEXTUREFORMAT_DEPTH24,
                    forceSRGBBufferSupportState: true
                   }
                    , true, true);
        this.xrHelper = xrHelper;

When water material is not used - multiview seems to work ( other elements of my scene render ).

Water material also works in VR without multiview - but overall VR performance is very poor ( under 50 FPS ).


I tried modifying water material shaders but couldn’t get it to work - it would always crash for me with those errors. ( By crash, I mean none of my scene elements are rendered - probably because Chrome also logs:

[.WebGL-0x7a00138d00]GL ERROR :GL_INVALID_OPERATION : glDrawElementsInstancedANGLE: uniform buffers : buffer or buffer range at index 1 not large enoughUnderstand this warningAI
localhost/:1 [.WebGL-0x7a00138d00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTextureMultisampleMultiviewOVR: <- error from previous GL commandUnderstand this warningAI
localhost/:1 [.WebGL-0x7a00138d00]GL ERROR :GL_INVALID_OPERATION : glFramebufferTextureMultisampleMultiviewOVR: <- error from previous GL commandUnderstand this warningAI

localhost/:1 WebGL: too many errors, no more errors will be reported to the console for this context.

This is how I create engine and scene:

        this.engine = new Engine(canvas, true, { 
            disableWebGL2Support: false, stencil: true, depth: true, xrCompatible: true, forceSRGBBufferSupportState: true });

this.scene = new BabylonScene(engine);

and this is how I create the water

constructor(scene: Scene) {
        // Create water mesh
        this.ground = Mesh.CreateGround('water', 1000, 1000, 64, scene) as GroundMesh;
        
        this.ground.position.y = 0; // Reset to world zero
        this.ground.rotation.x = 0; // Ensure normal is facing up

        // Create water material
        this.waterMaterial = new CustomWaterMaterial('waterMaterial', scene);
        this.setupWaterMaterial(scene);

        // Apply water material to the ground
        this.ground.material = this.waterMaterial;

        // Create grid overlay
        //this.setupGridOverlay(scene);
    }

    private setupWaterMaterial(scene: Scene): void {
        // Set water properties for more realistic appearance
        this.waterMaterial.windForce = 0.1;
        this.waterMaterial.waveHeight = 0.01;
        this.waterMaterial.windDirection = new Vector2(1, 1);
        this.waterMaterial.waterColor = new Color3(0.1, 0.3, 0.5);
        this.waterMaterial.colorBlendFactor = 0.2;
        this.waterMaterial.bumpHeight = 0.2;
        this.waterMaterial.waveLength = 0.2;
        
        // Increase the default values for more visible effects
        this.waterMaterial.specularPower = 128;
        this.waterMaterial.specularColor = new Color3(1, 1, 1);
        
        // Add bump texture for more realistic waves
        const bumpTexture = new Texture('/assets/textures/waternormals.jpg', scene);
        bumpTexture.level = 0.8; // Increase normal map intensity
        bumpTexture.uScale = 20; // Adjust texture tiling for more detail
        bumpTexture.vScale = 20;
        bumpTexture.wAng = 15; 
        this.waterMaterial.bumpTexture = bumpTexture;

        // Add skybox to reflections if it exists
        const skybox = scene.getMeshByName('skyBox');
        if (skybox) {
            //this.waterMaterial.addToRenderList(skybox);
        }
    }
1 Like

Hey,

Interesting. Probably an issue with the water material shader not adjusted to multiview rendering.

Would you be able to recreate that on the playground? So we will have a base playground we can work on together?

Hey ho!

This seems to reproduce the issue for me:

Open on Meta Quest browser - click the button - if VR doesn’t open - click now visible standard Babylon.js VR button in the bottom right corner -

At this stage, it should be possible to see errors in Chrome console ( accessible when Quest is connected via USB in debug mode and visiting chrome://inspect/#devices )

logger.ts:107 BJS - [22:10:49]: Babylon.js v8.1.1 - WebGL2
engine.dynamicTexture.ts:94 WebGL: INVALID_OPERATION: texImage2D: no texture bound to target
Co.ThinEngine.updateDynamicTexture @ engine.dynamicTexture.ts:94Understand this warningAI
2VM42:37 Hello World
VM42:58 t
203[.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glDrawElements: uniform buffers : buffer or buffer range at index 1 not large enoughUnderstand this warningAI
/#7NTI9E#7:1 [.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL commandUnderstand this warningAI
/#7NTI9E#7:1 [.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL commandUnderstand this warningAI
48[.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glFramebufferTextureMultisampleMultiviewOVR: <- error from previous GL commandUnderstand this warningAI
/#7NTI9E#7:1 [.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL commandUnderstand this warningAI
/#7NTI9E#7:1 [.WebGL-0x7a0e77d400]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL commandUnderstand this warningAI
/#7NTI9E#7:1 WebGL: too many errors, no more errors will be reported to the console for this context.Understand this warningAI
1 Like

The water material (and actually all materials in the babylon materials library) does not work in multiview, as it is missing the multiview extension in the shader.
We can see if we find time to support multiview in those materials as well for the next release

1 Like