Fix: add a r168 compat to tslFn calling

In r168, `tslFn` has been renamed to `Fn` See: mrdoob/three.js#29064
pixiv · Aug 19, 2024 · 2dd95f1 · 2dd95f1
1 parent 5bd5b17
commit 2dd95f1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts b/packages/three-vrm-materials-mtoon/src/nodes/MToonLightingModel.ts
@@ -8,10 +8,11 @@ import {
   shadingShift,
   shadingToony,
 } from './immutableNodes';
+import { FnCompat } from './utils/FnCompat';
 
 // TODO: 0% confidence about function types.
 
-const linearstep = THREE.tslFn(
+const linearstep = FnCompat(
   ({
     a,
     b,
@@ -30,7 +31,7 @@ const linearstep = THREE.tslFn(
 /**
  * Convert NdotL into toon shading factor using shadingShift and shadingToony
  */
-const getShading = THREE.tslFn(({ dotNL }: { dotNL: THREE.ShaderNodeObject<THREE.Node> }) => {
+const getShading = FnCompat(({ dotNL }: { dotNL: THREE.ShaderNodeObject<THREE.Node> }) => {
   const shadow = 1.0; // TODO
 
   const feather = THREE.float(1.0).sub(shadingToony);
@@ -48,7 +49,7 @@ const getShading = THREE.tslFn(({ dotNL }: { dotNL: THREE.ShaderNodeObject<THREE
 /**
  * Mix diffuseColor and shadeColor using shading factor and light color
  */
-const getDiffuse = THREE.tslFn(
+const getDiffuse = FnCompat(
   ({
     shading,
     lightColor,

diff --git a/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts b/packages/three-vrm-materials-mtoon/src/nodes/mtoonParametricRim.ts
@@ -1,6 +1,7 @@
 import * as THREE from 'three/webgpu';
+import { FnCompat } from './utils/FnCompat';
 
-export const mtoonParametricRim = THREE.tslFn(
+export const mtoonParametricRim = FnCompat(
   ({
     parametricRimLift,
     parametricRimFresnelPower,

diff --git a/packages/three-vrm-materials-mtoon/src/nodes/utils/FnCompat.ts b/packages/three-vrm-materials-mtoon/src/nodes/utils/FnCompat.ts
@@ -0,0 +1,20 @@
+import * as THREE from 'three/webgpu';
+
+/**
+ * A compat function for `Fn()` / `tslFn()`.
+ * `tslFn()` has been renamed to `Fn()` in r168.
+ * We are going to use this compat for a while.
+ *
+ * See: https://github.com/mrdoob/three.js/pull/29064
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FnCompat: typeof THREE.tslFn = (jsFunc: any) => {
+  // COMPAT r168: `tslFn()` has been renamed to `Fn()`
+  // See: https://github.com/mrdoob/three.js/pull/29064
+  const threeRevision = parseInt(THREE.REVISION, 10);
+  if (threeRevision >= 168) {
+    return (THREE as any).Fn(jsFunc);
+  } else {
+    return (THREE as any).tslFn(jsFunc);
+  }
+};