@plastic-software/three 0.167.3 → 0.174.0

package/examples/jsm/transpiler/GLSLDecoder.js

@@ -1,4 +1,4 @@
-import { Program, FunctionDeclaration, For, AccessorElements, Ternary, Varying, DynamicElement, StaticElement, FunctionParameter, Unary, Conditional, VariableDeclaration, Operator, Number, String, FunctionCall, Return, Accessor, Uniform } from './AST.js';
+import { Program, FunctionDeclaration, For, AccessorElements, Ternary, Varying, DynamicElement, StaticElement, FunctionParameter, Unary, Conditional, VariableDeclaration, Operator, Number, String, FunctionCall, Return, Accessor, Uniform, Discard } from './AST.js';
 
 const unaryOperators = [
 	'+', '-', '~', '!', '++', '--'
@@ -30,6 +30,14 @@ const associativityRightToLeft = [
 	':'
 ];
 
+const glslToTSL = {
+	inversesqrt: 'inverseSqrt'
+};
+
+const samplers = [ 'sampler1D', 'sampler2D', 'sampler2DArray', 'sampler2DShadow', 'sampler2DArrayShadow', 'isampler2D', 'isampler2DArray', 'usampler2D', 'usampler2DArray' ];
+const samplersCube = [ 'samplerCube', 'samplerCubeShadow', 'usamplerCube', 'isamplerCube' ];
+const samplers3D = [ 'sampler3D', 'isampler3D', 'usampler3D' ];
+
 const spaceRegExp = /^((\t| )\n*)+/;
 const lineRegExp = /^\n+/;
 const commentRegExp = /^\/\*[\s\S]*?\*\//;
@@ -46,6 +54,12 @@ const operatorsRegExp = new RegExp( '^(\\' + [
 	'.', ',', ';', '!', '=', '~', '*', '/', '%', '+', '-', '<', '>', '&', '^', '|', '?', ':', '#'
 ].join( '$' ).split( '' ).join( '\\' ).replace( /\\\$/g, '|' ) + ')' );
 
+function getFunctionName( str ) {
+
+	return glslToTSL[ str ] || str;
+
+}
+
 function getGroupDelta( str ) {
 
 	if ( str === '(' || str === '[' || str === '{' ) return 1;
@@ -214,7 +228,7 @@ class Tokenizer {
 
 }
 
-const isType = ( str ) => /void|bool|float|u?int|(u|i)?vec[234]/.test( str );
+const isType = ( str ) => /void|bool|float|u?int|mat[234]|mat[234]x[234]|(u|i|b)?vec[234]/.test( str );
 
 class GLSLDecoder {
 
@@ -226,7 +240,7 @@ class GLSLDecoder {
 
 		this._currentFunction = null;
 
-		this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( viewportCoordinate.x, viewportCoordinate.y.oneMinus(), viewportCoordinate.z );' );
+		this.addPolyfill( 'gl_FragCoord', 'vec3 gl_FragCoord = vec3( screenCoordinate.x, screenCoordinate.y.oneMinus(), screenCoordinate.z );' );
 
 	}
 
@@ -451,11 +465,11 @@ class GLSLDecoder {
 			const isHex = /^(0x)/.test( firstToken.str );
 
 			if ( isHex ) type = 'int';
-			else if ( /u$/.test( firstToken.str ) ) type = 'uint';
+			else if ( /u$|U$/.test( firstToken.str ) ) type = 'uint';
 			else if ( /f|e|\./.test( firstToken.str ) ) type = 'float';
 			else type = 'int';
 
-			let str = firstToken.str.replace( /u|i$/, '' );
+			let str = firstToken.str.replace( /u|U|i$/, '' );
 
 			if ( isHex === false ) {
 
@@ -475,6 +489,10 @@ class GLSLDecoder {
 
 				return new Return( this.parseExpressionFromTokens( tokens.slice( 1 ) ) );
 
+			} else if ( firstToken.str === 'discard' ) {
+
+				return new Discard();
+
 			}
 
 			const secondToken = tokens[ 1 ];
@@ -485,62 +503,84 @@ class GLSLDecoder {
 
 					// function call
 
-					const paramsTokens = this.parseFunctionParametersFromTokens( tokens.slice( 2, tokens.length - 1 ) );
+					const internalTokens = this.getTokensUntil( ')', tokens, 1 ).slice( 1, - 1 );
+
+					const paramsTokens = this.parseFunctionParametersFromTokens( internalTokens );
 
-					return new FunctionCall( firstToken.str, paramsTokens );
+					const functionCall = new FunctionCall( getFunctionName( firstToken.str ), paramsTokens );
+
+					const accessTokens = tokens.slice( 3 + internalTokens.length );
+
+					if ( accessTokens.length > 0 ) {
+
+						const elements = this.parseAccessorElementsFromTokens( accessTokens );
+
+						return new AccessorElements( functionCall, elements );
+
+					}
+
+					return functionCall;
 
 				} else if ( secondToken.str === '[' ) {
 
 					// array accessor
 
-					const elements = [];
+					const elements = this.parseAccessorElementsFromTokens( tokens.slice( 1 ) );
 
-					let currentTokens = tokens.slice( 1 );
+					return new AccessorElements( new Accessor( firstToken.str ), elements );
 
-					while ( currentTokens.length > 0 ) {
+				}
 
-						const token = currentTokens[ 0 ];
+			}
 
-						if ( token.str === '[' ) {
+			return new Accessor( firstToken.str );
 
-							const accessorTokens = this.getTokensUntil( ']', currentTokens );
+		}
 
-							const element = this.parseExpressionFromTokens( accessorTokens.slice( 1, accessorTokens.length - 1 ) );
+	}
 
-							currentTokens = currentTokens.slice( accessorTokens.length );
+	parseAccessorElementsFromTokens( tokens ) {
 
-							elements.push( new DynamicElement( element ) );
+		const elements = [];
 
-						} else if ( token.str === '.' ) {
+		let currentTokens = tokens;
 
-							const accessorTokens = currentTokens.slice( 1, 2 );
+		while ( currentTokens.length > 0 ) {
 
-							const element = this.parseExpressionFromTokens( accessorTokens );
+			const token = currentTokens[ 0 ];
 
-							currentTokens = currentTokens.slice( 2 );
+			if ( token.str === '[' ) {
 
-							elements.push( new StaticElement( element ) );
+				const accessorTokens = this.getTokensUntil( ']', currentTokens );
 
-						} else {
+				const element = this.parseExpressionFromTokens( accessorTokens.slice( 1, accessorTokens.length - 1 ) );
 
-							console.error( 'Unknown accessor expression', token );
+				currentTokens = currentTokens.slice( accessorTokens.length );
 
-							break;
+				elements.push( new DynamicElement( element ) );
 
-						}
+			} else if ( token.str === '.' ) {
 
-					}
+				const accessorTokens = currentTokens.slice( 1, 2 );
 
-					return new AccessorElements( firstToken.str, elements );
+				const element = this.parseExpressionFromTokens( accessorTokens );
 
-				}
+				currentTokens = currentTokens.slice( 2 );
 
-			}
+				elements.push( new StaticElement( element ) );
 
-			return new Accessor( firstToken.str );
+			} else {
+
+				console.error( 'Unknown accessor expression', token );
+
+				break;
+
+			}
 
 		}
 
+		return elements;
+
 	}
 
 	parseFunctionParametersFromTokens( tokens ) {
@@ -687,9 +727,15 @@ class GLSLDecoder {
 
 		const tokens = this.readTokensUntil( ';' );
 
-		const type = tokens[ 1 ].str;
+		let type = tokens[ 1 ].str;
 		const name = tokens[ 2 ].str;
 
+		// GLSL to TSL types
+
+		if ( samplers.includes( type ) ) type = 'texture';
+		else if ( samplersCube.includes( type ) ) type = 'cubeTexture';
+		else if ( samplers3D.includes( type ) ) type = 'texture3D';
+
 		return new Uniform( type, name );
 
 	}

package/examples/jsm/transpiler/ShaderToyDecoder.js

@@ -7,9 +7,9 @@ class ShaderToyDecoder extends GLSLDecoder {
 
 		super();
 
-		this.addPolyfill( 'iTime', 'float iTime = timerGlobal();' );
-		this.addPolyfill( 'iResolution', 'vec2 iResolution = viewportResolution;' );
-		this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( viewportCoordinate.x, viewportResolution.y - viewportCoordinate.y, viewportCoordinate.z );' );
+		this.addPolyfill( 'iTime', 'float iTime = time;' );
+		this.addPolyfill( 'iResolution', 'vec2 iResolution = screenSize;' );
+		this.addPolyfill( 'fragCoord', 'vec3 fragCoord = vec3( screenCoordinate.x, screenSize.y - screenCoordinate.y, screenCoordinate.z );' );
 
 	}
 

package/examples/jsm/transpiler/TSLEncoder.js

@@ -1,4 +1,5 @@
-import * as THREE from 'three';
+import { REVISION } from 'three/webgpu';
+import * as TSL from 'three/tsl';
 
 import { VariableDeclaration, Accessor } from './AST.js';
 
@@ -43,7 +44,9 @@ const unaryLib = {
 	'--': 'decrement' // decrementBefore
 };
 
-const isPrimitive = ( value ) => /^(true|false|-?\d)/.test( value );
+const textureLookupFunctions = [ 'texture', 'texture2D', 'texture3D', 'textureCube', 'textureLod', 'texelFetch', 'textureGrad' ];
+
+const isPrimitive = ( value ) => /^(true|false|-?(\d|\.\d))/.test( value );
 
 class TSLEncoder {
 
@@ -68,7 +71,7 @@ class TSLEncoder {
 
 		name = name.split( '.' )[ 0 ];
 
-		if ( THREE[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
+		if ( TSL[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
 
 			this.imports.add( name );
 
@@ -79,13 +82,12 @@ class TSLEncoder {
 	emitUniform( node ) {
 
 		let code = `const ${ node.name } = `;
+		this.global.add( node.name );
 
 		if ( this.reference === true ) {
 
 			this.addImport( 'reference' );
 
-			this.global.add( node.name );
-
 			//code += `reference( '${ node.name }', '${ node.type }', uniforms )`;
 
 			// legacy
@@ -93,11 +95,33 @@ class TSLEncoder {
 
 		} else {
 
-			this.addImport( 'uniform' );
+			if ( node.type === 'texture' ) {
+
+				this.addImport( 'texture' );
+
+				code += 'texture( /* <THREE.Texture> */ )';
+
+			} else if ( node.type === 'cubeTexture' ) {
+
+				this.addImport( 'cubeTexture' );
+
+				code += 'cubeTexture( /* <THREE.CubeTexture> */ )';
 
-			this.global.add( node.name );
+			} else if ( node.type === 'texture3D' ) {
 
-			code += `uniform( '${ node.type }' )`;
+				this.addImport( 'texture3D' );
+
+				code += 'texture3D( /* <THREE.Data3DTexture> */ )';
+
+			} else {
+
+				// default uniform
+
+				this.addImport( 'uniform' );
+
+				code += `uniform( '${ node.type }' )`;
+
+			}
 
 		}
 
@@ -109,12 +133,6 @@ class TSLEncoder {
 
 		let code;
 
-		/*@TODO: else if ( node.isVarying ) {
-
-			code = this.emitVarying( node );
-
-		}*/
-
 		if ( node.isAccessor ) {
 
 			this.addImport( node.property );
@@ -158,6 +176,10 @@ class TSLEncoder {
 
 				this.addImport( opFn );
 
+			} else if ( opFn === '.' ) {
+
+				code = left + opFn + right;
+
 			} else {
 
 				code = left + '.' + opFn + '( ' + right + ' )';
@@ -174,11 +196,43 @@ class TSLEncoder {
 
 			}
 
-			this.addImport( node.name );
+			// handle texture lookup function calls in separate branch
+
+			if ( textureLookupFunctions.includes( node.name ) ) {
+
+				code = `${ params[ 0 ] }.sample( ${ params[ 1 ] } )`;
+
+				if ( node.name === 'texture' || node.name === 'texture2D' || node.name === 'texture3D' || node.name === 'textureCube' ) {
+
+					if ( params.length === 3 ) {
+
+						code += `.bias( ${ params[ 2 ] } )`;
+
+					}
 
-			const paramsStr = params.length > 0 ? ' ' + params.join( ', ' ) + ' ' : '';
+				} else if ( node.name === 'textureLod' ) {
 
-			code = `${ node.name }(${ paramsStr })`;
+					code += `.level( ${ params[ 2 ] } )`;
+
+				} else if ( node.name === 'textureGrad' ) {
+
+					code += `.grad( ${ params[ 2 ] }, ${ params[ 3 ] } )`;
+
+				} else if ( node.name === 'texelFetch' ) {
+
+					code += '.setSampler( false )';
+
+				}
+
+			} else {
+
+				this.addImport( node.name );
+
+				const paramsStr = params.length > 0 ? ' ' + params.join( ', ' ) + ' ' : '';
+
+				code = `${ node.name }(${ paramsStr })`;
+
+			}
 
 		} else if ( node.isReturn ) {
 
@@ -190,9 +244,15 @@ class TSLEncoder {
 
 			}
 
+		} else if ( node.isDiscard ) {
+
+			this.addImport( 'Discard' );
+
+			code = 'Discard()';
+
 		} else if ( node.isAccessorElements ) {
 
-			code = node.property;
+			code = this.emitExpression( node.object );
 
 			for ( const element of node.elements ) {
 
@@ -238,6 +298,10 @@ class TSLEncoder {
 
 			code = this.emitUniform( node );
 
+		} else if ( node.isVarying ) {
+
+			code = this.emitVarying( node );
+
 		} else if ( node.isTernary ) {
 
 			code = this.emitTernary( node );
@@ -248,7 +312,9 @@ class TSLEncoder {
 
 		} else if ( node.isUnary && node.expression.isNumber ) {
 
-			code = node.type + ' ' + node.expression.value;
+			code = node.expression.type + '( ' + node.type + ' ' + node.expression.value + ' )';
+
+			this.addImport( node.expression.type );
 
 		} else if ( node.isUnary ) {
 
@@ -493,7 +559,16 @@ ${ this.tab }} )`;
 
 	}
 
-	/*emitVarying( node ) { }*/
+	emitVarying( node ) {
+
+		const { name, type } = node;
+
+		this.addImport( 'varying' );
+		this.addImport( type );
+
+		return `const ${ name } = varying( ${ type }(), '${ name }' )`;
+
+	}
 
 	emitOverloadingFunction( nodes ) {
 
@@ -690,7 +765,7 @@ ${ this.tab }} )`;
 		const imports = [ ...this.imports ];
 		const exports = [ ...this.global ];
 
-		let header = '// Three.js Transpiler r' + THREE.REVISION + '\n\n';
+		let header = '// Three.js Transpiler r' + REVISION + '\n\n';
 		let footer = '';
 
 		if ( this.iife ) {

package/examples/jsm/tsl/display/AfterImageNode.js

@@ -0,0 +1,243 @@
+import { RenderTarget, Vector2, QuadMesh, NodeMaterial, RendererUtils, TempNode, NodeUpdateType } from 'three/webgpu';
+import { nodeObject, Fn, float, uv, texture, passTexture, uniform, sign, max, convertToTexture } from 'three/tsl';
+
+const _size = /*@__PURE__*/ new Vector2();
+const _quadMeshComp = /*@__PURE__*/ new QuadMesh();
+
+let _rendererState;
+
+/**
+ * Post processing node for creating an after image effect.
+ *
+ * @augments TempNode
+ */
+class AfterImageNode extends TempNode {
+
+	static get type() {
+
+		return 'AfterImageNode';
+
+	}
+
+	/**
+	 * Constructs a new after image node.
+	 *
+	 * @param {TextureNode} textureNode - The texture node that represents the input of the effect.
+	 * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+	 */
+	constructor( textureNode, damp = 0.96 ) {
+
+		super( 'vec4' );
+
+		/**
+		 * The texture node that represents the input of the effect.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNode = textureNode;
+
+		/**
+		 * The texture represents the pervious frame.
+		 *
+		 * @type {TextureNode}
+		 */
+		this.textureNodeOld = texture();
+
+		/**
+		 * How quickly the after-image fades. A higher value means the after-image
+		 * persists longer, while a lower value means it fades faster. Should be in
+		 * the range `[0, 1]`.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.damp = uniform( damp );
+
+		/**
+		 * The render target used for compositing the effect.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._compRT = new RenderTarget( 1, 1, { depthBuffer: false } );
+		this._compRT.texture.name = 'AfterImageNode.comp';
+
+		/**
+		 * The render target that represents the previous frame.
+		 *
+		 * @private
+		 * @type {RenderTarget}
+		 */
+		this._oldRT = new RenderTarget( 1, 1, { depthBuffer: false } );
+		this._oldRT.texture.name = 'AfterImageNode.old';
+
+		/**
+		 * The result of the effect is represented as a separate texture node.
+		 *
+		 * @private
+		 * @type {PassTextureNode}
+		 */
+		this._textureNode = passTexture( this, this._compRT.texture );
+
+		/**
+		 * The `updateBeforeType` is set to `NodeUpdateType.FRAME` since the node renders
+		 * its effect once per frame in `updateBefore()`.
+		 *
+		 * @type {string}
+		 * @default 'frame'
+		 */
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+	}
+
+	/**
+	 * Returns the result of the effect as a texture node.
+	 *
+	 * @return {PassTextureNode} A texture node that represents the result of the effect.
+	 */
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Sets the size of the effect.
+	 *
+	 * @param {number} width - The width of the effect.
+	 * @param {number} height - The height of the effect.
+	 */
+	setSize( width, height ) {
+
+		this._compRT.setSize( width, height );
+		this._oldRT.setSize( width, height );
+
+	}
+
+	/**
+	 * This method is used to render the effect once per frame.
+	 *
+	 * @param {NodeFrame} frame - The current node frame.
+	 */
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		_rendererState = RendererUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
+		const textureNode = this.textureNode;
+		const map = textureNode.value;
+
+		const textureType = map.type;
+
+		this._compRT.texture.type = textureType;
+		this._oldRT.texture.type = textureType;
+
+		renderer.getDrawingBufferSize( _size );
+
+		this.setSize( _size.x, _size.y );
+
+		const currentTexture = textureNode.value;
+
+		this.textureNodeOld.value = this._oldRT.texture;
+
+		// comp
+
+		renderer.setRenderTarget( this._compRT );
+		_quadMeshComp.render( renderer );
+
+		// Swap the textures
+
+		const temp = this._oldRT;
+		this._oldRT = this._compRT;
+		this._compRT = temp;
+
+		//
+
+		textureNode.value = currentTexture;
+
+		RendererUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	/**
+	 * This method is used to setup the effect's TSL code.
+	 *
+	 * @param {NodeBuilder} builder - The current node builder.
+	 * @return {PassTextureNode}
+	 */
+	setup( builder ) {
+
+		const textureNode = this.textureNode;
+		const textureNodeOld = this.textureNodeOld;
+
+		//
+
+		textureNodeOld.uvNode = textureNode.uvNode || uv();
+
+		const afterImg = Fn( () => {
+
+			const texelOld = textureNodeOld.sample().toVar();
+			const texelNew = textureNode.sample().toVar();
+
+			const threshold = float( 0.1 ).toConst();
+
+			// m acts as a mask. It's 1 if the previous pixel was "bright enough" (above the threshold) and 0 if it wasn't.
+			const m = max( sign( texelOld.sub( threshold ) ), 0.0 );
+
+			// This is where the after-image fades:
+			//
+			// - If m is 0, texelOld is multiplied by 0, effectively clearing the after-image for that pixel.
+			// - If m is 1, texelOld is multiplied by "damp". Since "damp" is between 0 and 1, this reduces the color value of
+			// texelOld, making it darker and causing it to fade.
+			texelOld.mulAssign( this.damp.mul( m ) );
+
+			return max( texelNew, texelOld );
+
+		} );
+
+		//
+
+		const materialComposed = this._materialComposed || ( this._materialComposed = new NodeMaterial() );
+		materialComposed.name = 'AfterImage';
+		materialComposed.fragmentNode = afterImg();
+
+		_quadMeshComp.material = materialComposed;
+
+		//
+
+		const properties = builder.getNodeProperties( this );
+		properties.textureNode = textureNode;
+
+		//
+
+		return this._textureNode;
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the effect is no longer required.
+	 */
+	dispose() {
+
+		this._compRT.dispose();
+		this._oldRT.dispose();
+
+	}
+
+}
+
+/**
+ * TSL function for creating an after image node for post processing.
+ *
+ * @tsl
+ * @function
+ * @param {Node<vec4>} node - The node that represents the input of the effect.
+ * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
+ * @returns {AfterImageNode}
+ */
+export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( convertToTexture( node ), damp ) );
+
+export default AfterImageNode;