Examples: Improve `webgpu_animation_retargeting` (#29387)

* update

* update

examples/webgpu_animation_retargeting.html

@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, screenUV, hue, timerLocal, reflector } from 'three/tsl';
+			import { color, screenUV, hue, timerLocal, reflector, Fn, vec2, length, atan2, float, sin, cos, vec3, sub, mul, pow, dodge, normalWorld } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -57,9 +57,40 @@
 			const stats = new Stats();
 			document.body.appendChild( stats.dom );
 
+			export const lightSpeed = /*#__PURE__*/ Fn( ( [ suv_immutable ] ) => {
+
+				// forked from https://www.shadertoy.com/view/7ly3D1
+
+				const time = timerLocal( 1 );
+				const suv = vec2( suv_immutable );
+				const uv = vec2( length( suv ), atan2( suv.y, suv.x ) );
+				const offset = float( float( .1 ).mul( sin( uv.y.mul( 10. ).sub( time.mul( .6 ) ) ) ).mul( cos( uv.y.mul( 48. ).add( time.mul( .3 ) ) ) ).mul( cos( uv.y.mul( 3.7 ).add( time ) ) ) );
+				const rays = vec3( vec3( sin( uv.y.mul( 150. ).add( time ) ).mul( .5 ).add( .5 ) ).mul( vec3( sin( uv.y.mul( 80. ).sub( time.mul( 0.6 ) ) ).mul( .5 ).add( .5 ) ) ).mul( vec3( sin( uv.y.mul( 45. ).add( time.mul( 0.8 ) ) ).mul( .5 ).add( .5 ) ) ).mul( vec3( sub( 1., cos( uv.y.add( mul( 22., time ).sub( pow( uv.x.add( offset ), .3 ).mul( 60. ) ) ) ) ) ) ).mul( vec3( uv.x.mul( 2. ) ) ) );
+
+				return rays;
+
+			} ).setLayout( {
+				name: 'lightSpeed',
+				type: 'vec3',
+				inputs: [
+					{ name: 'suv', type: 'vec2' }
+				]
+			} );
+
 			// scene
+
 			const scene = new THREE.Scene();
-			scene.backgroundNode = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), timerLocal( .1 ) ), hue( color( 0x02274f ), timerLocal( .5 ) ) );
+
+			// background
+
+			const coloredVignette = screenUV.distance( .5 ).mix( hue( color( 0x0175ad ), timerLocal( .1 ) ), hue( color( 0x02274f ), timerLocal( .5 ) ) );
+			const lightSpeedEffect = lightSpeed( normalWorld ).clamp();
+			const lightSpeedSky = normalWorld.y.remapClamp( -.1, 1 ).mix( 0, lightSpeedEffect );
+			const composedBackground = dodge( coloredVignette, lightSpeedSky );
+
+			scene.backgroundNode = composedBackground;
+
+			//
 
 			const helpers = new THREE.Group();
 			helpers.visible = false;
@@ -73,19 +104,25 @@
 			scene.add( dirLight );
 
 			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, .25, 50 );
-			camera.position.set( - 2, 2, 4 );
+			camera.position.set( 0, 1, 4 );
 
 			// add models to scene
 			scene.add( sourceModel.scene );
 			scene.add( targetModel.scene );
 
 			// reposition models
-			sourceModel.scene.position.x -= 1;
-			targetModel.scene.position.x += 1;
+			sourceModel.scene.position.x -= .8;
+			targetModel.scene.position.x += .7;
+
+			targetModel.scene.position.z -= .1;
 
 			// reajust model
 			targetModel.scene.scale.setScalar( .01 );
 
+			// flip model
+			sourceModel.scene.rotation.y = Math.PI / 2;
+			targetModel.scene.rotation.y = - Math.PI / 2;
+
 			// retarget
 			const source = getSource( sourceModel );
 			const mixer = retargetModel( source, targetModel );