# Using Babylon in Three JS context **URL:** \ **Category:** Questions\ **Tags:** webgl\ **Created:** [June 15, 2023, 10:45am UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625 "2023-06-15T10:45:13Z")\ **Posts on this page:** 10\ **Page:** 1
**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:** [June 15, 2023, 10:45am UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/1 "2023-06-15T10:45:13Z")
Hi, I need to render Babylon JS in an external ThreeJS context. For this, I am creating Babylon engine with webgl2 context(with `preserveDrawingBuffer= true`). I have the detached control from scene (`detachControl`) and used a camera from three JS. Here is the [source code link](https://github.com/giraphics/babylonjs-in-threejs-engine). Both Three JS and Babylon render wireframe boxes. - I rendered the Three JS engine first and Babylon after it. - While the Babylon engine is rendering I ensured scene `autoClear` and `autoClearDepthAndStencil` so that it won’t overwrite three js frame buffers. Upon rendering, below is the result looks like:- ![1-output](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/d/adc2eb5d17ee4c9ad308ced8ed4d68eb78b1aa03.gif) This is incorrect; (a) the Babylon box is not fully rendered (b) the ThreeJS box is invible. Now, let set Babylon box’s `position.y` to 2 and here is the output:- ![2-box_position_y_set_2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/b/8bac4417c0d174a056db5022a93f29e3aa8813cd.gif) Now, the box is rendering half window, but the ThreeJS box is still invisible. Further, when this box position.y is set to 10, here the threeJS box start appearing. ![3-box_position_y_set_10](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/8/d8b88f40f43974699741971faa3035313fb08f87.gif) I have used Babylon with other external engines, and it works well, here, it seems pretty much closer but not rendering the result as expected. Am I missing something, please help. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 15, 2023, 1:05pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/2 "2023-06-15T13:05:37Z")
I am pretty sure some webgl context states have not been reset between both renders and resetting them would work but introduce quite some level of inefficiency in your pipeline. What are you doing in three that you can not do in babylon ? ---
**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:** [June 15, 2023, 1:20pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/3 "2023-06-15T13:20:22Z")
Thanks @sebavan. We have our Graphics engine written in Babylon JS, we used it as a library (npm package to integrate with client-side products. The client projects are using 3rd party rendering engines like MapBox GL. Some clients are using ThreeJS in their products widely, so it makes sense for us to reuse our rendering engine in their system. ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 15, 2023, 1:55pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/4 "2023-06-15T13:55:11Z")
Makes sense, did you try to call engine.wipeCaches(true); before rendering with babylon ? Can you repro in jsfiddle or similar to get our hands on so more ppl could jump on helping easily. This can increase the number of ppl giving it a try 🙂 ---
**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:** [June 15, 2023, 2:24pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/5 "2023-06-15T14:24:12Z")
I have tried with `engine.wipeCaches(true)`. Here is test [commit](https://github.com/giraphics/babylonjs-in-threejs-engine/commit/ed892050a6fd91132c5f971c8582c121aa4ee327). Unfortunately, it clears the ThreeJS rendered scene blank. ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [June 15, 2023, 4:01pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/6 "2023-06-15T16:01:29Z")
Yes this is expected (somehow). Each engine will keep track on their states and will not know what the other engine is doing. When you call wipeCaches, babylonjs will assume it has to reset everything so it will work for babylon. You may need to find a similar api in threejs maybe? Other idea: create 2 canvases and use a transparent clear color on the second one ---
**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:** [June 16, 2023, 9:19am UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/7 "2023-06-16T09:19:04Z")
Thanks, @Deltakosh for the suggestion. I will try to dig into the three JS states more. Thanks for the other suggestion too. ---
**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\ **Post date:** [June 19, 2023, 10:29am UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/8 "2023-06-19T10:29:31Z")
Hi @giraphics, You can try [https://threejs.org/docs/#api/en/renderers/WebGLRenderer.resetState](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.resetState), also to debug there is the excellent extension [Spector.js - Chrome Web Store](https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk) wich will give very usefull infos about WebGL states. ---
**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\ **Post date:** [June 25, 2023, 4:32pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/9 "2023-06-25T16:32:37Z")
There was some breaking change in three maybe 2 years ago that prevented using phaser within the three context. Im sure same limitation applies to bjs/whatever else. ---
**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:** [June 28, 2023, 1:16pm UTC](https://forum.babylonjs.com/t/using-babylon-in-three-js-context/41625/10 "2023-06-28T13:16:37Z")
Thanks @sharp for the pointers. Sorry for the late reply, I was vacationing.