WebGPURenderer: Build - `three.webgpu.js` (#28650)

* webgpu build

* revision

* cleanup

* Restore USDZLoader

* update

* puppeteer: added `three.webgpu` build support

* update IESSpotLight

* move to src and revision

* cleanup

* fix test-circular-deps test

* fix lint

* revision

* cleanup lint

* update build

* update package

* update builds

* update - fixing conflicts

* cleanup

* WebGPUBackend: add srcRegion to copyTextureToTexture()

* fix examples

* fix warnOnce

* update path

* update build

* Update package.json

* importmap: added alias

* move materials to THREE

* update import to three/tsl

examples/jsm/lines/webgpu/Line2.js

@@ -0,0 +1,20 @@
+import { LineSegments2 } from './LineSegments2.js';
+import { LineGeometry } from '../LineGeometry.js';
+
+import { Line2NodeMaterial } from 'three';
+
+class Line2 extends LineSegments2 {
+
+	constructor( geometry = new LineGeometry(), material = new Line2NodeMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+		super( geometry, material );
+
+		this.isLine2 = true;
+
+		this.type = 'Line2';
+
+	}
+
+}
+
+export { Line2 };

examples/jsm/lines/webgpu/LineSegments2.js

@@ -0,0 +1,376 @@
+import {
+	Box3,
+	InstancedInterleavedBuffer,
+	InterleavedBufferAttribute,
+	Line3,
+	MathUtils,
+	Matrix4,
+	Mesh,
+	Sphere,
+	Vector3,
+	Vector4,
+	Line2NodeMaterial
+} from 'three';
+import { LineSegmentsGeometry } from '../../lines/LineSegmentsGeometry.js';
+
+const _viewport = new Vector4();
+
+const _start = new Vector3();
+const _end = new Vector3();
+
+const _start4 = new Vector4();
+const _end4 = new Vector4();
+
+const _ssOrigin = new Vector4();
+const _ssOrigin3 = new Vector3();
+const _mvMatrix = new Matrix4();
+const _line = new Line3();
+const _closestPoint = new Vector3();
+
+const _box = new Box3();
+const _sphere = new Sphere();
+const _clipToWorldVector = new Vector4();
+
+let _ray, _lineWidth;
+
+// Returns the margin required to expand by in world space given the distance from the camera,
+// line width, resolution, and camera projection
+function getWorldSpaceHalfWidth( camera, distance, resolution ) {
+
+	// transform into clip space, adjust the x and y values by the pixel width offset, then
+	// transform back into world space to get world offset. Note clip space is [-1, 1] so full
+	// width does not need to be halved.
+	_clipToWorldVector.set( 0, 0, - distance, 1.0 ).applyMatrix4( camera.projectionMatrix );
+	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+	_clipToWorldVector.x = _lineWidth / resolution.width;
+	_clipToWorldVector.y = _lineWidth / resolution.height;
+	_clipToWorldVector.applyMatrix4( camera.projectionMatrixInverse );
+	_clipToWorldVector.multiplyScalar( 1.0 / _clipToWorldVector.w );
+
+	return Math.abs( Math.max( _clipToWorldVector.x, _clipToWorldVector.y ) );
+
+}
+
+function raycastWorldUnits( lineSegments, intersects ) {
+
+	const matrixWorld = lineSegments.matrixWorld;
+	const geometry = lineSegments.geometry;
+	const instanceStart = geometry.attributes.instanceStart;
+	const instanceEnd = geometry.attributes.instanceEnd;
+	const segmentCount = Math.min( geometry.instanceCount, instanceStart.count );
+
+	for ( let i = 0, l = segmentCount; i < l; i ++ ) {
+
+		_line.start.fromBufferAttribute( instanceStart, i );
+		_line.end.fromBufferAttribute( instanceEnd, i );
+
+		_line.applyMatrix4( matrixWorld );
+
+		const pointOnLine = new Vector3();
+		const point = new Vector3();
+
+		_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+		const isInside = point.distanceTo( pointOnLine ) < _lineWidth * 0.5;
+
+		if ( isInside ) {
+
+			intersects.push( {
+				point,
+				pointOnLine,
+				distance: _ray.origin.distanceTo( point ),
+				object: lineSegments,
+				face: null,
+				faceIndex: i,
+				uv: null,
+				uv1: null,
+			} );
+
+		}
+
+	}
+
+}
+
+function raycastScreenSpace( lineSegments, camera, intersects ) {
+
+	const projectionMatrix = camera.projectionMatrix;
+	const material = lineSegments.material;
+	const resolution = material.resolution;
+	const matrixWorld = lineSegments.matrixWorld;
+
+	const geometry = lineSegments.geometry;
+	const instanceStart = geometry.attributes.instanceStart;
+	const instanceEnd = geometry.attributes.instanceEnd;
+	const segmentCount = Math.min( geometry.instanceCount, instanceStart.count );
+
+	const near = - camera.near;
+
+	//
+
+	// pick a point 1 unit out along the ray to avoid the ray origin
+	// sitting at the camera origin which will cause "w" to be 0 when
+	// applying the projection matrix.
+	_ray.at( 1, _ssOrigin );
+
+	// ndc space [ - 1.0, 1.0 ]
+	_ssOrigin.w = 1;
+	_ssOrigin.applyMatrix4( camera.matrixWorldInverse );
+	_ssOrigin.applyMatrix4( projectionMatrix );
+	_ssOrigin.multiplyScalar( 1 / _ssOrigin.w );
+
+	// screen space
+	_ssOrigin.x *= resolution.x / 2;
+	_ssOrigin.y *= resolution.y / 2;
+	_ssOrigin.z = 0;
+
+	_ssOrigin3.copy( _ssOrigin );
+
+	_mvMatrix.multiplyMatrices( camera.matrixWorldInverse, matrixWorld );
+
+	for ( let i = 0, l = segmentCount; i < l; i ++ ) {
+
+		_start4.fromBufferAttribute( instanceStart, i );
+		_end4.fromBufferAttribute( instanceEnd, i );
+
+		_start4.w = 1;
+		_end4.w = 1;
+
+		// camera space
+		_start4.applyMatrix4( _mvMatrix );
+		_end4.applyMatrix4( _mvMatrix );
+
+		// skip the segment if it's entirely behind the camera
+		const isBehindCameraNear = _start4.z > near && _end4.z > near;
+		if ( isBehindCameraNear ) {
+
+			continue;
+
+		}
+
+		// trim the segment if it extends behind camera near
+		if ( _start4.z > near ) {
+
+			const deltaDist = _start4.z - _end4.z;
+			const t = ( _start4.z - near ) / deltaDist;
+			_start4.lerp( _end4, t );
+
+		} else if ( _end4.z > near ) {
+
+			const deltaDist = _end4.z - _start4.z;
+			const t = ( _end4.z - near ) / deltaDist;
+			_end4.lerp( _start4, t );
+
+		}
+
+		// clip space
+		_start4.applyMatrix4( projectionMatrix );
+		_end4.applyMatrix4( projectionMatrix );
+
+		// ndc space [ - 1.0, 1.0 ]
+		_start4.multiplyScalar( 1 / _start4.w );
+		_end4.multiplyScalar( 1 / _end4.w );
+
+		// screen space
+		_start4.x *= resolution.x / 2;
+		_start4.y *= resolution.y / 2;
+
+		_end4.x *= resolution.x / 2;
+		_end4.y *= resolution.y / 2;
+
+		// create 2d segment
+		_line.start.copy( _start4 );
+		_line.start.z = 0;
+
+		_line.end.copy( _end4 );
+		_line.end.z = 0;
+
+		// get closest point on ray to segment
+		const param = _line.closestPointToPointParameter( _ssOrigin3, true );
+		_line.at( param, _closestPoint );
+
+		// check if the intersection point is within clip space
+		const zPos = MathUtils.lerp( _start4.z, _end4.z, param );
+		const isInClipSpace = zPos >= - 1 && zPos <= 1;
+
+		const isInside = _ssOrigin3.distanceTo( _closestPoint ) < _lineWidth * 0.5;
+
+		if ( isInClipSpace && isInside ) {
+
+			_line.start.fromBufferAttribute( instanceStart, i );
+			_line.end.fromBufferAttribute( instanceEnd, i );
+
+			_line.start.applyMatrix4( matrixWorld );
+			_line.end.applyMatrix4( matrixWorld );
+
+			const pointOnLine = new Vector3();
+			const point = new Vector3();
+
+			_ray.distanceSqToSegment( _line.start, _line.end, point, pointOnLine );
+
+			intersects.push( {
+				point: point,
+				pointOnLine: pointOnLine,
+				distance: _ray.origin.distanceTo( point ),
+				object: lineSegments,
+				face: null,
+				faceIndex: i,
+				uv: null,
+				uv1: null,
+			} );
+
+		}
+
+	}
+
+}
+
+class LineSegments2 extends Mesh {
+
+	constructor( geometry = new LineSegmentsGeometry(), material = new Line2NodeMaterial( { color: Math.random() * 0xffffff } ) ) {
+
+		super( geometry, material );
+
+		this.isLineSegments2 = true;
+
+		this.type = 'LineSegments2';
+
+	}
+
+	// for backwards-compatibility, but could be a method of LineSegmentsGeometry...
+
+	computeLineDistances() {
+
+		const geometry = this.geometry;
+
+		const instanceStart = geometry.attributes.instanceStart;
+		const instanceEnd = geometry.attributes.instanceEnd;
+		const lineDistances = new Float32Array( 2 * instanceStart.count );
+
+		for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
+
+			_start.fromBufferAttribute( instanceStart, i );
+			_end.fromBufferAttribute( instanceEnd, i );
+
+			lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
+			lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
+
+		}
+
+		const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
+
+		geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
+		geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
+
+		return this;
+
+	}
+
+	raycast( raycaster, intersects ) {
+
+		const worldUnits = this.material.worldUnits;
+		const camera = raycaster.camera;
+
+		if ( camera === null && ! worldUnits ) {
+
+			console.error( 'LineSegments2: "Raycaster.camera" needs to be set in order to raycast against LineSegments2 while worldUnits is set to false.' );
+
+		}
+
+		const threshold = ( raycaster.params.Line2 !== undefined ) ? raycaster.params.Line2.threshold || 0 : 0;
+
+		_ray = raycaster.ray;
+
+		const matrixWorld = this.matrixWorld;
+		const geometry = this.geometry;
+		const material = this.material;
+
+		_lineWidth = material.linewidth + threshold;
+
+		// check if we intersect the sphere bounds
+		if ( geometry.boundingSphere === null ) {
+
+			geometry.computeBoundingSphere();
+
+		}
+
+		_sphere.copy( geometry.boundingSphere ).applyMatrix4( matrixWorld );
+
+		// increase the sphere bounds by the worst case line screen space width
+		let sphereMargin;
+		if ( worldUnits ) {
+
+			sphereMargin = _lineWidth * 0.5;
+
+		} else {
+
+			const distanceToSphere = Math.max( camera.near, _sphere.distanceToPoint( _ray.origin ) );
+			sphereMargin = getWorldSpaceHalfWidth( camera, distanceToSphere, material.resolution );
+
+		}
+
+		_sphere.radius += sphereMargin;
+
+		if ( _ray.intersectsSphere( _sphere ) === false ) {
+
+			return;
+
+		}
+
+		// check if we intersect the box bounds
+		if ( geometry.boundingBox === null ) {
+
+			geometry.computeBoundingBox();
+
+		}
+
+		_box.copy( geometry.boundingBox ).applyMatrix4( matrixWorld );
+
+		// increase the box bounds by the worst case line width
+		let boxMargin;
+		if ( worldUnits ) {
+
+			boxMargin = _lineWidth * 0.5;
+
+		} else {
+
+			const distanceToBox = Math.max( camera.near, _box.distanceToPoint( _ray.origin ) );
+			boxMargin = getWorldSpaceHalfWidth( camera, distanceToBox, material.resolution );
+
+		}
+
+		_box.expandByScalar( boxMargin );
+
+		if ( _ray.intersectsBox( _box ) === false ) {
+
+			return;
+
+		}
+
+		if ( worldUnits ) {
+
+			raycastWorldUnits( this, intersects );
+
+		} else {
+
+			raycastScreenSpace( this, camera, intersects );
+
+		}
+
+	}
+
+	onBeforeRender( renderer ) {
+
+		const uniforms = this.material.uniforms;
+
+		if ( uniforms && uniforms.resolution ) {
+
+			renderer.getViewport( _viewport );
+			this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
+
+		}
+
+	}
+
+}
+
+export { LineSegments2 };

examples/jsm/loaders/MaterialXLoader.js

