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.
autoClear is for the background color only, you should also set autoClearDepthAndStencil to false to prevent Babylon.js from clearing the depth/stencil.
However, the problem is that each engine assumes that no one will change the WebGL state(s) it has defined… To be safe, you should save all WebGL states before calling the external engine, and put them back afterwards. The problem is that it can be slow to do this every frame (also, I don’t think there is a single function to save/restore states in WebGL, it’s probably not easy to do).
I tried to draw something like background with native WebGL, then draw dynamic 3d scene with babylon. It seems the gl calls will break the Babylon’s rendering states (like binding of buffers / shader programs).
Does Babylon have some kind of reset function like Three.js’s WebGLRenderer.resetState. In three.js this function did exactly the staffs like:
renderLoop = () => {
// draw with native WebGL calls
webglRenderer.render(webglScene, webglCamera);
// draw with Three.js scene
threeRenderer.resetState();
threeRenderer.render(threeScene, threeCamera);
requestAnimationFrame(renderLoop);
}
Thanks, Evgeni! The Pixi example is quite helpful. I eventually did it like this:
renderLoop = () => {
// external webgl renderer
webglRenderer.reset(); // reset states needed by the external renderer
webglRenderer.render(webglScene, webglCamera);
// babylon scene
engine.wipeCaches(true); // reset states needed by babylon
babylonScene.render();
requestAnimationFrame(renderLoop);
}
The engine.wipeCaches(true) will take care of resetting the states needed by Babylon, while the webglRenderer.reset() resets the states needed by Pixi.
Is this implementation logic correct? Each renderer should reset its own states before rendering, when integrating with others.