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 ) {