Merge pull request #1446 from pixiv/webgpu-r167

BREAKING feature: preparing for Three.js r167
pixiv · Jul 26, 2024 · 76c1a68 · 76c1a68
2 parents 6ba5572 + d9abd77
commit 76c1a68
Show file tree

Hide file tree

Showing 61 changed files with 317 additions and 306 deletions.
diff --git 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"
     }
   }
@@ -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-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
@@ -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
@@ -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-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();

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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/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
@@ -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
@@ -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/webgpu-feature-test.html b/packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
@@ -23,22 +23,22 @@
 		<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.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"
 				}
 			}
 		</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
@@ -23,24 +23,24 @@
 		<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": "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"
 				}
 			}
 		</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/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-mtoon/src/nodes/MToonAnimatedUVNode.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts
@@ -1,12 +1,12 @@
-import * as Nodes from 'three/addons/nodes/Nodes.js';
+import * as THREE from 'three/webgpu';
 import {
   refUVAnimationMaskTexture,
   refUVAnimationRotationPhase,
   refUVAnimationScrollXOffset,
   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');