mrdoob · sunag · Aug 27, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - fly controls - earth</title>
+		<title>three.js webgpu - fly controls - earth</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -40,7 +40,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass } from 'three/tsl';
+			import { pass, film } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { FlyControls } from 'three/addons/controls/FlyControls.js';
@@ -221,7 +221,7 @@
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();
 
-				postProcessing.outputNode = scenePassColor.film();
+				postProcessing.outputNode = film( scenePassColor );
 
 			}
 

diff --git a/examples/screenshots/webgpu_refraction.jpg b/examples/screenshots/webgpu_refraction.jpg
diff --git a/examples/webgpu_backdrop.html b/examples/webgpu_backdrop.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { float, vec3, color, viewportSharedTexture, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
+			import { float, vec3, color, viewportSharedTexture, hue, overlay, posterize, grayscale, saturation, viewportSafeUV, viewportUV, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -48,7 +48,7 @@
 
 				clock = new THREE.Clock();
 
-				//lights
+				// lights
 
 				const light = new THREE.SpotLight( 0xffffff, 1 );
 				light.power = 2000;
@@ -62,11 +62,7 @@
 					mixer = new THREE.AnimationMixer( object );
 
 					const material = object.children[ 0 ].children[ 0 ].material;
-
-					// output material effect ( better using hsv )
-					// ignore output.sRGBToLinear().linearTosRGB() for now
-
-					material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, output.add( .1 ).posterize( 4 ).mul( 2 ) );
+					material.outputNode = oscSine( timerLocal( .1 ) ).mix( output, posterize( output.add( .1 ), 4 ).mul( 2 ) );
 
 					const action = mixer.clipAction( gltf.animations[ 0 ] );
 					action.play();
@@ -106,16 +102,16 @@
 
 				}
 
-				addBackdropSphere( viewportSharedTexture().bgr.hue( oscSine().mul( Math.PI ) ) );
+				addBackdropSphere( hue( viewportSharedTexture().bgr, oscSine().mul( Math.PI ) ) );
 				addBackdropSphere( viewportSharedTexture().rgb.oneMinus() );
-				addBackdropSphere( viewportSharedTexture().rgb.saturation( 0 ) );
-				addBackdropSphere( viewportSharedTexture().rgb.saturation( 10 ), oscSine() );
-				addBackdropSphere( viewportSharedTexture().rgb.overlay( checker( uv().mul( 10 ) ) ) );
+				addBackdropSphere( grayscale( viewportSharedTexture().rgb ) );
+				addBackdropSphere( saturation( viewportSharedTexture().rgb, 10 ), oscSine() );
+				addBackdropSphere( overlay( viewportSharedTexture().rgb, checker( uv().mul( 10 ) ) ) );
 				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 40 ).floor().div( 40 ) ) ) );
 				addBackdropSphere( viewportSharedTexture( viewportSafeUV( viewportUV.mul( 80 ).floor().div( 80 ) ) ).add( color( 0x0033ff ) ) );
 				addBackdropSphere( vec3( 0, 0, viewportSharedTexture().b ) );
 
