Using Babylon in Three JS context

Questions
1

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.

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

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.

2

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 ?

3

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.

4

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 :slight_smile:

5

I have tried with engine.wipeCaches(true). Here is test commit. Unfortunately, it clears the ThreeJS rendered scene blank.

6

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

1 Like
7

Thanks, @Deltakosh for the suggestion. I will try to dig into the three JS states more. Thanks for the other suggestion too.

8

Hi @giraphics,

You can try https://threejs.org/docs/#api/en/renderers/WebGLRenderer.resetState, also to debug there is the excellent extension Spector.js - Chrome Web Store wich will give very usefull infos about WebGL states.

2 Likes
9

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.

2 Likes
10

Thanks @sharp for the pointers. Sorry for the late reply, I was vacationing.

1 Like