@@ -1,12 +1,5 @@
 import {
-	FileLoader,
-	Loader,
-	TextureLoader,
-	RepeatWrapping
-} from 'three';
-
-import {
-	MeshBasicNodeMaterial, MeshPhysicalNodeMaterial,
+	FileLoader, Loader, TextureLoader, MeshBasicNodeMaterial, MeshPhysicalNodeMaterial, RepeatWrapping,
 	float, bool, int, vec2, vec3, vec4, color, texture,
 	positionLocal, positionWorld, uv, vertexColor,
 	normalLocal, normalWorld, tangentLocal, tangentWorld,
@@ -20,7 +13,7 @@ import {
 	mx_safepower, mx_contrast,
 	mx_srgb_texture_to_lin_rec709,
 	saturation
-} from '../nodes/Nodes.js';
+} from 'three';
 
 const colorSpaceLib = {
 	mx_srgb_texture_to_lin_rec709

examples/jsm/objects/InstancedPoints.js

@@ -1,8 +1,8 @@
 import {
-	Mesh
+	Mesh,
+	InstancedPointsNodeMaterial
 } from 'three';
 import InstancedPointsGeometry from '../geometries/InstancedPointsGeometry.js';
-import InstancedPointsNodeMaterial from '../nodes/materials/InstancedPointsNodeMaterial.js';
 
 class InstancedPoints extends Mesh {
 

examples/jsm/transpiler/TSLEncoder.js

@@ -1,6 +1,6 @@
-import { REVISION } from 'three';
+import * as THREE from 'three';
+
 import { VariableDeclaration, Accessor } from './AST.js';
-import * as Nodes from '../nodes/Nodes.js';
 
 const opLib = {
 	'=': 'assign',
@@ -68,7 +68,7 @@ class TSLEncoder {
 
 		name = name.split( '.' )[ 0 ];
 
-		if ( Nodes[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
+		if ( THREE[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
 
 			this.imports.add( name );
 
@@ -685,7 +685,7 @@ ${ this.tab }} )`;
 
 		const imports = [ ...this.imports ];
 
-		let header = '// Three.js Transpiler r' + REVISION + '\n\n';
+		let header = '// Three.js Transpiler r' + THREE.REVISION + '\n\n';
 		let footer = '';
 
 		if ( this.iife ) {

examples/webgpu_backdrop.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,15 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { float, vec3, color, toneMapping, viewportSharedTexture, viewportTopLeft, checker, uv, timerLocal, oscSine, output, MeshStandardNodeMaterial } from 'three/nodes';
+			import { float, vec3, color, toneMapping, viewportSharedTexture, viewportTopLeft, checker, uv, timerLocal, oscSine, output } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
@@ -44,14 +39,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.set( 1, 2, 3 );
 
@@ -101,7 +88,7 @@
 					const id = portals.children.length;
 					const rotation = THREE.MathUtils.degToRad( id * 45 );
 
-					const material = new MeshStandardNodeMaterial( { color: 0x0066ff } );
+					const material = new THREE.MeshStandardNodeMaterial( { color: 0x0066ff } );
 					material.roughnessNode = float( .2 );
 					material.metalnessNode = float( 0 );
 					material.backdropNode = backdropNode;
@@ -130,7 +117,7 @@
 
 				//renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_backdrop_area.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,17 +25,12 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, linearDepth, toneMapping, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportTopLeft, checker, uv, modelScale, MeshBasicNodeMaterial } from 'three/nodes';
+			import { color, linearDepth, toneMapping, viewportLinearDepth, viewportSharedTexture, viewportMipTexture, viewportTopLeft, checker, uv, modelScale } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
@@ -45,14 +40,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 25 );
 				camera.position.set( 3, 2, 3 );
 
@@ -87,31 +74,31 @@
 				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 blurredBlur = new MeshBasicNodeMaterial();
+				const blurredBlur = new THREE.MeshBasicNodeMaterial();
 				blurredBlur.backdropNode = depthBlurred.add( depthAlphaNode.mix( color( 0x0066ff ), 0 ) );
 				blurredBlur.transparent = true;
 				blurredBlur.side = THREE.DoubleSide;
 
-				const volumeMaterial = new MeshBasicNodeMaterial();
+				const volumeMaterial = new THREE.MeshBasicNodeMaterial();
 				volumeMaterial.colorNode = color( 0x0066ff );
 				volumeMaterial.backdropNode = viewportSharedTexture();
 				volumeMaterial.backdropAlphaNode = depthAlphaNode;
 				volumeMaterial.transparent = true;
 				volumeMaterial.side = THREE.DoubleSide;
 
-				const depthMaterial = new MeshBasicNodeMaterial();
+				const depthMaterial = new THREE.MeshBasicNodeMaterial();
 				depthMaterial.backdropNode = depthAlphaNode;
 				depthMaterial.transparent = true;
 				depthMaterial.side = THREE.DoubleSide;
 
-				const bicubicMaterial = new MeshBasicNodeMaterial();
+				const bicubicMaterial = new THREE.MeshBasicNodeMaterial();
 				bicubicMaterial.backdropNode = viewportMipTexture().bicubic( 5 ); // @TODO: Move to alpha value [ 0, 1 ]
 				bicubicMaterial.backdropAlphaNode = checker( uv().mul( 3 ).mul( modelScale.xy ) );
 				bicubicMaterial.opacityNode = bicubicMaterial.backdropAlphaNode;
 				bicubicMaterial.transparent = true;
 				bicubicMaterial.side = THREE.DoubleSide;
 
-				const pixelMaterial = new MeshBasicNodeMaterial();
+				const pixelMaterial = new THREE.MeshBasicNodeMaterial();
 				pixelMaterial.backdropNode = viewportSharedTexture( viewportTopLeft.mul( 100 ).floor().div( 100 ) );
 				pixelMaterial.transparent = true;
 
@@ -121,13 +108,13 @@
 				box.position.set( 0, 1, 0 );
 				scene.add( box );
 
-				const floor = new THREE.Mesh( new THREE.BoxGeometry( 1.99, .01, 1.99 ), new MeshBasicNodeMaterial( { color: 0x333333 } ) );
+				const floor = new THREE.Mesh( new THREE.BoxGeometry( 1.99, .01, 1.99 ), new THREE.MeshBasicNodeMaterial( { color: 0x333333 } ) );
 				floor.position.set( 0, 0, 0 );
 				scene.add( floor );
 
 				// renderer
 
-				renderer = new WebGPURenderer( /*{ antialias: true }*/ );
+				renderer = new THREE.WebGPURenderer( /*{ antialias: true }*/ );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_backdrop_water.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,16 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportTopLeft, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal, MeshStandardNodeMaterial, MeshBasicNodeMaterial } from 'three/nodes';
+			import { color, vec2, pass, linearDepth, normalWorld, triplanarTexture, texture, objectPosition, viewportTopLeft, viewportLinearDepth, viewportDepthTexture, viewportSharedTexture, mx_worley_noise_float, positionWorld, timerLocal } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -52,14 +46,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
 				camera.position.set( 3, 2, 4 );
 
@@ -118,7 +104,7 @@
 				const iceColorNode = triplanarTexture( texture( iceDiffuse ) ).add( color( 0x0066ff ) ).mul( .8 );
 
 				const geometry = new THREE.IcosahedronGeometry( 1, 3 );
-				const material = new MeshStandardNodeMaterial( { colorNode: iceColorNode } );
+				const material = new THREE.MeshStandardNodeMaterial( { colorNode: iceColorNode } );
 
 				const count = 100;
 				const scale = 3.5;
@@ -173,7 +159,7 @@
 
 				const viewportTexture = viewportSharedTexture( finalUV );
 
-				const waterMaterial = new MeshBasicNodeMaterial();
+				const waterMaterial = new THREE.MeshBasicNodeMaterial();
 				waterMaterial.colorNode = waterColor;
 				waterMaterial.backdropNode = depthEffect.mix( viewportSharedTexture(), viewportTexture.mul( depthRefraction.mix( 1, waterColor ) ) );
 				waterMaterial.backdropAlphaNode = depthRefraction.oneMinus();
@@ -185,7 +171,7 @@
 
 				// floor
 
-				floor = new THREE.Mesh( new THREE.CylinderGeometry( 1.1, 1.1, 10 ), new MeshStandardNodeMaterial( { colorNode: iceColorNode } ) );
+				floor = new THREE.Mesh( new THREE.CylinderGeometry( 1.1, 1.1, 10 ), new THREE.MeshStandardNodeMaterial( { colorNode: iceColorNode } ) );
 				floor.position.set( 0, - 5, 0 );
 				scene.add( floor );
 
@@ -203,7 +189,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( /*{ antialias: true }*/ );
+				renderer = new THREE.WebGPURenderer( /*{ antialias: true }*/ );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -242,7 +228,7 @@
 
 				const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = waterMask.cond( scenePassColorBlurred, scenePassColorBlurred.mul( color( 0x74ccf4 ) ).mul( vignet ) );
 
 				//

examples/webgpu_camera_logarithmicdepthbuffer.html

@@ -65,7 +65,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -78,11 +79,6 @@
 			import { FontLoader } from 'three/addons/loaders/FontLoader.js';
 			import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			// 1 micrometer to 100 billion light years in one scene, with 1 unit = 1 meter?  preposterous!  and yet...
@@ -122,14 +118,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				container = document.getElementById( 'container' );
 
 				const loader = new FontLoader();
@@ -161,7 +149,7 @@
 				const camera = new THREE.PerspectiveCamera( 50, screensplit * SCREEN_WIDTH / SCREEN_HEIGHT, NEAR, FAR );
 				scene.add( camera );
 
-				const renderer = new WebGPURenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
+				const renderer = new THREE.WebGPURenderer( { antialias: true, logarithmicDepthBuffer: logDepthBuf } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( SCREEN_WIDTH / 2, SCREEN_HEIGHT );
 				renderer.domElement.style.position = 'relative';

examples/webgpu_clearcoat.html

@@ -14,7 +14,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -24,8 +25,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -174,7 +173,7 @@
 
 				particleLight.add( new THREE.PointLight( 0xffffff, 30 ) );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_clipping.html

@@ -13,9 +13,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -23,12 +23,6 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshPhongNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -42,14 +36,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 0.25, 16 );
 
 				camera.position.set( 0, 1.3, 3 );
@@ -91,12 +77,12 @@
 				// ***** Clipping planes: *****
 
 				const localPlane = new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.8 );
-				const localPlane2 = new THREE.Plane( new THREE.Vector3( 0, 0, -1 ), 0.1 );
+				const localPlane2 = new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0.1 );
 				const globalPlane = new THREE.Plane( new THREE.Vector3( - 1, 0, 0 ), 0.1 );
 
 				// Geometry
 
-				const material = new MeshPhongNodeMaterial( {
+				const material = new THREE.MeshPhongNodeMaterial( {
 					color: 0x80ee10,
 					shininess: 0,
 					side: THREE.DoubleSide,
@@ -117,7 +103,7 @@
 
 				const ground = new THREE.Mesh(
 					new THREE.PlaneGeometry( 9, 9, 1, 1 ),
-					new MeshPhongNodeMaterial( { color: 0xa0adaf, shininess: 150 } )
+					new THREE.MeshPhongNodeMaterial( { color: 0xa0adaf, shininess: 150 } )
 				);
 
 				ground.rotation.x = - Math.PI / 2; // rotates X/Y to X/Z
@@ -131,7 +117,7 @@
 
 				// Renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.shadowMap.enabled = true;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_compute_audio.html

@@ -19,9 +19,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,13 +29,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, uniform, storage, instanceIndex, float, texture, viewportTopLeft, color } from 'three/nodes';
+			import { tslFn, uniform, storage, storageObject, instanceIndex, float, texture, viewportTopLeft, color } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
-
 			let camera, scene, renderer;
 			let computeNode;
 			let waveBuffer, sampleRate;
@@ -81,16 +78,6 @@
 
 			async function init() {
 
-				// if ( WebGPU.isAvailable() === false ) {
-
-				// 	document.body.appendChild( WebGPU.getErrorMessage() );
-
-				// 	throw new Error( 'No WebGPU support' );
-
-				// }
-
-			
-
 				// audio buffer
 
 				const soundBuffer = await fetch( 'sounds/webgpu-audio-processing.mp3' ).then( res => res.arrayBuffer() );
@@ -108,13 +95,13 @@
 
 				// create webgpu buffers
 
-				waveGPUBuffer = new StorageInstancedBufferAttribute( waveBuffer, 1 );
+				waveGPUBuffer = new THREE.StorageInstancedBufferAttribute( waveBuffer, 1 );
 
 				const waveStorageNode = storage( waveGPUBuffer, 'float', waveBuffer.length );
 
 				// read-only buffer
 
-				const waveNode = storage( new StorageInstancedBufferAttribute( waveBuffer, 1 ), 'float', waveBuffer.length ).toReadOnly();
+				const waveNode = storageObject( new THREE.StorageInstancedBufferAttribute( waveBuffer, 1 ), 'float', waveBuffer.length ).toReadOnly();
 
 				// params
 
@@ -194,7 +181,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_compute_geometry.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,16 +25,12 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { vec3, cos, sin, mat3, storage, tslFn, instanceIndex, timerLocal } from 'three/nodes';
+			import { vec3, cos, sin, mat3, storage, tslFn, instanceIndex, timerLocal } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import StorageBufferAttribute from 'three/addons/renderers/common/StorageBufferAttribute.js';
-
 			let camera, scene, renderer;
 			let computeUpdate;
 
@@ -62,8 +58,8 @@
 
 					// replace geometry attributes for storage buffer attributes
 
-					const positionStorageBufferAttribute = new StorageBufferAttribute( positionBaseAttribute.count, 4 );
-					const normalStorageBufferAttribute = new StorageBufferAttribute( normalBaseAttribute.count, 4 );
+					const positionStorageBufferAttribute = new THREE.StorageBufferAttribute( positionBaseAttribute.count, 4 );
+					const normalStorageBufferAttribute = new THREE.StorageBufferAttribute( normalBaseAttribute.count, 4 );
 
 					mesh.geometry.setAttribute( 'position', positionStorageBufferAttribute );
 					mesh.geometry.setAttribute( 'normal', normalStorageBufferAttribute );
@@ -111,7 +107,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_compute_particles.html

@@ -27,9 +27,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -37,12 +37,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, uniform, texture, instanceIndex, float, vec3, storage, SpriteNodeMaterial, If } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
+			import { tslFn, uniform, texture, instanceIndex, float, vec3, storage, If } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -68,14 +63,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const { innerWidth, innerHeight } = window;
 
 				camera = new THREE.PerspectiveCamera( 50, innerWidth / innerHeight, .1, 1000 );
@@ -90,7 +77,7 @@
 
 				//
 
-				const createBuffer = () => storage( new StorageInstancedBufferAttribute( particleCount, 3 ), 'vec3', particleCount );
+				const createBuffer = () => storage( new THREE.StorageInstancedBufferAttribute( particleCount, 3 ), 'vec3', particleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();
@@ -151,7 +138,7 @@
 
 				// create particles
 
-				const particleMaterial = new SpriteNodeMaterial();
+				const particleMaterial = new THREE.SpriteNodeMaterial();
 				particleMaterial.colorNode = textureNode.mul( colorBuffer.element( instanceIndex ) );
 				particleMaterial.positionNode = positionBuffer.toAttribute();
 				particleMaterial.scaleNode = size;
@@ -180,7 +167,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true, trackTimestamp: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, trackTimestamp: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_compute_particles_rain.html

@@ -14,9 +14,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,14 +24,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, texture, uv, uint, positionWorld, modelWorldMatrix, cameraViewMatrix, timerLocal, timerDelta, cameraProjectionMatrix, vec2, instanceIndex, positionGeometry, storage, MeshBasicNodeMaterial, If } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
+			import { tslFn, texture, uv, uint, positionWorld, modelWorldMatrix, cameraViewMatrix, timerLocal, timerDelta, cameraProjectionMatrix, vec2, instanceIndex, positionGeometry, storage, If } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
@@ -54,14 +50,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const { innerWidth, innerHeight } = window;
 
 				camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, .1, 110 );
@@ -100,12 +88,12 @@
 				collisionPosRT.texture.magFilter = THREE.NearestFilter;
 				collisionPosRT.texture.minFilter = THREE.NearestFilter;
 
-				collisionPosMaterial = new MeshBasicNodeMaterial();
+				collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
 				collisionPosMaterial.colorNode = positionWorld;
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( new StorageInstancedBufferAttribute( maxParticleCount, 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new THREE.StorageInstancedBufferAttribute( maxParticleCount, 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();
@@ -224,7 +212,7 @@
 
 				} );
 
-				const rainMaterial = new MeshBasicNodeMaterial();
+				const rainMaterial = new THREE.MeshBasicNodeMaterial();
 				rainMaterial.colorNode = uv().distance( vec2( .5, 0 ) ).oneMinus().mul( 3 ).exp().mul( .1 );
 				rainMaterial.vertexNode = billboarding();
 				rainMaterial.opacity = .2;
@@ -251,7 +239,7 @@
 
 				} );
 
-				const rippleMaterial = new MeshBasicNodeMaterial();
+				const rippleMaterial = new THREE.MeshBasicNodeMaterial();
 				rippleMaterial.colorNode = rippleEffect();
 				rippleMaterial.positionNode = positionGeometry.add( ripplePositionBuffer.toAttribute() );
 				rippleMaterial.opacityNode = rippleTime.mul( .3 ).oneMinus().max( 0 ).mul( .5 );
@@ -319,7 +307,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_compute_particles_snow.html

@@ -14,9 +14,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js",
 					"stats-gl": "https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"
 				}
 			}
@@ -25,17 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, texture, vec3, pass, color, uint, viewportTopLeft, positionWorld, positionLocal, timerLocal, vec2, MeshStandardNodeMaterial, instanceIndex, storage, MeshBasicNodeMaterial, If } from 'three/nodes';
+			import { tslFn, texture, vec3, pass, color, uint, viewportTopLeft, positionWorld, positionLocal, timerLocal, vec2, instanceIndex, storage, If } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
-
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import Stats from 'stats-gl';
@@ -53,14 +46,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const { innerWidth, innerHeight } = window;
 
 				camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, .1, 100 );
@@ -100,14 +85,14 @@
 				collisionPosRT.texture.magFilter = THREE.NearestFilter;
 				collisionPosRT.texture.minFilter = THREE.NearestFilter;
 
-				collisionPosMaterial = new MeshBasicNodeMaterial();
+				collisionPosMaterial = new THREE.MeshBasicNodeMaterial();
 				collisionPosMaterial.fog = false;
 				collisionPosMaterial.toneMapped = false;
 				collisionPosMaterial.colorNode = positionWorld.y;
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( new StorageInstancedBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new THREE.StorageInstancedBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const scaleBuffer = createBuffer();
@@ -191,7 +176,7 @@
 					const posBuffer = staticParticles ? staticPositionBuffer : positionBuffer;
 					const layer = staticParticles ? 1 : 2;
 
-					const staticMaterial = new MeshStandardNodeMaterial( {
+					const staticMaterial = new THREE.MeshStandardNodeMaterial( {
 						color: 0xeeeeee,
 						roughness: .9,
 						metalness: 0
@@ -235,7 +220,7 @@
 
 				function tree( count = 8 ) {
 
-					const coneMaterial = new MeshStandardNodeMaterial( {
+					const coneMaterial = new THREE.MeshStandardNodeMaterial( {
 						color: 0x0d492c,
 						roughness: .6,
 						metalness: 0
@@ -265,7 +250,7 @@
 
 				}
 
-				const teapotTree = new THREE.Mesh( new TeapotGeometry( .5, 18 ), new MeshBasicNodeMaterial( {
+				const teapotTree = new THREE.Mesh( new TeapotGeometry( .5, 18 ), new THREE.MeshBasicNodeMaterial( {
 					color: 0xfcfb9e
 				} ) );
 
@@ -280,7 +265,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -327,7 +312,7 @@
 				totalPass = totalPass.mul( vignet );
 				totalPass = totalPass.add( teapotTreePass.mul( 10 ).add( teapotTreePassBlurred ) );
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = totalPass;
 
 				//

examples/webgpu_compute_points.html

@@ -14,9 +14,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,16 +24,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, uniform, storage, attribute, float, vec2, vec3, color, instanceIndex, PointsNodeMaterial } from 'three/nodes';
+			import { tslFn, uniform, storage, attribute, float, vec2, vec3, color, instanceIndex } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
-
 			let camera, scene, renderer;
 			let computeNode;
 
@@ -44,14 +38,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.OrthographicCamera( - 1.0, 1.0, 1.0, - 1.0, 0, 1 );
 				camera.position.z = 1;
 
@@ -64,8 +50,8 @@
 
 				// create buffers
 
-				const particleBuffer = new StorageInstancedBufferAttribute( particleNum, particleSize );
-				const velocityBuffer = new StorageInstancedBufferAttribute( particleNum, particleSize );
+				const particleBuffer = new THREE.StorageInstancedBufferAttribute( particleNum, particleSize );
+				const velocityBuffer = new THREE.StorageInstancedBufferAttribute( particleNum, particleSize );
 
 				const particleBufferNode = storage( particleBuffer, 'vec2', particleNum );
 				const velocityBufferNode = storage( velocityBuffer, 'vec2', particleNum );
@@ -128,7 +114,7 @@
 				pointsGeometry.setAttribute( 'particle', particleBuffer ); // dummy the position points as instances
 				pointsGeometry.drawRange.count = 1; // force render points as instances ( not triangle )
 
-				const pointsMaterial = new PointsNodeMaterial();
+				const pointsMaterial = new THREE.PointsNodeMaterial();
 				pointsMaterial.colorNode = particleNode.add( color( 0xFFFFFF ) );
 				pointsMaterial.positionNode = particleNode;
 
@@ -136,7 +122,7 @@
 				mesh.count = particleNum;
 				scene.add( mesh );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_compute_texture.html

@@ -14,9 +14,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,11 +24,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, textureStore, tslFn, instanceIndex, float, uvec2, vec4, MeshBasicNodeMaterial } from 'three/nodes';
+			import { texture, textureStore, tslFn, instanceIndex, float, uvec2, vec4 } from 'three/tsl';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageTexture from 'three/addons/renderers/common/StorageTexture.js';
 
 			let camera, scene, renderer;
 
@@ -55,7 +53,7 @@
 
 				const width = 512, height = 512;
 
-				const storageTexture = new StorageTexture( width, height );
+				const storageTexture = new THREE.StorageTexture( width, height );
 				//storageTexture.minFilter = THREE.LinearMipMapLinearFilter;
 
 				// create function
@@ -89,13 +87,13 @@
 
 				const computeNode = computeTexture( { storageTexture } ).compute( width * height );
 
-				const material = new MeshBasicNodeMaterial( { color: 0x00ff00 } );
+				const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
 				material.colorNode = texture( storageTexture );
 
 				const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( plane );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/webgpu_compute_texture_pingpong.html

@@ -14,9 +14,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,11 +24,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { storageTexture, wgslFn, code, instanceIndex, uniform } from 'three/nodes';
+			import { storageTexture, wgslFn, code, instanceIndex, uniform } from 'three/tsl';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageTexture from 'three/addons/renderers/common/StorageTexture.js';
 
 			let camera, scene, renderer;
 			let computeInitNode, computeToPing, computeToPong;
@@ -62,8 +60,8 @@
 				const hdr = true;
 				const width = 512, height = 512;
 
-				pingTexture = new StorageTexture( width, height );
-				pongTexture = new StorageTexture( width, height );
+				pingTexture = new THREE.StorageTexture( width, height );
+				pongTexture = new THREE.StorageTexture( width, height );
 
 				if ( hdr ) {
 
@@ -157,7 +155,7 @@
 				const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( plane );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_cubemap_adjustments.html

@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,12 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { uniform, mix, pmremTexture, reference, positionLocal, positionWorld, normalWorld, positionWorldDirection, reflectVector, toneMapping } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { uniform, mix, pmremTexture, reference, positionLocal, positionWorld, normalWorld, positionWorldDirection, reflectVector, toneMapping } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -47,14 +42,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -145,7 +132,7 @@
 
 				// renderer and controls
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMappingNode = toneMapping( THREE.LinearToneMapping, 1 );

examples/webgpu_cubemap_dynamic.html

@@ -18,8 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/nodes": "./jsm/nodes/Nodes.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -28,12 +28,6 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
@@ -52,14 +46,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				stats = new Stats();
 				document.body.appendChild( stats.dom );
 
@@ -95,7 +81,7 @@
 
 				//
 
-				material = new Nodes.MeshStandardNodeMaterial( {
+				material = new THREE.MeshStandardNodeMaterial( {
 					envMap: cubeRenderTarget.texture,
 					roughness: 0.05,
 					metalness: 1
@@ -104,13 +90,13 @@
 				sphere = new THREE.Mesh( new THREE.IcosahedronGeometry( 15, 8 ), material );
 				scene.add( sphere );
 
-				const material1 = new Nodes.MeshStandardNodeMaterial( {
+				const material1 = new THREE.MeshStandardNodeMaterial( {
 					map: uvTexture,
 					roughness: 0.1,
 					metalness: 0,
 				} );
 
-				const material2 = new Nodes.MeshStandardNodeMaterial( {
+				const material2 = new THREE.MeshStandardNodeMaterial( {
 					map: uvTexture,
 					roughness: 0.1,
 					metalness: 0,
@@ -125,7 +111,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL: false } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animation );

examples/webgpu_cubemap_mix.html

@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,12 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { mix, oscSine, timerLocal, pmremTexture, float, toneMapping } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { mix, oscSine, timerLocal, pmremTexture, float, toneMapping } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -45,14 +40,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -89,7 +76,7 @@
 
 				scene.add( gltf.scene );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_custom_fog.html

@@ -8,15 +8,15 @@
 	</head>
 	<body>
 		<div id="info">
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu custom fog
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - custom fog
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,12 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, uniform, MeshPhongNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { color, fog, float, positionWorld, triNoise3D, positionView, normalWorld, uniform } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -40,14 +35,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 600 );
 				camera.position.set( 30, 15, 30 );
 
@@ -82,7 +69,7 @@
 				const buildWindows = positionWorld.y.mul( 10 ).floor().mod( 4 ).sign().mix( color( 0x000066 ).add( fogNoiseDistance ), color( 0xffffff ) );
 
 				const buildGeometry = new THREE.BoxGeometry( 1, 1, 1 );
-				const buildMaterial = new MeshPhongNodeMaterial( {
+				const buildMaterial = new THREE.MeshPhongNodeMaterial( {
 					colorNode: buildWindows
 				} );
 
@@ -132,7 +119,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_custom_fog_background.html

@@ -16,7 +16,7 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu custom fog background<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - custom fog background<br />
 			Battle Damaged Sci-fi Helmet by
 			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
@@ -25,9 +25,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -35,11 +35,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-
-			import { pass, color, rangeFog } from 'three/nodes';
+			import { pass, color, rangeFog } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -61,7 +57,7 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				//renderer.toneMapping = THREE.ACESFilmicToneMapping; // apply tone mapping in post processing
@@ -86,7 +82,7 @@
 				// mix fog from fog factor and background color
 				const compose = fogFactor.mix( scenePassTM, backgroundColor );
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = compose;
 
 				//

examples/webgpu_depth_texture.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Depth Texture</title>
+		<title>three.js webgpu - depth texture</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Depth Texture
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - depth texture
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,14 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import QuadMesh from 'three/addons/objects/QuadMesh.js';
+			import { texture } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -45,20 +38,12 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 20 );
 				camera.position.z = 4;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x222222 );
-				scene.overrideMaterial = new MeshBasicNodeMaterial();
+				scene.overrideMaterial = new THREE.MeshBasicNodeMaterial();
 
 				//
 
@@ -86,7 +71,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -102,10 +87,10 @@
 
 				// FX
 
-				const materialFX = new MeshBasicNodeMaterial();
+				const materialFX = new THREE.MeshBasicNodeMaterial();
 				materialFX.colorNode = texture( depthTexture );
 
-				quad = new QuadMesh( materialFX );
+				quad = new THREE.QuadMesh( materialFX );
 
 				//
 

examples/webgpu_equirectangular.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,13 +25,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, equirectUV } from 'three/nodes';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
+			import { texture, equirectUV } from 'three/tsl';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -42,14 +38,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -61,7 +49,7 @@
 				scene = new THREE.Scene();
 				scene.backgroundNode = texture( equirectTexture, equirectUV(), 0 );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_instance_mesh.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Instance Mesh</title>
+		<title>three.js webgpu - instance mesh</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Instance Mesh
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - instance mesh
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,15 +25,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { mix, range, normalWorld, oscSine, timerLocal } from 'three/nodes';
+			import { mix, range, normalWorld, oscSine, timerLocal } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, stats;
 
@@ -46,14 +42,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 				camera.position.set( amount * 0.9, amount * 0.9, amount * 0.9 );
 				camera.lookAt( 0, 0, 0 );
@@ -87,7 +75,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_instance_points.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - points - instanced</title>
+		<title>three.js webgpu - points instanced</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">
@@ -11,14 +11,14 @@
 
 		<div id="container"></div>
 
-		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> - instanced points</div>
+		<div id="info"><a href="https://threejs.org" target="_blank">three.js</a> webgpu - instanced points</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,11 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { color } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -40,8 +36,6 @@
 			import InstancedPoints from 'three/addons/objects/InstancedPoints.js';
 			import InstancedPointsGeometry from 'three/addons/geometries/InstancedPointsGeometry.js';
 
-			import { color, InstancedPointsNodeMaterial } from 'three/nodes';
-
 			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
 
 			let renderer, scene, camera, camera2, controls, backgroundNode;
@@ -57,15 +51,7 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -118,7 +104,7 @@
 
 				geometry.instanceCount = positions.length / 3; // this should not be necessary
 
-				material = new InstancedPointsNodeMaterial( {
+				material = new THREE.InstancedPointsNodeMaterial( {
 
 					color: 0xffffff,
 					pointWidth: 10, // in pixel units

examples/webgpu_instance_uniform.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Instance Uniform</title>
+		<title>three.js webgpu - instance uniform</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Instance Uniform
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - instance uniform
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,12 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshStandardNodeMaterial, NodeUpdateType, Node, nodeObject, uniform, cubeTexture } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { nodeObject, uniform, cubeTexture } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -38,13 +33,13 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			class InstanceUniformNode extends Node {
+			class InstanceUniformNode extends THREE.Node {
 
 				constructor() {
 
 					super( 'vec3' );
 
-					this.updateType = NodeUpdateType.OBJECT;
+					this.updateType = THREE.NodeUpdateType.OBJECT;
 
 					this.uniformNode = uniform( new THREE.Color() );
 
@@ -79,14 +74,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -118,7 +105,7 @@
 				const instanceUniform = nodeObject( new InstanceUniformNode() );
 				const cubeTextureNode = cubeTexture( cTexture );
 
-				const material = new MeshStandardNodeMaterial();
+				const material = new THREE.MeshStandardNodeMaterial();
 				material.colorNode = instanceUniform.add( cubeTextureNode );
 				material.emissiveNode = instanceUniform.mul( cubeTextureNode );
 
@@ -134,7 +121,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_instancing_morph.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - instancing - Morph Target Animations</title>
+		<title>three.js webgpu - instancing morph target animations</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">
@@ -10,9 +10,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,9 +25,6 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import { MeshStandardNodeMaterial } from 'three/nodes';
-
 			let camera, scene, renderer, stats, mesh, mixer, dummy;
 
 			const offset = 5000;
@@ -101,7 +98,7 @@
 
 					dummy = glb.scene.children[ 0 ];
 
-					mesh = new THREE.InstancedMesh( dummy.geometry, new MeshStandardNodeMaterial( {
+					mesh = new THREE.InstancedMesh( dummy.geometry, new THREE.MeshStandardNodeMaterial( {
 						flatShading: true,
 					} ), 1024 );
 
@@ -139,8 +136,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
-
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_lights_custom.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Custom Lighting Model</title>
+		<title>three.js webgpu - custom lighting model</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Custom Lighting Model
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - custom lighting model
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,16 +24,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, lights, toneMapping, MeshStandardNodeMaterial, PointsNodeMaterial, LightingModel } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { color, lights } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			class CustomLightingModel extends LightingModel {
+			class CustomLightingModel extends THREE.LightingModel {
 
 				direct( { lightColor, reflectedLight }, stack ) {
 
@@ -51,14 +46,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 1.5;
 
@@ -71,7 +58,7 @@
 
 				const addLight = ( hexColor ) => {
 
-					const material = new MeshStandardNodeMaterial();
+					const material = new THREE.MeshStandardNodeMaterial();
 					material.colorNode = color( hexColor );
 					material.lightsNode = lights(); // ignore scene lights
 
@@ -106,7 +93,7 @@
 				}
 
 				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-				const materialPoints = new PointsNodeMaterial();
+				const materialPoints = new THREE.PointsNodeMaterial();
 
 				// custom lighting model
 
@@ -122,7 +109,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_lights_ies_spotlight.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js WebGPU - lights - ies spotlight</title>
+		<title>three.js webgpu - ies spotlight</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - ies spotlight<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - ies spotlight<br />
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,14 +26,7 @@
 
 			import * as THREE from 'three';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import IESSpotLight from 'three/addons/lights/IESSpotLight.js';
-
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
 			import { IESLoader } from 'three/addons/loaders/IESLoader.js';
 
@@ -42,20 +35,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				//
-
-				scene = new THREE.Scene();
-
-				//
-
 				const iesLoader = new IESLoader().setPath( './ies/' );
 				//iesLoader.type = THREE.UnsignedByteType; // LDR
 
@@ -68,7 +47,11 @@
 
 				//
 
-				const spotLight = new IESSpotLight( 0xff0000, 500 );
+				scene = new THREE.Scene();
+
+				//
+
+				const spotLight = new THREE.IESSpotLight( 0xff0000, 500 );
 				spotLight.position.set( 6.5, 1.5, 6.5 );
 				spotLight.angle = Math.PI / 8;
 				spotLight.penumbra = 0.7;
@@ -78,7 +61,7 @@
 
 				//
 
-				const spotLight2 = new IESSpotLight( 0x00ff00, 500 );
+				const spotLight2 = new THREE.IESSpotLight( 0x00ff00, 500 );
 				spotLight2.position.set( 6.5, 1.5, - 6.5 );
 				spotLight2.angle = Math.PI / 8;
 				spotLight2.penumbra = 0.7;
@@ -88,7 +71,7 @@
 
 				//
 
-				const spotLight3 = new IESSpotLight( 0x0000ff, 500 );
+				const spotLight3 = new THREE.IESSpotLight( 0x0000ff, 500 );
 				spotLight3.position.set( - 6.5, 1.5, - 6.5 );
 				spotLight3.angle = Math.PI / 8;
 				spotLight3.penumbra = 0.7;
@@ -98,7 +81,7 @@
 
 				//
 
-				const spotLight4 = new IESSpotLight( 0xffffff, 500 );
+				const spotLight4 = new THREE.IESSpotLight( 0xffffff, 500 );
 				spotLight4.position.set( - 6.5, 1.5, 6.5 );
 				spotLight4.angle = Math.PI / 8;
 				spotLight4.penumbra = 0.7;
@@ -122,7 +105,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_lights_phong.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Lights Phong</title>
+		<title>three.js webgpu - phong lighting model</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">
@@ -9,16 +9,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Phong Model Lighting<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - phong lighting model<br />
 			<b style="color:red">Left: Red lights</b> - <b>Center: All lights</b> - <b style="color:blue">Right: blue light</b>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,18 +26,13 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { color, rangeFog, checker, uv, mix, texture, lights, normalMap, MeshPhongNodeMaterial } from 'three/nodes';
+			import { color, rangeFog, checker, uv, mix, texture, lights, normalMap } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer,
 				light1, light2, light3, light4,
 				stats, controls;
@@ -46,14 +41,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 7;
 
@@ -78,7 +65,7 @@
 
 				const addLight = ( hexColor, power = 1700, distance = 100 ) => {
 
-					const material = new MeshPhongNodeMaterial();
+					const material = new THREE.MeshPhongNodeMaterial();
 					material.colorNode = color( hexColor );
 					material.lights = false;
 
@@ -108,18 +95,18 @@
 
 				const geometryTeapot = new TeapotGeometry( .8, 18 );
 
-				const leftObject = new THREE.Mesh( geometryTeapot, new MeshPhongNodeMaterial( { color: 0x555555 } ) );
+				const leftObject = new THREE.Mesh( geometryTeapot, new THREE.MeshPhongNodeMaterial( { color: 0x555555 } ) );
 				leftObject.material.lightsNode = blueLightsNode;
 				leftObject.material.specularNode = texture( alphaTexture );
 				leftObject.position.x = - 3;
 				scene.add( leftObject );
 
-				const centerObject = new THREE.Mesh( geometryTeapot, new MeshPhongNodeMaterial( { color: 0x555555 } ) );
+				const centerObject = new THREE.Mesh( geometryTeapot, new THREE.MeshPhongNodeMaterial( { color: 0x555555 } ) );
 				centerObject.material.normalNode = normalMap( texture( normalMapTexture ) );
 				centerObject.material.shininess = 80;
 				scene.add( centerObject );
 
-				const rightObject = new THREE.Mesh( geometryTeapot, new MeshPhongNodeMaterial( { color: 0x555555 } ) );
+				const rightObject = new THREE.Mesh( geometryTeapot, new THREE.MeshPhongNodeMaterial( { color: 0x555555 } ) );
 				rightObject.material.lightsNode = whiteLightsNode;
 				//rightObject.material.specular.setHex( 0xFF00FF );
 				rightObject.material.specularNode = mix( color( 0x0000FF ), color( 0xFF0000 ), checker( uv().mul( 5 ) ) );
@@ -132,7 +119,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_lights_rectarealight.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webGPU - lights - rect area light</title>
+		<title>three.js webGPU - rect area light</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">
@@ -9,16 +9,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - THREE.RectAreaLight<br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - rect area light<br/>
 			by <a href="http://github.com/abelnation" target="_blank" rel="noopener">abelnation</a>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -31,9 +31,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
-			import { RectAreaLightUniformsLib } from 'three/addons/lights/RectAreaLightUniformsLib.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { RectAreaLightTexturesLib } from 'three/addons/lights/RectAreaLightTexturesLib.js';
 
 			let renderer, scene, camera;
 			let stats, meshKnot;
@@ -42,9 +40,9 @@
 
 			function init() {
 
-				RectAreaLightUniformsLib.init();
+				THREE.RectAreaLightNode.setLTC( RectAreaLightTexturesLib.init() );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animation );

examples/webgpu_lights_selective.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Selective Lights</title>
+		<title>three.js webgpu - selective lights</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">
@@ -9,16 +9,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Selective Lights<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - selective lights<br />
 			<b style="color:red">Left: Red lights</b> - <b>Center: All lights</b> - <b style="color:blue">Right: blue light</b>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,7 +26,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { rangeFog, color, lights, texture, normalMap, MeshStandardNodeMaterial } from 'three/nodes';
+			import { rangeFog, color, lights, texture, normalMap } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -35,11 +35,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer,
 				light1, light2, light3, light4,
 				stats, controls;
@@ -48,14 +43,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 7;
 
@@ -80,7 +67,7 @@
 
 				const addLight = ( hexColor, power = 1700, distance = 100 ) => {
 
-					const material = new MeshStandardNodeMaterial();
+					const material = new THREE.MeshStandardNodeMaterial();
 					material.colorNode = color( hexColor );
 					material.lights = false;
 
@@ -110,20 +97,20 @@
 
 				const geometryTeapot = new TeapotGeometry( .8, 18 );
 
-				const leftObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
+				const leftObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				leftObject.material.lightsNode = redLightsNode;
 				leftObject.material.roughnessNode = texture( alphaTexture );
 				leftObject.material.metalness = 0;
 				leftObject.position.x = - 3;
 				scene.add( leftObject );
 
-				const centerObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
+				const centerObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				centerObject.material.normalNode = normalMap( texture( normalMapTexture ) );
 				centerObject.material.metalness = .5;
 				centerObject.material.roughness = .5;
 				scene.add( centerObject );
 
-				const rightObject = new THREE.Mesh( geometryTeapot, new MeshStandardNodeMaterial( { color: 0x555555 } ) );
+				const rightObject = new THREE.Mesh( geometryTeapot, new THREE.MeshStandardNodeMaterial( { color: 0x555555 } ) );
 				rightObject.material.lightsNode = blueLightsNode;
 				rightObject.material.metalnessNode = texture( alphaTexture );
 				rightObject.position.x = 3;
@@ -134,7 +121,7 @@
 
 				//renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_lines_fat.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - lines - fat</title>
+		<title>three.js webgpu - fat lines</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">
@@ -16,9 +16,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,18 +26,13 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { color } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { Line2NodeMaterial, LineDashedNodeMaterial, LineBasicNodeMaterial, color } from 'three/nodes';
-			import { Line2 } from 'three/addons/lines/Line2.js';
+			import { Line2 } from 'three/addons/lines/webgpu/Line2.js';
 			import { LineGeometry } from 'three/addons/lines/LineGeometry.js';
 			import * as GeometryUtils from 'three/addons/utils/GeometryUtils.js';
 
@@ -55,15 +50,7 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setClearColor( 0x000000, 0.0 );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -117,7 +104,7 @@
 				geometry.setColors( colors );
 				geometry.instanceCount = positions.length / 3 - 1;
 
-				matLine = new Line2NodeMaterial( {
+				matLine = new THREE.Line2NodeMaterial( {
 
 					color: 0xffffff,
 					linewidth: 5, // in world units with size attenuation, pixels otherwise
@@ -136,8 +123,8 @@
 				geo.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geo.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
-				matLineBasic = new LineBasicNodeMaterial( { vertexColors: true } );
-				matLineDashed = new LineDashedNodeMaterial( { vertexColors: true, scale: 2, dashSize: 1, gapSize: 1 } );
+				matLineBasic = new THREE.LineBasicNodeMaterial( { vertexColors: true } );
+				matLineDashed = new THREE.LineDashedNodeMaterial( { vertexColors: true, scale: 2, dashSize: 1, gapSize: 1 } );
 
 				line1 = new THREE.Line( geo, matLineBasic );
 				line1.computeLineDistances();

examples/webgpu_loader_gltf.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - GLTFloader</title>
+		<title>three.js webgpu - gltf loader</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">
@@ -9,7 +9,7 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - gltf loader<br />
 			Battle Damaged Sci-fi Helmet by
 			<a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
 			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
@@ -18,7 +18,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -28,11 +29,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -45,14 +41,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -88,7 +76,7 @@
 					} );
 
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;

examples/webgpu_loader_gltf_anisotropy.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - GLTFloader + Anisotropy</title>
+		<title>three.js webgpu - glTF + anisotropy</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">
@@ -9,7 +9,7 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_anisotropy" target="_blank" rel="noopener">KHR_materials_anisotropy</a><br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_anisotropy" target="_blank" rel="noopener">KHR_materials_anisotropy</a><br />
 			Anisotropy Barn Lamp from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/AnisotropyBarnLamp" target="_blank" rel="noopener">glTF-Sample-Models</a><br />
 			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
 		</div>
@@ -17,7 +17,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -31,15 +32,13 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let renderer, scene, camera, controls;
 
 			init();
 
 			async function init() {
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_loader_gltf_compressed.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - GLTFloader + compressed</title>
+		<title>three.js webgpu - glTF + compressed</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">
@@ -9,13 +9,14 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - GLTFLoader + compression extensions
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - glTF + compression extensions
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -31,8 +32,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer;
 
 			init();
@@ -54,7 +53,7 @@
 
 				//renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_loader_gltf_dispersion.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - GLTFloader + Dispersion</title>
+		<title>three.js webgpu - glTF + dispersion</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">
@@ -9,14 +9,15 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion" target="_blank" rel="noopener">KHR_materials_dispersion</a><br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_dispersion" target="_blank" rel="noopener">KHR_materials_dispersion</a><br />
 			HDR by <a href="https://polyhaven.com/a/studio_small_08" target="_blank" rel="noopener">Poly Haven</a> 
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -26,8 +27,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
@@ -46,7 +45,7 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_loader_gltf_iridescence.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - GLTFloader + Iridescence</title>
+		<title>three.js webgpu - glTF + iridescence</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">
@@ -9,7 +9,7 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence" target="_blank" rel="noopener">KHR_materials_iridescence</a><br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence" target="_blank" rel="noopener">KHR_materials_iridescence</a><br />
 			Iridescence Lamp from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/IridescenceLamp" target="_blank" rel="noopener">glTF-Sample-Models</a><br />
 			<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
 		</div>
@@ -17,7 +17,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -27,11 +28,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
@@ -46,15 +42,7 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( render );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_loader_gltf_sheen.html

@@ -14,14 +14,15 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen" target="_blank" rel="noopener">KHR_materials_sheen</a><br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_sheen" target="_blank" rel="noopener">KHR_materials_sheen</a><br />
 			Sheen Chair from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/SheenChair" target="_blank" rel="noopener">glTF-Sample-Models</a>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -31,11 +32,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
@@ -48,14 +44,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -82,7 +70,7 @@
 
 					} );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_loader_gltf_transmission.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - GLTFloader + transmission</title>
+		<title>three.js webgpu - glTF + transmission</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">
@@ -9,7 +9,7 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission" target="_blank" rel="noopener">KHR_materials_transmission</a><br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_transmission" target="_blank" rel="noopener">KHR_materials_transmission</a><br />
 			Iridescent Dish With Olives by <a href="https://github.com/echadwick-wayfair" target="_blank" rel="noopener">Eric Chadwick</a><br />
 			<a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
 		</div>
@@ -17,7 +17,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -33,8 +34,6 @@
 
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer, controls, clock, mixer;
 
 			init();
@@ -78,7 +77,7 @@
 
 					} );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( render );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_loader_materialx.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - MaterialX loader</title>
+		<title>three.js webgpu - materialx loader</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">
@@ -14,15 +14,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - MaterialXLoader<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - materialx loader<br />
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -31,12 +31,12 @@
 
 			import * as THREE from 'three';
 
-			import { MaterialXLoader } from 'three/addons/loaders/MaterialXLoader.js';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
-			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+
+			import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
 
 			const SAMPLE_PATH = 'https://raw.githubusercontent.com/materialx/MaterialX/main/resources/Materials/Examples/StandardSurface/';
 
@@ -79,7 +79,7 @@
 
 				scene = new THREE.Scene();
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.LinearToneMapping;

examples/webgpu_materials.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Materials</title>
+		<title>three.js webgpu - materials</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Materials
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - materials
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,12 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
-
-			import { tslFn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportBottomLeft, js, string, global, loop, MeshBasicNodeMaterial, NodeObjectLoader } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { tslFn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportBottomLeft, js, string, global, loop } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -46,14 +41,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -87,44 +74,44 @@
 				//
 
 				// PositionLocal
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = positionLocal;
 				materials.push( material );
 
 				// PositionWorld
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = positionWorld;
 				materials.push( material );
 
 				// NormalLocal
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = normalLocal;
 				materials.push( material );
 
 				// NormalWorld
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = normalWorld;
 				materials.push( material );
 
 				// NormalView
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = normalView;
 				materials.push( material );
 
 				// Texture
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = texture( uvTexture );
 				materials.push( material );
 
 				// Opacity
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = color( 0x0099FF );
 				material.opacityNode = texture( uvTexture );
 				material.transparent = true;
 				materials.push( material );
 
 				// AlphaTest
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = texture( uvTexture );
 				material.opacityNode = texture( opacityTexture );
 				material.alphaTestNode = 0.5;
@@ -148,7 +135,7 @@
 
 				} );
 
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = desaturateShaderNode( { color: texture( uvTexture ) } );
 				materials.push( material );
 
@@ -160,7 +147,7 @@
 
 				} );
 
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = desaturateNoInputsShaderNode();
 				materials.push( material );
 
@@ -186,7 +173,7 @@
 					}
 				`, [ desaturateWGSLFn ] );
 
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = someWGSLFn( { color: texture( uvTexture ) } );
 				materials.push( material );
 
@@ -203,22 +190,22 @@
 				const textureNode = texture( uvTexture );
 				//getWGSLTextureSample.keywords = { tex: textureNode, tex_sampler: sampler( textureNode ) };
 
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = getWGSLTextureSample( { tex: textureNode, tex_sampler: textureNode, uv: uv() } );
 				materials.push( material );
 
 				// Triplanar Texture Mapping
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = triplanarTexture( texture( uvTexture ), null, null, float( .01 ) );
 				materials.push( material );
 
 				// Screen Projection Texture
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = texture( uvTexture, viewportBottomLeft );
 				materials.push( material );
 
 				// Loop
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				materials.push( material );
 
 				const loopCount = 10;
@@ -247,7 +234,7 @@
 				// Scriptable
 
 				global.set( 'THREE', THREE );
-				global.set( 'TSL', Nodes );
+				global.set( 'TSL', THREE );
 
 				const asyncNode = js( `
 
@@ -344,7 +331,7 @@
 
 				scriptableNode.call( 'helloWorld' );
 
-				material = new MeshBasicNodeMaterial();
+				material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = scriptableNode;
 				materials.push( material );
 
@@ -366,7 +353,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -407,7 +394,7 @@
 			function testSerialization( mesh ) {
 
 				const json = mesh.toJSON();
-				const loader = new NodeObjectLoader();
+				const loader = new THREE.NodeObjectLoader();
 				const serializedMesh = loader.parse( json );
 
 				serializedMesh.position.x = ( objects.length % 4 ) * 200 - 400;

examples/webgpu_materials_displacementmap.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - displacement map</title>
+		<title>three.js webgpu - displacement map</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">
@@ -10,16 +10,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - (normal + ao + displacement + environment) map demo.<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - ( normal + ao + displacement + environment ) maps<br />
 			ninja head from <a href="https://gpuopen.com/archive/gamescgi/amd-gpu-meshmapper/" target="_blank" rel="noopener">AMD GPU MeshMapper</a>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -30,14 +30,10 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
 
-			import { MeshStandardNodeMaterial } from 'three/nodes';
-
 			let stats;
 			let camera, scene, renderer, controls;
 
@@ -116,7 +112,7 @@
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new WebGPURenderer();
+				renderer = new THREE.WebGPURenderer();
 				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -173,7 +169,7 @@
 
 				// material
 
-				material = new MeshStandardNodeMaterial( {
+				material = new THREE.MeshStandardNodeMaterial( {
 
 					color: 0xc1c1c1,
 					roughness: settings.roughness,

examples/webgpu_materials_lightmap.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - materials - lightmap</title>
+		<title>three.js webgpu - lightmap</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">
@@ -11,9 +11,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -21,15 +21,12 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { vec4, color, positionLocal, mix } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import { MeshBasicNodeMaterial, vec4, color, positionLocal, mix } from 'three/nodes';
-
 			let container, stats;
 			let camera, scene, renderer;
 
@@ -68,7 +65,7 @@
 
 				const h = positionLocal.add( offset ).normalize().y;
 
-				const skyMat = new MeshBasicNodeMaterial();
+				const skyMat = new THREE.MeshBasicNodeMaterial();
 				skyMat.colorNode = vec4( mix( color( bottomColor ), color( topColor ), h.max( 0.0 ).pow( exponent ) ), 1.0 );
 				skyMat.side = THREE.BackSide;
 
@@ -83,7 +80,7 @@
 
 				// RENDERER
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( innerWidth, innerHeight );

examples/webgpu_materials_matcap.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - matcap</title>
+		<title>three.js webgpu - matcap material</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">
@@ -9,16 +9,16 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu materials matcap<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - matcap material<br />
 			Drag-and-drop JPG, PNG, WebP, AVIF, or EXR MatCap image files<br/>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,15 +27,11 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { EXRLoader } from 'three/addons/loaders/EXRLoader.js';
 
-			import { MeshMatcapNodeMaterial } from 'three/nodes';
-
 			let mesh, renderer, scene, camera;
 
 			const API = {
@@ -48,7 +44,7 @@
 			function init() {
 
 				// renderer
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -88,7 +84,7 @@
 					mesh = gltf.scene.children[ 0 ];
 					mesh.position.y = - 0.25;
 
-					mesh.material = new MeshMatcapNodeMaterial( {
+					mesh.material = new THREE.MeshMatcapNodeMaterial( {
 
 						color: new THREE.Color().setHex( API.color ).convertSRGBToLinear(),
 						matcap: matcap,

examples/webgpu_materials_sss.html

@@ -9,7 +9,7 @@
 	<body>
 
 		<div id="container"></div>
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a>
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - sss
 			<br/>Fast subsurface scattering<br/>
 			[Thanks for the art support from <a href="https://github.com/shaochun" target="_blank" rel="noopener">Shaochun Lin</a>]
 		</div>
@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +27,6 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
@@ -75,7 +72,7 @@
 				pointLight2.position.y = 20;
 				pointLight2.position.z = - 260;
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -105,15 +102,15 @@
 				const thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
 				imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 
-				const material = new Nodes.MeshSSSNodeMaterial();
+				const material = new THREE.MeshSSSNodeMaterial();
 				material.color = new THREE.Color( 1.0, 0.2, 0.2 );
 				material.roughness = 0.3;
-				material.thicknessColorNode = Nodes.texture( thicknessTexture ).mul( Nodes.vec3( 0.5, 0.3, 0.0 ) );
-				material.thicknessDistortionNode = Nodes.uniform( 0.1 );
-				material.thicknessAmbientNode = Nodes.uniform( 0.4 );
-				material.thicknessAttenuationNode = Nodes.uniform( 0.8 );
-				material.thicknessPowerNode = Nodes.uniform( 2.0 );
-				material.thicknessScaleNode = Nodes.uniform( 16.0 );
+				material.thicknessColorNode = THREE.texture( thicknessTexture ).mul( THREE.vec3( 0.5, 0.3, 0.0 ) );
+				material.thicknessDistortionNode = THREE.uniform( 0.1 );
+				material.thicknessAmbientNode = THREE.uniform( 0.4 );
+				material.thicknessAttenuationNode = THREE.uniform( 0.8 );
+				material.thicknessPowerNode = THREE.uniform( 2.0 );
+				material.thicknessScaleNode = THREE.uniform( 16.0 );
 
 				// LOADER
 

examples/webgpu_materials_toon.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - toon</title>
+		<title>three.js webgpu - toon material</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">
@@ -9,14 +9,14 @@
 	<body>
 
 		<div id="container"></div>
-		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Toon Material</div>
+		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - toon material</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,13 +25,6 @@
 
 			import * as THREE from 'three';
 
-			import { MeshBasicNodeMaterial, MeshToonNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -52,14 +45,6 @@
 
 			function init( font ) {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -73,7 +58,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
@@ -108,7 +93,7 @@
 							// basic monochromatic energy preservation
 							const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 );
 
-							const material = new MeshToonNodeMaterial( {
+							const material = new THREE.MeshToonNodeMaterial( {
 								color: diffuseColor,
 								gradientMap: gradientMap
 							} );
@@ -139,7 +124,7 @@
 
 					} );
 
-					const textMaterial = new MeshBasicNodeMaterial();
+					const textMaterial = new THREE.MeshBasicNodeMaterial();
 					const textMesh = new THREE.Mesh( textGeo, textMaterial );
 					textMesh.position.copy( location );
 					scene.add( textMesh );
@@ -154,7 +139,7 @@
 
 				particleLight = new THREE.Mesh(
 					new THREE.SphereGeometry( 4, 8, 8 ),
-					new MeshBasicNodeMaterial( { color: 0xffffff } )
+					new THREE.MeshBasicNodeMaterial( { color: 0xffffff } )
 				);
 				scene.add( particleLight );
 

examples/webgpu_materials_transmission.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>threejs webgpu - materials - transmission</title>
+		<title>threejs webgpu - transmission</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">
@@ -14,7 +14,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -28,8 +29,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			const params = {
 				color: 0xffffff,
 				transmission: 1,
@@ -62,7 +61,7 @@
 
 			function init() {
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_materials_video.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - video</title>
+		<title>three.js webgpu - video material</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">
@@ -14,7 +14,7 @@
 		<div id="container"></div>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu video demo<br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - video material<br/>
 			playing <a href="http://durian.blender.org/" target="_blank" rel="noopener">sintel</a> trailer
 		</div>
 
@@ -26,9 +26,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -37,8 +37,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let container;
 
 			let camera, scene, renderer;
@@ -83,7 +81,7 @@
 				light.position.set( 0.5, 1, 1 ).normalize();
 				scene.add( light );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
@@ -253,7 +251,6 @@
 
 			}
 
-
 		</script>
 
 	</body>

examples/webgpu_materialx_noise.html

@@ -1,22 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - materialx nodes</title>
+		<title>three.js webgpu - materialx noise</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">
 	</head>
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - MaterialX - Noise
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - materialx noise
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,18 +24,13 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshPhysicalNodeMaterial, normalWorld, timerLocal, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/nodes';
+			import { normalWorld, timerLocal, mx_noise_vec3, mx_worley_noise_vec3, mx_cell_noise_float, mx_fractal_noise_vec3 } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { HDRCubeTextureLoader } from 'three/addons/loaders/HDRCubeTextureLoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -47,14 +42,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -78,7 +65,7 @@
 
 							// left top
 
-							let material = new MeshPhysicalNodeMaterial();
+							let material = new THREE.MeshPhysicalNodeMaterial();
 							material.colorNode = mx_noise_vec3( customUV );
 
 							let mesh = new THREE.Mesh( geometry, material );
@@ -88,7 +75,7 @@
 
 							// right top
 
-							material = new MeshPhysicalNodeMaterial();
+							material = new THREE.MeshPhysicalNodeMaterial();
 							material.colorNode = mx_cell_noise_float( customUV );
 
 							mesh = new THREE.Mesh( geometry, material );
@@ -98,7 +85,7 @@
 
 							// left bottom
 
-							material = new MeshPhysicalNodeMaterial();
+							material = new THREE.MeshPhysicalNodeMaterial();
 							material.colorNode = mx_worley_noise_vec3( customUV );
 
 							mesh = new THREE.Mesh( geometry, material );
@@ -108,7 +95,7 @@
 
 							// right bottom
 
-							material = new MeshPhysicalNodeMaterial();
+							material = new THREE.MeshPhysicalNodeMaterial();
 							material.colorNode = mx_fractal_noise_vec3( customUV.mul( .2 ) );
 
 							mesh = new THREE.Mesh( geometry, material );
@@ -135,7 +122,7 @@
 
 				particleLight.add( new THREE.PointLight( 0xffffff, 1000 ) );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setAnimationLoop( animate );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );

examples/webgpu_mesh_batch.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-	<title>three.js webgpu - mesh - batch</title>
+	<title>three.js webgpu - batch mesh</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">
@@ -14,9 +14,7 @@
 <body>
 
 	<div id="info">
-
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mesh - batch
-
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - batch mesh
 	</div>
 
 	<div id="backend" style="position: absolute; top: 200px; left: 0; color: #fff; background-color: rgba(0,0,0,0.75); padding: 5px;">
@@ -26,24 +24,24 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js",
+				"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 				"three/addons/": "./jsm/",
-				"three/nodes": "./jsm/nodes/Nodes.js",
 				"stats-gl": "https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"
 			}
 		}
 	</script>
 
 	<script type="module">
+
 		import * as THREE from 'three';
 
 		import Stats from 'stats-gl';
+
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 		import { radixSort } from 'three/addons/utils/SortUtils.js';
-		import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-		import { MeshNormalNodeMaterial } from 'three/nodes';
 
 		let camera, scene, renderer;
 		let controls, stats;
@@ -121,7 +119,7 @@
 
 			if ( ! material ) {
 
-				material = new MeshNormalNodeMaterial();
+				material = new THREE.MeshNormalNodeMaterial();
 
 			}
 
@@ -213,7 +211,7 @@
 
 			// renderer
 
-			renderer = new WebGPURenderer( { antialias: true, forceWebGL } );
+			renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgpu_mirror.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,9 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshPhongNodeMaterial, reflector, uv, texture, color } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { reflector, uv, texture, color } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -113,14 +111,14 @@
 
 				//
 
-				const planeBottom = new THREE.Mesh( planeGeo, new MeshPhongNodeMaterial( {
+				const planeBottom = new THREE.Mesh( planeGeo, new THREE.MeshPhongNodeMaterial( {
 					colorNode: groundNode
 				} ) );
 				planeBottom.rotateX( - Math.PI / 2 );
 				planeBottom.add( groundReflector.target );
 				scene.add( planeBottom );
 
-				const planeBack = new THREE.Mesh( planeGeo, new MeshPhongNodeMaterial( {
+				const planeBack = new THREE.Mesh( planeGeo, new THREE.MeshPhongNodeMaterial( {
 					colorNode: verticalNode
 				} ) );
 				planeBack.position.z = - 50;
@@ -173,7 +171,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_morphtargets.html

@@ -10,16 +10,16 @@
 	<body>
 		<div id="container"></div>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - morph targets<br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - morph targets<br/>
 			by <a href="https://discoverthreejs.com/" target="_blank" rel="noopener">Discover three.js</a>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -29,12 +29,8 @@
 			import * as THREE from 'three';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let container, camera, scene, renderer, mesh;
 
@@ -42,14 +38,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				container = document.getElementById( 'container' );
 
 				scene = new THREE.Scene();
@@ -76,7 +64,7 @@
 
 				initGUI();
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( function () {

examples/webgpu_morphtargets_face.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - morph targets - face</title>
+		<title>three.js webgpu - morph face targets</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">
@@ -14,14 +14,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - morph targets - face<br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - morph face targets<br/>
 			model by <a href="https://www.bannaflak.com/face-cap" target="_blank" rel="noopener">Face Cap</a>
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -31,11 +32,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
@@ -50,14 +46,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				let mixer;
 
 				const clock = new THREE.Clock();
@@ -71,7 +59,7 @@
 				const scene = new THREE.Scene();
 				scene.add( new THREE.HemisphereLight( 0xFFFFFF, 0x443333, 2 ) );
 
-				const renderer = new WebGPURenderer( { antialias: true } );
+				const renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;

examples/webgpu_multiple_rendertargets.html

@@ -1,22 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - Multiple Render Targets</title>
+		<title>three.js webgpu - multiple render targets</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">
 	</head>
 	<body>
+
 		<div id="info">
-			<a href="https://threejs.org" target="_blank">threejs</a> webgpu - Multiple RenderTargets
+			<a href="https://threejs.org" target="_blank">threejs</a> webgpu - multiple rendertargets
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,18 +25,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { NodeMaterial, mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			//import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import { NodeMaterial, mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/nodes';
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import QuadMesh from 'three/addons/objects/QuadMesh.js';
-
 			let camera, scene, renderer, torus;
 			let quadMesh, renderTarget;
 
@@ -104,15 +98,7 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
@@ -155,7 +141,7 @@
 
 				// PostProcessing setup
 
-				quadMesh = new QuadMesh( new ReadGBufferMaterial( renderTarget.textures[ 0 ], renderTarget.textures[ 1 ] ) );
+				quadMesh = new THREE.QuadMesh( new ReadGBufferMaterial( renderTarget.textures[ 0 ], renderTarget.textures[ 1 ] ) );
 
 				// Controls
 

examples/webgpu_multiple_rendertargets_readback.html

@@ -7,6 +7,7 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	<body>
+
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - mrt readback
 		</div>
@@ -14,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,17 +25,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-
-			import { MeshBasicNodeMaterial, NodeMaterial, mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/nodes';
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import QuadMesh from 'three/addons/objects/QuadMesh.js';
+			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer, torus;
 			let quadMesh, renderTarget, readbackTarget, material, readbackMaterial, pixelBuffer, pixelBufferTexture;
@@ -47,7 +42,7 @@
 
 			gui.add( options, 'selection', [ 'mrt', 'diffuse', 'normal' ] );
 
-			class WriteGBufferMaterial extends NodeMaterial {
+			class WriteGBufferMaterial extends THREE.NodeMaterial {
 
 				constructor( diffuseTexture ) {
 
@@ -75,7 +70,7 @@
 
 			}
 
-			class ReadGBufferMaterial extends NodeMaterial {
+			class ReadGBufferMaterial extends THREE.NodeMaterial {
 
 				constructor( tDiffuse, tNormal ) {
 
@@ -99,15 +94,7 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
@@ -139,7 +126,7 @@
 				pixelBufferTexture.type = THREE.UnsignedByteType;
 				pixelBufferTexture.format = THREE.RGBAFormat;
 
-				readbackMaterial = new MeshBasicNodeMaterial();
+				readbackMaterial = new THREE.MeshBasicNodeMaterial();
 				readbackMaterial.colorNode = texture( pixelBufferTexture );
 
 
@@ -168,7 +155,7 @@
 
 
 				material = new ReadGBufferMaterial( renderTarget.textures[ 0 ], renderTarget.textures[ 1 ] );
-				quadMesh = new QuadMesh( material );
+				quadMesh = new THREE.QuadMesh( material );
 
 				// Controls
 

examples/webgpu_multisampled_renderbuffers.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Multisampled Renderbuffers</title>
+		<title>three.js webgpu - multisampled renderbuffers</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Multisampled Renderbuffers
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - multisampled renderbuffers
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,17 +24,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, MeshBasicNodeMaterial, MeshPhongNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
+			import { texture } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import QuadMesh from 'three/addons/objects/QuadMesh.js';
-
 			let camera, scene, renderer;
 			const mouse = new THREE.Vector2();
 
@@ -83,14 +76,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
 				camera.position.z = 3;
 
@@ -100,8 +85,8 @@
 				// textured mesh
 
 				const geometryBox = new THREE.BoxGeometry( 7, 7, 7, 12, 12, 12 );
-				const materialBox = new MeshPhongNodeMaterial();
-				const materialBoxInner = new MeshPhongNodeMaterial( { color: 0xff0000 } );
+				const materialBox = new THREE.MeshPhongNodeMaterial();
+				const materialBoxInner = new THREE.MeshPhongNodeMaterial( { color: 0xff0000 } );
 
 				materialBox.wireframe = true;
 
@@ -121,7 +106,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -139,10 +124,10 @@
 
 				// modulate the final color based on the mouse position
 
-				const materialFX = new MeshBasicNodeMaterial();
+				const materialFX = new THREE.MeshBasicNodeMaterial();
 				materialFX.colorNode = texture( renderTarget.texture ).rgb;
 
-				quadMesh = new QuadMesh( materialFX );
+				quadMesh = new THREE.QuadMesh( materialFX );
 
 			}
 

examples/webgpu_occlusion.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Occlusion</title>
+		<title>three.js webgpu - occlusion</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">
@@ -9,16 +9,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Occlusion<br />
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - occlusion<br />
 			The plane changes color if the sphere behind it is rendered
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,24 +26,19 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { nodeObject, uniform, Node, NodeUpdateType, MeshPhongNodeMaterial } from 'three/nodes';
+			import { nodeObject, uniform } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer, controls;
 
-			class OcclusionNode extends Node {
+			class OcclusionNode extends THREE.Node {
 
 				constructor( testObject, normalColor, occludedColor ) {
 
 					super( 'vec3' );
 
-					this.updateType = NodeUpdateType.OBJECT;
+					this.updateType = THREE.NodeUpdateType.OBJECT;
 
 					this.uniformNode = uniform( new THREE.Color() );
 
@@ -73,14 +68,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.z = 7;
 
@@ -101,8 +88,8 @@
 				const planeGeometry = new THREE.PlaneGeometry( 2, 2 );
 				const sphereGeometry = new THREE.SphereGeometry( 0.5 );
 
-				const plane = new THREE.Mesh( planeGeometry, new MeshPhongNodeMaterial( { color: 0x00ff00 } ) );
-				const sphere = new THREE.Mesh( sphereGeometry, new MeshPhongNodeMaterial( { color: 0xffff00 } ) );
+				const plane = new THREE.Mesh( planeGeometry, new THREE.MeshPhongNodeMaterial( { color: 0x00ff00 } ) );
+				const sphere = new THREE.Mesh( sphereGeometry, new THREE.MeshPhongNodeMaterial( { color: 0xffff00 } ) );
 
 				const instanceUniform = nodeObject( new OcclusionNode( sphere, new THREE.Color( 0x00ff00 ), new THREE.Color( 0x0000ff ) ) );
 
@@ -116,7 +103,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgpu_parallax_uv.html

@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,9 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshStandardNodeMaterial, texture, parallaxUV, uv } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { texture, parallaxUV, uv } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -95,7 +93,7 @@
 
 				// material
 
-				const material = new MeshStandardNodeMaterial();
+				const material = new THREE.MeshStandardNodeMaterial();
 				material.colorNode = iceNode.mul( 5 ); // increase the color intensity to 5 ( contrast )
 				material.roughnessNode = texture( roughnessTexture );
 				material.normalMap = normalTexture;
@@ -109,7 +107,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_particles.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Particles</title>
+		<title>three.js webgpu - Particles</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Particles
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - particles
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,15 +24,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { range, texture, mix, uv, color, positionLocal, timerLocal, SpriteNodeMaterial } from 'three/nodes';
+			import { range, texture, mix, uv, color, positionLocal, timerLocal } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, scene, renderer;
@@ -42,14 +37,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const { innerWidth, innerHeight } = window;
 
 				camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, 1, 5000 );
@@ -86,7 +73,7 @@
 
 				// create particles
 
-				const smokeNodeMaterial = new SpriteNodeMaterial();
+				const smokeNodeMaterial = new THREE.SpriteNodeMaterial();
 				smokeNodeMaterial.colorNode = mix( color( 0xf27d0c ), smokeColor, life.mul( 2.5 ).min( 1 ) ).mul( fakeLightEffect );
 				smokeNodeMaterial.opacityNode = opacityNode;
 				smokeNodeMaterial.positionNode = offsetRange.mul( lifeTime );
@@ -101,7 +88,7 @@
 
 				//
 
-				const fireNodeMaterial = new SpriteNodeMaterial();
+				const fireNodeMaterial = new THREE.SpriteNodeMaterial();
 				fireNodeMaterial.colorNode = mix( color( 0xb72f17 ), color( 0xb72f17 ), life );
 				fireNodeMaterial.positionNode = range( new THREE.Vector3( - 1, 1, - 1 ), new THREE.Vector3( 1, 2, 1 ) ).mul( lifeTime );
 				fireNodeMaterial.scaleNode = smokeNodeMaterial.scaleNode;
@@ -125,7 +112,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_performance_renderbundle.html

@@ -28,22 +28,23 @@
 	<script type="importmap">
 		{
 			"imports": {
-				"three": "../build/three.module.js",
+				"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 				"three/addons/": "./jsm/",
-				"three/nodes": "./jsm/nodes/Nodes.js",
 				"stats-gl": "https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"
 			}
 		}
 	</script>
 
 	<script type="module">
+
 		import * as THREE from 'three';
 
 		import Stats from 'stats-gl';
+
 		import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-		import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-		import { MeshToonNodeMaterial } from 'three/nodes';
 
 		let camera, scene, renderer;
 		let controls, stats;
@@ -158,7 +159,7 @@
 
 			for ( let i = 0; i < count; i ++ ) {
 
-				const material = new MeshToonNodeMaterial( {
+				const material = new THREE.MeshToonNodeMaterial( {
 					color: new THREE.Color( Math.random() * 0xffffff ),
 					side: THREE.DoubleSide,
 				} );
@@ -200,7 +201,7 @@
 
 			// renderer
 
-			renderer = new WebGPURenderer( { antialias: true, forceWebGL } );
+			renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgpu_pmrem_cubemap.html

@@ -11,9 +11,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -21,10 +21,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import { normalWorld, uniform, normalView, positionViewDirection, cameraViewMatrix, pmremTexture, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { normalWorld, uniform, normalView, positionViewDirection, cameraViewMatrix, pmremTexture } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -48,7 +45,7 @@
 
 				const forceWebGL = false;
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -74,7 +71,7 @@
 
 						scene.backgroundNode = pmremTexture( map, normalWorld, pmremRoughness );
 
-						scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
+						scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new THREE.MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
 
 						// gui
 

examples/webgpu_pmrem_equirectangular.html

@@ -11,9 +11,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -21,10 +21,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import { normalWorld, uniform, normalView, positionViewDirection, cameraViewMatrix, pmremTexture, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { normalWorld, uniform, normalView, positionViewDirection, cameraViewMatrix, pmremTexture } from 'three/tsl';
 
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 
@@ -48,7 +45,7 @@
 
 				const forceWebGL = false;
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
@@ -76,7 +73,7 @@
 
 						scene.backgroundNode = pmremTexture( map, normalWorld, pmremRoughness );
 
-						scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
+						scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new THREE.MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
 
 						// gui
 

examples/webgpu_pmrem_scene.html

@@ -11,9 +11,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -21,12 +21,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import { normalWorld, uniform, pmremTexture, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import PMREMGenerator from 'three/addons/renderers/common/extras/PMREMGenerator.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { normalWorld, uniform, pmremTexture } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
@@ -48,7 +43,7 @@
 
 				const forceWebGL = false;
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -93,7 +88,7 @@
 
 				//while ( scene.children.length > 0 ) scene.remove( scene.children[ 0 ] );
 
-				const sceneRT = new PMREMGenerator( renderer ).fromScene( scene );
+				const sceneRT = new THREE.PMREMGenerator( renderer ).fromScene( scene );
 
 				scene.background = null;
 				scene.backgroundNode = null;
@@ -103,7 +98,7 @@
 				const pmremRoughness = uniform( .5 );
 				const pmremNode = pmremTexture( sceneRT.texture, normalWorld, pmremRoughness );
 
-				scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
+				scene.add( new THREE.Mesh( new THREE.SphereGeometry( .5, 64, 64 ), new THREE.MeshBasicNodeMaterial( { colorNode: pmremNode } ) ) );
 
 				// gui
 

examples/webgpu_portal.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Portal</title>
+		<title>three.js webgpu - portal</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Portal
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - portal
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,12 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, color, mx_worley_noise_float, timerLocal, viewportTopLeft, vec2, uv, normalWorld, mx_fractal_noise_vec3, toneMapping, MeshBasicNodeMaterial } from 'three/nodes';
+			import { pass, color, mx_worley_noise_float, timerLocal, viewportTopLeft, vec2, uv, normalWorld, mx_fractal_noise_vec3, toneMapping } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			let camera, sceneMain, scenePortal, renderer;
@@ -129,7 +127,7 @@
 
 				const geometry = new THREE.PlaneGeometry( 1.7, 2 );
 
-				const material = new MeshBasicNodeMaterial();
+				const material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = pass( scenePortal, camera ).context( { getUV: () => viewportTopLeft } );
 				material.opacityNode = uv().distance( .5 ).remapClamp( .3, .5 ).oneMinus();
 				material.side = THREE.DoubleSide;
@@ -141,7 +139,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_postprocessing.html

@@ -10,9 +10,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -20,10 +20,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-			import { pass } from 'three/nodes';
+			import { pass } from 'three/tsl';
 
 			let camera, renderer, postProcessing;
 			let object;
@@ -32,7 +29,7 @@
 
 			function init() {
 
-				renderer = new WebGPURenderer();
+				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -71,7 +68,7 @@
 
 				// postprocessing
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();

examples/webgpu_postprocessing_afterimage.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - postprocessing - afterimage</title>
+		<title>three.js webgpu - postprocessing afterimage</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">
@@ -10,9 +10,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -20,13 +20,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { pass } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-			import { pass } from 'three/nodes';
-
 			let camera, scene, renderer;
 			let mesh, postProcessing, combinedPass;
 
@@ -41,7 +38,7 @@
 
 			function init() {
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -60,7 +57,7 @@
 
 				// postprocessing
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();

examples/webgpu_postprocessing_anamorphic.html

@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,14 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, cubeTexture, viewportTopLeft, uniform } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
+			import { pass, cubeTexture, viewportTopLeft, uniform } from 'three/tsl';
 
 			import { RGBMLoader } from 'three/addons/loaders/RGBMLoader.js';
 
@@ -50,14 +43,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
@@ -82,7 +67,7 @@
 
 				} );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -107,7 +92,7 @@
 				const anamorphicPass = scenePass.getTextureNode().anamorphic( threshold, scaleNode, samples );
 				anamorphicPass.resolution = new THREE.Vector2( .2, .2 ); // 1 = full resolution
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = scenePass.add( anamorphicPass.mul( intensity ) );
 				//postProcessing.outputNode = scenePass.add( anamorphicPass.getTextureNode().gaussianBlur() );
 

examples/webgpu_postprocessing_dof.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - postprocessing - dof</title>
+		<title>three.js webgpu - postprocessing dof</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">
@@ -10,9 +10,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -20,13 +20,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-			import { MeshBasicNodeMaterial, cubeTexture, positionWorld, oscSine, timerGlobal } from 'three/nodes';
-			import { pass } from 'three/nodes';
+			import { cubeTexture, positionWorld, oscSine, timerGlobal, pass } from 'three/tsl';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+
 			import Stats from 'three/addons/libs/stats.module.js';
 
 			//
@@ -68,7 +65,7 @@
 				const oscPos = oscSine( positionWorld.div( 1000 /* scene distance */ ).add( timerGlobal( .2 /* speed */ ) ) );
 
 				const geometry = new THREE.SphereGeometry( 60, 20, 10 );
-				const material = new MeshBasicNodeMaterial();
+				const material = new THREE.MeshBasicNodeMaterial();
 				material.colorNode = cubeTextureNode.mul( oscPos );
 
 				mesh = new THREE.InstancedMesh( geometry, material, count );
@@ -99,7 +96,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -107,7 +104,7 @@
 
 				// post processing
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
 

examples/webgpu_postprocessing_sobel.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - postprocessing - sobel</title>
+		<title>three.js webgpu - postprocessing sobel</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">
@@ -10,9 +10,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -20,13 +20,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
+			import { pass } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-			import { pass } from 'three/nodes';
-
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let camera, scene, renderer;
@@ -65,7 +62,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -80,7 +77,7 @@
 
 				// postprocessing
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 
 				const scenePass = pass( scene, camera );
 				const scenePassColor = scenePass.getTextureNode();

examples/webgpu_reflection.html

@@ -15,9 +15,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,16 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshPhongNodeMaterial, color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/nodes';
+			import { color, pass, reflector, normalWorld, texture, uv, viewportTopLeft } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -49,14 +43,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
 				camera.position.set( 2, 2.5, 3 );
 
@@ -127,7 +113,7 @@
 				reflection.uvNode = reflection.uvNode.add( floorNormalOffset );
 				scene.add( reflection.target );
 
-				const floorMaterial = new MeshPhongNodeMaterial();
+				const floorMaterial = new THREE.MeshPhongNodeMaterial();
 				floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection );
 
 				const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
@@ -138,7 +124,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -167,7 +153,7 @@
 
 				const vignet = viewportTopLeft.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = scenePassColorBlurred.mul( vignet );
 
 				//

examples/webgpu_rtt.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - RTT</title>
+		<title>three.js webgpu - rtt</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - RTT
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - rtt
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,14 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, uniform, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			import QuadMesh from 'three/addons/objects/QuadMesh.js';
+			import { texture, uniform } from 'three/tsl';
 
 			let camera, scene, renderer;
 			const mouse = new THREE.Vector2();
@@ -46,14 +39,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 3;
 
@@ -66,7 +51,7 @@
 				const uvTexture = loader.load( './textures/uv_grid_opengl.jpg' );
 
 				const geometryBox = new THREE.BoxGeometry();
-				const materialBox = new MeshBasicNodeMaterial();
+				const materialBox = new THREE.MeshBasicNodeMaterial();
 				materialBox.colorNode = texture( uvTexture );
 
 				//
@@ -76,7 +61,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -93,10 +78,10 @@
 
 				const screenFXNode = uniform( mouse );
 
-				const materialFX = new MeshBasicNodeMaterial();
+				const materialFX = new THREE.MeshBasicNodeMaterial();
 				materialFX.colorNode = texture( renderTarget.texture ).rgb.saturation( screenFXNode.x.oneMinus() ).hue( screenFXNode.y );
 
-				quadMesh = new QuadMesh( materialFX );
+				quadMesh = new THREE.QuadMesh( materialFX );
 
 			}
 

examples/webgpu_sandbox.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Sandbox</title>
+		<title>three.js webgpu - sandbox</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">
@@ -8,15 +8,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Sandbox
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - sandbox
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/debug": "../src/Three.WebGPU.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,13 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { timerLocal, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute, MeshBasicNodeMaterial, PointsNodeMaterial, LineBasicNodeMaterial } from 'three/nodes';
+			import { timerLocal, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute } from 'three/tsl';
 
 			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer;
 
 			let box;
@@ -39,14 +37,6 @@
 
 			async function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 				camera.position.z = 4;
 
@@ -55,7 +45,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -82,7 +72,7 @@
 				// box mesh
 
 				const geometryBox = new THREE.BoxGeometry();
-				const materialBox = new MeshBasicNodeMaterial();
+				const materialBox = new THREE.MeshBasicNodeMaterial();
 
 				// birection speed
 				const timerScaleNode = timerLocal().mul( vec2( - 0.5, 0.1 ) );
@@ -103,7 +93,7 @@
 				// displace example
 
 				const geometrySphere = new THREE.SphereGeometry( .5, 64, 64 );
-				const materialSphere = new MeshBasicNodeMaterial();
+				const materialSphere = new THREE.MeshBasicNodeMaterial();
 
 				const displaceY = texture( textureDisplace ).x.mul( 0.25 );
 
@@ -119,7 +109,7 @@
 				// data texture
 
 				const geometryPlane = new THREE.PlaneGeometry();
-				const materialPlane = new MeshBasicNodeMaterial();
+				const materialPlane = new THREE.MeshBasicNodeMaterial();
 				materialPlane.colorNode = texture( createDataTexture() ).add( color( 0x0000FF ) );
 				materialPlane.transparent = true;
 
@@ -129,7 +119,7 @@
 
 				// compressed texture
 
-				const materialCompressed = new MeshBasicNodeMaterial();
+				const materialCompressed = new THREE.MeshBasicNodeMaterial();
 				materialCompressed.colorNode = texture( ktxTexture );
 				materialCompressed.emissiveNode = oscSine().mix( color( 0x663300 ), color( 0x0000FF ) );
 				materialCompressed.alphaTestNode = oscSine();
@@ -152,7 +142,7 @@
 				}
 
 				const geometryPoints = new THREE.BufferGeometry().setFromPoints( points );
-				const materialPoints = new PointsNodeMaterial();
+				const materialPoints = new THREE.PointsNodeMaterial();
 
 				materialPoints.colorNode = positionLocal.mul( 3 );
 
@@ -172,7 +162,7 @@
 
 				geometryLine.setAttribute( 'color', geometryLine.getAttribute( 'position' ) );
 
-				const materialLine = new LineBasicNodeMaterial();
+				const materialLine = new THREE.LineBasicNodeMaterial();
 				materialLine.colorNode = attribute( 'color' );
 
 				const line = new THREE.Line( geometryLine, materialLine );

examples/webgpu_shadertoy.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - shadertoy</title>
+		<title>three.js webgpu - shadertoy</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">
@@ -8,21 +8,22 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - ShaderToy
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - shadertoy
 			<br />Shader created by <a href="https://www.shadertoy.com/view/Mt2SzR" target="_blank" rel="noopener">jackdavenport</a> and <a href="https://www.shadertoy.com/view/3tcBzH" target="_blank" rel="noopener">trinketMage</a>.
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="x-shader/x-fragment" id="example1">
+
 			// https://www.shadertoy.com/view/Mt2SzR
 
 			float random(float x) {
@@ -92,6 +93,7 @@
 		</script>
 
 		<script type="x-shader/x-fragment" id="example2">
+
 			// https://www.shadertoy.com/view/3tcBzH
 
 			float rand(vec2 co){
@@ -167,18 +169,13 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
+			import { oscSine, timerLocal } from 'three/tsl';
 
 			import Transpiler from 'three/addons/transpiler/Transpiler.js';
 			import ShaderToyDecoder from 'three/addons/transpiler/ShaderToyDecoder.js';
 			import TSLEncoder from 'three/addons/transpiler/TSLEncoder.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
-			class ShaderToyNode extends Nodes.Node {
+			class ShaderToyNode extends THREE.Node {
 
 				constructor() {
 
@@ -206,7 +203,7 @@
 
 					const jsCode = this.transpile( glsl, true );
 
-					const { mainImage } = eval( jsCode )( Nodes );
+					const { mainImage } = eval( jsCode )( THREE );
 
 					this.mainImage = mainImage;
 
@@ -244,16 +241,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
-				//
-
 				const example1Code = document.getElementById( 'example1' ).textContent;
 				const example2Code = document.getElementById( 'example2' ).textContent;
 
@@ -270,15 +257,15 @@
 
 				const geometry = new THREE.PlaneGeometry( 2, 2 );
 
-				const material = new Nodes.MeshBasicNodeMaterial();
-				material.colorNode = Nodes.oscSine( Nodes.timerLocal( .3 ) ).mix( shaderToy1Node, shaderToy2Node );
+				const material = new THREE.MeshBasicNodeMaterial();
+				material.colorNode = oscSine( timerLocal( .3 ) ).mix( shaderToy1Node, shaderToy2Node );
 
 				const quad = new THREE.Mesh( geometry, material );
 				scene.add( quad );
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_shadowmap.html

@@ -8,15 +8,15 @@
 	</head>
 	<body>
 		<div id="info">
-		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu shadow map
+		<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - webgpu shadow map
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,14 +24,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { mx_fractal_noise_vec3, positionWorld, vec4, tslFn, color, vertexIndex } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { mx_fractal_noise_vec3, positionWorld, vec4, tslFn, color, vertexIndex, MeshPhongNodeMaterial } from 'three/nodes';
+
 			let camera, scene, renderer, clock;
 			let dirLight, spotLight;
 			let torusKnot, dirGroup;
@@ -40,14 +36,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 10, 20 );
 
@@ -94,7 +82,7 @@
 				// geometry
 
 				const geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 80 );
-				const material = new MeshPhongNodeMaterial( {
+				const material = new THREE.MeshPhongNodeMaterial( {
 					color: 0x999999,
 					shininess: 0,
 					specular: 0x222222
@@ -182,7 +170,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_skinning.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Skinning</title>
+		<title>three.js webgpu - skinning</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Skinning
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - skinning
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,15 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { toneMapping, color, viewportTopLeft } from 'three/nodes';
+			import { toneMapping, color, viewportTopLeft } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer;
 
 			let mixer, clock;
@@ -42,14 +37,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
 				camera.position.set( 1, 2, 3 );
 
@@ -84,7 +71,7 @@
 
 				//renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_skinning_instancing.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Skinning Instancing</title>
+		<title>three.js webgpu - skinning instancing</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - WebGPU - Skinning Instancing
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - skinning instancing
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,16 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { pass, mix, range, color, oscSine, timerLocal, MeshStandardNodeMaterial } from 'three/nodes';
+			import { pass, mix, range, color, oscSine, timerLocal } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import PostProcessing from 'three/addons/renderers/common/PostProcessing.js';
-
 			let camera, scene, renderer;
 			let postProcessing;
 
@@ -44,14 +38,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 40 );
 				camera.position.set( 1, 2, 3 );
 
@@ -104,7 +90,7 @@
 							// random [ 0, 1 ] values between instances
 							const randomMetalness = range( 0, 1 );
 
-							child.material = new MeshStandardNodeMaterial();
+							child.material = new THREE.MeshStandardNodeMaterial();
 							child.material.roughness = .1;
 							child.material.metalnessNode = mix( 0.0, randomMetalness, oscNode );
 							child.material.colorNode = mix( color( 0xFFFFFF ), randomColors, oscNode );
@@ -134,7 +120,7 @@
 
 				// renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -149,7 +135,7 @@
 				const scenePassColorBlurred = scenePassColor.gaussianBlur();
 				scenePassColorBlurred.directionNode = scenePassDepth;
 
-				postProcessing = new PostProcessing( renderer );
+				postProcessing = new THREE.PostProcessing( renderer );
 				postProcessing.outputNode = scenePassColorBlurred;
 
 
@@ -174,10 +160,8 @@
 
 				if ( mixer ) mixer.update( delta );
 
-
 				postProcessing.render();
 
-
 			}
 
 		</script>

examples/webgpu_skinning_points.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Skinning Points</title>
+		<title>three.js webgpu - skinning points</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">
@@ -9,15 +9,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Skinning Points
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - skinning points
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -25,15 +25,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { uniform, skinning, PointsNodeMaterial } from 'three/nodes';
+			import { uniform, skinning } from 'three/tsl';
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer;
 
 			let mixer, clock;
@@ -42,14 +37,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 0, 300, - 85 );
 
@@ -73,7 +60,7 @@
 
 							child.visible = false;
 
-							const materialPoints = new PointsNodeMaterial();
+							const materialPoints = new THREE.PointsNodeMaterial();
 							materialPoints.colorNode = uniform( new THREE.Color() );
 							materialPoints.positionNode = skinning( child );
 
@@ -90,7 +77,7 @@
 
 				//renderer
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_sprites.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Sprites</title>
+		<title>three.js webgpu - sprites</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">
@@ -8,15 +8,15 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Sprites
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - sprites
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -24,12 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { texture, uv, userData, rangeFog, color, SpriteNodeMaterial } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { texture, uv, userData, rangeFog, color } from 'three/tsl';
 
 			let camera, scene, renderer;
 
@@ -43,14 +38,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				const width = window.innerWidth;
 				const height = window.innerHeight;
 
@@ -78,7 +65,7 @@
 
 				const textureNode = texture( map );
 
-				const material = new SpriteNodeMaterial();
+				const material = new THREE.SpriteNodeMaterial();
 				material.colorNode = textureNode.mul( uv() ).mul( 2 ).saturate();
 				material.opacityNode = textureNode.a;
 				material.rotationNode = userData( 'rotation', 'float' ); // get value of: sprite.userData.rotation
@@ -107,7 +94,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );

examples/webgpu_storage_buffer.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Storage PBO External Element</title>
+		<title>three.js webgpu - storage pbo external element</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">
@@ -42,9 +42,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -52,10 +52,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { storageObject, If, vec3, uv, uint, float, tslFn, instanceIndex, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import StorageInstancedBufferAttribute from 'three/addons/renderers/common/StorageInstancedBufferAttribute.js';
+			import { storageObject, If, vec3, uv, uint, float, tslFn, instanceIndex } from 'three/tsl';
 
 			const timestamps = {
 				webgpu: document.getElementById( 'timestamps' ),
@@ -90,7 +87,7 @@
 					const typeSize = i + 1;
 					const array = new Array( size * typeSize ).fill( 0 );
 
-					const arrayBuffer = new StorageInstancedBufferAttribute( new Float32Array( array ), typeSize );
+					const arrayBuffer = new THREE.StorageInstancedBufferAttribute( new Float32Array( array ), typeSize );
 
 					arrayBufferNodes.push( storageObject( arrayBuffer, type[ i ], size ) );
 
@@ -123,7 +120,7 @@
 
 				const compute = computeInvertOrder().compute( size );
 
-				const material = new MeshBasicNodeMaterial( { color: 0x00ff00 } );
+				const material = new THREE.MeshBasicNodeMaterial( { color: 0x00ff00 } );
 
 				material.colorNode = tslFn( () => {
 
@@ -182,7 +179,7 @@
 				const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( plane );
 
-				const renderer = new WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
+				const renderer = new THREE.WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 

examples/webgpu_texturegrad.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - WebGPU - Texture Gradient</title>
+		<title>three.js webgpu - texture gradient</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">
@@ -17,9 +17,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -27,10 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { If, vec4, float, timerLocal, cos, pow, vec2, uv, texture, tslFn, MeshBasicNodeMaterial } from 'three/nodes';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
+			import { If, vec4, float, timerLocal, cos, pow, vec2, uv, texture, tslFn } from 'three/tsl';
 
 			// WebGPU Backend
 			init();
@@ -48,7 +45,7 @@
 
 				// texture
 
-				const material = new MeshBasicNodeMaterial( { color: 0xffffff } );
+				const material = new THREE.MeshBasicNodeMaterial( { color: 0xffffff } );
 
 				// load async brick_diffuse
 				const map = await new THREE.TextureLoader().loadAsync( 'textures/uv_grid_opengl.jpg' );
@@ -93,7 +90,7 @@
 				const box = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( box );
 
-				const renderer = new WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
+				const renderer = new THREE.WebGPURenderer( { antialias: false, forceWebGL: forceWebGL, trackTimestamp: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth / 2, window.innerHeight );
 

examples/webgpu_textures_2d-array.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - 2D texture array</title>
+		<title>three.js webgpu - 2d texture array</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">
@@ -18,9 +18,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,24 +28,11 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { MeshBasicNodeMaterial, texture, uv, oscTriangle, timerLocal } from 'three/nodes';
-
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
+			import { texture, uv, oscTriangle, timerLocal } from 'three/tsl';
 
 			import Stats from 'three/addons/libs/stats.module.js';
 			import { unzipSync } from 'three/addons/libs/fflate.module.js';
 
-			if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-				document.body.appendChild( WebGPU.getErrorMessage() );
-
-				throw new Error( 'No WebGPU or WebGL2 support' );
-
-			}
-
 			let camera, scene, mesh, renderer, stats;
 
 			const planeWidth = 50;
@@ -83,7 +70,7 @@
 						oscLayers = oscLayers.add( 1 ).mul( .5 ); // convert osc range of [ -1, 1 ] to [ 0, 1 ]
 						oscLayers = oscLayers.mul( map.image.depth ); // scale osc range to texture depth
 
-						const material = new MeshBasicNodeMaterial();
+						const material = new THREE.MeshBasicNodeMaterial();
 						material.colorNode = texture( map, coord ).depth( oscLayers ).r.remap( 0, 1, - .1, 1.8 ); // remap to make it more visible
 
 						const geometry = new THREE.PlaneGeometry( planeWidth, planeHeight );
@@ -94,7 +81,7 @@
 
 					} );
 
-				renderer = new WebGPURenderer();
+				renderer = new THREE.WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_textures_anisotropy.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - materials - anisotropic texture filtering</title>
+		<title>three.js webgpu - anisotropic texture filtering</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">
@@ -57,7 +57,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -68,8 +69,6 @@
 			import * as THREE from 'three';
 
 			import Stats from 'three/addons/libs/stats.module.js';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 
 			let container, stats;
 
@@ -87,7 +86,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL: false } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: false } );
 
 				// RENDERER
 

examples/webgpu_textures_partialupdate.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgl - texture - webgpu partial update</title>
+		<title>three.js webgl - webgpu partial texture update</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">
@@ -9,16 +9,16 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - partial webgpu texture update <br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - partial webgpu texture update<br/>
 			replace parts of an existing texture with all data of another texture
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -26,7 +26,6 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let camera, scene, renderer, clock, dataTexture, diffuseMap;
 
@@ -67,7 +66,7 @@
 
 				//
 
-				renderer = new WebGPURenderer( { antialias: true, forceWebGL: false } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: false } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgpu_tsl_editor.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - webgpu - tsl editor</title>
+		<title>three.js webgpu - tsl editor</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">
@@ -41,9 +41,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -51,14 +51,10 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
 
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
-
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import WGSLNodeBuilder from 'three/addons/renderers/webgpu/nodes/WGSLNodeBuilder.js';
-			import GLSLNodeBuilder from 'three/addons/renderers/webgl/nodes/GLSLNodeBuilder.js';
+			import WebGPURenderer from '../src/renderers/webgpu/WebGPURenderer.js';
+			import WGSLNodeBuilder from '../src/renderers/webgpu/nodes/WGSLNodeBuilder.js';
+			import GLSLNodeBuilder from '../src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -66,14 +62,6 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
-
-					document.body.appendChild( WebGPU.getErrorMessage() );
-
-					throw new Error( 'No WebGPU or WebGL2 support' );
-
-				}
-
 				// add the depedencies
 
 				const width = 200;
@@ -94,8 +82,8 @@
 				renderer.setSize( 200, 200 );
 				rendererDOM.appendChild( renderer.domElement );
 
-				const material = new Nodes.NodeMaterial();
-				material.fragmentNode = Nodes.vec4( 0, 0, 0, 1 );
+				const material = new THREE.NodeMaterial();
+				material.fragmentNode = THREE.vec4( 0, 0, 0, 1 );
 
 				const mesh = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
 				scene.add( mesh );
@@ -127,7 +115,7 @@
 
 					const tslCode = `// Simple uv.x animation
 
-const { texture, uniform, vec2, vec4, uv, oscSine, timerLocal } = TSL;
+const { texture, uniform, vec2, vec4, uv, oscSine, timerLocal } = THREE;
 
 //const samplerTexture = new THREE.Texture();
 const samplerTexture = new THREE.TextureLoader().load( './textures/uv_grid_opengl.jpg' );
@@ -180,7 +168,7 @@ output = vec4( finalColor, opacity );
 						try {
 
 							const tslCode = `let output = null;\n${ editor.getValue() }\nreturn { output };`;
-							const nodes = new Function( 'THREE', 'TSL', tslCode )( THREE, Nodes );
+							const nodes = new Function( 'THREE', tslCode )( THREE );
 
 							mesh.material.fragmentNode = nodes.output;
 							mesh.material.needsUpdate = true;

examples/webgpu_tsl_interoperability.html

@@ -1,6 +1,6 @@
 <html lang="en">
 	<head>
-		<title>three.js - shadertoy</title>
+		<title>three.js - wgsl/tsl node interoperability</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">
@@ -8,7 +8,7 @@
 	<body>
 
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - WGSL/TSL Node Interoperability
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - wgsl/tsl node interoperability
 			<br />CRT Shader adapted from <a href="https://mini.gmshaders.com/p/gm-shaders-mini-crt" target="_blank" rel="noopener"> Xor</a>.
 		</div>
 		<div id="container">
@@ -18,9 +18,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
@@ -28,11 +28,9 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import WebGPU from 'three/addons/capabilities/WebGPU.js';
-			import WebGL from 'three/addons/capabilities/WebGL.js';
+			import { tslFn, attribute, varyingProperty, timerLocal, uniform, wgslFn, texture, sampler, uv, clamp, float, vec2, vec3, fract, floor, positionGeometry, sin } from 'three/tsl';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-			import { tslFn, sampler, attribute, varyingProperty, timerLocal, uniform, wgslFn, texture, uv, clamp, float, vec2, vec3, fract, floor, MeshBasicNodeMaterial, positionGeometry, sin } from 'three/nodes';
+			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
@@ -58,11 +56,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
+				if ( WebGPU.isAvailable() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU or WebGL2 support' );
+					throw new Error( 'No WebGPU support' );
 
 				}
 
@@ -167,7 +165,7 @@
 
 				//
 
-				const wgslShaderMaterial = new MeshBasicNodeMaterial();
+				const wgslShaderMaterial = new THREE.MeshBasicNodeMaterial();
 
 				// Accessed attributes correspond to a Mesh or BufferGeometry's setAttribute() calls.
 				wgslShaderMaterial.positionNode = wgslVertexShader( {
@@ -254,7 +252,7 @@
 
 				} );
 
-				const tslShaderMaterial = new MeshBasicNodeMaterial();
+				const tslShaderMaterial = new THREE.MeshBasicNodeMaterial();
 				tslShaderMaterial.positionNode = tslVertexShader();
 				tslShaderMaterial.colorNode = tslFragmentShader();
 
@@ -271,7 +269,7 @@
 				tslQuad.position.y -= 0.5;
 				scene.add( tslQuad );
 
-				renderer = new WebGPURenderer( { antialias: true, canvas: canvas } );
+				renderer = new THREE.WebGPURenderer( { antialias: true, canvas: canvas } );
 				renderer.setPixelRatio( dpr );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_tsl_transpiler.html

@@ -31,9 +31,9 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>

examples/webgpu_video_panorama.html

@@ -26,7 +26,8 @@
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
 					"three/addons/": "./jsm/"
 				}
 			}
@@ -36,8 +37,6 @@
 
 			import * as THREE from 'three';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let camera, scene, renderer;
 
 			let isUserInteracting = false,
@@ -74,7 +73,7 @@
 				const mesh = new THREE.Mesh( geometry, material );
 				scene.add( mesh );
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );

examples/webgpu_volume_cloud.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - volume - cloud</title>
+		<title>three.js webgpu - volumetric cloud</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">
@@ -9,30 +9,29 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volume - cloud
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volumetric cloud
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
+
 			import * as THREE from 'three';
-			import { MeshBasicNodeMaterial, VolumeNodeMaterial, vec3, materialReference, smoothstep, If, Break, tslFn } from 'three/nodes';
+			import { vec3, materialReference, smoothstep, If, Break, tslFn } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let renderer, scene, camera;
 			let mesh;
 
@@ -40,7 +39,7 @@
 
 			function init() {
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -72,7 +71,7 @@
 
 				const sky = new THREE.Mesh(
 					new THREE.SphereGeometry( 10 ),
-					new MeshBasicNodeMaterial( { map: skyMap, side: THREE.BackSide } )
+					new THREE.MeshBasicNodeMaterial( { map: skyMap, side: THREE.BackSide } )
 				);
 				scene.add( sky );
 
@@ -112,7 +111,7 @@
 
 				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 
-				const material = new VolumeNodeMaterial( {
+				const material = new THREE.VolumeNodeMaterial( {
 					side: THREE.BackSide,
 					transparent: true
 				} );
@@ -140,7 +139,7 @@
 
 					finalColor.a.addAssign( finalColor.a.oneMinus().mul( mapValue ) );
 
-					If( finalColor.a.greaterThanEqual(  0.95 ), () => {
+					If( finalColor.a.greaterThanEqual( 0.95 ), () => {
 
 						Break();
 

examples/webgpu_volume_perlin.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js webgpu - volume - perlin</title>
+		<title>three.js webgpu - volumetric perlin</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">
@@ -9,30 +9,28 @@
 
 	<body>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volume - perlin
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - volumetric perlin
 		</div>
 
 		<script type="importmap">
 			{
 				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/",
-					"three/nodes": "./jsm/nodes/Nodes.js"
+					"three": "../build/three.webgpu.js",
+					"three/tsl": "../build/three.webgpu.js",
+					"three/addons/": "./jsm/"
 				}
 			}
 		</script>
 
 		<script type="module">
 			import * as THREE from 'three';
-			import { Break, If, VolumeNodeMaterial, vec3, materialReference, tslFn } from 'three/nodes';
+			import { Break, If, vec3, materialReference, tslFn } from 'three/tsl';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
-
 			let renderer, scene, camera;
 			let mesh;
 
@@ -40,7 +38,7 @@
 
 			function init() {
 
-				renderer = new WebGPURenderer( { antialias: true } );
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
@@ -90,7 +88,7 @@
 				// Material
 
 				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
-				const material = new VolumeNodeMaterial( {
+				const material = new THREE.VolumeNodeMaterial( {
 					side: THREE.BackSide,
 				} );
 

package.json

@@ -15,13 +15,14 @@
     "./addons": "./examples/jsm/Addons.js",
     "./addons/*": "./examples/jsm/*",
     "./src/*": "./src/*",
-    "./nodes": "./examples/jsm/nodes/Nodes.js"
+    "./webgpu": "./build/three.webgpu.js",
+    "./tsl": "./build/three.webgpu.js"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/mrdoob/three.js"
   },
-  "sideEffects": ["./examples/jsm/nodes/**/*"],
+  "sideEffects": [ "./src/nodes/**/*" ],
   "files": [
     "build",
     "examples/jsm",
@@ -62,7 +63,7 @@
     "test-e2e": "node test/e2e/puppeteer.js",
     "test-e2e-cov": "node test/e2e/check-coverage.js",
     "test-treeshake": "rollup -c test/rollup.treeshake.config.js",
-    "test-circular-deps": "dpdm --no-warning --no-tree --exit-code circular:1 examples/jsm/nodes/Nodes.js",
+    "test-circular-deps": "dpdm --no-warning --no-tree --exit-code circular:1 src/nodes/Nodes.js",
     "make-screenshot": "node test/e2e/puppeteer.js --make"
   },
   "keywords": [

src/Three.WebGPU.js

@@ -0,0 +1,193 @@
+import { REVISION } from './constants.js';
+
+export { WebGLArrayRenderTarget } from './renderers/WebGLArrayRenderTarget.js';
+export { WebGL3DRenderTarget } from './renderers/WebGL3DRenderTarget.js';
+export { WebGLCubeRenderTarget } from './renderers/WebGLCubeRenderTarget.js';
+export { WebGLRenderTarget } from './renderers/WebGLRenderTarget.js';
+//export { WebGLRenderer } from './renderers/WebGLRenderer.js';
+//export { ShaderLib } from './renderers/shaders/ShaderLib.js';
+//export { UniformsLib } from './renderers/shaders/UniformsLib.js';
+//export { UniformsUtils } from './renderers/shaders/UniformsUtils.js';
+//export { ShaderChunk } from './renderers/shaders/ShaderChunk.js';
+export { FogExp2 } from './scenes/FogExp2.js';
+export { Fog } from './scenes/Fog.js';
+export { Scene } from './scenes/Scene.js';
+export { Sprite } from './objects/Sprite.js';
+export { LOD } from './objects/LOD.js';
+export { SkinnedMesh } from './objects/SkinnedMesh.js';
+export { Skeleton } from './objects/Skeleton.js';
+export { Bone } from './objects/Bone.js';
+export { Mesh } from './objects/Mesh.js';
+export { InstancedMesh } from './objects/InstancedMesh.js';
+export { BatchedMesh } from './objects/BatchedMesh.js';
+export { LineSegments } from './objects/LineSegments.js';
+export { LineLoop } from './objects/LineLoop.js';
+export { Line } from './objects/Line.js';
+export { Points } from './objects/Points.js';
+export { Group } from './objects/Group.js';
+export { VideoTexture } from './textures/VideoTexture.js';
+export { FramebufferTexture } from './textures/FramebufferTexture.js';
+export { Source } from './textures/Source.js';
+export { DataTexture } from './textures/DataTexture.js';
+export { DataArrayTexture } from './textures/DataArrayTexture.js';
+export { Data3DTexture } from './textures/Data3DTexture.js';
+export { CompressedTexture } from './textures/CompressedTexture.js';
+export { CompressedArrayTexture } from './textures/CompressedArrayTexture.js';
+export { CompressedCubeTexture } from './textures/CompressedCubeTexture.js';
+export { CubeTexture } from './textures/CubeTexture.js';
+export { CanvasTexture } from './textures/CanvasTexture.js';
+export { DepthTexture } from './textures/DepthTexture.js';
+export { Texture } from './textures/Texture.js';
+export * from './geometries/Geometries.js';
+export * from './materials/Materials.js';
+export { Material } from './materials/Material.js';
+export { AnimationLoader } from './loaders/AnimationLoader.js';
+export { CompressedTextureLoader } from './loaders/CompressedTextureLoader.js';
+export { CubeTextureLoader } from './loaders/CubeTextureLoader.js';
+export { DataTextureLoader } from './loaders/DataTextureLoader.js';
+export { TextureLoader } from './loaders/TextureLoader.js';
+export { ObjectLoader } from './loaders/ObjectLoader.js';
+export { MaterialLoader } from './loaders/MaterialLoader.js';
+export { BufferGeometryLoader } from './loaders/BufferGeometryLoader.js';
+export { DefaultLoadingManager, LoadingManager } from './loaders/LoadingManager.js';
+export { ImageLoader } from './loaders/ImageLoader.js';
+export { ImageBitmapLoader } from './loaders/ImageBitmapLoader.js';
+export { FileLoader } from './loaders/FileLoader.js';
+export { Loader } from './loaders/Loader.js';
+export { LoaderUtils } from './loaders/LoaderUtils.js';
+export { Cache } from './loaders/Cache.js';
+export { AudioLoader } from './loaders/AudioLoader.js';
+export { SpotLight } from './lights/SpotLight.js';
+export { PointLight } from './lights/PointLight.js';
+export { RectAreaLight } from './lights/RectAreaLight.js';
+export { HemisphereLight } from './lights/HemisphereLight.js';
+export { DirectionalLight } from './lights/DirectionalLight.js';
+export { AmbientLight } from './lights/AmbientLight.js';
+export { Light } from './lights/Light.js';
+export { LightProbe } from './lights/LightProbe.js';
+export { StereoCamera } from './cameras/StereoCamera.js';
+export { PerspectiveCamera } from './cameras/PerspectiveCamera.js';
+export { OrthographicCamera } from './cameras/OrthographicCamera.js';
+export { CubeCamera } from './cameras/CubeCamera.js';
+export { ArrayCamera } from './cameras/ArrayCamera.js';
+export { Camera } from './cameras/Camera.js';
+export { AudioListener } from './audio/AudioListener.js';
+export { PositionalAudio } from './audio/PositionalAudio.js';
+export { AudioContext } from './audio/AudioContext.js';
+export { AudioAnalyser } from './audio/AudioAnalyser.js';
+export { Audio } from './audio/Audio.js';
+export { VectorKeyframeTrack } from './animation/tracks/VectorKeyframeTrack.js';
+export { StringKeyframeTrack } from './animation/tracks/StringKeyframeTrack.js';
+export { QuaternionKeyframeTrack } from './animation/tracks/QuaternionKeyframeTrack.js';
+export { NumberKeyframeTrack } from './animation/tracks/NumberKeyframeTrack.js';
+export { ColorKeyframeTrack } from './animation/tracks/ColorKeyframeTrack.js';
+export { BooleanKeyframeTrack } from './animation/tracks/BooleanKeyframeTrack.js';
+export { PropertyMixer } from './animation/PropertyMixer.js';
+export { PropertyBinding } from './animation/PropertyBinding.js';
+export { KeyframeTrack } from './animation/KeyframeTrack.js';
+export { AnimationUtils } from './animation/AnimationUtils.js';
+export { AnimationObjectGroup } from './animation/AnimationObjectGroup.js';
+export { AnimationMixer } from './animation/AnimationMixer.js';
+export { AnimationClip } from './animation/AnimationClip.js';
+export { AnimationAction } from './animation/AnimationAction.js';
+export { RenderTarget } from './core/RenderTarget.js';
+export { Uniform } from './core/Uniform.js';
+export { UniformsGroup } from './core/UniformsGroup.js';
+export { InstancedBufferGeometry } from './core/InstancedBufferGeometry.js';
+export { BufferGeometry } from './core/BufferGeometry.js';
+export { InterleavedBufferAttribute } from './core/InterleavedBufferAttribute.js';
+export { InstancedInterleavedBuffer } from './core/InstancedInterleavedBuffer.js';
+export { InterleavedBuffer } from './core/InterleavedBuffer.js';
+export { InstancedBufferAttribute } from './core/InstancedBufferAttribute.js';
+export { GLBufferAttribute } from './core/GLBufferAttribute.js';
+export * from './core/BufferAttribute.js';
+export { Object3D } from './core/Object3D.js';
+export { Raycaster } from './core/Raycaster.js';
+export { Layers } from './core/Layers.js';
+export { EventDispatcher } from './core/EventDispatcher.js';
+export { Clock } from './core/Clock.js';
+export { QuaternionLinearInterpolant } from './math/interpolants/QuaternionLinearInterpolant.js';
+export { LinearInterpolant } from './math/interpolants/LinearInterpolant.js';
+export { DiscreteInterpolant } from './math/interpolants/DiscreteInterpolant.js';
+export { CubicInterpolant } from './math/interpolants/CubicInterpolant.js';
+export { Interpolant } from './math/Interpolant.js';
+export { Triangle } from './math/Triangle.js';
+export { MathUtils } from './math/MathUtils.js';
+export { Spherical } from './math/Spherical.js';
+export { Cylindrical } from './math/Cylindrical.js';
+export { Plane } from './math/Plane.js';
+export { Frustum } from './math/Frustum.js';
+export { Sphere } from './math/Sphere.js';
+export { Ray } from './math/Ray.js';
+export { Matrix4 } from './math/Matrix4.js';
+export { Matrix3 } from './math/Matrix3.js';
+export { Box3 } from './math/Box3.js';
+export { Box2 } from './math/Box2.js';
+export { Line3 } from './math/Line3.js';
+export { Euler } from './math/Euler.js';
+export { Vector4 } from './math/Vector4.js';
+export { Vector3 } from './math/Vector3.js';
+export { Vector2 } from './math/Vector2.js';
+export { Quaternion } from './math/Quaternion.js';
+export { Color } from './math/Color.js';
+export { ColorManagement } from './math/ColorManagement.js';
+export { SphericalHarmonics3 } from './math/SphericalHarmonics3.js';
+export { SpotLightHelper } from './helpers/SpotLightHelper.js';
+export { SkeletonHelper } from './helpers/SkeletonHelper.js';
+export { PointLightHelper } from './helpers/PointLightHelper.js';
+export { HemisphereLightHelper } from './helpers/HemisphereLightHelper.js';
+export { GridHelper } from './helpers/GridHelper.js';
+export { PolarGridHelper } from './helpers/PolarGridHelper.js';
+export { DirectionalLightHelper } from './helpers/DirectionalLightHelper.js';
+export { CameraHelper } from './helpers/CameraHelper.js';
+export { BoxHelper } from './helpers/BoxHelper.js';
+export { Box3Helper } from './helpers/Box3Helper.js';
+export { PlaneHelper } from './helpers/PlaneHelper.js';
+export { ArrowHelper } from './helpers/ArrowHelper.js';
+export { AxesHelper } from './helpers/AxesHelper.js';
+export * from './extras/curves/Curves.js';
+export { Shape } from './extras/core/Shape.js';
+export { Path } from './extras/core/Path.js';
+export { ShapePath } from './extras/core/ShapePath.js';
+export { CurvePath } from './extras/core/CurvePath.js';
+export { Curve } from './extras/core/Curve.js';
+export { DataUtils } from './extras/DataUtils.js';
+export { ImageUtils } from './extras/ImageUtils.js';
+export { ShapeUtils } from './extras/ShapeUtils.js';
+//export { PMREMGenerator } from './extras/PMREMGenerator.js';
+//export { WebGLUtils } from './renderers/webgl/WebGLUtils.js';
+export { createCanvasElement } from './utils.js';
+export * from './constants.js';
+export * from './Three.Legacy.js';
+
+export { default as WebGPURenderer } from './renderers/webgpu/WebGPURenderer.js';
+export { default as QuadMesh } from './renderers/common/QuadMesh.js';
+export { default as PMREMGenerator } from './renderers/common/extras/PMREMGenerator.js';
+export { default as PostProcessing } from './renderers/common/PostProcessing.js';
+export { default as StorageTexture } from './renderers/common/StorageTexture.js';
+export { default as StorageBufferAttribute } from './renderers/common/StorageBufferAttribute.js';
+export { default as StorageInstancedBufferAttribute } from './renderers/common/StorageInstancedBufferAttribute.js';
+export { default as IESSpotLight } from './lights/webgpu/IESSpotLight.js';
+export * from './nodes/Nodes.js';
+
+if ( typeof __THREE_DEVTOOLS__ !== 'undefined' ) {
+
+	__THREE_DEVTOOLS__.dispatchEvent( new CustomEvent( 'register', { detail: {
+		revision: REVISION,
+	} } ) );
+
+}
+
+if ( typeof window !== 'undefined' ) {
+
+	if ( window.__THREE__ ) {
+
+		console.warn( 'WARNING: Multiple instances of Three.js being imported.' );
+
+	} else {
+
+		window.__THREE__ = REVISION;
+
+	}
+
+}

examples/jsm/lights/IESSpotLight.js → src/lights/webgpu/IESSpotLight.js

@@ -1,4 +1,4 @@
-import { SpotLight } from 'three';
+import { SpotLight } from '../SpotLight.js';
 
 class IESSpotLight extends SpotLight {