From 150d637a61e683a3d26f35a7c354da2efa26fd66 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Tue, 23 Jul 2024 20:28:56 +0900
Subject: [PATCH 1/8] BREAKING feature: preparing for Three.js r167

import WebGPU / NodeMaterial stuff from `three/webgpu`
See: https://github.com/mrdoob/three.js/pull/28650

Three.js r167 is not released yet!
I tested the behavior by using `yarn link` on `three` and `@types/three`

importmaps for Three.js in webgpu examples are temporarily replaced to node_modules, please change them back before merging

Some codes inside MToonNodeMaterial emit type errors because of recent @types/three changes
I'm asking Methuselar96 why the change is made
See: https://github.com/three-types/three-ts-types/pull/1023#issuecomment-2244842594
---
 .../examples/webgpu-feature-test.html         |  10 +-
 .../examples/webgpu-loader-plugin.html        |  10 +-
 .../src/nodes/MToonAnimatedUVNode.ts          |  28 ++--
 .../src/nodes/MToonLightingModel.ts           |  64 ++++----
 .../src/nodes/MToonNodeMaterial.ts            | 138 +++++++++---------
 .../src/nodes/MToonNodeMaterialParameters.ts  |  21 ++-
 .../src/nodes/immutableNodes.ts               |  16 +-
 .../src/nodes/materialReferences.ts           |  56 +++----
 .../src/nodes/mtoonParametricRim.ts           |  16 +-
 packages/three-vrm/examples/webgpu-dnd.html   |  12 +-
 10 files changed, 185 insertions(+), 186 deletions(-)

diff --git a/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html b/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
index d5e50d366..41baa238b 100644
--- a/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
+++ b/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
@@ -23,8 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "../node_modules/three/build/three.webgpu.js",
+					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
+					"three/addons/": "../node_modules/three/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
 					"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
 				}
@@ -32,13 +33,12 @@
 		</script>
 
 		<script type="module">
-			import * as THREE from 'three';
+			import * as THREE from 'three/webgpu';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 			import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';
 
 			// renderer
-			const renderer = new WebGPURenderer();
+			const renderer = new THREE.WebGPURenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			document.body.appendChild( renderer.domElement );
diff --git a/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html b/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
index 501f0a020..b37532e30 100644
--- a/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
+++ b/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
@@ -23,8 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/",
+					"three": "../node_modules/three/build/three.webgpu.js",
+					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
+					"three/addons/": "../node_modules/three/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
 					"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
 				}
@@ -32,15 +33,14 @@
 		</script>
 
 		<script type="module">
-			import * as THREE from 'three';
+			import * as THREE from 'three/webgpu';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 			import { MToonMaterialLoaderPlugin } from '@pixiv/three-vrm-materials-mtoon';
 			import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';
 
 			// renderer
