Skip to content

Commit 76c1a68

Browse files
0b5vr0b5vr
authored
Merge pull request #1446 from pixiv/webgpu-r167
BREAKING feature: preparing for Three.js r167
2 parents 6ba5572 + d9abd77 commit 76c1a68

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+317
-306
lines changed

‎README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ Code like this:
3434
<script type="importmap">
3535
{
3636
"imports": {
37-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
38-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
37+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
38+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
3939
"@pixiv/three-vrm": "three-vrm.module.js"
4040
}
4141
}
@@ -133,7 +133,7 @@ loader.load(
133133
Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
134134
To use three-vrm with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
135135

136-
`MToonNodeMaterial` only supports Three.js r161 or later.
136+
`MToonNodeMaterial` only supports Three.js r167 or later.
137137
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.
138138

139139
```js

‎packages/three-vrm-animation/examples/dnd.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@2.1.0/lib/three-vrm.module.js",
2828
"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
2929
}

‎packages/three-vrm-animation/examples/loader-plugin.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@2.1.0/lib/three-vrm.module.js",
2828
"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
2929
}

‎packages/three-vrm-animation/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@
5252
"@pixiv/types-vrmc-vrm-animation-1.0": "3.0.0-beta.1"
5353
},
5454
"devDependencies": {
55-
"@types/three": "^0.164.0",
55+
"@types/three": "^0.167.0",
5656
"lint-staged": "15.2.2",
57-
"three": "^0.164.1"
57+
"three": "^0.167.0"
5858
},
5959
"peerDependencies": {
6060
"three": ">=0.137"

‎packages/three-vrm-animation/src/VRMAnimationLoaderPlugin.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,11 @@ export class VRMAnimationLoaderPlugin implements GLTFLoaderPlugin {
224224
parentWorldMatrix.decompose(_v3A, _quatB, _v3A);
225225

226226
const trackValues = arrayChunk(origTrack.values, 4).flatMap((q) =>
227-
_quatC.fromArray(q).premultiply(_quatB).multiply(_quatA).toArray(),
227+
_quatC
228+
.fromArray(q as THREE.QuaternionTuple)
229+
.premultiply(_quatB)
230+
.multiply(_quatA)
231+
.toArray(),
228232
);
229233

230234
const track = origTrack.clone();

‎packages/three-vrm-core/examples/expressions.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
2828
}
2929
}

‎packages/three-vrm-core/examples/firstPerson.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
<script type="importmap">
2929
{
3030
"imports": {
31-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
32-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
31+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
32+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
3333
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
3434
}
3535
}

‎packages/three-vrm-core/examples/humanoid.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
2828
}
2929
}

‎packages/three-vrm-core/examples/humanoidAnimation/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
{
3535
"imports": {
3636
"fflate": "https://cdn.jsdelivr.net/npm/fflate@0.7.4/esm/browser.js",
37-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
38-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
37+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
38+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
3939
"@pixiv/three-vrm-core": "../../lib/three-vrm-core.module.js"
4040
}
4141
}

‎packages/three-vrm-core/examples/lookAt.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@
2828
<script type="importmap">
2929
{
3030
"imports": {
31-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
32-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
31+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
32+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
3333
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
3434
}
3535
}

‎packages/three-vrm-core/examples/meta.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
<script type="importmap">
3636
{
3737
"imports": {
38-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
39-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
38+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
39+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
4040
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
4141
}
4242
}

‎packages/three-vrm-core/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@
5555
"@pixiv/types-vrmc-vrm-1.0": "3.0.0-beta.1"
5656
},
5757
"devDependencies": {
58-
"@types/three": "^0.164.0",
59-
"three": "^0.164.1"
58+
"@types/three": "^0.167.0",
59+
"three": "^0.167.0"
6060
},
6161
"peerDependencies": {
6262
"three": ">=0.137"

‎packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm-materials-hdr-emissive-multiplier": "../lib/three-vrm-materials-hdr-emissive-multiplier.module.js"
2828
}
2929
}

‎packages/three-vrm-materials-hdr-emissive-multiplier/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@
5353
"@pixiv/types-vrmc-materials-hdr-emissive-multiplier-1.0": "3.0.0-beta.1"
5454
},
5555
"devDependencies": {
56-
"@types/three": "^0.164.0",
57-
"three": "^0.164.1"
56+
"@types/three": "^0.167.0",
57+
"three": "^0.167.0"
5858
},
5959
"peerDependencies": {
6060
"three": ">=0.137"

‎packages/three-vrm-materials-mtoon/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ MToon (toon material) module for @pixiv/three-vrm
1313
Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
1414
To use MToon with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
1515

16-
`MToonNodeMaterial` only supports Three.js r161 or later.
16+
`MToonNodeMaterial` only supports Three.js r167 or later.
1717
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.
1818

1919
```js

‎packages/three-vrm-materials-mtoon/examples/emissive-strength.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
<script type="importmap">
2525
{
2626
"imports": {
27-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
28-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
27+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
28+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2929
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
3030
}
3131
}

‎packages/three-vrm-materials-mtoon/examples/feature-test.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
2828
}
2929
}

‎packages/three-vrm-materials-mtoon/examples/loader-plugin.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
<script type="importmap">
2323
{
2424
"imports": {
25-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
26-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
25+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
26+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2727
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
2828
}
2929
}

