# Working with external webgl2 context

**URL:** <https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179>\
**Category:** Questions\
**Created:** [March 19, 2023, 11:19am UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179 "2023-03-19T11:19:55Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![giraphics](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giraphics/32/22151_2.png) [@giraphics](https://forum.babylonjs.com/u/giraphics)\
**Post date:** [March 19, 2023, 11:19am UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/1 "2023-03-19T11:19:55Z")

</div>

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](https://forum.babylonjs.com/t/scenes-auto-clear-not-working/39157)

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.

 ![MixingWebGL2andBabylonJS](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/914fe6cfb102fdc74f2b98ff1bbd1e5046174bc4.png)

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.  
 ![webgl2-babylon-mixing](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/9/a94c7fb4ec590be49082489d3526d84d5fede8c0.gif)

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](https://github.com/giraphics/babylonjs-external-webglcontext2)

**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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2023, 11:19am UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/2 "2023-03-20T11:19:51Z")

</div>

`autoClear` is for the background color only, you should also set `autoClearDepthAndStencil` to `false` to prevent Babylon.js from clearing the depth/stencil.

---

<div class="post-metadata">

**Author:** ![giraphics](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giraphics/32/22151_2.png) [@giraphics](https://forum.babylonjs.com/u/giraphics)\
**Post date:** [March 20, 2023, 12:02pm UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/3 "2023-03-20T12:02:43Z")

</div>

Hi @Evgeni_Popov,

The depth issue is resolved, thanks for your suggestion.

> <https://github.com/giraphics/babylonjs-external-webglcontext2/commit/efa679c014b25bd7857dc424c30bec98fc51e83a>

However, there is one issue still remaining I am battling with which is the incorrect sphere color.  
 ![webgl2-babylon-mixing-depth-fixed](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/1/41c2005aca3f48ddbcecdd97049d6c892e108cff.gif)

I try to set the engine’s wipe cache it restores the sphere color but completely wipes my custom webgl2 custom scene.

```auto
      scene.beforeRender = () => {
        engine.wipeCaches(true);
      };

```

Any help on the issue is highly appreciated.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 20, 2023, 5:21pm UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/4 "2023-03-20T17:21:36Z")

</div>

Try `scene.resetCachedMaterial()` instead.

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).

---

<div class="post-metadata">

**Author:** ![giraphics](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/giraphics/32/22151_2.png) [@giraphics](https://forum.babylonjs.com/u/giraphics)\
**Post date:** [March 23, 2023, 1:09pm UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/5 "2023-03-23T13:09:57Z")

</div>

Thanks, @Evgeni_Popov I understand that keeping track of WebGL global states is tough.  
The `scene.resetCachedMaterial()` again raises the depth issue.

This is an experimental project, and I learned how to better use Babylon with external context. Thanks for your help. I am closing this issue.

---

<div class="post-metadata">

**Author:** ![xiasun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiasun/32/36884_2.png) [@xiasun](https://forum.babylonjs.com/u/xiasun)\
**Post date:** [March 18, 2024, 6:51am UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/6 "2024-03-18T06:51:30Z")

</div>

Hi all, I am also having similar problems here.

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](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.resetState). In three.js this function did exactly the staffs like:

```javascript
renderLoop = () => {
    // draw with native WebGL calls
    webglRenderer.render(webglScene, webglCamera);
    // draw with Three.js scene
    threeRenderer.resetState();
    threeRenderer.render(threeScene, threeCamera);
    requestAnimationFrame(renderLoop);
}

```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 18, 2024, 8:31am UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/7 "2024-03-18T08:31:17Z")

</div>

You can try to call `engine.wipeCaches(true)` and see if that helps. This doc page shows how PIXI and Babylon.js can work together:

[https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS\_and\_PixiJS](https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_PixiJS)

---

<div class="post-metadata">

**Author:** ![xiasun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/xiasun/32/36884_2.png) [@xiasun](https://forum.babylonjs.com/u/xiasun)\
**Post date:** [March 18, 2024, 12:21pm UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/8 "2024-03-18T12:21:13Z")

</div>

Thanks, Evgeni! The Pixi example is quite helpful. I eventually did it like this:

```javascript
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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [March 18, 2024, 2:41pm UTC](https://forum.babylonjs.com/t/working-with-external-webgl2-context/39179/9 "2024-03-18T14:41:04Z")

</div>

It seems fine to me!