feat(web): add an option to disable default PBR to 3dtiles and model …

…features in NLS (#517)

web/src/beta/lib/core/engines/Cesium/CustomShaders/NonPBRLightingShader.ts

@@ -0,0 +1,20 @@
+import {
+  CustomShader,
+  CustomShaderMode,
+  CustomShaderTranslucencyMode,
+  LightingModel,
+} from "cesium";
+
+export const NonPBRLightingShader = new CustomShader({
+  mode: CustomShaderMode.MODIFY_MATERIAL, // Need lighting
+  lightingModel: LightingModel.PBR,
+  translucencyMode: CustomShaderTranslucencyMode.OPAQUE,
+  fragmentShaderText: /* glsl */ `
+    void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material) {
+      material.diffuse = vec3(1.0);
+      material.specular = vec3(0.0);
+      material.emissive = vec3(0.0);
+      material.alpha = 1.0;
+    }
+  `,
+});

web/src/beta/lib/core/engines/Cesium/Feature/Model/index.tsx

@@ -6,6 +6,7 @@ import { toColor } from "@reearth/beta/utils/value";
 
 import type { ModelAppearance } from "../../..";
 import { colorBlendMode, heightReference, shadowMode } from "../../common";
+import { NonPBRLightingShader } from "../../CustomShaders/NonPBRLightingShader";
 import {
   EntityExt,
   extractSimpleLayerData,
@@ -62,6 +63,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
     silhouetteColor,
     bearing,
     silhouetteSize = 1,
+    pbr,
   } = property ?? {};
 
   const actualUrl = useMemo(() => model || url || data?.url, [model, url, data?.url]);
@@ -107,6 +109,7 @@ export default function Model({ id, isVisible, property, geometry, layer, featur
         uri={actualUrl}
         scale={scale}
         shadows={shadowMode(shadows)}
+        customShader={pbr === false ? NonPBRLightingShader : undefined}
         colorBlendMode={colorBlendMode(colorBlend)}
         colorBlendAmount={colorBlendAmount}
         color={modelColor}

web/src/beta/lib/core/engines/Cesium/Feature/Tileset/index.tsx

@@ -3,6 +3,7 @@ import { Cesium3DTileset } from "resium";
 
 import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";
 import { colorBlendModeFor3DTile, shadowMode } from "../../common";
+import { NonPBRLightingShader } from "../../CustomShaders/NonPBRLightingShader";
 import Box from "../Box";
 import { type FeatureComponentConfig, type FeatureProps } from "../utils";
 
@@ -23,7 +24,7 @@ function Tileset({
   evalFeature,
   ...props
 }: Props): JSX.Element | null {
-  const { shadows, colorBlendMode } = property ?? {};
+  const { shadows, colorBlendMode, pbr } = property ?? {};
   const boxId = `${layer?.id}_box`;
   const { tilesetUrl, ref, style, clippingPlanes, builtinBoxProps } = useHooks({
     id,
@@ -49,6 +50,7 @@ function Tileset({
       <Cesium3DTileset
         ref={ref}
         url={tilesetUrl}
+        customShader={pbr === false ? NonPBRLightingShader : undefined}
         style={style}
         shadows={shadowMode(shadows)}
         clippingPlanes={clippingPlanes}

web/src/beta/lib/core/mantle/types/appearance.ts

@@ -131,6 +131,7 @@ export type ModelAppearance = {
   silhouetteSize?: number; // default: 1
   near?: number;
   far?: number;
+  pbr?: boolean;
 };
 
 export type Cesium3DTilesAppearance = {
@@ -145,6 +146,7 @@ export type Cesium3DTilesAppearance = {
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;
+  pbr?: boolean;
 };
 
 export type LegacyPhotooverlayAppearance = {