super-three 0.144.0 → 0.147.0

package/examples/jsm/renderers/webgl/nodes/WebGLNodeBuilder.js

@@ -1,7 +1,6 @@
 import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder } from 'three/nodes';
 import SlotNode from './SlotNode.js';
-import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib,
-	LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
+import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib } from 'three';
 
 const nodeFrame = new NodeFrame();
 nodeFrame.camera = new PerspectiveCamera();
@@ -73,7 +72,17 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	_parseShaderLib() {
 
-		const type = this.material.type;
+		const material = this.material;
+
+		let type = material.type;
+
+		// see https://github.com/mrdoob/three.js/issues/23707
+
+		if ( material.isMeshPhysicalNodeMaterial ) type = 'MeshPhysicalNodeMaterial';
+		else if ( material.isMeshStandardNodeMaterial ) type = 'MeshStandardNodeMaterial';
+		else if ( material.isMeshBasicNodeMaterial ) type = 'MeshBasicNodeMaterial';
+		else if ( material.isPointsNodeMaterial ) type = 'PointsNodeMaterial';
+		else if ( material.isLineBasicNodeMaterial ) type = 'LineBasicNodeMaterial';
 
 		// shader lib
 
@@ -112,9 +121,8 @@ class WebGLNodeBuilder extends NodeBuilder {
 			this.addSlot( 'fragment', new SlotNode( {
 				node: material.colorNode,
 				nodeType: 'vec4',
-				source: getIncludeSnippet( 'color_fragment' ),
-				target: 'diffuseColor = %RESULT%;',
-				inclusionType: 'append'
+				source: 'vec4 diffuseColor = vec4( diffuse, opacity );',
+				target: 'vec4 diffuseColor = %RESULT%;'
 			} ) );
 
 		}
@@ -129,6 +137,10 @@ class WebGLNodeBuilder extends NodeBuilder {
 				inclusionType: 'append'
 			} ) );
 