-			const renderer = new WebGPURenderer();
+			const renderer = new THREE.WebGPURenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			document.body.appendChild( renderer.domElement );
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts
index 665e81606..eda050340 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts
@@ -1,4 +1,4 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 import {
   refUVAnimationMaskTexture,
   refUVAnimationRotationPhase,
@@ -6,7 +6,7 @@ import {
   refUVAnimationScrollYOffset,
 } from './materialReferences';
 
-export class MToonAnimatedUVNode extends Nodes.TempNode {
+export class MToonAnimatedUVNode extends THREE.TempNode {
   public readonly hasMaskTexture: boolean;
 
   public constructor(hasMaskTexture: boolean) {
@@ -15,30 +15,30 @@ export class MToonAnimatedUVNode extends Nodes.TempNode {
     this.hasMaskTexture = hasMaskTexture;
   }
 
-  public setup(): Nodes.ShaderNodeObject<Nodes.VarNode> {
-    let uvAnimationMask: Nodes.NodeRepresentation = 1.0;
+  public setup(): THREE.ShaderNodeObject<THREE.VarNode> {
+    let uvAnimationMask: THREE.NodeRepresentation = 1.0;
 
     if (this.hasMaskTexture) {
-      uvAnimationMask = Nodes.vec4(refUVAnimationMaskTexture).context({ getUV: () => Nodes.uv() }).r;
+      uvAnimationMask = THREE.vec4(refUVAnimationMaskTexture).context({ getUV: () => THREE.uv() }).r;
     }
 
-    let uv: Nodes.ShaderNodeObject<Nodes.Swizzable> = Nodes.uv();
+    let uv: THREE.ShaderNodeObject<THREE.Swizzable> = THREE.uv();
 
     // rotate
     const phase = refUVAnimationRotationPhase.mul(uvAnimationMask);
 
-    // WORKAROUND: Nodes.rotateUV causes an issue with the mask texture
+    // WORKAROUND: THREE.rotateUV causes an issue with the mask texture
     // We are going to spin using a 100% organic handmade rotation matrix
-    // uv = Nodes.rotateUV(uv, phase, Nodes.vec2(0.5, 0.5));
+    // uv = THREE.rotateUV(uv, phase, THREE.vec2(0.5, 0.5));
 
-    const c = Nodes.cos(phase);
-    const s = Nodes.sin(phase);
-    uv = uv.sub(Nodes.vec2(0.5, 0.5));
-    uv = uv.mul(Nodes.mat2(c, s, s.negate(), c));
-    uv = uv.add(Nodes.vec2(0.5, 0.5));
+    const c = THREE.cos(phase);
+    const s = THREE.sin(phase);
+    uv = uv.sub(THREE.vec2(0.5, 0.5));
+    uv = uv.mul(THREE.mat2(c, s, s.negate(), c));
+    uv = uv.add(THREE.vec2(0.5, 0.5));
 
     // scroll
-    const scroll = Nodes.vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
+    const scroll = THREE.vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
     uv = uv.add(scroll);
 
     return uv.temp('AnimatedUV');
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
index c1efdfad7..3629f8493 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
@@ -1,4 +1,4 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 import {
   matcap,
   parametricRim,
@@ -11,15 +11,15 @@ import {
 
 // TODO: 0% confidence about function types.
 
-const linearstep = Nodes.tslFn(
+const linearstep = THREE.tslFn(
   ({
     a,
     b,
     t,
   }: {
-    a: Nodes.ShaderNodeObject<Nodes.Node>;
-    b: Nodes.ShaderNodeObject<Nodes.Node>;
-    t: Nodes.ShaderNodeObject<Nodes.Node>;
+    a: THREE.ShaderNodeObject<THREE.Node>;
+    b: THREE.ShaderNodeObject<THREE.Node>;
+    t: THREE.ShaderNodeObject<THREE.Node>;
   }) => {
     const top = t.sub(a);
     const bottom = b.sub(a);
@@ -30,12 +30,12 @@ const linearstep = Nodes.tslFn(
 /**
  * Convert NdotL into toon shading factor using shadingShift and shadingToony
  */
-const getShading = Nodes.tslFn(({ dotNL }: { dotNL: Nodes.ShaderNodeObject<Nodes.Node> }) => {
+const getShading = THREE.tslFn(({ dotNL }: { dotNL: THREE.ShaderNodeObject<THREE.Node> }) => {
   const shadow = 1.0; // TODO
 
-  const feather = Nodes.float(1.0).sub(shadingToony);
+  const feather = THREE.float(1.0).sub(shadingToony);
 
-  let shading: Nodes.ShaderNodeObject<Nodes.Node> = dotNL.add(shadingShift);
+  let shading: THREE.ShaderNodeObject<THREE.Node> = dotNL.add(shadingShift);
   shading = linearstep({
     a: feather.negate(),
     b: feather,
@@ -48,28 +48,28 @@ const getShading = Nodes.tslFn(({ dotNL }: { dotNL: Nodes.ShaderNodeObject<Nodes
 /**
  * Mix diffuseColor and shadeColor using shading factor and light color
  */
-const getDiffuse = Nodes.tslFn(
+const getDiffuse = THREE.tslFn(
   ({
     shading,
     lightColor,
   }: {
-    shading: Nodes.ShaderNodeObject<Nodes.Node>;
-    lightColor: Nodes.ShaderNodeObject<Nodes.Node>;
+    shading: THREE.ShaderNodeObject<THREE.Node>;
+    lightColor: THREE.ShaderNodeObject<THREE.Node>;
   }) => {
-    const diffuseColor = Nodes.mix(shadeColor, Nodes.diffuseColor, shading);
-    const col = lightColor.mul(Nodes.BRDF_Lambert({ diffuseColor }));
+    const diffuseColor = THREE.mix(shadeColor, THREE.diffuseColor, shading);
+    const col = lightColor.mul(THREE.BRDF_Lambert({ diffuseColor }));
 
     return col;
   },
 );
 
-export class MToonLightingModel extends Nodes.LightingModel {
+export class MToonLightingModel extends THREE.LightingModel {
   constructor() {
     super();
   }
 
-  direct({ lightDirection, lightColor, reflectedLight }: Nodes.LightingModelDirectInput) {
-    const dotNL = Nodes.transformedNormalView.dot(lightDirection).clamp(-1.0, 1.0);
+  direct({ lightDirection, lightColor, reflectedLight }: THREE.LightingModelDirectInput) {
+    const dotNL = THREE.transformedNormalView.dot(lightDirection).clamp(-1.0, 1.0);
 
     // toon diffuse
     const shading = getShading({
@@ -79,47 +79,47 @@ export class MToonLightingModel extends Nodes.LightingModel {
     // Unable to use `addAssign` in the current @types/three, we use `assign` and `add` instead
     // TODO: Fix the `addAssign` issue from the `@types/three` side
 
-    (reflectedLight.directDiffuse as Nodes.ShaderNodeObject<Nodes.Node>).assign(
-      (reflectedLight.directDiffuse as Nodes.ShaderNodeObject<Nodes.Node>).add(
+    (reflectedLight.directDiffuse as THREE.ShaderNodeObject<THREE.Node>).assign(
+      (reflectedLight.directDiffuse as THREE.ShaderNodeObject<THREE.Node>).add(
         getDiffuse({
           shading,
-          lightColor: lightColor as Nodes.ShaderNodeObject<Nodes.Node>,
+          lightColor: lightColor as THREE.ShaderNodeObject<THREE.Node>,
         }),
       ),
     );
 
     // rim
-    (reflectedLight.directSpecular as Nodes.ShaderNodeObject<Nodes.Node>).assign(
-      (reflectedLight.directSpecular as Nodes.ShaderNodeObject<Nodes.Node>).add(
+    (reflectedLight.directSpecular as THREE.ShaderNodeObject<THREE.Node>).assign(
+      (reflectedLight.directSpecular as THREE.ShaderNodeObject<THREE.Node>).add(
         parametricRim
           .add(matcap)
           .mul(rimMultiply)
-          .mul(Nodes.mix(Nodes.vec3(0.0), Nodes.BRDF_Lambert({ diffuseColor: lightColor }), rimLightingMix)),
+          .mul(THREE.mix(THREE.vec3(0.0), THREE.BRDF_Lambert({ diffuseColor: lightColor }), rimLightingMix)),
       ),
     );
   }
 
-  indirectDiffuse({ irradiance, reflectedLight }: Nodes.LightingModelIndirectInput) {
+  indirectDiffuse({ irradiance, reflectedLight }: THREE.LightingModelIndirectInput) {
     // indirect irradiance
-    (reflectedLight.indirectDiffuse as Nodes.ShaderNodeObject<Nodes.Node>).assign(
-      (reflectedLight.indirectDiffuse as Nodes.ShaderNodeObject<Nodes.Node>).add(
-        (irradiance as Nodes.ShaderNodeObject<Nodes.Node>).mul(
-          Nodes.BRDF_Lambert({
-            diffuseColor: Nodes.diffuseColor,
+    (reflectedLight.indirectDiffuse as THREE.ShaderNodeObject<THREE.Node>).assign(
+      (reflectedLight.indirectDiffuse as THREE.ShaderNodeObject<THREE.Node>).add(
+        (irradiance as THREE.ShaderNodeObject<THREE.Node>).mul(
+          THREE.BRDF_Lambert({
+            diffuseColor: THREE.diffuseColor,
           }),
         ),
       ),
     );
   }
 
-  indirectSpecular({ reflectedLight }: Nodes.LightingModelIndirectInput) {
+  indirectSpecular({ reflectedLight }: THREE.LightingModelIndirectInput) {
     // rim
-    (reflectedLight.indirectSpecular as Nodes.ShaderNodeObject<Nodes.Node>).assign(
-      (reflectedLight.indirectSpecular as Nodes.ShaderNodeObject<Nodes.Node>).add(
+    (reflectedLight.indirectSpecular as THREE.ShaderNodeObject<THREE.Node>).assign(
+      (reflectedLight.indirectSpecular as THREE.ShaderNodeObject<THREE.Node>).add(
         parametricRim
           .add(matcap)
           .mul(rimMultiply)
-          .mul(Nodes.mix(Nodes.vec3(1.0), Nodes.vec3(0.0), rimLightingMix)),
+          .mul(THREE.mix(THREE.vec3(1.0), THREE.vec3(0.0), rimLightingMix)),
       ),
     );
   }
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
index 68eacf82b..49b69d8ec 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
@@ -1,5 +1,4 @@
-import * as THREE from 'three';
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 
 import type { MToonMaterial } from '../MToonMaterial';
 import { MToonLightingModel } from './MToonLightingModel';
@@ -41,8 +40,6 @@ import { MToonAnimatedUVNode } from './MToonAnimatedUVNode';
 import { MToonMaterialOutlineWidthMode } from '../MToonMaterialOutlineWidthMode';
 import { MToonNodeMaterialParameters } from './MToonNodeMaterialParameters';
 import { mtoonParametricRim } from './mtoonParametricRim';
-// import phongLightingModel from 'three/addons/nodes/functions/PhongLightingModel.js';
-// import { float } from '../shadernode/ShaderNode.js';
 
 /**
  * MToon is a material specification that has various features.
@@ -52,8 +49,8 @@ import { mtoonParametricRim } from './mtoonParametricRim';
  *
  * See: https://github.com/Santarh/MToon
  */
-export class MToonNodeMaterial extends Nodes.NodeMaterial {
-  public emissiveNode: Nodes.ShaderNodeObject<Nodes.Node> | null;
+export class MToonNodeMaterial extends THREE.NodeMaterial {
+  public emissiveNode: THREE.ShaderNodeObject<THREE.Node> | null;
 
   public color: THREE.Color;
   public map: THREE.Texture | null;
@@ -86,15 +83,15 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
   public uvAnimationRotationSpeedFactor: number;
   public uvAnimationMaskTexture: THREE.Texture | null;
 
-  public shadeColorNode: Nodes.Swizzable | null;
-  public shadingShiftNode: Nodes.Node | null;
-  public shadingToonyNode: Nodes.Node | null;
-  public rimLightingMixNode: Nodes.Node | null;
-  public rimMultiplyNode: Nodes.Node | null;
-  public matcapNode: Nodes.Node | null;
-  public parametricRimColorNode: Nodes.Swizzable | null;
-  public parametricRimLiftNode: Nodes.Node | null;
-  public parametricRimFresnelPowerNode: Nodes.Node | null;
+  public shadeColorNode: THREE.Swizzable | null;
+  public shadingShiftNode: THREE.Node | null;
+  public shadingToonyNode: THREE.Node | null;
+  public rimLightingMixNode: THREE.Node | null;
+  public rimMultiplyNode: THREE.Node | null;
+  public matcapNode: THREE.Node | null;
+  public parametricRimColorNode: THREE.Swizzable | null;
+  public parametricRimLiftNode: THREE.Node | null;
+  public parametricRimFresnelPowerNode: THREE.Node | null;
 
   public uvAnimationScrollXOffset: number;
   public uvAnimationScrollYOffset: number;
@@ -193,7 +190,7 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     return new MToonLightingModel();
   }
 
-  public setup(builder: Nodes.NodeBuilder): void {
+  public setup(builder: THREE.NodeBuilder): void {
     this._animatedUVNode = new MToonAnimatedUVNode(
       (this.uvAnimationMaskTexture && this.uvAnimationMaskTexture.isTexture === true) ?? false,
     );
@@ -201,10 +198,10 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     super.setup(builder);
   }
 
-  public setupDiffuseColor(builder: Nodes.NodeBuilder): void {
+  public setupDiffuseColor(builder: THREE.NodeBuilder): void {
     // we must apply uv scroll to the map
     // this.colorNode will be used in super.setupDiffuseColor() so we temporarily replace it
-    let tempColorNode: Nodes.ShaderNodeObject<Nodes.Node> | null = null;
+    let tempColorNode: THREE.ShaderNodeObject<THREE.Node> | null = null;
 
     if (this.colorNode == null) {
       tempColorNode = refColor;
@@ -235,7 +232,7 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     // See: https://github.com/mrdoob/three.js/pull/28646
     if (parseInt(THREE.REVISION, 10) < 166) {
       if (this.transparent === false && this.blending === THREE.NormalBlending && this.alphaToCoverage === false) {
-        Nodes.diffuseColor.a.assign(1.0);
+        THREE.diffuseColor.a.assign(1.0);
       }
     }
 
@@ -245,23 +242,23 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     }
   }
 
-  public setupVariants({ stack }: Nodes.NodeBuilder): void {
-    stack.assign(shadeColor, this._setupShadeColorNode());
-    stack.assign(shadingShift, this._setupShadingShiftNode());
-    stack.assign(shadingToony, this._setupShadingToonyNode());
-    stack.assign(rimLightingMix, this._setupRimLightingMixNode());
-    stack.assign(rimMultiply, this._setupRimMultiplyNode());
-    stack.assign(matcap, this._setupMatcapNode());
-    stack.assign(parametricRim, this._setupParametricRimNode());
+  public setupVariants(): void {
+    shadeColor.assign(this._setupShadeColorNode());
+    shadingShift.assign(this._setupShadingShiftNode());
+    shadingToony.assign(this._setupShadingToonyNode());
+    rimLightingMix.assign(this._setupRimLightingMixNode());
+    rimMultiply.assign(this._setupRimMultiplyNode());
+    matcap.assign(this._setupMatcapNode());
+    parametricRim.assign(this._setupParametricRimNode());
   }
 
-  public setupNormal(builder: Nodes.NodeBuilder): void {
+  public setupNormal(builder: THREE.NodeBuilder): void {
     // we must apply uv scroll to the normalMap
     // this.normalNode will be used in super.setupNormal() so we temporarily replace it
-    const tempNormalNode: Nodes.ShaderNodeObject<Nodes.Node> | null = this.normalNode;
+    const tempNormalNode: THREE.ShaderNodeObject<THREE.Node> | null = this.normalNode;
 
     if (this.normalNode == null) {
-      this.normalNode = Nodes.materialNormal;
+      this.normalNode = THREE.materialNormal;
 
       if (this.normalMap && this.normalMap.isTexture === true) {
         const map = refNormalMap.context({ getUV: () => this._animatedUVNode });
@@ -280,10 +277,10 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     this.normalNode = tempNormalNode;
   }
 
-  public setupLighting(builder: Nodes.NodeBuilder): Nodes.Node {
+  public setupLighting(builder: THREE.NodeBuilder): THREE.Node {
     // we must apply uv scroll to the emissiveMap
     // this.emissiveNode will be used in super.setupLighting() so we temporarily replace it
-    let tempEmissiveNode: Nodes.ShaderNodeObject<Nodes.Node> | null = null;
+    let tempEmissiveNode: THREE.ShaderNodeObject<THREE.Node> | null = null;
 
     if (this.emissiveNode == null) {
       tempEmissiveNode = refEmissive.mul(refEmissiveIntensity);
@@ -308,54 +305,54 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
   }
 
   public setupOutput(
-    builder: Nodes.NodeBuilder,
-    outputNode: Nodes.ShaderNodeObject<Nodes.Node>,
-  ): Nodes.ShaderNodeObject<Nodes.Node> {
+    builder: THREE.NodeBuilder,
+    outputNode: THREE.ShaderNodeObject<THREE.Node>,
+  ): THREE.ShaderNodeObject<THREE.Node> {
     // mix or set outline color
     if (this.isOutline && this.outlineWidthMode !== MToonMaterialOutlineWidthMode.None) {
-      outputNode = Nodes.vec4(
-        Nodes.mix(refOutlineColorFactor, outputNode.xyz.mul(refOutlineColorFactor), refOutlineLightingMixFactor),
+      outputNode = THREE.vec4(
+        THREE.mix(refOutlineColorFactor, outputNode.xyz.mul(refOutlineColorFactor), refOutlineLightingMixFactor),
         outputNode.w,
       );
     }
 
     // the ordinary output setup
-    return super.setupOutput(builder, outputNode) as Nodes.ShaderNodeObject<Nodes.Node>;
+    return super.setupOutput(builder, outputNode) as THREE.ShaderNodeObject<THREE.Node>;
   }
 
-  public setupPosition(builder: Nodes.NodeBuilder): Nodes.ShaderNodeObject<Nodes.Node> {
+  public setupPosition(builder: THREE.NodeBuilder): THREE.ShaderNodeObject<THREE.Node> {
     // we must apply outline position offset
     // this.positionNode will be used in super.setupPosition() so we temporarily replace it
-    const tempPositionNode: Nodes.ShaderNodeObject<Nodes.Node> | null = this.positionNode;
+    const tempPositionNode: THREE.ShaderNodeObject<THREE.Node> | null = this.positionNode;
 
     if (this.isOutline && this.outlineWidthMode !== MToonMaterialOutlineWidthMode.None) {
-      this.positionNode ??= Nodes.positionLocal;
+      this.positionNode ??= THREE.positionLocal;
 
-      const normalLocal = Nodes.normalLocal.normalize();
+      const normalLocal = THREE.normalLocal.normalize();
 
-      let width: Nodes.ShaderNodeObject<Nodes.Node> = refOutlineWidthFactor;
+      let width: THREE.ShaderNodeObject<THREE.Node> = refOutlineWidthFactor;
 
       if (this.outlineWidthMultiplyTexture && this.outlineWidthMultiplyTexture.isTexture === true) {
         const map = refOutlineWidthMultiplyTexture.context({ getUV: () => this._animatedUVNode });
         width = width.mul(map);
       }
 
-      const worldNormalLength = Nodes.length(Nodes.modelNormalMatrix.mul(normalLocal));
+      const worldNormalLength = THREE.length(THREE.modelNormalMatrix.mul(normalLocal));
       const outlineOffset = width.mul(worldNormalLength).mul(normalLocal);
 
       if (this.outlineWidthMode === MToonMaterialOutlineWidthMode.WorldCoordinates) {
         this.positionNode = this.positionNode.add(outlineOffset);
       } else if (this.outlineWidthMode === MToonMaterialOutlineWidthMode.ScreenCoordinates) {
-        const clipScale = Nodes.cameraProjectionMatrix.element(1).element(1);
+        const clipScale = THREE.cameraProjectionMatrix.element(1).element(1);
 
-        this.positionNode = this.positionNode.add(outlineOffset.div(clipScale).mul(Nodes.positionView.z.negate()));
+        this.positionNode = this.positionNode.add(outlineOffset.div(clipScale).mul(THREE.positionView.z.negate()));
       }
 
-      this.positionNode ??= Nodes.positionLocal;
+      this.positionNode ??= THREE.positionLocal;
     }
 
     // the ordinary position setup
-    const ret = super.setupPosition(builder) as Nodes.ShaderNodeObject<Nodes.Node>;
+    const ret = super.setupPosition(builder) as THREE.ShaderNodeObject<THREE.Node>;
 
     // anti z-fighting
     // TODO: We might want to address this via glPolygonOffset instead?
@@ -420,12 +417,12 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     this.uvAnimationRotationPhase += delta * this.uvAnimationRotationSpeedFactor;
   }
 
-  private _setupShadeColorNode(): Nodes.Swizzable {
+  private _setupShadeColorNode(): THREE.Swizzable {
     if (this.shadeColorNode != null) {
-      return Nodes.vec3(this.shadeColorNode);
+      return THREE.vec3(this.shadeColorNode);
     }
 
-    let shadeColorNode: Nodes.ShaderNodeObject<Nodes.Node> = refShadeColorFactor;
+    let shadeColorNode: THREE.ShaderNodeObject<THREE.Node> = refShadeColorFactor;
 
     if (this.shadeMultiplyTexture && this.shadeMultiplyTexture.isTexture === true) {
       const map = refShadeMultiplyTexture.context({ getUV: () => this._animatedUVNode });
@@ -435,12 +432,12 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     return shadeColorNode;
   }
 
-  private _setupShadingShiftNode(): Nodes.Node {
+  private _setupShadingShiftNode(): THREE.Node {
     if (this.shadingShiftNode != null) {
-      return Nodes.float(this.shadingShiftNode);
+      return THREE.float(this.shadingShiftNode);
     }
 
-    let shadingShiftNode: Nodes.ShaderNodeObject<Nodes.Node> = refShadingShiftFactor;
+    let shadingShiftNode: THREE.ShaderNodeObject<THREE.Node> = refShadingShiftFactor;
 
     if (this.shadingShiftTexture && this.shadingShiftTexture.isTexture === true) {
       const map = refShadeMultiplyTexture.context({ getUV: () => this._animatedUVNode });
@@ -450,25 +447,25 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     return shadingShiftNode;
   }
 
-  private _setupShadingToonyNode(): Nodes.Node {
+  private _setupShadingToonyNode(): THREE.Node {
     if (this.shadingToonyNode != null) {
-      return Nodes.float(this.shadingToonyNode);
+      return THREE.float(this.shadingToonyNode);
     }
 
     return refShadingToonyFactor;
   }
 
-  private _setupRimLightingMixNode(): Nodes.Node {
+  private _setupRimLightingMixNode(): THREE.Node {
     if (this.rimLightingMixNode != null) {
-      return Nodes.float(this.rimLightingMixNode);
+      return THREE.float(this.rimLightingMixNode);
     }
 
     return refRimLightingMixFactor;
   }
 
-  private _setupRimMultiplyNode(): Nodes.Swizzable {
+  private _setupRimMultiplyNode(): THREE.Swizzable {
     if (this.rimMultiplyNode != null) {
-      return Nodes.vec3(this.rimMultiplyNode);
+      return THREE.vec3(this.rimMultiplyNode);
     }
 
     if (this.rimMultiplyTexture && this.rimMultiplyTexture.isTexture === true) {
@@ -476,32 +473,32 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
       return map;
     }
 
-    return Nodes.vec3(1.0);
+    return THREE.vec3(1.0);
   }
 
-  private _setupMatcapNode(): Nodes.Swizzable {
+  private _setupMatcapNode(): THREE.Swizzable {
     if (this.matcapNode != null) {
-      return Nodes.vec3(this.matcapNode);
+      return THREE.vec3(this.matcapNode);
     }
 
     if (this.matcapTexture && this.matcapTexture.isTexture === true) {
-      const map = refMatcapTexture.context({ getUV: () => Nodes.matcapUV.mul(1.0, -1.0).add(0.0, 1.0) });
+      const map = refMatcapTexture.context({ getUV: () => THREE.matcapUV.mul(1.0, -1.0).add(0.0, 1.0) });
       return map.mul(refMatcapFactor);
     }
 
-    return Nodes.vec3(0.0);
+    return THREE.vec3(0.0);
   }
 
-  private _setupParametricRimNode(): Nodes.Swizzable {
+  private _setupParametricRimNode(): THREE.Swizzable {
     const parametricRimColor =
-      this.parametricRimColorNode != null ? Nodes.vec3(this.parametricRimColorNode) : refParametricRimColorFactor;
+      this.parametricRimColorNode != null ? THREE.vec3(this.parametricRimColorNode) : refParametricRimColorFactor;
 
     const parametricRimLift =
-      this.parametricRimLiftNode != null ? Nodes.float(this.parametricRimLiftNode) : refParametricRimLiftFactor;
+      this.parametricRimLiftNode != null ? THREE.float(this.parametricRimLiftNode) : refParametricRimLiftFactor;
 
     const parametricRimFresnelPower =
       this.parametricRimFresnelPowerNode != null
-        ? Nodes.float(this.parametricRimFresnelPowerNode)
+        ? THREE.float(this.parametricRimFresnelPowerNode)
         : refParametricRimFresnelPowerFactor;
 
     return mtoonParametricRim({
@@ -511,3 +508,6 @@ export class MToonNodeMaterial extends Nodes.NodeMaterial {
     });
   }
 }
+
+// TODO: Part of stuff that MToonMaterial depends on does not exist in three/webgpu (e.g. UniformsLib)
+// THREE.addNodeMaterial('MToonNodeMaterial', MToonNodeMaterial);
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterialParameters.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterialParameters.ts
index 2c52167f4..0a033805e 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterialParameters.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterialParameters.ts
@@ -1,16 +1,15 @@
-import * as THREE from 'three';
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 
 export interface MToonNodeMaterialParameters extends THREE.ShaderMaterialParameters {
   transparentWithZWrite?: boolean;
 
-  shadeColorNode?: Nodes.Swizzable | null;
-  shadingShiftNode?: Nodes.Node | null;
-  shadingToonyNode?: Nodes.Node | null;
-  rimLightingMixNode?: Nodes.Node | null;
-  rimMultiplyNode?: Nodes.Node | null;
-  matcapNode?: Nodes.Node | null;
-  parametricRimColorNode?: Nodes.Swizzable | null;
-  parametricRimLiftNode?: Nodes.Node | null;
-  parametricRimFresnelPowerNode?: Nodes.Node | null;
+  shadeColorNode?: THREE.Swizzable | null;
+  shadingShiftNode?: THREE.Node | null;
+  shadingToonyNode?: THREE.Node | null;
+  rimLightingMixNode?: THREE.Node | null;
+  rimMultiplyNode?: THREE.Node | null;
+  matcapNode?: THREE.Node | null;
+  parametricRimColorNode?: THREE.Swizzable | null;
+  parametricRimLiftNode?: THREE.Node | null;
+  parametricRimFresnelPowerNode?: THREE.Node | null;
 }
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/immutableNodes.ts b/packages/three-vrm-materials-mtoon/src/nodes/immutableNodes.ts
index e68b04969..576a88f16 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/immutableNodes.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/immutableNodes.ts
@@ -1,9 +1,9 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 
-export const shadeColor = Nodes.nodeImmutable(Nodes.PropertyNode, 'vec3').temp('ShadeColor');
-export const shadingShift = Nodes.nodeImmutable(Nodes.PropertyNode, 'float').temp('ShadingShift');
-export const shadingToony = Nodes.nodeImmutable(Nodes.PropertyNode, 'float').temp('ShadingToony');
-export const rimLightingMix = Nodes.nodeImmutable(Nodes.PropertyNode, 'float').temp('RimLightingMix');
-export const rimMultiply = Nodes.nodeImmutable(Nodes.PropertyNode, 'vec3').temp('RimMultiply');
-export const matcap = Nodes.nodeImmutable(Nodes.PropertyNode, 'vec3').temp('matcap');
-export const parametricRim = Nodes.nodeImmutable(Nodes.PropertyNode, 'vec3').temp('ParametricRim');
+export const shadeColor = THREE.nodeImmutable(THREE.PropertyNode, 'vec3').temp('ShadeColor');
+export const shadingShift = THREE.nodeImmutable(THREE.PropertyNode, 'float').temp('ShadingShift');
+export const shadingToony = THREE.nodeImmutable(THREE.PropertyNode, 'float').temp('ShadingToony');
+export const rimLightingMix = THREE.nodeImmutable(THREE.PropertyNode, 'float').temp('RimLightingMix');
+export const rimMultiply = THREE.nodeImmutable(THREE.PropertyNode, 'vec3').temp('RimMultiply');
+export const matcap = THREE.nodeImmutable(THREE.PropertyNode, 'vec3').temp('matcap');
+export const parametricRim = THREE.nodeImmutable(THREE.PropertyNode, 'vec3').temp('ParametricRim');
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/materialReferences.ts b/packages/three-vrm-materials-mtoon/src/nodes/materialReferences.ts
index ca3940208..49d455fff 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/materialReferences.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/materialReferences.ts
@@ -1,31 +1,31 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 
-export const refColor = Nodes.materialReference('color', 'color');
-export const refMap = Nodes.materialReference('map', 'texture');
-export const refNormalMap = Nodes.materialReference('normalMap', 'texture');
-export const refNormalScale = Nodes.materialReference('normalScale', 'vec2');
-export const refEmissive = Nodes.materialReference('emissive', 'color');
-export const refEmissiveIntensity = Nodes.materialReference('emissiveIntensity', 'float');
-export const refEmissiveMap = Nodes.materialReference('emissiveMap', 'texture');
+export const refColor = THREE.materialReference('color', 'color');
+export const refMap = THREE.materialReference('map', 'texture');
+export const refNormalMap = THREE.materialReference('normalMap', 'texture');
+export const refNormalScale = THREE.materialReference('normalScale', 'vec2');
+export const refEmissive = THREE.materialReference('emissive', 'color');
+export const refEmissiveIntensity = THREE.materialReference('emissiveIntensity', 'float');
+export const refEmissiveMap = THREE.materialReference('emissiveMap', 'texture');
 
-export const refShadeColorFactor = Nodes.materialReference('shadeColorFactor', 'color');
-export const refShadingShiftFactor = Nodes.materialReference('shadingShiftFactor', 'float');
-export const refShadeMultiplyTexture = Nodes.materialReference('shadeMultiplyTexture', 'texture');
-export const refShadeMultiplyTextureScale = Nodes.materialReference('shadeMultiplyTextureScale', 'float');
-export const refShadingToonyFactor = Nodes.materialReference('shadingToonyFactor', 'float');
-export const refRimLightingMixFactor = Nodes.materialReference('rimLightingMixFactor', 'float');
-export const refRimMultiplyTexture = Nodes.materialReference('rimMultiplyTexture', 'texture');
-export const refMatcapFactor = Nodes.materialReference('matcapFactor', 'color');
-export const refMatcapTexture = Nodes.materialReference('matcapTexture', 'texture');
-export const refParametricRimColorFactor = Nodes.materialReference('parametricRimColorFactor', 'color');
-export const refParametricRimLiftFactor = Nodes.materialReference('parametricRimLiftFactor', 'float');
-export const refParametricRimFresnelPowerFactor = Nodes.materialReference('parametricRimFresnelPowerFactor', 'float');
-export const refOutlineWidthMultiplyTexture = Nodes.materialReference('outlineWidthMultiplyTexture', 'texture');
-export const refOutlineWidthFactor = Nodes.materialReference('outlineWidthFactor', 'float');
-export const refOutlineColorFactor = Nodes.materialReference('outlineColorFactor', 'color');
-export const refOutlineLightingMixFactor = Nodes.materialReference('outlineLightingMixFactor', 'float');
-export const refUVAnimationMaskTexture = Nodes.materialReference('uvAnimationMaskTexture', 'texture');
+export const refShadeColorFactor = THREE.materialReference('shadeColorFactor', 'color');
+export const refShadingShiftFactor = THREE.materialReference('shadingShiftFactor', 'float');
+export const refShadeMultiplyTexture = THREE.materialReference('shadeMultiplyTexture', 'texture');
+export const refShadeMultiplyTextureScale = THREE.materialReference('shadeMultiplyTextureScale', 'float');
+export const refShadingToonyFactor = THREE.materialReference('shadingToonyFactor', 'float');
+export const refRimLightingMixFactor = THREE.materialReference('rimLightingMixFactor', 'float');
+export const refRimMultiplyTexture = THREE.materialReference('rimMultiplyTexture', 'texture');
+export const refMatcapFactor = THREE.materialReference('matcapFactor', 'color');
+export const refMatcapTexture = THREE.materialReference('matcapTexture', 'texture');
+export const refParametricRimColorFactor = THREE.materialReference('parametricRimColorFactor', 'color');
+export const refParametricRimLiftFactor = THREE.materialReference('parametricRimLiftFactor', 'float');
+export const refParametricRimFresnelPowerFactor = THREE.materialReference('parametricRimFresnelPowerFactor', 'float');
+export const refOutlineWidthMultiplyTexture = THREE.materialReference('outlineWidthMultiplyTexture', 'texture');
+export const refOutlineWidthFactor = THREE.materialReference('outlineWidthFactor', 'float');
+export const refOutlineColorFactor = THREE.materialReference('outlineColorFactor', 'color');
+export const refOutlineLightingMixFactor = THREE.materialReference('outlineLightingMixFactor', 'float');
+export const refUVAnimationMaskTexture = THREE.materialReference('uvAnimationMaskTexture', 'texture');
 
-export const refUVAnimationScrollXOffset = Nodes.materialReference('uvAnimationScrollXOffset', 'float');
-export const refUVAnimationScrollYOffset = Nodes.materialReference('uvAnimationScrollYOffset', 'float');
-export const refUVAnimationRotationPhase = Nodes.materialReference('uvAnimationRotationPhase', 'float');
+export const refUVAnimationScrollXOffset = THREE.materialReference('uvAnimationScrollXOffset', 'float');
+export const refUVAnimationScrollYOffset = THREE.materialReference('uvAnimationScrollYOffset', 'float');
+export const refUVAnimationRotationPhase = THREE.materialReference('uvAnimationRotationPhase', 'float');
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts b/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts
index b79dfe6e2..5c29ff712 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts
@@ -1,19 +1,19 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 
-export const mtoonParametricRim = Nodes.tslFn(
+export const mtoonParametricRim = THREE.tslFn(
   ({
     parametricRimLift,
     parametricRimFresnelPower,
     parametricRimColor,
   }: {
-    parametricRimLift: Nodes.NodeRepresentation;
-    parametricRimFresnelPower: Nodes.NodeRepresentation;
-    parametricRimColor: Nodes.NodeRepresentation;
+    parametricRimLift: THREE.NodeRepresentation;
+    parametricRimFresnelPower: THREE.NodeRepresentation;
+    parametricRimColor: THREE.NodeRepresentation;
   }) => {
-    const viewDir = Nodes.modelViewPosition.normalize();
-    const dotNV = Nodes.transformedNormalView.dot(viewDir.negate());
+    const viewDir = THREE.modelViewPosition.normalize();
+    const dotNV = THREE.transformedNormalView.dot(viewDir.negate());
 
-    const rim = Nodes.float(1.0).sub(dotNV).add(parametricRimLift).clamp().pow(parametricRimFresnelPower);
+    const rim = THREE.float(1.0).sub(dotNV).add(parametricRimLift).clamp().pow(parametricRimFresnelPower);
 
     return rim.mul(parametricRimColor);
   },
diff --git a/packages/three-vrm/examples/webgpu-dnd.html b/packages/three-vrm/examples/webgpu-dnd.html
index 2b0603b1e..8f0606cb4 100644
--- a/packages/three-vrm/examples/webgpu-dnd.html
+++ b/packages/three-vrm/examples/webgpu-dnd.html
@@ -23,8 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "../node_modules/three/build/three.webgpu.js",
+					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
+					"three/addons/": "../node_modules/three/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js",
 					"@pixiv/three-vrm/nodes": "../lib/nodes/index.module.js"
 				}
@@ -32,15 +33,14 @@
 		</script>
 
 		<script type="module">
-			import * as THREE from 'three';
+			import * as THREE from 'three/webgpu';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 			import { VRMLoaderPlugin, MToonMaterialLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
 			import { MToonNodeMaterial } from '@pixiv/three-vrm/nodes';
 
 			// renderer
-			const renderer = new WebGPURenderer();
+			const renderer = new THREE.WebGPURenderer();
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			document.body.appendChild( renderer.domElement );
@@ -98,7 +98,7 @@
 
 						// calling these functions greatly improves the performance
 						VRMUtils.removeUnnecessaryVertices( gltf.scene );
-						VRMUtils.removeUnnecessaryJoints( gltf.scene, { experimentalSameBoneCounts: true } );
+						VRMUtils.removeUnnecessaryJoints( gltf.scene, { sameBoneCounts: true } );
 
 						if ( currentVrm ) {
 

From 92e9ef48b84da3ee2452f6d44f544f46f6df94b4 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 12:26:28 +0900
Subject: [PATCH 2/8] deps: Bump Three.js to r167

package.json, readme, examples

the build is failing
---
 README.md                                     |  4 +--
 .../three-vrm-animation/examples/dnd.html     |  4 +--
 .../examples/loader-plugin.html               |  4 +--
 packages/three-vrm-animation/package.json     |  4 +--
 .../three-vrm-core/examples/expressions.html  |  4 +--
 .../three-vrm-core/examples/firstPerson.html  |  4 +--
 .../three-vrm-core/examples/humanoid.html     |  4 +--
 .../examples/humanoidAnimation/index.html     |  4 +--
 packages/three-vrm-core/examples/lookAt.html  |  4 +--
 packages/three-vrm-core/examples/meta.html    |  4 +--
 packages/three-vrm-core/package.json          |  4 +--
 .../examples/loader-plugin.html               |  4 +--
 .../package.json                              |  4 +--
 .../examples/emissive-strength.html           |  4 +--
 .../examples/feature-test.html                |  4 +--
 .../examples/loader-plugin.html               |  4 +--
 .../three-vrm-materials-mtoon/package.json    |  4 +--
 .../three-vrm-materials-v0compat/package.json |  4 +--
 .../examples/aim.html                         |  4 +--
 .../examples/importer.html                    |  4 +--
 .../examples/roll.html                        |  4 +--
 .../examples/rotation.html                    |  4 +--
 .../examples/upper-arm.html                   |  4 +--
 .../three-vrm-node-constraint/package.json    |  4 +--
 .../examples/collider.html                    |  4 +--
 .../examples/loader-plugin.html               |  4 +--
 .../examples/multiple.html                    |  4 +--
 .../three-vrm-springbone/examples/single.html |  4 +--
 packages/three-vrm-springbone/package.json    |  4 +--
 packages/three-vrm/README.md                  |  4 +--
 packages/three-vrm/examples/animations.html   |  4 +--
 packages/three-vrm/examples/basic.html        |  4 +--
 packages/three-vrm/examples/bones.html        |  4 +--
 packages/three-vrm/examples/debug.html        |  4 +--
 packages/three-vrm/examples/dnd.html          |  4 +--
 packages/three-vrm/examples/expressions.html  |  4 +--
 packages/three-vrm/examples/firstperson.html  |  4 +--
 .../examples/humanoidAnimation/index.html     |  4 +--
 .../three-vrm/examples/lookat-advanced.html   |  4 +--
 packages/three-vrm/examples/lookat.html       |  4 +--
 .../three-vrm/examples/materials-debug.html   |  4 +--
 packages/three-vrm/examples/meta.html         |  4 +--
 packages/three-vrm/examples/mouse.html        |  4 +--
 packages/three-vrm/package.json               |  4 +--
 yarn.lock                                     | 26 +++++++++----------
 45 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/README.md b/README.md
index 124e9c79b..a8b578bf0 100644
--- a/README.md
+++ b/README.md
@@ -34,8 +34,8 @@ Code like this:
 <script type="importmap">
   {
     "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+      "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
       "@pixiv/three-vrm": "three-vrm.module.js"
     }
   }
diff --git a/packages/three-vrm-animation/examples/dnd.html b/packages/three-vrm-animation/examples/dnd.html
index f6a8fe78e..dd56794d1 100644
--- a/packages/three-vrm-animation/examples/dnd.html
+++ b/packages/three-vrm-animation/examples/dnd.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@2.1.0/lib/three-vrm.module.js",
 					"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
 				}
diff --git a/packages/three-vrm-animation/examples/loader-plugin.html b/packages/three-vrm-animation/examples/loader-plugin.html
index 3a1884e15..16b72d5f3 100644
--- a/packages/three-vrm-animation/examples/loader-plugin.html
+++ b/packages/three-vrm-animation/examples/loader-plugin.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@2.1.0/lib/three-vrm.module.js",
 					"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
 				}
diff --git a/packages/three-vrm-animation/package.json b/packages/three-vrm-animation/package.json
index d9d82eae3..5c26f2dd8 100644
--- a/packages/three-vrm-animation/package.json
+++ b/packages/three-vrm-animation/package.json
@@ -52,9 +52,9 @@
     "@pixiv/types-vrmc-vrm-animation-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
+    "@types/three": "^0.167.0",
     "lint-staged": "15.2.2",
-    "three": "^0.164.1"
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-core/examples/expressions.html b/packages/three-vrm-core/examples/expressions.html
index 1c9d922e4..441c39c64 100644
--- a/packages/three-vrm-core/examples/expressions.html
+++ b/packages/three-vrm-core/examples/expressions.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/examples/firstPerson.html b/packages/three-vrm-core/examples/firstPerson.html
index 50028d8db..76a48116e 100644
--- a/packages/three-vrm-core/examples/firstPerson.html
+++ b/packages/three-vrm-core/examples/firstPerson.html
@@ -28,8 +28,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/examples/humanoid.html b/packages/three-vrm-core/examples/humanoid.html
index 90e22d843..49bc21f4c 100644
--- a/packages/three-vrm-core/examples/humanoid.html
+++ b/packages/three-vrm-core/examples/humanoid.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/examples/humanoidAnimation/index.html b/packages/three-vrm-core/examples/humanoidAnimation/index.html
index 9c8a2ef6b..53f0072e4 100644
--- a/packages/three-vrm-core/examples/humanoidAnimation/index.html
+++ b/packages/three-vrm-core/examples/humanoidAnimation/index.html
@@ -34,8 +34,8 @@
 			{
 				"imports": {
 					"fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/examples/lookAt.html b/packages/three-vrm-core/examples/lookAt.html
index 38d676184..128252e0f 100644
--- a/packages/three-vrm-core/examples/lookAt.html
+++ b/packages/three-vrm-core/examples/lookAt.html
@@ -28,8 +28,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/examples/meta.html b/packages/three-vrm-core/examples/meta.html
index d358a93aa..5f87e76a8 100644
--- a/packages/three-vrm-core/examples/meta.html
+++ b/packages/three-vrm-core/examples/meta.html
@@ -35,8 +35,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
 				}
 			}
diff --git a/packages/three-vrm-core/package.json b/packages/three-vrm-core/package.json
index 69fb839a8..f778cff4e 100644
--- a/packages/three-vrm-core/package.json
+++ b/packages/three-vrm-core/package.json
@@ -55,8 +55,8 @@
     "@pixiv/types-vrmc-vrm-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html b/packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html
index 3f128dbd9..b4b5f44a5 100644
--- a/packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html
+++ b/packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-hdr-emissive-multiplier": "../lib/three-vrm-materials-hdr-emissive-multiplier.module.js"
 				}
 			}
diff --git a/packages/three-vrm-materials-hdr-emissive-multiplier/package.json b/packages/three-vrm-materials-hdr-emissive-multiplier/package.json
index 3d9a0cccf..7674c946b 100644
--- a/packages/three-vrm-materials-hdr-emissive-multiplier/package.json
+++ b/packages/three-vrm-materials-hdr-emissive-multiplier/package.json
@@ -53,8 +53,8 @@
     "@pixiv/types-vrmc-materials-hdr-emissive-multiplier-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-materials-mtoon/examples/emissive-strength.html b/packages/three-vrm-materials-mtoon/examples/emissive-strength.html
index 6a39aa720..a24160fc7 100644
--- a/packages/three-vrm-materials-mtoon/examples/emissive-strength.html
+++ b/packages/three-vrm-materials-mtoon/examples/emissive-strength.html
@@ -24,8 +24,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
 				}
 			}
diff --git a/packages/three-vrm-materials-mtoon/examples/feature-test.html b/packages/three-vrm-materials-mtoon/examples/feature-test.html
index 01a97449f..25fb30f30 100644
--- a/packages/three-vrm-materials-mtoon/examples/feature-test.html
+++ b/packages/three-vrm-materials-mtoon/examples/feature-test.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
 				}
 			}
diff --git a/packages/three-vrm-materials-mtoon/examples/loader-plugin.html b/packages/three-vrm-materials-mtoon/examples/loader-plugin.html
index 0baf83c1b..a4fb0010d 100644
--- a/packages/three-vrm-materials-mtoon/examples/loader-plugin.html
+++ b/packages/three-vrm-materials-mtoon/examples/loader-plugin.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
 				}
 			}
diff --git a/packages/three-vrm-materials-mtoon/package.json b/packages/three-vrm-materials-mtoon/package.json
index 5f76afc25..c64c523c1 100644
--- a/packages/three-vrm-materials-mtoon/package.json
+++ b/packages/three-vrm-materials-mtoon/package.json
@@ -59,8 +59,8 @@
     "@pixiv/types-vrmc-materials-mtoon-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-materials-v0compat/package.json b/packages/three-vrm-materials-v0compat/package.json
index c4786eeb2..4341ddd0b 100644
--- a/packages/three-vrm-materials-v0compat/package.json
+++ b/packages/three-vrm-materials-v0compat/package.json
@@ -50,8 +50,8 @@
     "@pixiv/types-vrmc-materials-mtoon-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-node-constraint/examples/aim.html b/packages/three-vrm-node-constraint/examples/aim.html
index e7080a398..9d2eec953 100644
--- a/packages/three-vrm-node-constraint/examples/aim.html
+++ b/packages/three-vrm-node-constraint/examples/aim.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@3.0",
 					"tweakpane-plugin-rotation": "https://cdn.jsdelivr.net/npm/@0b5vr/tweakpane-plugin-rotation@0.1",
 					"@pixiv/three-vrm-node-constraint": "../lib/three-vrm-node-constraint.module.js"
diff --git a/packages/three-vrm-node-constraint/examples/importer.html b/packages/three-vrm-node-constraint/examples/importer.html
index 1fd45b722..1f5ce9518 100644
--- a/packages/three-vrm-node-constraint/examples/importer.html
+++ b/packages/three-vrm-node-constraint/examples/importer.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@3.0",
 					"tweakpane-plugin-rotation": "https://cdn.jsdelivr.net/npm/@0b5vr/tweakpane-plugin-rotation@0.1",
 					"@pixiv/three-vrm-node-constraint": "../lib/three-vrm-node-constraint.module.js"
diff --git a/packages/three-vrm-node-constraint/examples/roll.html b/packages/three-vrm-node-constraint/examples/roll.html
index 0737e4ae8..6a605d3dd 100644
--- a/packages/three-vrm-node-constraint/examples/roll.html
+++ b/packages/three-vrm-node-constraint/examples/roll.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@3.0",
 					"tweakpane-plugin-rotation": "https://cdn.jsdelivr.net/npm/@0b5vr/tweakpane-plugin-rotation@0.1",
 					"@pixiv/three-vrm-node-constraint": "../lib/three-vrm-node-constraint.module.js"
diff --git a/packages/three-vrm-node-constraint/examples/rotation.html b/packages/three-vrm-node-constraint/examples/rotation.html
index 8fa56ab1c..981af2400 100644
--- a/packages/three-vrm-node-constraint/examples/rotation.html
+++ b/packages/three-vrm-node-constraint/examples/rotation.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@3.0",
 					"tweakpane-plugin-rotation": "https://cdn.jsdelivr.net/npm/@0b5vr/tweakpane-plugin-rotation@0.1",
 					"@pixiv/three-vrm-node-constraint": "../lib/three-vrm-node-constraint.module.js"
diff --git a/packages/three-vrm-node-constraint/examples/upper-arm.html b/packages/three-vrm-node-constraint/examples/upper-arm.html
index 98acdec39..821170619 100644
--- a/packages/three-vrm-node-constraint/examples/upper-arm.html
+++ b/packages/three-vrm-node-constraint/examples/upper-arm.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@3.0",
 					"tweakpane-plugin-rotation": "https://cdn.jsdelivr.net/npm/@0b5vr/tweakpane-plugin-rotation@0.1",
 					"@pixiv/three-vrm-node-constraint": "../lib/three-vrm-node-constraint.module.js"
diff --git a/packages/three-vrm-node-constraint/package.json b/packages/three-vrm-node-constraint/package.json
index e36d65a3e..a5ded351a 100644
--- a/packages/three-vrm-node-constraint/package.json
+++ b/packages/three-vrm-node-constraint/package.json
@@ -54,8 +54,8 @@
     "@pixiv/types-vrmc-node-constraint-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm-springbone/examples/collider.html b/packages/three-vrm-springbone/examples/collider.html
index 95b35ea6a..35ae32daa 100644
--- a/packages/three-vrm-springbone/examples/collider.html
+++ b/packages/three-vrm-springbone/examples/collider.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+				"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 				"@pixiv/three-vrm-springbone": "../lib/three-vrm-springbone.module.js"
 			  }
 			}
diff --git a/packages/three-vrm-springbone/examples/loader-plugin.html b/packages/three-vrm-springbone/examples/loader-plugin.html
index f749f47b5..45aef1431 100644
--- a/packages/three-vrm-springbone/examples/loader-plugin.html
+++ b/packages/three-vrm-springbone/examples/loader-plugin.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+				"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 				"@pixiv/three-vrm-springbone": "../lib/three-vrm-springbone.module.js"
 			  }
 			}
diff --git a/packages/three-vrm-springbone/examples/multiple.html b/packages/three-vrm-springbone/examples/multiple.html
index fad1fc6d5..30a118b10 100644
--- a/packages/three-vrm-springbone/examples/multiple.html
+++ b/packages/three-vrm-springbone/examples/multiple.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+				"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 				"@pixiv/three-vrm-springbone": "../lib/three-vrm-springbone.module.js"
 			  }
 			}
diff --git a/packages/three-vrm-springbone/examples/single.html b/packages/three-vrm-springbone/examples/single.html
index 29e7ac160..e159ab2e5 100644
--- a/packages/three-vrm-springbone/examples/single.html
+++ b/packages/three-vrm-springbone/examples/single.html
@@ -23,8 +23,8 @@
 		<script type="importmap">
 			{
 			  "imports": {
-				"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+				"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+				"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 				"@pixiv/three-vrm-springbone": "../lib/three-vrm-springbone.module.js"
 			  }
 			}
diff --git a/packages/three-vrm-springbone/package.json b/packages/three-vrm-springbone/package.json
index 35822cfbb..ee87f6fd0 100644
--- a/packages/three-vrm-springbone/package.json
+++ b/packages/three-vrm-springbone/package.json
@@ -55,8 +55,8 @@
     "@pixiv/types-vrmc-springbone-1.0": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/packages/three-vrm/README.md b/packages/three-vrm/README.md
index 124e9c79b..a8b578bf0 100644
--- a/packages/three-vrm/README.md
+++ b/packages/three-vrm/README.md
@@ -34,8 +34,8 @@ Code like this:
 <script type="importmap">
   {
     "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+      "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
       "@pixiv/three-vrm": "three-vrm.module.js"
     }
   }
diff --git a/packages/three-vrm/examples/animations.html b/packages/three-vrm/examples/animations.html
index ef88a126f..4b29e648d 100644
--- a/packages/three-vrm/examples/animations.html
+++ b/packages/three-vrm/examples/animations.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/basic.html b/packages/three-vrm/examples/basic.html
index 9ad51b37f..17b799bdd 100644
--- a/packages/three-vrm/examples/basic.html
+++ b/packages/three-vrm/examples/basic.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/bones.html b/packages/three-vrm/examples/bones.html
index 4e52d614e..35a15bac3 100644
--- a/packages/three-vrm/examples/bones.html
+++ b/packages/three-vrm/examples/bones.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/debug.html b/packages/three-vrm/examples/debug.html
index 52bc1e7c5..b91bbd405 100644
--- a/packages/three-vrm/examples/debug.html
+++ b/packages/three-vrm/examples/debug.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/dnd.html b/packages/three-vrm/examples/dnd.html
index f18bb4671..707a5c3e3 100644
--- a/packages/three-vrm/examples/dnd.html
+++ b/packages/three-vrm/examples/dnd.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/expressions.html b/packages/three-vrm/examples/expressions.html
index 964bd40fe..c65ee2751 100644
--- a/packages/three-vrm/examples/expressions.html
+++ b/packages/three-vrm/examples/expressions.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/firstperson.html b/packages/three-vrm/examples/firstperson.html
index 09d3adcf4..561ba5ce6 100644
--- a/packages/three-vrm/examples/firstperson.html
+++ b/packages/three-vrm/examples/firstperson.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/humanoidAnimation/index.html b/packages/three-vrm/examples/humanoidAnimation/index.html
index dd75fba70..2b84b70df 100644
--- a/packages/three-vrm/examples/humanoidAnimation/index.html
+++ b/packages/three-vrm/examples/humanoidAnimation/index.html
@@ -34,8 +34,8 @@
 			{
 				"imports": {
 					"fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/lookat-advanced.html b/packages/three-vrm/examples/lookat-advanced.html
index 26cf92878..62ef511b1 100644
--- a/packages/three-vrm/examples/lookat-advanced.html
+++ b/packages/three-vrm/examples/lookat-advanced.html
@@ -24,8 +24,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/lookat.html b/packages/three-vrm/examples/lookat.html
index 1d48b1efb..7ce4492c0 100644
--- a/packages/three-vrm/examples/lookat.html
+++ b/packages/three-vrm/examples/lookat.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/materials-debug.html b/packages/three-vrm/examples/materials-debug.html
index 0735e6971..5e6373d92 100644
--- a/packages/three-vrm/examples/materials-debug.html
+++ b/packages/three-vrm/examples/materials-debug.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/meta.html b/packages/three-vrm/examples/meta.html
index d50c91c0f..e786c8df9 100644
--- a/packages/three-vrm/examples/meta.html
+++ b/packages/three-vrm/examples/meta.html
@@ -34,8 +34,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/examples/mouse.html b/packages/three-vrm/examples/mouse.html
index e901b2854..d7f350c51 100644
--- a/packages/three-vrm/examples/mouse.html
+++ b/packages/three-vrm/examples/mouse.html
@@ -22,8 +22,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js"
 				}
 			}
diff --git a/packages/three-vrm/package.json b/packages/three-vrm/package.json
index 99b0fb40f..691adcf86 100644
--- a/packages/three-vrm/package.json
+++ b/packages/three-vrm/package.json
@@ -64,8 +64,8 @@
     "@pixiv/three-vrm-springbone": "3.0.0-beta.1"
   },
   "devDependencies": {
-    "@types/three": "^0.164.0",
-    "three": "^0.164.1"
+    "@types/three": "^0.167.0",
+    "three": "^0.167.0"
   },
   "peerDependencies": {
     "three": ">=0.137"
diff --git a/yarn.lock b/yarn.lock
index 7b6835b26..3a0165c6a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1470,10 +1470,10 @@
     "@tufjs/canonical-json" "1.0.0"
     minimatch "^9.0.0"
 
-"@tweenjs/tween.js@~23.1.1":
-  version "23.1.1"
-  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.1.tgz#0ae28ed9c635805557f78c2626464018d5f1b5e2"
-  integrity sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==
+"@tweenjs/tween.js@~23.1.2":
+  version "23.1.3"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-23.1.3.tgz#eff0245735c04a928bb19c026b58c2a56460539d"
+  integrity sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==
 
 "@types/babel__core@^7.1.14":
   version "7.20.5"
@@ -1584,12 +1584,12 @@
   resolved "https://registry.yarnpkg.com/@types/stats.js/-/stats.js-0.17.0.tgz#0ed81d48e03b590c24da85540c1d952077a9fe20"
   integrity sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==
 
-"@types/three@^0.164.0":
-  version "0.164.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.164.0.tgz#de98ba6713bbb705ae1de52f77453383ce5c709f"
-  integrity sha512-SFDofn9dJVrE+1DKta7xj7lc4ru7B3S3yf10NsxOserW57aQlB6GxtAS1UK5To3LfEMN5HUHMu3n5v+M5rApgA==
+"@types/three@^0.167.0":
+  version "0.167.0"
+  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.167.0.tgz#bd15122d8ef4770571dc02a922b6f9397b54b02e"
+  integrity sha512-BC+Vbm0d6yMzct7dhTBe9ZjEh6ygupyn1k/UcZncIIS/5aNIbfvF77gQw1IFP09Oyj1UxWj0EUBBqc1GkqzsOw==
   dependencies:
-    "@tweenjs/tween.js" "~23.1.1"
+    "@tweenjs/tween.js" "~23.1.2"
     "@types/stats.js" "*"
     "@types/webxr" "*"
     fflate "~0.8.2"
@@ -6730,10 +6730,10 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
-three@^0.164.1:
-  version "0.164.1"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.164.1.tgz#b742f76bd8dfd3736ba0d86a12dfddb73c5cdcc0"
-  integrity sha512-iC/hUBbl1vzFny7f5GtqzVXYjMJKaTPxiCxXfrvVdBi1Sf+jhd1CAkitiFwC7mIBFCo3MrDLJG97yisoaWig0w==
+three@^0.167.0:
+  version "0.167.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.167.0.tgz#399ae7b69604c0a45b93ba3706ad8dc962056c42"
+  integrity sha512-9Y1a66fpjqF3rhq7ivKTaKtjQLZ97Hj/lZ00DmZWaKHaQFH4uzYT1znwRDWQOcgMmCcOloQzo61gDmqO8l9xmA==
 
 through2@^2.0.0:
   version "2.0.5"

From 5f40449fc32e894355f30a47db3557d609a1527c Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 12:28:45 +0900
Subject: [PATCH 3/8] BREAKING change: MToonNodeMaterial now requires r167 or
 higher

---
 README.md                                                   | 2 +-
 packages/three-vrm-materials-mtoon/README.md                | 2 +-
 .../three-vrm-materials-mtoon/src/nodes/warningIfPre161.ts  | 6 +++---
 packages/three-vrm/README.md                                | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index a8b578bf0..5b0f5f813 100644
--- a/README.md
+++ b/README.md
@@ -133,7 +133,7 @@ loader.load(
 Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
 To use three-vrm with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
 
-`MToonNodeMaterial` only supports Three.js r161 or later.
+`MToonNodeMaterial` only supports Three.js r167 or later.
 The NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.
 
 ```js
diff --git a/packages/three-vrm-materials-mtoon/README.md b/packages/three-vrm-materials-mtoon/README.md
index 5aa5f45f8..45e648b08 100644
--- a/packages/three-vrm-materials-mtoon/README.md
+++ b/packages/three-vrm-materials-mtoon/README.md
@@ -13,7 +13,7 @@ MToon (toon material) module for @pixiv/three-vrm
 Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
 To use MToon with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
 
-`MToonNodeMaterial` only supports Three.js r161 or later.
+`MToonNodeMaterial` only supports Three.js r167 or later.
 The NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.
 
 ```js
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/warningIfPre161.ts b/packages/three-vrm-materials-mtoon/src/nodes/warningIfPre161.ts
index ce4aa3702..e3004ab8b 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/warningIfPre161.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/warningIfPre161.ts
@@ -1,11 +1,11 @@
 // This module will be imported at the beginning of `three-vrm-materials-mtoon/nodes`
-// If the version of Three.js is less than r161, it will warn that it is not supported
+// If the version of Three.js is less than r167, it will warn that it is not supported
 
 import * as THREE from 'three';
 
 const threeRevision = parseInt(THREE.REVISION, 10);
-if (threeRevision < 161) {
+if (threeRevision < 167) {
   console.warn(
-    `MToonNodeMaterial requires Three.js r161 or higher (You are using r${threeRevision}). This would not work correctly.`,
+    `MToonNodeMaterial requires Three.js r167 or higher (You are using r${threeRevision}). This would not work correctly.`,
   );
 }
diff --git a/packages/three-vrm/README.md b/packages/three-vrm/README.md
index a8b578bf0..5b0f5f813 100644
--- a/packages/three-vrm/README.md
+++ b/packages/three-vrm/README.md
@@ -133,7 +133,7 @@ loader.load(
 Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
 To use three-vrm with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
 
-`MToonNodeMaterial` only supports Three.js r161 or later.
+`MToonNodeMaterial` only supports Three.js r167 or later.
 The NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.
 
 ```js

From e5ff66cf7369d229d09fab535bb2fe5d91b48722 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 12:32:11 +0900
Subject: [PATCH 4/8] fix: Matrix4.elements is now `THREE.Matrix4Tuple` instead
 of `number[]`

---
 .../src/utils/Matrix4InverseCache.ts                       | 7 +++----
 .../three-vrm-springbone/src/utils/Matrix4InverseCache.ts  | 7 +++----
 packages/three-vrm/src/utils/Matrix4InverseCache.ts        | 4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/three-vrm-node-constraint/src/utils/Matrix4InverseCache.ts b/packages/three-vrm-node-constraint/src/utils/Matrix4InverseCache.ts
index a81ad6724..5e444bc5a 100644
--- a/packages/three-vrm-node-constraint/src/utils/Matrix4InverseCache.ts
+++ b/packages/three-vrm-node-constraint/src/utils/Matrix4InverseCache.ts
@@ -21,7 +21,7 @@ export class Matrix4InverseCache {
   /**
    * The original of `matrix.elements`
    */
-  private readonly _originalElements: number[];
+  private readonly _originalElements: THREE.Matrix4Tuple;
 
   /**
    * Inverse of given matrix.
@@ -30,8 +30,7 @@ export class Matrix4InverseCache {
    */
   public get inverse(): THREE.Matrix4 {
     if (this._shouldUpdateInverse) {
-      this._inverseCache.copy(this.matrix);
-      mat4InvertCompat(this._inverseCache);
+      mat4InvertCompat(this._inverseCache.copy(this.matrix));
       this._shouldUpdateInverse = false;
     }
 
@@ -51,7 +50,7 @@ export class Matrix4InverseCache {
     };
 
     this._originalElements = matrix.elements;
-    matrix.elements = new Proxy(matrix.elements, handler);
+    matrix.elements = new Proxy<THREE.Matrix4Tuple>(matrix.elements, handler);
   }
 
   public revert(): void {
diff --git a/packages/three-vrm-springbone/src/utils/Matrix4InverseCache.ts b/packages/three-vrm-springbone/src/utils/Matrix4InverseCache.ts
index a81ad6724..5e444bc5a 100644
--- a/packages/three-vrm-springbone/src/utils/Matrix4InverseCache.ts
+++ b/packages/three-vrm-springbone/src/utils/Matrix4InverseCache.ts
@@ -21,7 +21,7 @@ export class Matrix4InverseCache {
   /**
    * The original of `matrix.elements`
    */
-  private readonly _originalElements: number[];
+  private readonly _originalElements: THREE.Matrix4Tuple;
 
   /**
    * Inverse of given matrix.
@@ -30,8 +30,7 @@ export class Matrix4InverseCache {
    */
   public get inverse(): THREE.Matrix4 {
     if (this._shouldUpdateInverse) {
-      this._inverseCache.copy(this.matrix);
-      mat4InvertCompat(this._inverseCache);
+      mat4InvertCompat(this._inverseCache.copy(this.matrix));
       this._shouldUpdateInverse = false;
     }
 
@@ -51,7 +50,7 @@ export class Matrix4InverseCache {
     };
 
     this._originalElements = matrix.elements;
-    matrix.elements = new Proxy(matrix.elements, handler);
+    matrix.elements = new Proxy<THREE.Matrix4Tuple>(matrix.elements, handler);
   }
 
   public revert(): void {
diff --git a/packages/three-vrm/src/utils/Matrix4InverseCache.ts b/packages/three-vrm/src/utils/Matrix4InverseCache.ts
index 40d3940aa..5e444bc5a 100644
--- a/packages/three-vrm/src/utils/Matrix4InverseCache.ts
+++ b/packages/three-vrm/src/utils/Matrix4InverseCache.ts
@@ -21,7 +21,7 @@ export class Matrix4InverseCache {
   /**
    * The original of `matrix.elements`
    */
-  private readonly _originalElements: number[];
+  private readonly _originalElements: THREE.Matrix4Tuple;
 
   /**
    * Inverse of given matrix.
@@ -50,7 +50,7 @@ export class Matrix4InverseCache {
     };
 
     this._originalElements = matrix.elements;
-    matrix.elements = new Proxy(matrix.elements, handler);
+    matrix.elements = new Proxy<THREE.Matrix4Tuple>(matrix.elements, handler);
   }
 
   public revert(): void {

From e753d895192f53504995d909c1d895d290e55415 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 12:36:09 +0900
Subject: [PATCH 5/8] fix: Quaternion.elements is now `THREE.QuaternionTuple`
 instead of `number[]`

---
 .../three-vrm-animation/src/VRMAnimationLoaderPlugin.ts     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/three-vrm-animation/src/VRMAnimationLoaderPlugin.ts b/packages/three-vrm-animation/src/VRMAnimationLoaderPlugin.ts
index 85e4ec0a0..c8a563b96 100644
--- a/packages/three-vrm-animation/src/VRMAnimationLoaderPlugin.ts
+++ b/packages/three-vrm-animation/src/VRMAnimationLoaderPlugin.ts
@@ -224,7 +224,11 @@ export class VRMAnimationLoaderPlugin implements GLTFLoaderPlugin {
           parentWorldMatrix.decompose(_v3A, _quatB, _v3A);
 
           const trackValues = arrayChunk(origTrack.values, 4).flatMap((q) =>
-            _quatC.fromArray(q).premultiply(_quatB).multiply(_quatA).toArray(),
+            _quatC
+              .fromArray(q as THREE.QuaternionTuple)
+              .premultiply(_quatB)
+              .multiply(_quatA)
+              .toArray(),
           );
 
           const track = origTrack.clone();

From 2f56a703d9c7156f9c3ffd29ada2f44925a03984 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 12:51:19 +0900
Subject: [PATCH 6/8] fix: Fix type of NodeMaterial members

See about the type assertion: https://github.com/three-types/three-ts-types/pull/1123
---
 .../src/nodes/MToonNodeMaterial.ts                | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
index 49b69d8ec..b707c2bd1 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonNodeMaterial.ts
@@ -255,7 +255,7 @@ export class MToonNodeMaterial extends THREE.NodeMaterial {
   public setupNormal(builder: THREE.NodeBuilder): void {
     // we must apply uv scroll to the normalMap
     // this.normalNode will be used in super.setupNormal() so we temporarily replace it
-    const tempNormalNode: THREE.ShaderNodeObject<THREE.Node> | null = this.normalNode;
+    const tempNormalNode = this.normalNode;
 
     if (this.normalNode == null) {
       this.normalNode = THREE.materialNormal;
@@ -266,7 +266,8 @@ export class MToonNodeMaterial extends THREE.NodeMaterial {
       }
 
       if (this.isOutline) {
-        this.normalNode = this.normalNode.negate();
+        // See about the type assertion: https://github.com/three-types/three-ts-types/pull/1123
+        this.normalNode = (this.normalNode as THREE.ShaderNodeObject<THREE.Node>).negate();
       }
     }
 
@@ -323,7 +324,7 @@ export class MToonNodeMaterial extends THREE.NodeMaterial {
   public setupPosition(builder: THREE.NodeBuilder): THREE.ShaderNodeObject<THREE.Node> {
     // we must apply outline position offset
     // this.positionNode will be used in super.setupPosition() so we temporarily replace it
-    const tempPositionNode: THREE.ShaderNodeObject<THREE.Node> | null = this.positionNode;
+    const tempPositionNode = this.positionNode;
 
     if (this.isOutline && this.outlineWidthMode !== MToonMaterialOutlineWidthMode.None) {
       this.positionNode ??= THREE.positionLocal;
@@ -341,11 +342,15 @@ export class MToonNodeMaterial extends THREE.NodeMaterial {
       const outlineOffset = width.mul(worldNormalLength).mul(normalLocal);
 
       if (this.outlineWidthMode === MToonMaterialOutlineWidthMode.WorldCoordinates) {
-        this.positionNode = this.positionNode.add(outlineOffset);
+        // See about the type assertion: https://github.com/three-types/three-ts-types/pull/1123
+        this.positionNode = (this.positionNode as THREE.ShaderNodeObject<THREE.Node>).add(outlineOffset);
       } else if (this.outlineWidthMode === MToonMaterialOutlineWidthMode.ScreenCoordinates) {
         const clipScale = THREE.cameraProjectionMatrix.element(1).element(1);
 
-        this.positionNode = this.positionNode.add(outlineOffset.div(clipScale).mul(THREE.positionView.z.negate()));
+        // See about the type assertion: https://github.com/three-types/three-ts-types/pull/1123
+        this.positionNode = (this.positionNode as THREE.ShaderNodeObject<THREE.Node>).add(
+          outlineOffset.div(clipScale).mul(THREE.positionView.z.negate()),
+        );
       }
 
       this.positionNode ??= THREE.positionLocal;

From 7246089efb5979a71ed7580d6abf2ab517fcd245 Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 14:30:50 +0900
Subject: [PATCH 7/8] examples: change back URLs of three.js importmap from
 node_modules to jsdelivr

---
 .../examples/webgpu-feature-test.html                       | 6 +++---
 .../examples/webgpu-loader-plugin.html                      | 6 +++---
 packages/three-vrm/examples/webgpu-dnd.html                 | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html b/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
index 41baa238b..fd15ef724 100644
--- a/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
+++ b/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
@@ -23,9 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../node_modules/three/build/three.webgpu.js",
-					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
-					"three/addons/": "../node_modules/three/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
 					"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
 				}
diff --git a/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html b/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
index b37532e30..f46954f02 100644
--- a/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
+++ b/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
@@ -23,9 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../node_modules/three/build/three.webgpu.js",
-					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
-					"three/addons/": "../node_modules/three/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
 					"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
 				}
diff --git a/packages/three-vrm/examples/webgpu-dnd.html b/packages/three-vrm/examples/webgpu-dnd.html
index 8f0606cb4..ea850ac31 100644
--- a/packages/three-vrm/examples/webgpu-dnd.html
+++ b/packages/three-vrm/examples/webgpu-dnd.html
@@ -23,9 +23,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../node_modules/three/build/three.webgpu.js",
-					"three/webgpu": "../node_modules/three/build/three.webgpu.js",
-					"three/addons/": "../node_modules/three/examples/jsm/",
+					"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
+					"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
 					"@pixiv/three-vrm": "../lib/three-vrm.module.js",
 					"@pixiv/three-vrm/nodes": "../lib/nodes/index.module.js"
 				}

From d9abd77afedd6458f94a8bc63276783f9577d7de Mon Sep 17 00:00:00 2001
From: 0b5vr <0b5vr@0b5vr.com>
Date: Fri, 26 Jul 2024 14:33:29 +0900
Subject: [PATCH 8/8] fix: MToonLightingModel, Follow API change of
 LightingModel

`indirectDiffuse`, `indirectSpecular` are no longer interface functions, replaced by `indirect`

- See: https://github.com/mrdoob/three.js/blob/4cc8fdfa944181c4274c91061574bcf033315bee/src/nodes/functions/PhysicalLightingModel.js#L510
- See: https://github.com/mrdoob/three.js/blob/4cc8fdfa944181c4274c91061574bcf033315bee/src/nodes/lighting/LightsNode.js#L102
---
 .../src/nodes/MToonLightingModel.ts                          | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
index 3629f8493..9c7b35ef5 100644
--- a/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
+++ b/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
@@ -99,6 +99,11 @@ export class MToonLightingModel extends THREE.LightingModel {
     );
   }
 
+  indirect(context: THREE.LightingModelIndirectInput) {
+    this.indirectDiffuse(context);
+    this.indirectSpecular(context);
+  }
+
   indirectDiffuse({ irradiance, reflectedLight }: THREE.LightingModelIndirectInput) {
     // indirect irradiance
     (reflectedLight.indirectDiffuse as THREE.ShaderNodeObject<THREE.Node>).assign(