R154

packages/model-viewer-effects/README.md

@@ -52,7 +52,7 @@ npm install three @google/model-viewer @google/model-viewer-effects
 <script type="importmap">
   {
     "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@^0.152.1/build/three.module.min.js"
+      "three": "https://cdn.jsdelivr.net/npm/three@^0.154.0/build/three.module.min.js"
     }
   }
 </script>

packages/model-viewer-effects/package.json

@@ -85,7 +85,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.150.0",
+    "@types/three": "^0.152.1",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-playwright": "^0.10.0",

packages/model-viewer/package.json

@@ -86,7 +86,7 @@
     "lit": "^2.7.2"
   },
   "peerDependencies": {
-    "three": "^0.152.1"
+    "three": "^0.154.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.1",
@@ -95,7 +95,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.150.0",
+    "@types/three": "^0.152.1",
     "@ungap/event-target": "^0.2.3",
     "@web/test-runner": "^0.16.1",
     "@web/test-runner-playwright": "^0.10.0",
@@ -109,7 +109,7 @@
     "rollup-plugin-polyfill": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "typescript": "4.8.4",
-    "three": "^0.152.1"
+    "three": "^0.154.0"
   },
   "publishConfig": {
     "access": "public"

packages/model-viewer/src/features/scene-graph/texture-info.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {LinearEncoding, MeshPhysicalMaterial, sRGBEncoding, Texture as ThreeTexture, TextureEncoding, Vector2, VideoTexture} from 'three';
+import {ColorSpace, LinearSRGBColorSpace, MeshPhysicalMaterial, SRGBColorSpace, Texture as ThreeTexture, Vector2, VideoTexture} from 'three';
 
 import {TextureInfo as TextureInfoInterface} from './api.js';
 import {$threeTexture} from './image.js';
@@ -125,24 +125,24 @@ export class TextureInfo implements TextureInfoInterface {
       texture.source.animation.addEventListener('enterFrame', this[$onUpdate]);
     }
 
-    let encoding: TextureEncoding = sRGBEncoding;
+    let colorSpace: ColorSpace = SRGBColorSpace;
     if (this[$materials]) {
       for (const material of this[$materials]!) {
         switch (this[$usage]) {
           case TextureUsage.Base:
             material.map = threeTexture;
             break;
           case TextureUsage.MetallicRoughness:
-            encoding = LinearEncoding;
+            colorSpace = LinearSRGBColorSpace;
             material.metalnessMap = threeTexture;
             material.roughnessMap = threeTexture;
             break;
           case TextureUsage.Normal:
-            encoding = LinearEncoding;
+            colorSpace = LinearSRGBColorSpace;
             material.normalMap = threeTexture;
             break;
           case TextureUsage.Occlusion:
-            encoding = LinearEncoding;
+            colorSpace = LinearSRGBColorSpace;
             material.aoMap = threeTexture;
             break;
           case TextureUsage.Emissive:
@@ -164,8 +164,8 @@ export class TextureInfo implements TextureInfoInterface {
     }
 
     if (threeTexture) {
-      // Updates the encoding for the texture, affects all references.
-      threeTexture.encoding = encoding;
+      // Updates the colorSpace for the texture, affects all references.
+      threeTexture.colorSpace = colorSpace;
       threeTexture.rotation = this[$transform].rotation;
       threeTexture.repeat = this[$transform].scale;
       threeTexture.offset = this[$transform].offset;

packages/model-viewer/src/three-components/Renderer.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {ACESFilmicToneMapping, Event, EventDispatcher, sRGBEncoding, Vector2, WebGLRenderer} from 'three';
+import {ACESFilmicToneMapping, Event, EventDispatcher, Vector2, WebGLRenderer} from 'three';
 
 import {$updateEnvironment} from '../features/environment.js';
 import {ModelViewerGlobalConfig} from '../features/loading.js';
@@ -22,7 +22,6 @@ import {clamp, isDebugMode, resolveDpr} from '../utilities.js';
 
 import {ARRenderer} from './ARRenderer.js';
 import {CachingGLTFLoader} from './CachingGLTFLoader.js';
-import {Debugger} from './Debugger.js';
 import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js';
 import {ModelScene} from './ModelScene.js';
 import TextureUtils from './TextureUtils.js';
@@ -99,7 +98,6 @@ export class Renderer extends EventDispatcher {
   public height = 0;
   public dpr = 1;
 
-  protected debugger: Debugger|null = null;
   private scenes: Set<ModelScene> = new Set();
   private multipleScenesVisible = false;
   private lastTick = performance.now();
@@ -146,12 +144,13 @@ export class Renderer extends EventDispatcher {
         preserveDrawingBuffer: true,
       });
       this.threeRenderer.autoClear = true;
-      this.threeRenderer.outputEncoding = sRGBEncoding;
       this.threeRenderer.useLegacyLights = false;
       this.threeRenderer.setPixelRatio(1);  // handle pixel ratio externally
 
-      this.debugger = !!options.debug ? new Debugger(this) : null;
-      this.threeRenderer.debug = {checkShaderErrors: !!this.debugger};
+      this.threeRenderer.debug = {
+        checkShaderErrors: !!options.debug,
+        onShaderError: null
+      };
 
       // ACESFilmicToneMapping appears to be the most "saturated",
       // and similar to Filament's gltf-viewer.
@@ -186,10 +185,6 @@ export class Renderer extends EventDispatcher {
       this.threeRenderer.setAnimationLoop(
           (time: number, frame?: any) => this.render(time, frame));
     }
-
-    if (this.debugger != null) {
-      this.debugger.addScene(scene);
-    }
   }
 
   unregisterScene(scene: ModelScene) {
@@ -202,10 +197,6 @@ export class Renderer extends EventDispatcher {
     if (this.canRender && this.scenes.size === 0) {
       this.threeRenderer.setAnimationLoop(null);
     }
-
-    if (this.debugger != null) {
-      this.debugger.removeScene(scene);
-    }
   }
 
   displayCanvas(scene: ModelScene): HTMLCanvasElement {

packages/model-viewer/src/three-components/TextureUtils.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {BackSide, BoxGeometry, CubeCamera, CubeTexture, EquirectangularReflectionMapping, EventDispatcher, HalfFloatType, LinearEncoding, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, sRGBEncoding, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
+import {BackSide, BoxGeometry, CubeCamera, CubeTexture, EquirectangularReflectionMapping, EventDispatcher, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, sRGBEncoding, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
 import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';
 
 import {deserializeUrl, timePasses} from '../utilities.js';
@@ -200,24 +200,24 @@ export default class TextureUtils extends EventDispatcher {
       generateMipmaps: false,
       type: HalfFloatType,
       format: RGBAFormat,
-      encoding: LinearEncoding,
+      colorSpace: LinearSRGBColorSpace,
       depthBuffer: true
     });
     const cubeCamera = new CubeCamera(0.1, 100, cubeTarget);
     const generatedEnvironmentMap = cubeCamera.renderTarget.texture;
     generatedEnvironmentMap.name = name;
 
-    const outputEncoding = renderer.outputEncoding;
+    const outputColorSpace = renderer.outputColorSpace;
     const toneMapping = renderer.toneMapping;
     renderer.toneMapping = NoToneMapping;
-    renderer.outputEncoding = LinearEncoding;
+    renderer.outputColorSpace = LinearSRGBColorSpace;
 
     cubeCamera.update(renderer, scene);
 
     this.blurCubemap(cubeTarget, GENERATED_SIGMA);
 
     renderer.toneMapping = toneMapping;
-    renderer.outputEncoding = outputEncoding;
+    renderer.outputColorSpace = outputColorSpace;
 
     return generatedEnvironmentMap;
   }

packages/modelviewer.dev/examples/postprocessing/index.html

@@ -32,7 +32,7 @@
   <script type="importmap">
     {
       "imports": {
-        "three": "https://cdn.jsdelivr.net/npm/three@^0.152.1/build/three.module.min.js"
+        "three": "https://cdn.jsdelivr.net/npm/three@^0.154.0/build/three.module.min.js"
       }
     }
   </script>
@@ -107,7 +107,7 @@ <h2 class="demo-title">Setup Post Processing</h2>
 <script type="importmap-noexecute">
 {
   "imports": {
-    "three": "https://cdn.jsdelivr.net/npm/three@^0.152.1/build/three.module.min.js"
+    "three": "https://cdn.jsdelivr.net/npm/three@^0.154.0/build/three.module.min.js"
   }
 }
 </script>