BabylonJS is integrated with other WebGL libraries

I need babylonjs to fuse with maplibre and deck.gl, maplibre has an example of fusion

https://maplibre.org/maplibre-gl-js/docs/examples/add-3d-model-babylon/

One of the problems with this implementation is that there is no depth occlusion, which may require a deep understanding of the babylonjs render pipeline;

Can the babylonjs team publish the following two articles:

  1. Articles on the BabylonJS Render Pipeline;
  2. How to configure babylonjs when integrating with other webgl libraries;

Documented here:
Babylon.js and Pixi.js | Babylon.js Documentation (babylonjs.com)

That at least goes through why there is autoClear and wipeCaches are doing in the example you have provided. There are some articles on default render pipeline - sounds like maybe you want a flat map to occlude a portion of the babylon.js scene?

The following two examples illustrate the problems that arise when BabylonJS is fused with MapLibre

maplibre-babylon (codepen.io)

maplibre-three (codepen.io)

In both examples, the buildings and maps are rendered by maplibre, and the antenna models are rendered by babylonjs or threejs;

But in the maplibre-babylon example, the antenna is always displayed in front of the building;

maplibre-three will display it normally;

What do you mean by that? The antenna model is displayed by Babylon.js in this link.

I don’t see any difference between the Threejs and Babylon.js links (except there are two antennas in the latter)?

I’ve rewritten two examples to show this problem

You must also disable depth/stencil clearing by setting this.scene.autoClearDepthAndStencil = false;.