super-three 0.169.1 → 0.170.1

package/{src/nodes → examples/jsm/tsl}/display/GaussianBlurNode.js

@@ -1,22 +1,38 @@
-import TempNode from '../core/TempNode.js';
-import { nodeObject, Fn, float, vec2, vec4 } from '../tsl/TSLBase.js';
-import { NodeUpdateType } from '../core/constants.js';
-import { mul } from '../math/OperatorNode.js';
-import { uv } from '../accessors/UV.js';
-import { passTexture } from './PassNode.js';
-import { uniform } from '../core/UniformNode.js';
-import { convertToTexture } from '../utils/RTTNode.js';
-import QuadMesh from '../../renderers/common/QuadMesh.js';
-
-import { Vector2 } from '../../math/Vector2.js';
-import { RenderTarget } from '../../core/RenderTarget.js';
-import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
+import { RenderTarget, Vector2, NodeMaterial, PostProcessingUtils, QuadMesh, TempNode, NodeUpdateType } from 'three/webgpu';
+import { nodeObject, Fn, If, float, uv, uniform, convertToTexture, vec2, vec4, passTexture, mul } from 'three/tsl';
 
 // WebGPU: The use of a single QuadMesh for both gaussian blur passes results in a single RenderObject with a SampledTexture binding that
 // alternates between source textures and triggers creation of new BindGroups and BindGroupLayouts every frame.
 