-				//renderer
+				// renderer
 
 				renderer = new THREE.WebGPURenderer( { antialias: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );

diff --git a/examples/webgpu_backdrop_area.html b/examples/webgpu_backdrop_area.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
+			import { color, linearDepth, viewportLinearDepth, viewportSharedTexture, textureBicubic, viewportMipTexture, viewportUV, checker, uv, modelScale } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -79,7 +79,7 @@
 				const depthDistance = viewportLinearDepth.distance( linearDepth() );
 
 				const depthAlphaNode = depthDistance.oneMinus().smoothstep( .90, 2 ).mul( 10 ).saturate();
-				const depthBlurred = viewportMipTexture().bicubic( depthDistance.smoothstep( 0, .6 ).mul( 40 * 5 ).clamp( 0, 5 ) );
+				const depthBlurred = textureBicubic( viewportMipTexture(), depthDistance.smoothstep( 0, .6 ).mul( 40 * 5 ).clamp( 0, 5 ) );
 
 				const blurredBlur = new THREE.MeshBasicNodeMaterial();
 				blurredBlur.backdropNode = depthBlurred.add( depthAlphaNode.mix( color( 0x0066ff ), 0 ) );
@@ -99,7 +99,7 @@
 				depthMaterial.side = THREE.DoubleSide;
 
 				const bicubicMaterial = new THREE.MeshBasicNodeMaterial();
-				bicubicMaterial.backdropNode = viewportMipTexture().bicubic( 5 ); // @TODO: Move to alpha value [ 0, 1 ]
+				bicubicMaterial.backdropNode = textureBicubic( viewportMipTexture(), 5 ); // @TODO: Move to alpha value [ 0, 1 ]
 				bicubicMaterial.backdropAlphaNode = checker( uv().mul( 3 ).mul( modelScale.xy ) );
 				bicubicMaterial.opacityNode = bicubicMaterial.backdropAlphaNode;
 				bicubicMaterial.transparent = true;

diff --git a/examples/webgpu_backdrop_water.html b/examples/webgpu_backdrop_water.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
+			import { color, vec2, pass, linearDepth, normalWorld, gaussianBlur, triplanarTexture, texture, objectPosition, viewportUV, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -223,7 +223,7 @@
 
 				const waterMask = objectPosition( camera ).y.greaterThan( 0 );
 
-				const scenePassColorBlurred = scenePassColor.gaussianBlur();
+				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.directionNode = waterMask.select( scenePassDepth, scenePass.getLinearDepthNode().mul( 5 ) );
 
 				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();

diff --git a/examples/webgpu_compute_particles.html b/examples/webgpu_compute_particles.html
@@ -37,7 +37,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, uniform, texture, instanceIndex, float, vec3, storage, If } from 'three/tsl';
+			import { Fn, uniform, texture, instanceIndex, float, hash, vec3, storage, If } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -90,9 +90,9 @@
 					const position = positionBuffer.element( instanceIndex );
 					const color = colorBuffer.element( instanceIndex );
 
-					const randX = instanceIndex.hash();
-					const randY = instanceIndex.add( 2 ).hash();
-					const randZ = instanceIndex.add( 3 ).hash();
+					const randX = hash( instanceIndex );
+					const randY = hash( instanceIndex.add( 2 ) );
+					const randZ = hash( instanceIndex.add( 3 ) );
 
 					position.x = randX.mul( 100 ).add( - 50 );
 					position.y = 0; // randY.mul( 10 );
@@ -192,7 +192,7 @@
 					const distArea = float( 6 ).sub( dist ).max( 0 );
 
 					const power = distArea.mul( .01 );
-					const relativePower = power.mul( instanceIndex.hash().mul( .5 ).add( .5 ) );
+					const relativePower = power.mul( hash( instanceIndex ).mul( .5 ).add( .5 ) );
 
 					velocity.assign( velocity.add( direction.mul( relativePower ) ) );
 

diff --git a/examples/webgpu_compute_particles_rain.html b/examples/webgpu_compute_particles_rain.html
@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, texture, uv, uint, positionWorld, billboarding, timerLocal, timerDelta, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';
+			import { Fn, texture, uv, uint, positionWorld, billboarding, timerLocal, hash, timerDelta, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -112,9 +112,9 @@
 					const velocity = velocityBuffer.element( instanceIndex );
 					const rippleTime = rippleTimeBuffer.element( instanceIndex );
 
-					const randX = instanceIndex.hash();
-					const randY = instanceIndex.add( randUint() ).hash();
-					const randZ = instanceIndex.add( randUint() ).hash();
+					const randX = hash( instanceIndex );
+					const randY = hash( instanceIndex.add( randUint() ) );
+					const randZ = hash( instanceIndex.add( randUint() ) );
 
 					position.x = randX.mul( 100 ).add( - 50 );
 					position.y = randY.mul( 25 );
@@ -166,8 +166,8 @@
 
 						// next drops will not fall in the same place
 
-						position.x = instanceIndex.add( timer ).hash().mul( 100 ).add( - 50 );
-						position.z = instanceIndex.add( timer.add( randUint() ) ).hash().mul( 100 ).add( - 50 );
+						position.x = hash( instanceIndex.add( timer ) ).mul( 100 ).add( - 50 );
+						position.z = hash( instanceIndex.add( timer.add( randUint() ) ) ).mul( 100 ).add( - 50 );
 
 					} );
 

diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html
@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, instanceIndex, storage, If } from 'three/tsl';
+			import { Fn, texture, vec3, pass, color, uint, viewportUV, positionWorld, positionLocal, timerLocal, vec2, hash, gaussianBlur, instanceIndex, storage, If } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -111,15 +111,15 @@
 					const scale = scaleBuffer.element( instanceIndex );
 					const particleData = dataBuffer.element( instanceIndex );
 
-					const randX = instanceIndex.hash();
-					const randY = instanceIndex.add( randUint() ).hash();
-					const randZ = instanceIndex.add( randUint() ).hash();
+					const randX = hash( instanceIndex );
+					const randY = hash( instanceIndex.add( randUint() ) );
+					const randZ = hash( instanceIndex.add( randUint() ) );
 
 					position.x = randX.mul( 100 ).add( - 50 );
 					position.y = randY.mul( 500 ).add( 3 );
 					position.z = randZ.mul( 100 ).add( - 50 );
 
-					scale.xyz = instanceIndex.add( Math.random() ).hash().mul( .8 ).add( .2 );
+					scale.xyz = hash( instanceIndex.add( Math.random() ) ).mul( .8 ).add( .2 );
 
 					staticPositionBuffer.element( instanceIndex ).assign( vec3( 1000, 10000, 1000 ) );
 
@@ -298,10 +298,10 @@
 				const vignet = viewportUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
 				const teapotTreePass = pass( teapotTree, camera ).getTextureNode();
-				const teapotTreePassBlurred = teapotTreePass.gaussianBlur( vec2( 1 ), 3 );
+				const teapotTreePassBlurred = gaussianBlur( teapotTreePass, vec2( 1 ), 3 );
 				teapotTreePassBlurred.resolution = new THREE.Vector2( .2, .2 );
 
-				const scenePassColorBlurred = scenePassColor.gaussianBlur();
+				const scenePassColorBlurred = gaussianBlur( scenePassColor );
 				scenePassColorBlurred.resolution = new THREE.Vector2( .5, .5 );
 				scenePassColorBlurred.directionNode = vec2( 1 );
 

diff --git a/examples/webgpu_cubemap_adjustments.html b/examples/webgpu_cubemap_adjustments.html
@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { uniform, mix, pmremTexture, reference, positionLocal, positionWorld, normalWorld, positionWorldDirection, reflectVector } from 'three/tsl';
+			import { uniform, mix, pmremTexture, reference, positionLocal, hue, saturation, positionWorld, normalWorld, positionWorldDirection, reflectVector } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -99,8 +99,8 @@
 					const proceduralEnv = mix( mixCubeMaps, normalWorld, proceduralNode );
 
 					const intensityFilter = proceduralEnv.mul( intensityNode );
-					const hueFilter = intensityFilter.hue( hueNode );
-					return hueFilter.saturation( saturationNode );
+					const hueFilter = hue( intensityFilter, hueNode );
+					return saturation( hueFilter, saturationNode );
 
 				};
 

diff --git a/examples/webgpu_loader_gltf_dispersion.html b/examples/webgpu_loader_gltf_dispersion.html
@@ -33,7 +33,7 @@
 
 			let camera, scene, renderer;
 
