chore: update dependency cesium to v1.107.0 (#609)

* chore: update dependency cesium to v1.107.0 * fix: support async initialization for Cesium3DTileset * update Model to 1.107 * fix other entity * fix: some bug --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: keiya01 <keiya.s.0210@gmail.com> Co-authored-by: KaWaite <34051327+KaWaite@users.noreply.github.com>
reearth · Jul 19, 2023 · cb32613 · cb32613
1 parent 9ded756
commit cb32613
Show file tree

Hide file tree

Showing 19 changed files with 234 additions and 114 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@types/react": "18.0.28",
     "@vitejs/plugin-react": "4.0.2",
     "c8": "8.0.0",
-    "cesium": "1.103.0",
+    "cesium": "1.107.0",
     "eslint": "8.44.0",
     "eslint-config-reearth": "0.2.2",
     "globby": "13.2.2",

diff --git a/src/Cesium3DTileset/Cesium3DTileset.ts b/src/Cesium3DTileset/Cesium3DTileset.ts
@@ -27,8 +27,7 @@ export type Cesium3DTilesetCesiumProps = PickCesiumProps<CesiumCesium3DTileset,
 
 export type Cesium3DTilesetCesiumReadonlyProps = PickCesiumProps<
   Merge<CesiumCesium3DTileset, ConstructorOptions<typeof CesiumCesium3DTileset>>,
-  typeof cesiumReadonlyProps,
-  "url"
+  typeof cesiumReadonlyProps
 >;
 
 export type Cesium3DTilesetCesiumEvents = {
@@ -44,6 +43,8 @@ export type Cesium3DTilesetCesiumEvents = {
 export type Cesium3DTilesetOtherProps = EventProps<Cesium3DTileFeature> & {
   /** Calls when the tile set is completely loaded. */
   onReady?: (tileset: CesiumCesium3DTileset) => void;
+  onError?: (err: unknown) => void;
+  url: string;
 };
 
 export type Cesium3DTilesetProps = Cesium3DTilesetCesiumProps &
@@ -106,10 +107,11 @@ const cesiumProps = [
   "instanceFeatureIdLabel",
   "imageBasedLighting",
   "outlineColor",
+  "cacheBytes",
+  "maximumCacheOverflowBytes",
 ] as const;
 
 const cesiumReadonlyProps = [
-  "url",
   "showOutline",
   "cullWithChildrenBounds",
   "debugHeatmapTilePropertyName",
@@ -130,13 +132,21 @@ export const cesiumEventProps = {
   onTileVisible: "tileVisible",
 } as const;
 
-export const otherProps = ["onReady"] as const;
+export const otherProps = ["onReady", "onError", "url"] as const;
 
 const Cesium3DTileset = createCesiumComponent<CesiumCesium3DTileset, Cesium3DTilesetProps>({
   name: "Cesium3DTileset",
-  create(context, props) {
+  async create(context, props) {
     if (!context.primitiveCollection) return;
-    const element = new CesiumCesium3DTileset(props);
+    let element;
+    try {
+      element = await CesiumCesium3DTileset.fromUrl(props.url, props);
+      props.onReady?.(element);
+    } catch (e) {
+      props.onError?.(e);
+      return;
+    }
+
     if (props.colorBlendAmount) {
       element.colorBlendAmount = props.colorBlendAmount;
     }
@@ -146,9 +156,6 @@ const Cesium3DTileset = createCesiumComponent<CesiumCesium3DTileset, Cesium3DTil
     if (props.style) {
       element.style = props.style;
     }
-    if (props.onReady) {
-      element.readyPromise.then(props.onReady);
-    }
     context.primitiveCollection.add(element);
     return element;
   },

diff --git a/src/CesiumWidget/CesiumWidget.ts b/src/CesiumWidget/CesiumWidget.ts
@@ -55,11 +55,12 @@ const cesiumProps = [
   "useDefaultRenderLoop",
   "targetFrameRate",
   "useBrowserRecommendedResolution",
+  "creditDisplay",
 ] as const;
 
 const cesiumReadonlyProps = [
   "clock",
-  "imageryProvider",
+  "baseLayer",
   "terrainProvider",
   "skyBox",
   "skyAtmosphere",
@@ -75,6 +76,7 @@ const cesiumReadonlyProps = [
   "creditViewport",
   "shadows",
   "terrainShadows",
+  "terrain",
   "requestRenderMode",
   "maximumRenderTimeChange",
   "msaaSamples",

diff --git a/src/ClassificationPrimitive/ClassificationPrimitive.ts b/src/ClassificationPrimitive/ClassificationPrimitive.ts
@@ -70,12 +70,17 @@ const ClassificationPrimitive = createCesiumComponent<
   ClassificationPrimitiveProps
 >({
   name: "ClassificationPrimitive",
-  create(context, props) {
+  async create(context, props) {
     if (!context.primitiveCollection) return;
     const element = new CesiumClassificationPrimitive(props);
     if (props.onReady) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      element.readyPromise.then(props.onReady);
+      const handlePostRender = () => {
+        if (element.ready) {
+          props.onReady?.(element);
+          context.scene?.postRender.removeEventListener(handlePostRender);
+        }
+      };
+      context.scene?.postRender.addEventListener(handlePostRender);
     }
     context.primitiveCollection.add(element);
     return element;

diff --git a/src/GroundPolylinePrimitive/GroundPolylinePrimitive.ts b/src/GroundPolylinePrimitive/GroundPolylinePrimitive.ts
@@ -74,7 +74,13 @@ const GroundPolylinePrimitive = createCesiumComponent<
     if (!context.primitiveCollection) return;
     const element = new CesiumGroundPolylinePrimitive(props);
     if (props.onReady) {
-      element.readyPromise.then(props.onReady);
+      const handlePostRender = () => {
+        if (element.ready) {
+          props.onReady?.(element);
+          context.scene?.postRender.removeEventListener(handlePostRender);
+        }
+      };
+      context.scene?.postRender.addEventListener(handlePostRender);
     }
     context.primitiveCollection.add(element);
     return element;

diff --git a/src/GroundPrimitive/GroundPrimitive.ts b/src/GroundPrimitive/GroundPrimitive.ts
@@ -71,7 +71,13 @@ const GroundPrimitive = createCesiumComponent<CesiumGroundPrimitive, GroundPrimi
     if (!context.primitiveCollection) return;
     const element = new CesiumGroundPrimitive(props);
     if (props.onReady) {
-      element.readyPromise.then(props.onReady);
+      const handlePostRender = () => {
+        if (element.ready) {
+          props.onReady?.(element);
+          context.scene?.postRender.removeEventListener(handlePostRender);
+        }
+      };
+      context.scene?.postRender.addEventListener(handlePostRender);
     }
     context.primitiveCollection.add(element);
     return element;

diff --git a/src/ImageryLayer/ImageLayer.stories.tsx b/src/ImageryLayer/ImageLayer.stories.tsx
@@ -14,12 +14,10 @@ export const Basic: Story<ImageryLayerProps> = args => (
   <Viewer full>
     <ImageryLayer
       {...args}
-      imageryProvider={
-        new ArcGisMapServerImageryProvider({
-          url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-        })
-      }
+      imageryProvider={ArcGisMapServerImageryProvider.fromUrl(
+        "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
+      )}
     />
-    <ImageryLayer alpha={0.5} imageryProvider={new IonImageryProvider({ assetId: 3812 })} />
+    <ImageryLayer alpha={0.5} imageryProvider={IonImageryProvider.fromAssetId(3812, {})} />
   </Viewer>
 );
diff --git a/src/ImageryLayer/ImageryLayer.ts b/src/ImageryLayer/ImageryLayer.ts
@@ -1,4 +1,4 @@
-import { ImageryLayer as CesiumImageryLayer } from "cesium";
+import { ImageryLayer as CesiumImageryLayer, ImageryProvider } from "cesium";
 
 import { createCesiumComponent, PickCesiumProps, Merge, ConstructorOptions2 } from "../core";
 
@@ -42,13 +42,15 @@ export type Target = Merge<CesiumImageryLayer, ConstructorOptions2<typeof Cesium
 
 export type ImageryLayerCesiumProps = PickCesiumProps<Target, typeof cesiumProps>;
 
-export type ImageryLayerCesiumReadonlyProps = PickCesiumProps<
-  Target,
-  typeof cesiumReadonlyProps,
-  "imageryProvider"
->;
+export type ImageryLayerCesiumReadonlyProps = PickCesiumProps<Target, typeof cesiumReadonlyProps>;
 
-export type ImageryLayerProps = ImageryLayerCesiumProps & ImageryLayerCesiumReadonlyProps;
+export type ImageryLayerOtherProps = {
+  imageryProvider: ImageryProvider | Promise<ImageryProvider>;
+};
+
+export type ImageryLayerProps = ImageryLayerCesiumProps &
+  ImageryLayerCesiumReadonlyProps &
+  ImageryLayerOtherProps;
 
 const cesiumProps = [
   "alpha",
@@ -70,18 +72,34 @@ const cesiumProps = [
 ] as const;
 
 const cesiumReadonlyProps = [
-  "imageryProvider",
   "rectangle",
   "maximumAnisotropy",
   "minimumTerrainLevel",
   "maximumTerrainLevel",
+  "readyEvent",
 ] as const;
 
+const otherProps = ["imageryProvider"] as const;
+
 const ImageryLayer = createCesiumComponent<CesiumImageryLayer, ImageryLayerProps>({
   name: "ImageryLayer",
-  create(context, props) {
+  async create(context, props) {
     if (!context.imageryLayerCollection) return;
-    const element = new CesiumImageryLayer(props.imageryProvider, props);
+
+    const maybePromise = props.imageryProvider;
+
+    let result: ImageryProvider;
+    if (
+      maybePromise &&
+      typeof maybePromise === "object" &&
+      typeof (maybePromise as Promise<unknown>).then === "function"
+    ) {
+      result = await maybePromise;
+    } else {
+      result = maybePromise as ImageryProvider;
+    }
+
+    const element = new CesiumImageryLayer(result, props);
     context.imageryLayerCollection.add(element, props.index);
     return element;
   },
@@ -92,6 +110,7 @@ const ImageryLayer = createCesiumComponent<CesiumImageryLayer, ImageryLayerProps
   },
   cesiumProps,
   cesiumReadonlyProps,
+  otherProps,
 });
 
 export default ImageryLayer;
diff --git a/src/Model/Model.test.ts b/src/Model/Model.test.ts
@@ -3,12 +3,12 @@ import { it } from "vitest";
 
 import { UnusedCesiumProps } from "../core";
 
-import { ModalOtherProps, ModelProps, Target } from "./Model";
+import { ModelOtherProps, ModelProps, Target } from "./Model";
 
 // Unused prop check
 type UnusedProps = UnusedCesiumProps<
   Target,
-  Omit<ModelProps, keyof ModalOtherProps>,
+  Omit<ModelProps, keyof ModelOtherProps>,
   {},
   IgnoredProps
 >;

diff --git a/src/Model/Model.ts b/src/Model/Model.ts
@@ -2,22 +2,23 @@ import { Model as CesiumModel, Primitive, ModelNode, ColorBlendMode } from "cesi
 
 import { createCesiumComponent, EventProps, PickCesiumProps, Merge } from "../core";
 
-export type Target = Merge<CesiumModel, Parameters<(typeof CesiumModel)["fromGltf"]>[0]>;
+export type Target = Merge<CesiumModel, Parameters<(typeof CesiumModel)["fromGltfAsync"]>[0]>;
 
 export type ModelCesiumProps = PickCesiumProps<CesiumModel, typeof cesiumProps>;
 
 export type ModelCesiumReadonlyProps = PickCesiumProps<Target, typeof cesiumReadonlyProps>;
 
-export type ModalOtherProps = EventProps<{
+export type ModelOtherProps = EventProps<{
   id?: string;
   node: ModelNode;
   primitive: Primitive;
 }> & {
   /** Calls when the model is completely loaded. */
   onReady?: (model: CesiumModel) => void;
+  onError?: (err: unknown) => void;
 };
 
-export type ModelProps = ModelCesiumProps & ModelCesiumReadonlyProps & ModalOtherProps;
+export type ModelProps = ModelCesiumProps & ModelCesiumReadonlyProps & ModelOtherProps;
 
 const cesiumProps = [
   "backFaceCulling",
@@ -72,23 +73,32 @@ const cesiumReadonlyProps = [
   "enableShowOutline",
   "projectTo2D",
   "classificationType",
+  "errorEvent",
+  "readyEvent",
+  "texturesReadyEvent",
+  "gltfCallback",
 ] as const;
 
-export const otherProps = ["onReady"] as const;
+export const otherProps = ["onReady", "onError"] as const;
 
 const Model = createCesiumComponent<CesiumModel, ModelProps>({
   name: "Model",
-  create(context, { scene, url, colorBlendMode, ...props }) {
+  async create(context, { scene, url, colorBlendMode, ...props }) {
     if (!context.scene || !context.primitiveCollection || !url) return;
-    const element = CesiumModel.fromGltf({
-      ...props,
-      url,
-      colorBlendMode: colorBlendMode as ColorBlendMode,
-      scene: scene || context.scene,
-    });
-    if (props.onReady) {
-      element.readyPromise.then(props.onReady);
+    let element;
+    try {
+      element = await CesiumModel.fromGltfAsync({
+        ...props,
+        url,
+        colorBlendMode: colorBlendMode as ColorBlendMode,
+        scene: scene || context.scene,
+      });
+      props.onReady?.(element);
+    } catch (e) {
+      props.onError?.(e);
+      return;
     }
+
     context.primitiveCollection.add(element);
     return element;
   },

diff --git a/src/ParticleSystem/ParticleSystem.stories.tsx b/src/ParticleSystem/ParticleSystem.stories.tsx
@@ -5,7 +5,7 @@ import {
   SphereEmitter,
   Matrix4,
   Color,
-  createWorldTerrain,
+  createWorldTerrainAsync,
   Math as CesiumMath,
 } from "cesium";
 import { useMemo, useRef, useCallback, FC } from "react";
@@ -89,7 +89,7 @@ const SnowParticle: FC = () => {
 };
 
 export const Snow: Story = () => (
-  <Viewer full shouldAnimate terrainProvider={createWorldTerrain({})}>
+  <Viewer full shouldAnimate terrainProvider={createWorldTerrainAsync({})}>
     <CameraFlyTo
       duration={0}
       destination={pos}

diff --git a/src/PostProcessStage/PostProcessStage.stories.tsx b/src/PostProcessStage/PostProcessStage.stories.tsx
@@ -19,7 +19,7 @@ export default {
 
 const shader = `
 uniform sampler2D colorTexture;
-varying vec2 v_textureCoordinates;
+in vec2 v_textureCoordinates;
 const int KERNEL_WIDTH = 16;
 void main(void)
 {
@@ -30,11 +30,11 @@ void main(void)
     {
         for (int j = 0; j < KERNEL_WIDTH; j++)
         {
-            averageValue += texture2D(colorTexture, integralPos + step * vec2(i, j)).rgb;
+            averageValue += texture(colorTexture, integralPos + step * vec2(i, j)).rgb;
         }
     }
     averageValue /= float(KERNEL_WIDTH * KERNEL_WIDTH);
-    gl_FragColor = vec4(averageValue, 1.0);
+    out_FragColor = vec4(averageValue, 1.0);
 }
 `;
 

diff --git a/src/Primitive/Primitive.ts b/src/Primitive/Primitive.ts
@@ -65,7 +65,13 @@ const Primitive = createCesiumComponent<CesiumPrimitive, PrimitiveProps>({
     if (!context.primitiveCollection) return;
     const element = new CesiumPrimitive(props);
     if (props.onReady) {
-      element.readyPromise.then(props.onReady);
+      const handlePostRender = () => {
+        if (element.ready) {
+          props.onReady?.(element);
+          context.scene?.postRender.removeEventListener(handlePostRender);
+        }
+      };
+      context.scene?.postRender.addEventListener(handlePostRender);
     }
     context.primitiveCollection.add(element);
     return element;

diff --git a/src/TimeDynamicPointCloud/TimeDynamicPointCloud.ts b/src/TimeDynamicPointCloud/TimeDynamicPointCloud.ts
@@ -87,7 +87,11 @@ const TimeDynamicPointCloud = createCesiumComponent<
       clock: props.clock ?? context.cesiumWidget.clock,
     });
     if (props.onReady) {
-      element.readyPromise.then(props.onReady);
+      const handleFrameChanged = () => {
+        props.onReady?.(element);
+        element.frameChanged.removeEventListener(handleFrameChanged);
+      };
+      element.frameChanged.addEventListener(handleFrameChanged);
     }
     context.primitiveCollection.add(element);
     return element;