super-three 0.169.0 → 0.170.0

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

@@ -1,28 +1,11 @@
-import TempNode from '../core/TempNode.js';
-import { texture } from '../accessors/TextureNode.js';
-import { textureSize } from '../accessors/TextureSizeNode.js';
-import { uv } from '../accessors/UV.js';
-import { nodeObject, Fn, mat3, vec2, vec3, vec4, float, int, If } from '../tsl/TSLBase.js';
-import { NodeUpdateType } from '../core/constants.js';
-import { uniform } from '../core/UniformNode.js';
-import { DataTexture } from '../../textures/DataTexture.js';
-import { Vector2 } from '../../math/Vector2.js';
-import { Vector3 } from '../../math/Vector3.js';
-import { PI, cos, sin, pow, clamp, abs, max, mix, sqrt, acos, dot, normalize, cross } from '../math/MathNode.js';
-import { div, mul, add, sub } from '../math/OperatorNode.js';
-import { Loop } from '../utils/LoopNode.js';
-import { passTexture } from './PassNode.js';
-import { RepeatWrapping } from '../../constants.js';
-import QuadMesh from '../../renderers/common/QuadMesh.js';
-import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
-
-import { RenderTarget } from '../../core/RenderTarget.js';
-import { Color } from '../../math/Color.js';
+import { DataTexture, RenderTarget, RepeatWrapping, Vector2, Vector3, PostProcessingUtils } from 'three';
+import { getNormalFromDepth, getScreenPosition, getViewPosition, QuadMesh, TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, vec2, vec3, vec4, int, dot, max, pow, abs, If, textureSize, sin, cos, PI, texture, passTexture, mat3, add, normalize, mul, cross, div, mix, sqrt, sub, acos, clamp, NodeMaterial } from 'three/tsl';
 
 const _quadMesh = /*@__PURE__*/ new QuadMesh();
-const _currentClearColor = /*@__PURE__*/ new Color();
 const _size = /*@__PURE__*/ new Vector2();
 
