I have been looking to integrate cesiumjs tilemapping with babylonjs for visualizations and physics. I finally got it working, and it was easier than I had imagined on my first approaches. Patch is at the bottom of the post.
The general idea is to disable the DynamicEnvironmentMapManager, and then feed the cesium camera the data it expects like coordinates and frustum geometry.
If you are interested in seeing the project in action, check out https://alpha.moonwurms.pages.dev for the early early versions. I’d welcome any feedback or questions!
I know there have been some open questions about cesium integration with babylon, and well, I think this is the best way so far. There is no double canvas or webglcontext sharing or anything like that. This is using 1 canvas that babylon controls. Cesium just takes locations and tells babylon which glb to render or not. I’d love to hear any deeper cesium tricks that could help this approach out!
I do have a PR out for this change to be made to cesium, and I’m not sure the best route to get that noticed, other than patience. :=D
Also, I’d like to gain a better opinion on whether the cesium/cesium ion attributions are properly conveyed in the app. Check the cesium attributes in the images below please.
Patch to force-disable a feature in the constructor
diff --git a/node_modules/@cesium/engine/Source/Scene/Cesium3DTileset.js b/node_modules/@cesium/engine/Source/Scene/Cesium3DTileset.js
index 4a72983..14d35ae 100644
--- a/node_modules/@cesium/engine/Source/Scene/Cesium3DTileset.js
+++ b/node_modules/@cesium/engine/Source/Scene/Cesium3DTileset.js
@@ -109,6 +109,7 @@ import ImageryLayerCollection from "./ImageryLayerCollection.js";
* @property {Cartesian3} [lightColor] The light color when shading models. When <code>undefined</code> the scene's light color is used instead.
* @property {ImageBasedLighting} [imageBasedLighting] The properties for managing image-based lighting for this tileset.
* @property {DynamicEnvironmentMapManager.ConstructorOptions} [environmentMapOptions] The properties for managing dynamic environment maps on this tileset.
+ * @property {boolean} [disableDynamicMapManager=false] Whether to disable creation of the dynamic environment map manager for this tileset.
* @property {boolean} [backFaceCulling=true] Whether to cull back-facing geometry. When true, back face culling is determined by the glTF material's doubleSided property; when false, back face culling is disabled.
* @property {boolean} [enableShowOutline=true] Whether to enable outlines for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. This can be set to false to avoid the additional processing of geometry at load time. When false, the showOutlines and outlineColor options are ignored.
* @property {boolean} [showOutline=true] Whether to display the outline for models using the {@link https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Vendor/CESIUM_primitive_outline|CESIUM_primitive_outline} extension. When true, outlines are displayed. When false, outlines are not displayed.
@@ -846,9 +847,14 @@ function Cesium3DTileset(options) {
this._shouldDestroyImageBasedLighting = true;
}
- this._environmentMapManager = new DynamicEnvironmentMapManager(
- options.environmentMapOptions,
- );
+ if (!options.disableDynamicMapManager) {
+ this._environmentMapManager = new DynamicEnvironmentMapManager(
+ options.environmentMapOptions,
+ );
+ } else {
+ this._environmentMapManager = undefined;
+ console.debug("Dynamic environment map manager disabled.");
+ }
/**
* The light color when shading models. When <code>undefined</code> the scene's light color is used instead.
@@ -3533,10 +3539,12 @@ Cesium3DTileset.prototype.updateForPass = function (
if (passOptions.isRender) {
const environmentMapManager = this._environmentMapManager;
- if (defined(this._root)) {
+ if (defined(environmentMapManager) && defined(this._root)) {
environmentMapManager.position = this.boundingSphere.center;
}
- environmentMapManager.update(frameState);
+ if (defined(environmentMapManager)) {
+ environmentMapManager.update(frameState);
+ }
}
// Update clipping polygons
@@ -3641,7 +3649,10 @@ Cesium3DTileset.prototype.destroy = function () {
}
this._imageBasedLighting = undefined;
- if (!this._environmentMapManager.isDestroyed()) {
+ if (
+ defined(this._environmentMapManager) &&
+ !this._environmentMapManager.isDestroyed()
+ ) {
this._environmentMapManager.destroy();
}
this._environmentMapManager = undefined;
diff --git a/node_modules/@cesium/engine/index.d.ts b/node_modules/@cesium/engine/index.d.ts
index 0e28388..9f96f99 100644
--- a/node_modules/@cesium/engine/index.d.ts
+++ b/node_modules/@cesium/engine/index.d.ts
@@ -29883,6 +29883,7 @@ export namespace Cesium3DTileset {
lightColor?: Cartesian3;
imageBasedLighting?: ImageBasedLighting;
environmentMapOptions?: DynamicEnvironmentMapManager.ConstructorOptions;
+ disableDynamicMapManager?: boolean;
backFaceCulling?: boolean;
enableShowOutline?: boolean;
showOutline?: boolean;
