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	763	June 28, 2023
Any way to learn how to integrate React with Babylon? Questions react	7	1502	January 26, 2023
How to use Babylon with Next JS Questions	24	4227	April 29, 2022
Mixing vanilla js and react questions Questions	4	1025	November 2, 2022
Quick question on rendering multiple scenes on multiple canvases Questions	2	331	November 20, 2022

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

Related Topics