+let _rendererState;
+
 class GTAONode extends TempNode {
 
 	static get type() {
@@ -51,7 +34,7 @@ class GTAONode extends TempNode {
 
 		this.SAMPLES = uniform( 16 );
 
-		this._aoRenderTarget = new RenderTarget();
+		this._aoRenderTarget = new RenderTarget( 1, 1, { depthBuffer: false } );
 		this._aoRenderTarget.texture.name = 'GTAONode.AO';
 
 		this._material = null;
@@ -78,20 +61,17 @@ class GTAONode extends TempNode {
 
 		const { renderer } = frame;
 
-		const size = renderer.getDrawingBufferSize( _size );
-
-		const currentRenderTarget = renderer.getRenderTarget();
-		const currentMRT = renderer.getMRT();
-		renderer.getClearColor( _currentClearColor );
-		const currentClearAlpha = renderer.getClearAlpha();
+		_rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
 
-		_quadMesh.material = this._material;
+		//
 
+		const size = renderer.getDrawingBufferSize( _size );
 		this.setSize( size.width, size.height );
 
+		_quadMesh.material = this._material;
+
 		// clear
 
-		renderer.setMRT( null );
 		renderer.setClearColor( 0xffffff, 1 );
 
 		// ao
@@ -101,9 +81,7 @@ class GTAONode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
-		renderer.setClearColor( _currentClearColor, currentClearAlpha );
+		PostProcessingUtils.restoreRendererState( renderer, _rendererState );
 
 	}
 
@@ -113,36 +91,16 @@ class GTAONode extends TempNode {
 
 		const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
 		const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
-
-		const getSceneUvAndDepth = Fn( ( [ sampleViewPos ] )=> {
-
-			const sampleClipPos = this.cameraProjectionMatrix.mul( vec4( sampleViewPos, 1.0 ) );
-			let sampleUv = sampleClipPos.xy.div( sampleClipPos.w ).mul( 0.5 ).add( 0.5 ).toVar();
-			sampleUv = vec2( sampleUv.x, sampleUv.y.oneMinus() );
-			const sampleSceneDepth = sampleDepth( sampleUv );
-			return vec3( sampleUv, sampleSceneDepth );
-
-		} );
-
-		const getViewPosition = Fn( ( [ screenPosition, depth ] ) => {
-
-			screenPosition = vec2( screenPosition.x, screenPosition.y.oneMinus() ).mul( 2.0 ).sub( 1.0 );
-
-			const clipSpacePosition = vec4( vec3( screenPosition, depth ), 1.0 );
-			const viewSpacePosition = vec4( this.cameraProjectionMatrixInverse.mul( clipSpacePosition ) );
-
-			return viewSpacePosition.xyz.div( viewSpacePosition.w );
-
-		} );
+		const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this.cameraProjectionMatrixInverse );
 
 		const ao = Fn( () => {
 
-			const depth = sampleDepth( uvNode );
+			const depth = sampleDepth( uvNode ).toVar();
 
 			depth.greaterThanEqual( 1.0 ).discard();
 
-			const viewPosition = getViewPosition( uvNode, depth );
-			const viewNormal = this.normalNode.rgb.normalize();
+			const viewPosition = getViewPosition( uvNode, depth, this.cameraProjectionMatrixInverse ).toVar();
+			const viewNormal = sampleNormal( uvNode ).toVar();
 
 			const radiusToUse = this.radius;
 
@@ -155,23 +113,23 @@ class GTAONode extends TempNode {
 			const bitangent = vec3( tangent.y.mul( - 1.0 ), tangent.x, 0.0 );
 			const kernelMatrix = mat3( tangent, bitangent, vec3( 0.0, 0.0, 1.0 ) );
 
-			const DIRECTIONS = this.SAMPLES.lessThan( 30 ).select( 3, 5 );
-			const STEPS = add( this.SAMPLES, DIRECTIONS.sub( 1 ) ).div( DIRECTIONS );
+			const DIRECTIONS = this.SAMPLES.lessThan( 30 ).select( 3, 5 ).toVar();
+			const STEPS = add( this.SAMPLES, DIRECTIONS.sub( 1 ) ).div( DIRECTIONS ).toVar();
 
 			const ao = float( 0 ).toVar();
 
 			Loop( { start: int( 0 ), end: DIRECTIONS, type: 'int', condition: '<' }, ( { i } ) => {
 
-				const angle = float( i ).div( float( DIRECTIONS ) ).mul( PI );
+				const angle = float( i ).div( float( DIRECTIONS ) ).mul( PI ).toVar();
 				const sampleDir = vec4( cos( angle ), sin( angle ), 0., add( 0.5, mul( 0.5, noiseTexel.w ) ) );
 				sampleDir.xyz = normalize( kernelMatrix.mul( sampleDir.xyz ) );
 
-				const viewDir = normalize( viewPosition.xyz.negate() );
-				const sliceBitangent = normalize( cross( sampleDir.xyz, viewDir ) );
+				const viewDir = normalize( viewPosition.xyz.negate() ).toVar();
+				const sliceBitangent = normalize( cross( sampleDir.xyz, viewDir ) ).toVar();
 				const sliceTangent = cross( sliceBitangent, viewDir );
 				const normalInSlice = normalize( viewNormal.sub( sliceBitangent.mul( dot( viewNormal, sliceBitangent ) ) ) );
 
-				const tangentToNormalInSlice = cross( normalInSlice, sliceBitangent );
+				const tangentToNormalInSlice = cross( normalInSlice, sliceBitangent ).toVar();
 				const cosHorizons = vec2( dot( viewDir, tangentToNormalInSlice ), dot( viewDir, tangentToNormalInSlice.negate() ) ).toVar();
 
 				Loop( { end: STEPS, type: 'int', name: 'j', condition: '<' }, ( { j } ) => {
@@ -180,9 +138,10 @@ class GTAONode extends TempNode {
 
 					// x
 
-					const sampleSceneUvDepthX = getSceneUvAndDepth( viewPosition.add( sampleViewOffset ) );
-					const sampleSceneViewPositionX = getViewPosition( sampleSceneUvDepthX.xy, sampleSceneUvDepthX.z );
-					const viewDeltaX = sampleSceneViewPositionX.sub( viewPosition );
+					const sampleScreenPositionX = getScreenPosition( viewPosition.add( sampleViewOffset ), this.cameraProjectionMatrix ).toVar();
+					const sampleDepthX = sampleDepth( sampleScreenPositionX ).toVar();
+					const sampleSceneViewPositionX = getViewPosition( sampleScreenPositionX, sampleDepthX, this.cameraProjectionMatrixInverse ).toVar();
+					const viewDeltaX = sampleSceneViewPositionX.sub( viewPosition ).toVar();
 
 					If( abs( viewDeltaX.z ).lessThan( this.thickness ), () => {
 
@@ -193,9 +152,10 @@ class GTAONode extends TempNode {
 
 					// y
 
-					const sampleSceneUvDepthY = getSceneUvAndDepth( viewPosition.sub( sampleViewOffset ) );
-					const sampleSceneViewPositionY = getViewPosition( sampleSceneUvDepthY.xy, sampleSceneUvDepthY.z );
-					const viewDeltaY = sampleSceneViewPositionY.sub( viewPosition );
+					const sampleScreenPositionY = getScreenPosition( viewPosition.sub( sampleViewOffset ), this.cameraProjectionMatrix ).toVar();
+					const sampleDepthY = sampleDepth( sampleScreenPositionY ).toVar();
+					const sampleSceneViewPositionY = getViewPosition( sampleScreenPositionY, sampleDepthY, this.cameraProjectionMatrixInverse ).toVar();
+					const viewDeltaY = sampleSceneViewPositionY.sub( viewPosition ).toVar();
 
 					If( abs( viewDeltaY.z ).lessThan( this.thickness ), () => {
 
@@ -206,7 +166,7 @@ class GTAONode extends TempNode {
 
 				} );
 
-				const sinHorizons = sqrt( sub( 1.0, cosHorizons.mul( cosHorizons ) ) );
+				const sinHorizons = sqrt( sub( 1.0, cosHorizons.mul( cosHorizons ) ) ).toVar();
 				const nx = dot( normalInSlice, sliceTangent );
 				const ny = dot( normalInSlice, viewDir );
 				const nxb = mul( 0.5, acos( cosHorizons.y ).sub( acos( cosHorizons.x ) ).add( sinHorizons.x.mul( cosHorizons.x ).sub( sinHorizons.y.mul( cosHorizons.y ) ) ) );

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

@@ -1,16 +1,5 @@
-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, PostProcessingUtils } from 'three';
+import { TempNode, nodeObject, Fn, If, float, NodeUpdateType, uv, uniform, convertToTexture, vec2, vec4, QuadMesh, passTexture, mul, NodeMaterial } 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.
@@ -18,6 +7,34 @@ import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
 const _quadMesh1 = /*@__PURE__*/ new QuadMesh();
 const _quadMesh2 = /*@__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 {
 
 	static get type() {
@@ -37,17 +54,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,12 +99,13 @@ 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;
@@ -83,10 +118,6 @@ class GaussianBlurNode extends TempNode {
 		this._horizontalRT.texture.type = textureType;
 		this._verticalRT.texture.type = textureType;
 
-		// clear
-
-		renderer.setMRT( null );
-
 		// horizontal
 
 		renderer.setRenderTarget( this._horizontalRT );
@@ -106,10 +137,10 @@ class GaussianBlurNode extends TempNode {
 
 		// restore
 
-		renderer.setRenderTarget( currentRenderTarget );
-		renderer.setMRT( currentMRT );
 		textureNode.value = currentTexture;
 
+		PostProcessingUtils.restoreRendererState( renderer, _rendererState );
+
 	}
 
 	getTextureNode() {
@@ -122,20 +153,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 +192,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 +248,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 } from 'three';
+import { convertToTexture, TempNode, nodeObject, Fn, NodeUpdateType, QuadMesh, PostProcessingUtils, NodeMaterial, 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();
+
+		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,4 @@
-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, nodeObject, Fn, float, uniform, vec3, vec4, mix } from 'three/tsl';
 
 class Lut3DNode extends TempNode {
 

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 ) ] ) => {