‎packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@
2323
<script type="importmap">
2424
{
2525
"imports": {
26-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
27-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
26+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
27+
"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
28+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2829
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
2930
"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
3031
}
3132
}
3233
</script>
3334

3435
<script type="module">
35-
import * as THREE from 'three';
36+
import * as THREE from 'three/webgpu';
3637
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
37-
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
3838
import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';
3939

4040
// renderer
41-
const renderer = new WebGPURenderer();
41+
const renderer = new THREE.WebGPURenderer();
4242
renderer.setSize( window.innerWidth, window.innerHeight );
4343
renderer.setPixelRatio( window.devicePixelRatio );
4444
document.body.appendChild( renderer.domElement );

‎packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,24 @@
2323
<script type="importmap">
2424
{
2525
"imports": {
26-
"three": "https://cdn.jsdelivr.net/npm/three@0.164.0/build/three.module.js",
27-
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.0/examples/jsm/",
26+
"three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
27+
"three/webgpu": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.webgpu.js",
28+
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
2829
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js",
2930
"@pixiv/three-vrm-materials-mtoon/nodes": "../lib/nodes/index.module.js"
3031
}
3132
}
3233
</script>
3334

3435
<script type="module">
35-
import * as THREE from 'three';
36+
import * as THREE from 'three/webgpu';
3637
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
3738
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
38-
import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
3939
import { MToonMaterialLoaderPlugin } from '@pixiv/three-vrm-materials-mtoon';
4040
import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';
4141

4242
// renderer
43-
const renderer = new WebGPURenderer();
43+
const renderer = new THREE.WebGPURenderer();
4444
renderer.setSize( window.innerWidth, window.innerHeight );
4545
renderer.setPixelRatio( window.devicePixelRatio );
4646
document.body.appendChild( renderer.domElement );

‎packages/three-vrm-materials-mtoon/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
"@pixiv/types-vrmc-materials-mtoon-1.0": "3.0.0-beta.1"
6060
},
6161
"devDependencies": {
62-
"@types/three": "^0.164.0",
63-
"three": "^0.164.1"
62+
"@types/three": "^0.167.0",
63+
"three": "^0.167.0"
6464
},
6565
"peerDependencies": {
6666
"three": ">=0.137"

‎packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import * as Nodes from 'three/addons/nodes/Nodes.js';
1+
import * as THREE from 'three/webgpu';
22
import {
33
refUVAnimationMaskTexture,
44
refUVAnimationRotationPhase,
55
refUVAnimationScrollXOffset,
66
refUVAnimationScrollYOffset,
77
} from './materialReferences';
88

9-
export class MToonAnimatedUVNode extends Nodes.TempNode {
9+
export class MToonAnimatedUVNode extends THREE.TempNode {
1010
public readonly hasMaskTexture: boolean;
1111

1212
public constructor(hasMaskTexture: boolean) {
@@ -15,30 +15,30 @@ export class MToonAnimatedUVNode extends Nodes.TempNode {
1515
this.hasMaskTexture = hasMaskTexture;
1616
}
1717

18-
public setup(): Nodes.ShaderNodeObject<Nodes.VarNode> {
19-
let uvAnimationMask: Nodes.NodeRepresentation = 1.0;
18+
public setup(): THREE.ShaderNodeObject<THREE.VarNode> {
19+
let uvAnimationMask: THREE.NodeRepresentation = 1.0;
2020

2121
if (this.hasMaskTexture) {
22-
uvAnimationMask = Nodes.vec4(refUVAnimationMaskTexture).context({ getUV: () => Nodes.uv() }).r;
22+
uvAnimationMask = THREE.vec4(refUVAnimationMaskTexture).context({ getUV: () => THREE.uv() }).r;
2323
}
2424

25-
let uv: Nodes.ShaderNodeObject<Nodes.Swizzable> = Nodes.uv();
25+
let uv: THREE.ShaderNodeObject<THREE.Swizzable> = THREE.uv();
2626

2727
// rotate
2828
const phase = refUVAnimationRotationPhase.mul(uvAnimationMask);
2929

30-
// WORKAROUND: Nodes.rotateUV causes an issue with the mask texture
30+
// WORKAROUND: THREE.rotateUV causes an issue with the mask texture
3131
// We are going to spin using a 100% organic handmade rotation matrix
32-
// uv = Nodes.rotateUV(uv, phase, Nodes.vec2(0.5, 0.5));
32+
// uv = THREE.rotateUV(uv, phase, THREE.vec2(0.5, 0.5));
3333

34-
const c = Nodes.cos(phase);
35-
const s = Nodes.sin(phase);
36-
uv = uv.sub(Nodes.vec2(0.5, 0.5));
37-
uv = uv.mul(Nodes.mat2(c, s, s.negate(), c));
38-
uv = uv.add(Nodes.vec2(0.5, 0.5));
34+
const c = THREE.cos(phase);
35+
const s = THREE.sin(phase);
36+
uv = uv.sub(THREE.vec2(0.5, 0.5));
37+
uv = uv.mul(THREE.mat2(c, s, s.negate(), c));
38+
uv = uv.add(THREE.vec2(0.5, 0.5));
3939

4040
// scroll
41-
const scroll = Nodes.vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
41+
const scroll = THREE.vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
4242
uv = uv.add(scroll);
4343

4444
return uv.temp('AnimatedUV');

0 commit comments

Comments
 (0)