-			init().then( render );
+			init();
 
 			async function init() {
 

diff --git a/examples/webgpu_materials.html b/examples/webgpu_materials.html
@@ -25,7 +25,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { Fn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
+			import * as TSL from 'three/tsl';
+
+			import { Fn, wgslFn, positionLocal, scriptable, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportUV, js, string, global, Loop, cameraProjectionMatrix } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -239,9 +241,9 @@
 				// Scriptable
 
 				global.set( 'THREE', THREE );
-				global.set( 'TSL', THREE );
+				global.set( 'TSL', TSL );
 
-				const asyncNode = js( `
+				const asyncNode = scriptable( js( `
 
 					layout = {
 						outputType: 'node'
@@ -273,9 +275,9 @@
 
 					}
 
-				` ).scriptable();
+				` ) );
 
-				const scriptableNode = js( `
+				const scriptableNode = scriptable( js( `
 
 					layout = {
 						outputType: 'node',
@@ -325,7 +327,7 @@
 
 					output = { helloWorld };
 
-				` ).scriptable();
+				` ) );
 
 				scriptableNode.setParameter( 'source', texture( uvTexture ).xyz );
 				scriptableNode.setParameter( 'contrast', asyncNode );

diff --git a/examples/webgpu_mrt_mask.html b/examples/webgpu_mrt_mask.html
@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, viewportUV, mrt, output, pass, vec4 } from 'three/tsl';
+			import { color, viewportUV, mrt, output, gaussianBlur, pass, vec4 } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -130,7 +130,7 @@
 
 				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputColorTransform = false;
-				postProcessing.outputNode = colorPass.add( maskPass.gaussianBlur( 1, 10 ).mul( .3 ) ).renderOutput();
+				postProcessing.outputNode = colorPass.add( gaussianBlur( maskPass, 1, 10 ).mul( .3 ) ).renderOutput();
 
 				// controls
 

diff --git a/examples/webgpu_parallax_uv.html b/examples/webgpu_parallax_uv.html
@@ -27,7 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, parallaxUV, uv } from 'three/tsl';
+			import { texture, parallaxUV, overlay, uv } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -89,7 +89,7 @@
 				const parallaxUVOffset = parallaxUV( uv(), offsetUV );
 				const parallaxResult = texture( bottomTexture, parallaxUVOffset );
 
-				const iceNode = texture( topTexture ).overlay( parallaxResult );
+				const iceNode = overlay( texture( topTexture ), parallaxResult );
 
 				// material
 

diff --git a/examples/webgpu_particles.html b/examples/webgpu_particles.html
@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { range, texture, mix, uv, color, positionLocal, timerLocal } from 'three/tsl';
+			import { range, texture, mix, uv, color, rotateUV, positionLocal, timerLocal } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -65,7 +65,7 @@
 
 				const fakeLightEffect = positionLocal.y.oneMinus().max( 0.2 );
 
-				const textureNode = texture( map, uv().rotateUV( timer.mul( rotateRange ) ) );
+				const textureNode = texture( map, rotateUV( uv(), timer.mul( rotateRange ) ) );
 
 				const opacityNode = textureNode.a.mul( life.oneMinus() );
 

diff --git a/examples/webgpu_postprocessing.html b/examples/webgpu_postprocessing.html
@@ -20,7 +20,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass } from 'three/tsl';
+			import { pass, dotScreen, rgbShift } from 'three/tsl';
 
 			let camera, renderer, postProcessing;
 			let object;
@@ -73,10 +73,10 @@
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();
 
-				const dotScreenPass = scenePassColor.dotScreen();
+				const dotScreenPass = dotScreen( scenePassColor );
 				dotScreenPass.scale.value = 0.3;
 
-				const rgbShiftPass = dotScreenPass.rgbShift();
+				const rgbShiftPass = rgbShift( dotScreenPass );
 				rgbShiftPass.amount.value = 0.001;
 
 				postProcessing.outputNode = rgbShiftPass;

diff --git a/examples/webgpu_postprocessing_3dlut.html b/examples/webgpu_postprocessing_3dlut.html
@@ -29,7 +29,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, texture3D, uniform, renderOutput } from 'three/tsl';
+			import { pass, texture3D, uniform, lut3D, renderOutput } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
@@ -145,7 +145,7 @@
 				const outputPass = renderOutput( scenePass );
 
 				const lut = lutMap[ params.lut ];
-				lutPass = outputPass.lut3D( texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );
+				lutPass = lut3D( outputPass, texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );
 
 				postProcessing.outputNode = lutPass;