In the past two years, my projects have been developed based on Three.js, and a large number of functional projects have become increasingly large. Due to the lack of support for fluid rendering in Three.js, development has become increasingly difficult. Now I want to use babylon.js’ particle fluid rendering engine in my Three.js project to achieve the goal of supporting fluids. Later on, I will gradually transition my Three.js project to babyon.js. Due to the many features I have developed based on Three.js, I am unable to migrate to Babylon all at once. So I want to use babylon.js in the fluid part. Others still use Three.js. What should I do? Is there a column that combines Three.js and Babylon.js for rendering?
Hello @WREQI , how are you doing?
I think what you are trying might be very difficult to do since none of the libraries expose API or are designed to do this kind of thing. It might be “possible” to do it if you somehow grab the WebGL/WebGPU objects that are used internally be the engines and share those object from one engine to the other, but that would require a deep understanding on how both Babylon.js and Three.js work internally. This might be more work than just switching everything to Babylon.
I think @Evgeni_Popov might know if this even possible to do at all.
Working on basic scenes the biggest tricks would be to call engine.wipeCaches(true) before rendering with babylon and I do not know if you would need some similar functions on three.
The main issue are the conflicting webgl states that would stay in cache to improve perfs.
Fluid rendering being pretty complex, I am not sure whether it would work in this case.
Particle System | Babylon.js Documentation
Is the particle system decoupled from babylon.js, and can it be directly used in Three.js? I want to solve it step by step. The first step is to use babylon.js’ particle system in Three.js. The second step is to use babylon.js’ fluid renderer based on particle positions. The third step is to deeply fuse Three.js and babylon.js scenes
No, the particle system feature is tied to Babylon.js and can’t be reused with other engines. As @sebavan said, you will probably have to call engine.wipeCaches(true) if you want to mix Threejs and Babylon.js rendering, but it still may be difficult to make them coexist, as they were not designed to do so. You should look for other threads in this forum, as I think other users tried to do the same thing.
Here pixi.js was merged with babylon.js. Maybe you can find approaches here to integrate three.js as well.
Babylon.js and Pixi.js | Babylon.js Documentation
I can also think of another approach: The concept of a middleware and a facade. Rewriting your programs would be a huge effort. Why not consider threejs as a server that communicates with babylon via the middleware. babylon would then only be a view component that is controlled… these are just rough ideas that need to be worked out better.