Can we render threejs component and babylonjs component in the same screen?

surabhi_arora · May 5, 2020, 1:18pm

Can we render threejs component and babylonjs component in the same scene or on same canvas ??If possible can you provide some demo playground??

Deltakosh · May 5, 2020, 3:01pm

Yes it is feasible as we can instantiate the engine on an existing gl context

The only thing to know is that you need to call engine.wipeCaches(true) before rendering with Babylon

brianzinn · May 5, 2020, 7:34pm

What DK said. You need to first decide which you are rendering in foreground/background as well.
Use wipeCaches(true) before rendering with something else (if you are putting Babylon behind) and use scene.autoClear = false; if you are putting Babylon on top.

I have some PIXI examples using onEndRenderObservable, but they are a bit hard to read if you don’t know React hooks:

github.com

brianzinn/react-babylonjs/blob/master/stories/babylonjs/Integrations/pixi-render.stories.js#L49


    renderer: new PIXI.Renderer(options), // use PIXI.WebGLRender <= PIXI v5.0
    stage: new PIXI.Container()
  }
}


useEffect(() => {
  // NOTE: to render PIXI in the background (BabylonJS in foreground) do 2 things differently:
  // 1. use onBeforeRenderLoopObservable()
  // 2. scene.autoClear = false;
  const observer = props.onEndRenderLoopObservable.add(engine => {
    engine.wipeCaches(true);
    const { renderer } = pixiRefs.current;
    renderer.reset();
    renderer.render(pixiRefs.current.stage);
    renderer.reset(); // need to reset again :)
  })


  return () => {
    props.onEndRenderLoopObservable.remove(observer);
  }
})

Looks like this - the fonts are done in PIXI v5:
https://brianzinn.github.io/react-babylonjs/?path=/story/integrations--pixi-story

For three, I think you just need to call render on your THREE.WebGLRenderer and you will need alpha true for foreground rendering. Maybe you can make a codepen or something to try it out?

surabhi_arora · May 6, 2020, 4:58am

ok,Thank you!

Topic		Replies	Views
Using Babylon in Three JS context Questions webgl	9	1048	June 28, 2023
Multiple Engines Questions	4	737	September 15, 2023
PIXI Container as a Babylon Texture Questions	20	1910	January 8, 2020
Any way to learn how to integrate React with Babylon? Questions react	7	1927	January 26, 2023
How to use Babylon with Next JS Questions	24	4987	April 29, 2022

Can we render threejs component and babylonjs component in the same screen?

Related topics