Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

deps: Bump Three.js to r171 #1548

Draft
wants to merge 2 commits into
base: dev
Choose a base branch
from
+212 −193
Draft

deps: Bump Three.js to r171 #1548

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
63e146e
deps: Bump Three.js to r171
0b5vr Dec 4, 2024
cd5d067
fix!: Migrate TSL functions from `three/webgpu` to `three/tsl`
0b5vr Dec 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ You can import all the dependencies via CDN like [jsDelivr](https://www.jsdelivr
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-animation/examples/dnd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.js",
"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-animation/examples/loader-plugin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.js",
"@pixiv/three-vrm-animation": "../lib/three-vrm-animation.module.js"
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-animation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@
"@pixiv/types-vrmc-vrm-animation-1.0": "3.3.0"
},
"devDependencies": {
"@types/three": "^0.169.0",
"@types/three": "^0.170.0",
"lint-staged": "15.2.10",
"three": "^0.169.0"
"three": "^0.171.0"
},
"peerDependencies": {
"three": ">=0.137"
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/expressions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/firstPerson.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/humanoid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/humanoidAnimation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
{
"imports": {
"fflate": "https://cdn.jsdelivr.net/npm/[email protected]/esm/browser.js",
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/lookAt.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/examples/meta.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-core": "../lib/three-vrm-core.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@
"@pixiv/types-vrmc-vrm-1.0": "3.3.0"
},
"devDependencies": {
"@types/three": "^0.169.0",
"three": "^0.169.0"
"@types/three": "^0.170.0",
"three": "^0.171.0"
},
"peerDependencies": {
"three": ">=0.137"
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-hdr-emissive-multiplier/examples/loader-plugin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-materials-hdr-emissive-multiplier": "../lib/three-vrm-materials-hdr-emissive-multiplier.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-hdr-emissive-multiplier/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@
"@pixiv/types-vrmc-materials-hdr-emissive-multiplier-1.0": "3.3.0"
},
"devDependencies": {
"@types/three": "^0.169.0",
"three": "^0.169.0"
"@types/three": "^0.170.0",
"three": "^0.171.0"
},
"peerDependencies": {
"three": ">=0.137"
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-mtoon/examples/emissive-strength.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-mtoon/examples/feature-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-mtoon/examples/loader-plugin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.171.0/examples/jsm/",
"@pixiv/three-vrm-materials-mtoon": "../lib/three-vrm-materials-mtoon.module.js"
}
}
Expand Down
7 changes: 4 additions & 3 deletions packages/three-vrm-materials-mtoon/examples/webgpu-feature-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/webgpu": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/webgpu": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/tsl": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.tsl.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/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"
}
Expand Down
7 changes: 4 additions & 3 deletions packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/webgpu": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/webgpu": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.webgpu.js",
"three/tsl": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.tsl.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/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"
}
Expand Down
4 changes: 2 additions & 2 deletions packages/three-vrm-materials-mtoon/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
"@pixiv/types-vrmc-materials-mtoon-1.0": "3.3.0"
},
"devDependencies": {
"@types/three": "^0.169.0",
"three": "^0.169.0"
"@types/three": "^0.170.0",
"three": "^0.171.0"
},
"peerDependencies": {
"three": ">=0.137"
Expand Down
23 changes: 12 additions & 11 deletions packages/three-vrm-materials-mtoon/src/nodes/MToonAnimatedUVNode.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as THREE from 'three/webgpu';
import { cos, mat2, sin, uv, vec2, vec4 } from 'three/tsl';
import {
refUVAnimationMaskTexture,
refUVAnimationRotationPhase,
Expand All @@ -19,28 +20,28 @@ export class MToonAnimatedUVNode extends THREE.TempNode {
let uvAnimationMask: THREE.NodeRepresentation = 1.0;

if (this.hasMaskTexture) {
uvAnimationMask = THREE.vec4(refUVAnimationMaskTexture).context({ getUV: () => THREE.uv() }).r;
uvAnimationMask = vec4(refUVAnimationMaskTexture).context({ getUV: () => uv() }).r;
}

let uv: THREE.ShaderNodeObject<THREE.Swizzable> = THREE.uv();
let animatedUv: THREE.ShaderNodeObject<THREE.Swizzable> = uv();

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

// WORKAROUND: THREE.rotateUV causes an issue with the mask texture
// We are going to spin using a 100% organic handmade rotation matrix
// uv = THREE.rotateUV(uv, phase, THREE.vec2(0.5, 0.5));
// animatedUv = THREE.rotateUV(animatedUv, phase, THREE.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));
const c = cos(phase);
const s = sin(phase);
animatedUv = animatedUv.sub(vec2(0.5, 0.5));
animatedUv = animatedUv.mul(mat2(c, s, s.negate(), c));
animatedUv = animatedUv.add(vec2(0.5, 0.5));

// scroll
const scroll = THREE.vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
uv = uv.add(scroll);
const scroll = vec2(refUVAnimationScrollXOffset, refUVAnimationScrollYOffset).mul(uvAnimationMask);
animatedUv = animatedUv.add(scroll);

return uv.toVar('AnimatedUV');
return animatedUv.toVar('AnimatedUV');
}
}
19 changes: 8 additions & 11 deletions packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as THREE from 'three/webgpu';
import { BRDF_Lambert, diffuseColor, float, mix, transformedNormalView, vec3 } from 'three/tsl';
import {
matcap,
parametricRim,
Expand Down Expand Up @@ -34,7 +35,7 @@ const linearstep = FnCompat(
const getShading = FnCompat(({ dotNL }: { dotNL: THREE.ShaderNodeObject<THREE.Node> }) => {
const shadow = 1.0; // TODO

const feather = THREE.float(1.0).sub(shadingToony);
const feather = float(1.0).sub(shadingToony);

let shading: THREE.ShaderNodeObject<THREE.Node> = dotNL.add(shadingShift);
shading = linearstep({
Expand All @@ -57,8 +58,8 @@ const getDiffuse = FnCompat(
shading: THREE.ShaderNodeObject<THREE.Node>;
lightColor: THREE.ShaderNodeObject<THREE.Node>;
}) => {
const diffuseColor = THREE.mix(shadeColor, THREE.diffuseColor, shading);
const col = lightColor.mul(THREE.BRDF_Lambert({ diffuseColor }));
const feathered = mix(shadeColor, diffuseColor, shading);
const col = lightColor.mul(BRDF_Lambert({ diffuseColor: feathered }));

return col;
},
Expand All @@ -70,7 +71,7 @@ export class MToonLightingModel extends THREE.LightingModel {
}

direct({ lightDirection, lightColor, reflectedLight }: THREE.LightingModelDirectInput) {
const dotNL = THREE.transformedNormalView.dot(lightDirection).clamp(-1.0, 1.0);
const dotNL = transformedNormalView.dot(lightDirection).clamp(-1.0, 1.0);

// toon diffuse
const shading = getShading({
Expand All @@ -95,7 +96,7 @@ export class MToonLightingModel extends THREE.LightingModel {
parametricRim
.add(matcap)
.mul(rimMultiply)
.mul(THREE.mix(THREE.vec3(0.0), THREE.BRDF_Lambert({ diffuseColor: lightColor }), rimLightingMix)),
.mul(mix(vec3(0.0), BRDF_Lambert({ diffuseColor: lightColor }), rimLightingMix)),
),
);
}
Expand All @@ -109,11 +110,7 @@ export class MToonLightingModel extends THREE.LightingModel {
// indirect irradiance
(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,
}),
),
(irradiance as THREE.ShaderNodeObject<THREE.Node>).mul(BRDF_Lambert({ diffuseColor })),
),
);
}
Expand All @@ -125,7 +122,7 @@ export class MToonLightingModel extends THREE.LightingModel {
parametricRim
.add(matcap)
.mul(rimMultiply)
.mul(THREE.mix(THREE.vec3(1.0), THREE.vec3(0.0), rimLightingMix)),
.mul(mix(vec3(1.0), vec3(0.0), rimLightingMix)),
),
);
}
Expand Down
Loading
Loading