Add webgpu_animation_retargeting example (#1462)

* Add examples * Updates * Update patch and delete examples * Add examples * Update patch and delete examples
three-types · Dec 22, 2024 · ec73949 · ec73949
1 parent 9feb815
commit ec73949
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 9 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -13109,6 +13109,76 @@ index d0255e43..c924d666 100644
 
  init();
 
+diff --git a/examples-testing/examples/webgpu_animation_retargeting.ts b/examples-testing/examples/webgpu_animation_retargeting.ts
+index b9c69307..3b7039b5 100644
+--- a/examples-testing/examples/webgpu_animation_retargeting.ts
++++ b/examples-testing/examples/webgpu_animation_retargeting.ts
+@@ -1,4 +1,4 @@
+-import * as THREE from 'three';
++import * as THREE from 'three/webgpu';
+ import {
+     color,
+     screenUV,
+@@ -18,22 +18,23 @@ import {
+     pow,
+     blendDodge,
+     normalWorld,
++    ShaderNodeObject,
+ } from 'three/tsl';
+
+ import Stats from 'three/addons/libs/stats.module.js';
+
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
++import { GLTF, GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
+ import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';
+
+ const [sourceModel, targetModel] = await Promise.all([
+-    new Promise((resolve, reject) => {
++    new Promise<GLTF>((resolve, reject) => {
+         new GLTFLoader().load('./models/gltf/Michelle.glb', resolve, undefined, reject);
+     }),
+
+-    new Promise((resolve, reject) => {
++    new Promise<GLTF>((resolve, reject) => {
+         new GLTFLoader().load('./models/gltf/Soldier.glb', resolve, undefined, reject);
+     }),
+ ]);
+@@ -45,7 +46,7 @@ const clock = new THREE.Clock();
+ const stats = new Stats();
+ document.body.appendChild(stats.dom);
+
+-export const lightSpeed = /*#__PURE__*/ Fn(([suv_immutable]) => {
++export const lightSpeed = /*#__PURE__*/ Fn<[ShaderNodeObject<THREE.Node>]>(([suv_immutable]) => {
+     // forked from https://www.shadertoy.com/view/7ly3D1
+
+     const suv = vec2(suv_immutable);
+@@ -170,7 +171,13 @@ gui.add(helpers, 'visible').name('helpers');
+
+ //
+
+-function getSource(sourceModel) {
++interface Source {
++    clip: THREE.AnimationClip;
++    skeleton: THREE.Skeleton;
++    mixer: THREE.AnimationMixer;
++}
++
++function getSource(sourceModel: GLTF): Source {
+     const clip = sourceModel.animations[0];
+
+     const helper = new THREE.SkeletonHelper(sourceModel.scene);
+@@ -184,7 +191,7 @@ function getSource(sourceModel) {
+     return { clip, skeleton, mixer };
+ }
+
+-function retargetModel(sourceModel, targetModel) {
++function retargetModel(sourceModel: Source, targetModel: GLTF) {
+     const targetSkin = targetModel.scene.children[0].children[0];
+
+     const targetSkelHelper = new THREE.SkeletonHelper(targetModel.scene);
 diff --git a/examples-testing/examples/webgpu_animation_retargeting_readyplayer.ts b/examples-testing/examples/webgpu_animation_retargeting_readyplayer.ts
 index b0aed613..8607a01a 100644
 --- a/examples-testing/examples/webgpu_animation_retargeting_readyplayer.ts

diff --git a/examples-testing/index.js b/examples-testing/index.js
@@ -42,7 +42,6 @@ const exceptionList = [
     'webgl_rendertarget_texture2darray',
     'webgl_texture2darray',
     'webgl_worker_offscreencanvas',
-    'webgpu_animation_retargeting',
     'webgpu_backdrop',
     'webgpu_backdrop_water',
     'webgpu_compute_audio',

diff --git a/types/three/src/nodes/math/MathNode.d.ts b/types/three/src/nodes/math/MathNode.d.ts
@@ -155,7 +155,7 @@ export const cos: Unary;
 export const tan: Unary;
 export const asin: Unary;
 export const acos: Unary;
-export const atan: Unary;
+export const atan: (a: NodeRepresentation, b?: NodeRepresentation) => ShaderNodeObject<MathNode>;
 export const abs: Unary;
 export const sign: Unary;
 export const length: Unary;

diff --git a/types/three/src/nodes/tsl/TSLCore.d.ts b/types/three/src/nodes/tsl/TSLCore.d.ts
@@ -215,20 +215,20 @@ interface Layout {
     inputs: { name: string; type: string }[];
 }
 
-interface ShaderNodeFn<R extends Node = ShaderNodeObject<Node>> {
-    (): R;
+interface ShaderNodeFn<Args extends readonly unknown[], R extends Node = ShaderNodeObject<Node>> {
+    (...args: Args): R;
     shaderNode: R;
-    setLayout: (layout: Layout) => ShaderNodeFn<R>;
-    once: () => ShaderNodeFn<R>;
+    setLayout: (layout: Layout) => ShaderNodeFn<Args, R>;
+    once: () => ShaderNodeFn<Args, R>;
 }
 
-export function Fn<R extends Node = ShaderNodeObject<Node>>(jsFunc: () => R): ShaderNodeFn<R>;
+export function Fn<R extends Node = ShaderNodeObject<Node>>(jsFunc: () => R): ShaderNodeFn<[], R>;
 export function Fn<T extends any[], R extends Node = ShaderNodeObject<Node>>(
     jsFunc: (args: T) => R,
-): ((...args: ProxiedTuple<T>) => R) & ShaderNodeFn<R>;
+): ShaderNodeFn<ProxiedTuple<T>, R>;
 export function Fn<T extends { [key: string]: unknown }, R extends Node = ShaderNodeObject<Node>>(
     jsFunc: (args: T) => R,
-): ((args: ProxiedObject<T>) => R) & ShaderNodeFn<R>;
+): ShaderNodeFn<[ProxiedObject<T>], R>;
 
 /**
  * @deprecated tslFn() has been renamed to Fn()