+		} else {
+
+			this.addCode( 'fragment', getIncludeSnippet( 'alphatest_fragment' ), 'diffuseColor.a = opacity;', this.shader );
+
 		}
 
 		if ( material.normalNode && material.normalNode.isNode ) {
@@ -498,15 +510,31 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getVaryings( /* shaderStage */ ) {
+	getVaryings( shaderStage ) {
 
 		let snippet = '';
 
 		const varyings = this.varyings;
 
-		for ( const varying of varyings ) {
+		if ( shaderStage === 'vertex' ) {
+
+			for ( const varying of varyings ) {
+
+				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name}; `;
+
+			}
+
+		} else if ( shaderStage === 'fragment' ) {
+
+			for ( const varying of varyings ) {
+
+				if ( varying.needsInterpolation ) {
 
-			snippet += `varying ${varying.type} ${varying.name}; `;
+					snippet += `varying ${varying.type} ${varying.name}; `;
+
+				}
+
+			}
 
 		}
 
@@ -514,52 +542,50 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	addCodeAfterCode( shaderStage, snippet, code ) {
+	addCode( shaderStage, source, code, scope = this ) {
 
 		const shaderProperty = getShaderStageProperty( shaderStage );
 
-		let source = this[ shaderProperty ];
+		let snippet = scope[ shaderProperty ];
 
-		const index = source.indexOf( snippet );
+		const index = snippet.indexOf( source );
 
 		if ( index !== - 1 ) {
 
-			const start = source.substring( 0, index + snippet.length );
-			const end = source.substring( index + snippet.length );
+			const start = snippet.substring( 0, index + source.length );
+			const end = snippet.substring( index + source.length );
 
-			source = `${start}\n${code}\n${end}`;
+			snippet = `${start}\n${code}\n${end}`;
 
 		}
 
-		this[ shaderProperty ] = source;
+		scope[ shaderProperty ] = snippet;
 
 	}
 
-	replaceCode( shaderStage, source, target ) {
+	replaceCode( shaderStage, source, target, scope = this ) {
 
 		const shaderProperty = getShaderStageProperty( shaderStage );
 
-		this[ shaderProperty ] = this[ shaderProperty ].replaceAll( source, target );
+		scope[ shaderProperty ] = scope[ shaderProperty ].replaceAll( source, target );
 
 	}
 
-	getTextureEncodingFromMap( map ) {
-
-		const isWebGL2 = this.renderer.capabilities.isWebGL2;
+	getFrontFacing() {
 
-		if ( isWebGL2 && map && map.isTexture && map.format === RGBAFormat && map.type === UnsignedByteType && map.encoding === sRGBEncoding ) {
+		return 'gl_FrontFacing';
 
-			return LinearEncoding; // disable inline decode for sRGB textures in WebGL 2
+	}
 
-		}
+	getFragCoord() {
 
-		return super.getTextureEncodingFromMap( map );
+		return 'gl_FragCoord';
 
 	}
 
-	getFrontFacing() {
+	isFlipY() {
 
-		return 'gl_FrontFacing';
+		return true;
 
 	}
 
@@ -644,11 +670,6 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 			const slots = this.slots[ shaderStage ].sort( ( slotA, slotB ) => {
 
-				if ( sourceCode.indexOf( slotA.source ) == - 1 ) {
-					//console.log( slotA, sourceCode.indexOf( slotA.source ), sourceCode.indexOf( slotB.source ) );
-					//console.log(sourceCode);
-				}
-
 				return sourceCode.indexOf( slotA.source ) > sourceCode.indexOf( slotB.source ) ? 1 : - 1;
 
 			} );
@@ -677,7 +698,7 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 				if ( inclusionType === 'append' ) {
 
-					this.addCodeAfterCode( shaderStage, source, target );
+					this.addCode( shaderStage, source, target );
 
 				} else if ( inclusionType === 'replace' ) {
 
@@ -691,10 +712,10 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 			}
 
-			this.addCodeAfterCode(
+			this.addCode(
 				shaderStage,
 				'main() {',
-				this.flowCode[ shaderStage ]
+				'\n\t' + this.flowCode[ shaderStage ]
 			);
 
 		}

package/examples/jsm/renderers/webgpu/WebGPUAnimation.js

@@ -0,0 +1,58 @@
+class WebGPUAnimation {
+
+	constructor() {
+
+		this.nodes = null;
+
+		this.animationLoop = null;
+		this.requestId = null;
+
+		this.isAnimating = false;
+
+		this.context = self;
+
+	}
+
+	start() {
+
+		if ( this.isAnimating === true || this.animationLoop === null || this.nodes === null ) return;
+
+		this.isAnimating = true;
+
+		const update = ( time, frame ) => {
+
+			this.requestId = self.requestAnimationFrame( update );
+
+			this.animationLoop( time, frame );
+
+			this.nodes.updateFrame();
+
+		};
+
+		this.requestId = self.requestAnimationFrame( update );
+
+	}
+
+	stop() {
+
+		self.cancelAnimationFrame( this.requestId );
+
+		this.isAnimating = false;
+
+	}
+
+	setAnimationLoop( callback ) {
+
+		this.animationLoop = callback;
+
+	}
+
+	setNodes( nodes ) {
+
+		this.nodes = nodes;
+
+	}
+
+}
+
+export default WebGPUAnimation;

package/examples/jsm/renderers/webgpu/WebGPUAttributes.js

@@ -23,7 +23,7 @@ class WebGPUAttributes {
 
 		if ( data ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			this.buffers.delete( attribute );
 
@@ -51,7 +51,7 @@ class WebGPUAttributes {
 
 		} else if ( usage && usage !== data.usage ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			data = this._createBuffer( attribute, usage );
 
@@ -67,6 +67,53 @@ class WebGPUAttributes {
 
 	}
 
+	async getArrayBuffer( attribute ) {
+
+		const data = this.get( attribute );
+		const device = this.device;
+
+		const gpuBuffer = data.buffer;
+		const size = gpuBuffer.size;
+
+		let gpuReadBuffer = data.readBuffer;
+		let needsUnmap = true;
+
+		if ( gpuReadBuffer === null ) {
+
+			gpuReadBuffer = device.createBuffer( {
+				size,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			} );
+
+			needsUnmap = false;
+
+			data.readBuffer = gpuReadBuffer;
+
+		}
+
+		const cmdEncoder = device.createCommandEncoder( {} );
+
+		cmdEncoder.copyBufferToBuffer(
+			gpuBuffer,
+			0,
+			gpuReadBuffer,
+			0,
+			size
+		);
+
+		if ( needsUnmap ) gpuReadBuffer.unmap();
+
+		const gpuCommands = cmdEncoder.finish();
+		device.queue.submit( [ gpuCommands ] );
+
+		await gpuReadBuffer.mapAsync( GPUMapMode.READ );
+
+		const arrayBuffer = gpuReadBuffer.getMappedRange();
+
+		return new Float32Array( arrayBuffer );
+
+	}
+
 	_createBuffer( attribute, usage ) {
 
 		const array = attribute.array;
@@ -74,7 +121,7 @@ class WebGPUAttributes {
 
 		const buffer = this.device.createBuffer( {
 			size,
-			usage: usage | GPUBufferUsage.COPY_DST,
+			usage: usage | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		} );
 
@@ -87,6 +134,7 @@ class WebGPUAttributes {
 		return {
 			version: attribute.version,
 			buffer,
+			readBuffer: null,
 			usage
 		};
 
@@ -94,6 +142,8 @@ class WebGPUAttributes {
 
 	_writeBuffer( buffer, attribute ) {
 
+		const device = this.device;
+
 		const array = attribute.array;
 		const updateRange = attribute.updateRange;
 
@@ -101,7 +151,7 @@ class WebGPUAttributes {
 
 			// Not using update ranges
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -110,7 +160,7 @@ class WebGPUAttributes {
 
 		} else {
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -124,6 +174,14 @@ class WebGPUAttributes {
 
 	}
 
+	_destroyBuffers( { buffer, readBuffer } ) {
+
+		buffer.destroy();
+
+		if ( readBuffer !== null ) readBuffer.destroy();
+
+	}
+
 }
 
 export default WebGPUAttributes;

package/examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -1,6 +1,6 @@
 import { GPULoadOp, GPUStoreOp } from './constants.js';
-import { Color, Mesh, BoxGeometry, BackSide } from 'three';
-import { context, transformDirection, positionWorld, modelWorldMatrix, MeshBasicNodeMaterial } from 'three/nodes';
+import { Color, Mesh, BoxGeometry, BackSide, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
+import { context, vec2, invert, texture, cubeTexture, transformDirection, positionWorld, modelWorldMatrix, viewportBottomLeft, equirectUV, MeshBasicNodeMaterial } from 'three/nodes';
 
 let _clearAlpha;
 const _clearColor = new Color();
@@ -45,7 +45,7 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
-		} else if ( background.isNode === true ) {
+		} else if ( background.isNode === true || background.isTexture === true ) {
 
 			_clearColor.copy( renderer._clearColor );
 			_clearAlpha = renderer._clearAlpha;
@@ -54,12 +54,41 @@ class WebGPUBackground {
 
 			if ( boxMesh === null ) {
 
-				const colorNode = context( background, {
-					uvNode: transformDirection( positionWorld, modelWorldMatrix )
-				} );
+				let node = null;
+
+				if ( background.isCubeTexture === true ) {
+
+					node = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) );
+
+				} else if ( background.isTexture === true ) {
+
+					let nodeUV = null;
+
+					if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) {
+
+						const dirNode = transformDirection( positionWorld, modelWorldMatrix );
+
+						nodeUV = equirectUV( dirNode );
+						nodeUV = vec2( nodeUV.x, invert( nodeUV.y ) );
+
+					} else {
+
+						nodeUV = viewportBottomLeft;
+
+					}
+
+					node = texture( background, nodeUV );
+
+				} else /*if ( background.isNode === true )*/ {
+
+					node = context( background, {
+						uvNode: transformDirection( positionWorld, modelWorldMatrix )
+					} );
+
+				}
 
 				const nodeMaterial = new MeshBasicNodeMaterial();
-				nodeMaterial.colorNode = colorNode;
+				nodeMaterial.colorNode = node;
 				nodeMaterial.side = BackSide;
 				nodeMaterial.depthTest = false;
 				nodeMaterial.depthWrite = false;

package/examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,5 @@
 import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPUObjects from './WebGPUObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
@@ -132,6 +133,8 @@ class WebGPURenderer {
 		this._textures = null;
 		this._background = null;
 
+		this._animation = new WebGPUAnimation();
+
 		this._renderPassDescriptor = null;
 
 		this._currentRenderState = null;
@@ -147,6 +150,8 @@ class WebGPURenderer {
 
 		this._renderTarget = null;
 
+		this._initialized = false;
+
 		// some parameters require default values other than "undefined"
 
 		this._parameters.antialias = ( parameters.antialias === true );
@@ -168,6 +173,12 @@ class WebGPURenderer {
 
 	async init() {
 
+		if ( this._initialized === true ) {
+
+			throw new Error( 'WebGPURenderer: Device has already been initialized.' );
+
+		}
+
 		const parameters = this._parameters;
 
 		const adapterOptions = {
@@ -192,7 +203,7 @@ class WebGPURenderer {
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
 		context.configure( {
-			device: device,
+			device,
 			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
 			alphaMode: 'premultiplied'
 		} );
@@ -232,16 +243,21 @@ class WebGPURenderer {
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
-	}
+		this._animation.setNodes( this._nodes );
+		this._animation.start();
+
+		this._initialized = true;
 
-	render( scene, camera ) {
+	}
 
-		// @TODO: move this to animation loop
+	async render( scene, camera ) {
 
-		this._nodes.updateFrame();
+		if ( this._initialized === false ) return await this.init();
 
 		//
 
+		if ( this._animation.isAnimating === false ) this._nodes.updateFrame();
+
 		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
 
 		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
@@ -276,6 +292,8 @@ class WebGPURenderer {
 
 		if ( renderTarget !== null ) {
 
+			this._textures.initRenderTarget( renderTarget );
+
 			// @TODO: Support RenderTarget with antialiasing.
 
 			const renderTargetProperties = this._properties.get( renderTarget );
@@ -354,6 +372,24 @@ class WebGPURenderer {
 
 	}
 
+	setAnimationLoop( callback ) {
+
+		if ( this._initialized === false ) this.init();
+
+		const animation = this._animation;
+
+		animation.setAnimationLoop( callback );
+
+		( callback === null ) ? animation.stop() : animation.start();
+
+	}
+
+	async getArrayFromBuffer( attribute ) {
+
+		return await this._attributes.getArrayBuffer( attribute );
+
+	}
+
 	getContext() {
 
 		return this._context;
@@ -571,21 +607,20 @@ class WebGPURenderer {
 		this._renderStates.dispose();
 		this._textures.dispose();
 
+		this.setRenderTarget( null );
+		this.setAnimationLoop( null );
+
 	}
 
 	setRenderTarget( renderTarget ) {
 
 		this._renderTarget = renderTarget;
 
-		if ( renderTarget !== null ) {
-
-			this._textures.initRenderTarget( renderTarget );
-
-		}
-
 	}
 
-	compute( ...computeNodes ) {
+	async compute( ...computeNodes ) {
+
+		if ( this._initialized === false ) return await this.init();
 
 		const device = this._device;
 		const computePipelines = this._computePipelines;

package/examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -57,28 +57,30 @@ const wgslTypeLib = {
 const wgslMethods = {
 	dFdx: 'dpdx',
 	dFdy: 'dpdy',
+	mod: 'threejs_mod',
+	lessThanEqual: 'threejs_lessThanEqual',
 	inversesqrt: 'inverseSqrt'
 };
 
 const wgslPolyfill = {
 	lessThanEqual: new CodeNode( `
-fn lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
+fn threejs_lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
 
 	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
 
 }
 ` ),
 	mod: new CodeNode( `
-fn mod( x : f32, y : f32 ) -> f32 {
+fn threejs_mod( x : f32, y : f32 ) -> f32 {
 
 	return x - y * floor( x / y );
 
 }
 ` ),
 	repeatWrapping: new CodeNode( `
-fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
+fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
 
-	let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
+	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
 
 	return ( ( uvScaled % dimension ) + dimension ) % dimension;
 
@@ -148,7 +150,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
+			return `textureLoad( ${textureProperty}, threejs_repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
 
 		}
 
@@ -166,7 +168,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
+			return `textureLoad( ${textureProperty}, threejs_repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
 
 		}
 
@@ -198,7 +200,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	getPropertyName( node, shaderStage = this.shaderStage ) {
 
-		if ( node.isNodeVarying === true ) {
+		if ( node.isNodeVarying === true && node.needsInterpolation === true ) {
 
 			if ( shaderStage === 'vertex' ) {
 
@@ -397,6 +399,18 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	getFragCoord() {
+
+		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>', 'fragment' );
+
+	}
+
+	isFlipY() {
+
+		return false;
+
+	}
+
 	getAttributes( shaderStage ) {
 
 		const snippets = [];
@@ -461,24 +475,42 @@ class WebGPUNodeBuilder extends NodeBuilder {
 			this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
 
 			const varyings = this.varyings;
+			const vars = this.vars[ shaderStage ];
 
 			for ( let index = 0; index < varyings.length; index ++ ) {
 
 				const varying = varyings[ index ];
 
-				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+				if ( varying.needsInterpolation ) {
+
+					snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+
+				} else if ( vars.includes( varying ) === false ) {
+
+					vars.push( varying );
+
+				}
 
 			}
 
 		} else if ( shaderStage === 'fragment' ) {
 
 			const varyings = this.varyings;
+			const vars = this.vars[ shaderStage ];
 
 			for ( let index = 0; index < varyings.length; index ++ ) {
 
 				const varying = varyings[ index ];
 
-				snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+				if ( varying.needsInterpolation ) {
+
+					snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
+
+				} else if ( vars.includes( varying ) === false ) {
+
+					vars.push( varying );
+
+				}
 
 			}
 

package/examples/jsm/shaders/MMDToonShader.js

@@ -45,8 +45,6 @@ void RE_IndirectDiffuse_BlinnPhong( const in vec3 irradiance, const in Geometric
 
 #define RE_Direct				RE_Direct_BlinnPhong
 #define RE_IndirectDiffuse		RE_IndirectDiffuse_BlinnPhong
-
-#define Material_LightProbeLOD( material )	(0)
 `;
 
 const mmd_toon_matcap_fragment = /* glsl */`