Hi,
I have a Babylon engine that needs to work with an external webgl2 implementation as per new requirements.
Babylon does support this requirement by passing WebGL context 2 in the engine parameter.
I have created a small application that mimics
- an external webgl2 engine - this is a small pure webgl2 code that renders a color cube.
I have also created a small Babylon scene with a simple Sphere.
- I have set the
scene.autoClear = false
and specified{preserveDrawingBuffer : true}
as per this thread suggestion. Scene's auto clear not working
I created a render loop callback where I call the
-
WebGL2 Scene first, clear background and enable depth buffer.
renderGLCube(weglgl2Context, canvas.width, canvas.height, time+=0.01);
-
I render the Babylon scene next to where I render Sphere.
renderBabylonSphere()
Now, if I render them individually they work well. In the below image, you can see the output.
The problem appears when both scenes are rendered together and in the Babylon JS scene.
- The color of the sphere gets influenced.
- The depth is not working, is my understanding correct here?
See the below output.
In my case, the external engine could be any other third-party WebGL2 implementation.
Source code: GitHub - giraphics/babylonjs-external-webglcontext2: Babylon with external GL context example
Query: How can I make the Babylon scene rendering correct without getting influenced by an external engine, I really don’t know in real situations what global webgl2 states that engine is going to affect.