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);
}
}