-const _quadMesh1 = /*@__PURE__*/ new QuadMesh();
-const _quadMesh2 = /*@__PURE__*/ new QuadMesh();
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+
+let _rendererState;
+
+const premult = /*@__PURE__*/ Fn( ( [ color ] ) => {
+
+	return vec4( color.rgb.mul( color.a ), color.a );
+
+} ).setLayout( {
+	name: 'premult',
+	type: 'vec4',
+	inputs: [
+		{ name: 'color', type: 'vec4' }
+	]
+} );
+
+const unpremult = /*@__PURE__*/ Fn( ( [ color ] ) => {
+
+	If( color.a.equal( 0.0 ), () => vec4( 0.0 ) );
+
+	return vec4( color.rgb.div( color.a ), color.a );
+
+} ).setLayout( {
+	name: 'unpremult',
+	type: 'vec4',
+	inputs: [
+		{ name: 'color', type: 'vec4' }
+	]
+} );
 
 class GaussianBlurNode extends TempNode {
 
@@ -37,17 +53,34 @@ class GaussianBlurNode extends TempNode {
 		this._invSize = uniform( new Vector2() );
 		this._passDirection = uniform( new Vector2() );
 
-		this._horizontalRT = new RenderTarget();
+		this._horizontalRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._horizontalRT.texture.name = 'GaussianBlurNode.horizontal';
-		this._verticalRT = new RenderTarget();
+		this._verticalRT = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._verticalRT.texture.name = 'GaussianBlurNode.vertical';
 
 		this._textureNode = passTexture( this, this._verticalRT.texture );
+		this._textureNode.uvNode = textureNode.uvNode;
 
-		this.updateBeforeType = NodeUpdateType.RENDER;
+		this.updateBeforeType = NodeUpdateType.FRAME;
 
 		this.resolution = new Vector2( 1, 1 );
 
+		this.premultipliedAlpha = false;
+
+	}
+
+	setPremultipliedAlpha( value ) {
+
+		this.premultipliedAlpha = value;
+
+		return this;
+
+	}
+
+	getPremultipliedAlpha() {
+
+		return this.premultipliedAlpha;
+
 	}
 
 	setSize( width, height ) {
@@ -65,16 +98,16 @@ class GaussianBlurNode extends TempNode {
 
 		const { renderer } = frame;
 
+		_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
+
+		//
+
 		const textureNode = this.textureNode;
 		const map = textureNode.value;
 
-		const currentRenderTarget = renderer.getRenderTarget();
-		const currentMRT = renderer.getMRT();
-
 		const currentTexture = textureNode.value;
 
-		_quadMesh1.material = this._material;
-		_quadMesh2.material = this._material;
+		_quadMesh.material = this._material;
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -83,17 +116,13 @@ class GaussianBlurNode extends TempNode {
 		this._horizontalRT.texture.type = textureType;
 		this._verticalRT.texture.type = textureType;
 
-		// clear
-
-		renderer.setMRT( null );
-
 		// horizontal
 
 		renderer.setRenderTarget( this._horizontalRT );
 
 		this._passDirection.value.set( 1, 0 );
 
-		_quadMesh1.render( renderer );
+		_quadMesh.render( renderer );
 
 		// vertical
 
@@ -102,14 +131,14 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 0, 1 );
 
-		_quadMesh2.render( renderer );
+		_quadMesh.render( renderer );
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
 		textureNode.value = currentTexture;
 
+		PostProcessingUtils.restoreRendererState( renderer, _rendererState );
+
 	}
 
 	getTextureNode() {
@@ -122,20 +151,26 @@ class GaussianBlurNode extends TempNode {
 
 		const textureNode = this.textureNode;
 
-		if ( textureNode.isTextureNode !== true ) {
+		//
 
-			console.error( 'GaussianBlurNode requires a TextureNode.' );
+		const uvNode = textureNode.uvNode || uv();
+		const directionNode = vec2( this.directionNode || 1 );
 
-			return vec4();
+		let sampleTexture, output;
 
-		}
+		if ( this.premultipliedAlpha ) {
 
-		//
+			// https://lisyarus.github.io/blog/posts/blur-coefficients-generator.html
 
-		const uvNode = textureNode.uvNode || uv();
-		const directionNode = vec2( this.directionNode || 1 );
+			sampleTexture = ( uv ) => premult( textureNode.uv( uv ) );
+			output = ( color ) => unpremult( color );
+
+		} else {
 
-		const sampleTexture = ( uv ) => textureNode.uv( uv );
+			sampleTexture = ( uv ) => textureNode.uv( uv );
+			output = ( color ) => color;
+
+		}
 
 		const blur = Fn( () => {
 
@@ -155,15 +190,15 @@ class GaussianBlurNode extends TempNode {
 
 				const uvOffset = vec2( direction.mul( invSize.mul( x ) ) ).toVar();
 
-				const sample1 = vec4( sampleTexture( uvNode.add( uvOffset ) ) );
-				const sample2 = vec4( sampleTexture( uvNode.sub( uvOffset ) ) );
+				const sample1 = sampleTexture( uvNode.add( uvOffset ) );
+				const sample2 = sampleTexture( uvNode.sub( uvOffset ) );
 
 				diffuseSum.addAssign( sample1.add( sample2 ).mul( w ) );
 				weightSum.addAssign( mul( 2.0, w ) );
 
 			}
 
-			return diffuseSum.div( weightSum );
+			return output( diffuseSum.div( weightSum ) );
 
 		} );
 
@@ -211,3 +246,4 @@ class GaussianBlurNode extends TempNode {
 export default GaussianBlurNode;
 
 export const gaussianBlur = ( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ) );
+export const premultipliedGaussianBlur = ( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( convertToTexture( node ), directionNode, sigma ).setPremultipliedAlpha( true ) );

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

@@ -0,0 +1,161 @@
+import { RenderTarget, Vector2, TempNode, NodeUpdateType, QuadMesh, PostProcessingUtils, NodeMaterial } from 'three/webgpu';
+import { convertToTexture, nodeObject, Fn, passTexture, uv, vec2, vec3, vec4, max, float, sub, int, Loop, fract, pow, distance } from 'three/tsl';
+
+const _quadMesh = /*@__PURE__*/ new QuadMesh();
+const _size = /*@__PURE__*/ new Vector2();
+let _rendererState;
+
+/**
+ * References:
+ * https://john-chapman-graphics.blogspot.com/2013/02/pseudo-lens-flare.html
+ * https://john-chapman.github.io/2017/11/05/pseudo-lens-flare.html
+ */
+class LensflareNode extends TempNode {
+
+	static get type() {
+
+		return 'LensflareNode';
+
+	}
+
+	constructor( textureNode, params = {} ) {
+
+		super( 'vec4' );
+
+		this.textureNode = textureNode;
+
+		const {
+			ghostTint = vec3( 1, 1, 1 ),
+			threshold = float( 0.5 ),
+			ghostSamples = float( 4 ),
+			ghostSpacing = float( 0.25 ),
+			ghostAttenuationFactor = float( 25 ),
+			downSampleRatio = 4
+		} = params;
+
+		this.ghostTintNode = nodeObject( ghostTint );
+		this.thresholdNode = nodeObject( threshold );
+		this.ghostSamplesNode = nodeObject( ghostSamples );
+		this.ghostSpacingNode = nodeObject( ghostSpacing );
+		this.ghostAttenuationFactorNode = nodeObject( ghostAttenuationFactor );
+		this.downSampleRatio = downSampleRatio;
+
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		// render targets
+
+		this._renderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
+		this._renderTarget.texture.name = 'LensflareNode';
+
+		// materials
+
+		this._material = new NodeMaterial();
+		this._material.name = 'LensflareNode';
+
+		//
+
+		this._textureNode = passTexture( this, this._renderTarget.texture );
+
+	}
+
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	setSize( width, height ) {
+
+		const resx = Math.round( width / this.downSampleRatio );
+		const resy = Math.round( height / this.downSampleRatio );
+
+		this._renderTarget.setSize( resx, resy );
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		const size = renderer.getDrawingBufferSize( _size );
+		this.setSize( size.width, size.height );
+
+		_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
+
+		_quadMesh.material = this._material;
+
+		// clear
+
+		renderer.setMRT( null );
+
+		// lensflare
+
+		renderer.setRenderTarget( this._renderTarget );
+		_quadMesh.render( renderer );
+
+		// restore
+
+		PostProcessingUtils.restoreRendererState( renderer, _rendererState );
+
+	}
+
+	setup( builder ) {
+
+		const lensflare = Fn( () => {
+
+			// flip uvs so lens flare pivot around the image center
+
+			const texCoord = uv().oneMinus().toVar();
+
+			// ghosts are positioned along this vector
+
+			const ghostVec = sub( vec2( 0.5 ), texCoord ).mul( this.ghostSpacingNode ).toVar();
+
+			// sample ghosts
+
+			const result = vec4().toVar();
+
+			Loop( { start: int( 0 ), end: int( this.ghostSamplesNode ), type: 'int', condition: '<' }, ( { i } ) => {
+
+				// use fract() to ensure that the texture coordinates wrap around
+
+				const sampleUv = fract( texCoord.add( ghostVec.mul( float( i ) ) ) ).toVar();
+
+				// reduce contributions from samples at the screen edge
+
+				const d = distance( sampleUv, vec2( 0.5 ) );
+				const weight = pow( d.oneMinus(), this.ghostAttenuationFactorNode );
+
+				// accumulate
+
+				let sample = this.textureNode.uv( sampleUv ).rgb;
+
+				sample = max( sample.sub( this.thresholdNode ), vec3( 0 ) ).mul( this.ghostTintNode );
+
+				result.addAssign( sample.mul( weight ) );
+
+			} );
+
+			return result;
+
+		} );
+
+		this._material.fragmentNode = lensflare().context( builder.getSharedContext() );
+		this._material.needsUpdate = true;
+
+		return this._textureNode;
+
+	}
+
+	dispose() {
+
+		this._renderTarget.dispose();
+		this._material.dispose();
+
+	}
+
+}
+
+export default LensflareNode;
+
+export const lensflare = ( inputNode, params ) => nodeObject( new LensflareNode( convertToTexture( inputNode ), params ) );

package/{src/nodes → examples/jsm/tsl}/display/Lut3DNode.js

@@ -1,7 +1,5 @@
-import TempNode from '../core/TempNode.js';
-import { Fn, nodeObject, vec3, vec4, float } from '../tsl/TSLBase.js';
-import { uniform } from '../core/UniformNode.js';
-import { mix } from '../math/MathNode.js';
+import { TempNode } from 'three/webgpu';
+import { nodeObject, Fn, float, uniform, vec3, vec4, mix } from 'three/tsl';
 
 class Lut3DNode extends TempNode {
 
@@ -13,7 +11,7 @@ class Lut3DNode extends TempNode {
 
 	constructor( inputNode, lutNode, size, intensityNode ) {
 
-		super();
+		super( 'vec4' );
 
 		this.inputNode = inputNode;
 		this.lutNode = lutNode;

package/{src/nodes → examples/jsm/tsl}/display/MotionBlur.js

@@ -1,6 +1,5 @@
-import { float, int, Fn } from '../tsl/TSLBase.js';
-import { Loop } from '../utils/LoopNode.js';
-import { uv } from '../accessors/UV.js';
+
+import { Fn, float, uv, Loop, int } from 'three/tsl';
 
 export const motionBlur = /*@__PURE__*/ Fn( ( [ inputNode, velocity, numSamples = int( 16 ) ] ) => {