super-three 0.164.0 → 0.167.0

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

@@ -3,28 +3,29 @@ import { nodeObject, addNodeElement, tslFn, float, vec2, vec4 } from '../shadern
 import { NodeUpdateType } from '../core/constants.js';
 import { mul } from '../math/OperatorNode.js';
 import { uv } from '../accessors/UVNode.js';
-import { texturePass } from './PassNode.js';
+import { passTexture } from './PassNode.js';
 import { uniform } from '../core/UniformNode.js';
-import { Vector2, RenderTarget } from 'three';
-import QuadMesh from '../../objects/QuadMesh.js';
+import QuadMesh from '../../renderers/common/QuadMesh.js';
+
+import { Vector2 } from '../../math/Vector2.js';
+import { RenderTarget } from '../../core/RenderTarget.js';
 
 // 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 = new QuadMesh();
-const quadMesh2 = new QuadMesh();
+const _quadMesh1 = /*@__PURE__*/ new QuadMesh();
+const _quadMesh2 = /*@__PURE__*/ new QuadMesh();
 
 class GaussianBlurNode extends TempNode {
 
-	constructor( textureNode, sigma = 2 ) {
+	constructor( textureNode, directionNode = null, sigma = 2 ) {
 
 		super( 'vec4' );
 
 		this.textureNode = textureNode;
+		this.directionNode = directionNode;
 		this.sigma = sigma;
 
-		this.directionNode = vec2( 1 );
-
 		this._invSize = uniform( new Vector2() );
 		this._passDirection = uniform( new Vector2() );
 
@@ -33,7 +34,7 @@ class GaussianBlurNode extends TempNode {
 		this._verticalRT = new RenderTarget();
 		this._verticalRT.texture.name = 'GaussianBlurNode.vertical';
 
-		this._textureNode = texturePass( this, this._verticalRT.texture );
+		this._textureNode = passTexture( this, this._verticalRT.texture );
 
 		this.updateBeforeType = NodeUpdateType.RENDER;
 
@@ -60,10 +61,12 @@ class GaussianBlurNode extends TempNode {
 		const map = textureNode.value;
 
 		const currentRenderTarget = renderer.getRenderTarget();
+		const currentMRT = renderer.getMRT();
+
 		const currentTexture = textureNode.value;
 
-		quadMesh1.material = this._material;
-		quadMesh2.material = this._material;
+		_quadMesh1.material = this._material;
+		_quadMesh2.material = this._material;
 
 		this.setSize( map.image.width, map.image.height );
 
@@ -72,13 +75,17 @@ 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 );
+		_quadMesh1.render( renderer );
 
 		// vertical
 
@@ -87,11 +94,12 @@ class GaussianBlurNode extends TempNode {
 
 		this._passDirection.value.set( 0, 1 );
 
-		quadMesh2.render( renderer );
+		_quadMesh2.render( renderer );
 
 		// restore
 
 		renderer.setRenderTarget( currentRenderTarget );
+		renderer.setMRT( currentMRT );
 		textureNode.value = currentTexture;
 
 	}
@@ -117,8 +125,9 @@ class GaussianBlurNode extends TempNode {
 		//
 
 		const uvNode = textureNode.uvNode || uv();
+		const directionNode = vec2( this.directionNode || 1 );
 
-		const sampleTexture = ( uv ) => textureNode.cache().context( { getUV: () => uv, forceUVContext: true } );
+		const sampleTexture = ( uv ) => textureNode.uv( uv );
 
 		const blur = tslFn( () => {
 
@@ -126,7 +135,7 @@ class GaussianBlurNode extends TempNode {
 			const gaussianCoefficients = this._getCoefficients( kernelSize );
 
 			const invSize = this._invSize;
-			const direction = vec2( this.directionNode ).mul( this._passDirection );
+			const direction = directionNode.mul( this._passDirection );
 
 			const weightSum = float( gaussianCoefficients[ 0 ] ).toVar();
 			const diffuseSum = vec4( sampleTexture( uvNode ).mul( weightSum ) ).toVar();
@@ -153,7 +162,8 @@ class GaussianBlurNode extends TempNode {
 		//
 
 		const material = this._material || ( this._material = builder.createNodeMaterial() );
-		material.fragmentNode = blur();
+		material.fragmentNode = blur().context( builder.getSharedContext() );
+		material.needsUpdate = true;
 
 		//
 
@@ -166,6 +176,13 @@ class GaussianBlurNode extends TempNode {
 
 	}
 
+	dispose() {
+
+		this._horizontalRT.dispose();
+		this._verticalRT.dispose();
+
+	}
+
 	_getCoefficients( kernelRadius ) {
 
 		const coefficients = [];
@@ -182,7 +199,7 @@ class GaussianBlurNode extends TempNode {
 
 }
 
-export const gaussianBlur = ( node, sigma ) => nodeObject( new GaussianBlurNode( nodeObject( node ), sigma ) );
+export const gaussianBlur = ( node, directionNode, sigma ) => nodeObject( new GaussianBlurNode( nodeObject( node ).toTexture(), directionNode, sigma ) );
 
 addNodeElement( 'gaussianBlur', gaussianBlur );
 

package/src/nodes/display/Lut3DNode.js

@@ -0,0 +1,53 @@
+import TempNode from '../core/TempNode.js';
+import { addNodeElement, tslFn, nodeObject, vec3, vec4, float } from '../shadernode/ShaderNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { mix } from '../math/MathNode.js';
+
+class Lut3DNode extends TempNode {
+
+	constructor( inputNode, lutNode, size, intensityNode ) {
+
+		super();
+
+		this.inputNode = inputNode;
+		this.lutNode = lutNode;
+		this.size = uniform( size );
+		this.intensityNode = intensityNode;
+
+	}
+
+	setup() {
+
+		const { inputNode, lutNode } = this;
+
+		const sampleLut = ( uv ) => lutNode.uv( uv );
+
+		const lut3D = tslFn( () => {
+
+			const base = inputNode;
+
+			// pull the sample in by half a pixel so the sample begins at the center of the edge pixels.
+
+			const pixelWidth = float( 1.0 ).div( this.size );
+			const halfPixelWidth = float( 0.5 ).div( this.size );
+			const uvw = vec3( halfPixelWidth ).add( base.rgb.mul( float( 1.0 ).sub( pixelWidth ) ) );
+
+			const lutValue = vec4( sampleLut( uvw ).rgb, base.a );
+
+			return vec4( mix( base, lutValue, this.intensityNode ) );
+
+		} );
+
+		const outputNode = lut3D();
+
+		return outputNode;
+
+	}
+
+}
+
+export const lut3D = ( node, lut, size, intensity ) => nodeObject( new Lut3DNode( nodeObject( node ), nodeObject( lut ), size, nodeObject( intensity ) ) );
+
+addNodeElement( 'lut3D', lut3D );
+
+export default Lut3DNode;

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

@@ -10,7 +10,7 @@ import { faceDirection } from './FrontFacingNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, tslFn, nodeProxy, vec3 } from '../shadernode/ShaderNode.js';
 
-import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from 'three';
+import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from '../../constants.js';
 
 // Normal Mapping Without Precomputed Tangents
 // http://www.thetenthplanet.de/archives/1180

package/src/nodes/display/PassNode.js

@@ -0,0 +1,291 @@
+import { addNodeClass } from '../core/Node.js';
+import TempNode from '../core/TempNode.js';
+import { default as TextureNode/*, texture*/ } from '../accessors/TextureNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { nodeObject } from '../shadernode/ShaderNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { viewZToOrthographicDepth, perspectiveDepthToViewZ } from './ViewportDepthNode.js';
+
+import { HalfFloatType/*, FloatType*/ } from '../../constants.js';
+import { Vector2 } from '../../math/Vector2.js';
+import { DepthTexture } from '../../textures/DepthTexture.js';
+import { RenderTarget } from '../../core/RenderTarget.js';
+
+const _size = /*@__PURE__*/ new Vector2();
+
+class PassTextureNode extends TextureNode {
+
+	constructor( passNode, texture ) {
+
+		super( texture );
+
+		this.passNode = passNode;
+
+		this.setUpdateMatrix( false );
+
+	}
+
+	setup( builder ) {
+
+		this.passNode.build( builder );
+
+		return super.setup( builder );
+
+	}
+
+	clone() {
+
+		return new this.constructor( this.passNode, this.value );
+
+	}
+
+}
+
+class PassMultipleTextureNode extends PassTextureNode {
+
+	constructor( passNode, textureName ) {
+
+		super( passNode, null );
+
+		this.textureName = textureName;
+
+	}
+
+	setup( builder ) {
+
+		this.value = this.passNode.getTexture( this.textureName );
+
+		return super.setup( builder );
+
+	}
+
+	clone() {
+
+		return new this.constructor( this.passNode, this.textureName );
+
+	}
+
+}
+
+class PassNode extends TempNode {
+
+	constructor( scope, scene, camera, options = {} ) {
+
+		super( 'vec4' );
+
+		this.scope = scope;
+		this.scene = scene;
+		this.camera = camera;
+		this.options = options;
+
+		this._pixelRatio = 1;
+		this._width = 1;
+		this._height = 1;
+
+		const depthTexture = new DepthTexture();
+		depthTexture.isRenderTargetTexture = true;
+		//depthTexture.type = FloatType;
+		depthTexture.name = 'depth';
+
+		const renderTarget = new RenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType, ...options, } );
+		renderTarget.texture.name = 'output';
+		renderTarget.depthTexture = depthTexture;
+
+		this.renderTarget = renderTarget;
+
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		this._textures = {
+			output: renderTarget.texture,
+			depth: depthTexture
+		};
+
+		this._textureNodes = {};
+		this._linearDepthNodes = {};
+		this._viewZNodes = {};
+
+		this._cameraNear = uniform( 0 );
+		this._cameraFar = uniform( 0 );
+
+		this._mrt = null;
+
+		this.isPassNode = true;
+
+	}
+
+	setMRT( mrt ) {
+
+		this._mrt = mrt;
+
+		return this;
+
+	}
+
+	getMRT() {
+
+		return this._mrt;
+
+	}
+
+	isGlobal() {
+
+		return true;
+
+	}
+
+	getTexture( name ) {
+
+		let texture = this._textures[ name ];
+
+		if ( texture === undefined ) {
+
+			const refTexture = this.renderTarget.texture;
+
+			texture = refTexture.clone();
+			texture.isRenderTargetTexture = true;
+			texture.name = name;
+
+			this._textures[ name ] = texture;
+
+			this.renderTarget.textures.push( texture );
+
+		}
+
+		return texture;
+
+	}
+
+	getTextureNode( name = 'output' ) {
+
+		let textureNode = this._textureNodes[ name ];
+
+		if ( textureNode === undefined ) {
+
+			this._textureNodes[ name ] = textureNode = nodeObject( new PassMultipleTextureNode( this, name ) );
+
+		}
+
+		return textureNode;
+
+	}
+
+	getViewZNode( name = 'depth' ) {
+
+		let viewZNode = this._viewZNodes[ name ];
+
+		if ( viewZNode === undefined ) {
+
+			const cameraNear = this._cameraNear;
+			const cameraFar = this._cameraFar;
+
+			this._viewZNodes[ name ] = viewZNode = perspectiveDepthToViewZ( this.getTextureNode( name ), cameraNear, cameraFar );
+
+		}
+
+		return viewZNode;
+
+	}
+
+	getLinearDepthNode( name = 'depth' ) {
+
+		let linearDepthNode = this._linearDepthNodes[ name ];
+
+		if ( linearDepthNode === undefined ) {
+
+			const cameraNear = this._cameraNear;
+			const cameraFar = this._cameraFar;
+			const viewZNode = this.getViewZNode( name );
+
+			// TODO: just if ( builder.camera.isPerspectiveCamera )
+
+			this._linearDepthNodes[ name ] = linearDepthNode = viewZToOrthographicDepth( viewZNode, cameraNear, cameraFar );
+
+		}
+
+		return linearDepthNode;
+
+	}
+
+	setup( { renderer } ) {
+
+		this.renderTarget.samples = this.options.samples === undefined ? renderer.samples : this.options.samples;
+
+		// Disable MSAA for WebGL backend for now
+		if ( renderer.backend.isWebGLBackend === true ) {
+
+			this.renderTarget.samples = 0;
+
+		}
+
+		this.renderTarget.depthTexture.isMultisampleRenderTargetTexture = this.renderTarget.samples > 1;
+
+		return this.scope === PassNode.COLOR ? this.getTextureNode() : this.getLinearDepthNode();
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+		const { scene, camera } = this;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		const size = renderer.getSize( _size );
+
+		this.setSize( size.width, size.height );
+
+		const currentRenderTarget = renderer.getRenderTarget();
+		const currentMRT = renderer.getMRT();
+
+		this._cameraNear.value = camera.near;
+		this._cameraFar.value = camera.far;
+
+		renderer.setRenderTarget( this.renderTarget );
+		renderer.setMRT( this._mrt );
+
+		renderer.render( scene, camera );
+
+		renderer.setRenderTarget( currentRenderTarget );
+		renderer.setMRT( currentMRT );
+
+	}
+
+	setSize( width, height ) {
+
+		this._width = width;
+		this._height = height;
+
+		const effectiveWidth = this._width * this._pixelRatio;
+		const effectiveHeight = this._height * this._pixelRatio;
+
+		this.renderTarget.setSize( effectiveWidth, effectiveHeight );
+
+	}
+
+	setPixelRatio( pixelRatio ) {
+
+		this._pixelRatio = pixelRatio;
+
+		this.setSize( this._width, this._height );
+
+	}
+
+	dispose() {
+
+		this.renderTarget.dispose();
+
+	}
+
+
+}
+
+PassNode.COLOR = 'color';
+PassNode.DEPTH = 'depth';
+
+export default PassNode;
+
+export const pass = ( scene, camera, options ) => nodeObject( new PassNode( PassNode.COLOR, scene, camera, options ) );
+export const passTexture = ( pass, texture ) => nodeObject( new PassTextureNode( pass, texture ) );
+export const depthPass = ( scene, camera ) => nodeObject( new PassNode( PassNode.DEPTH, scene, camera ) );
+
+addNodeClass( 'PassNode', PassNode );

package/src/nodes/display/PixelationPassNode.js

@@ -0,0 +1,201 @@
+import TempNode from '../core/TempNode.js';
+import { uv } from '../accessors/UVNode.js';
+import { addNodeElement, tslFn, nodeObject, vec2, vec3, float, If } from '../shadernode/ShaderNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { uniform } from '../core/UniformNode.js';
+import { dot, clamp, smoothstep, sign, step, floor } from '../math/MathNode.js';
+import { Vector4 } from '../../math/Vector4.js';
+import { output, property } from '../core/PropertyNode.js';
+import PassNode from './PassNode.js';
+import { mrt } from '../core/MRTNode.js';
+import { normalView } from '../accessors/NormalNode.js';
+import { NearestFilter } from '../../constants.js';
+
+class PixelationNode extends TempNode {
+
+	constructor( textureNode, depthNode, normalNode, pixelSize, normalEdgeStrength, depthEdgeStrength ) {
+
+		super();
+
+		// Input textures
+
+		this.textureNode = textureNode;
+		this.depthNode = depthNode;
+		this.normalNode = normalNode;
+
+		// Input uniforms
+
+		this.pixelSize = pixelSize;
+		this.normalEdgeStrength = normalEdgeStrength;
+		this.depthEdgeStrength = depthEdgeStrength;
+
+		// Private uniforms
+
+		this._resolution = uniform( new Vector4() );
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	updateBefore() {
+
+		const map = this.textureNode.value;
+
+		const width = map.image.width;
+		const height = map.image.height;
+
+		this._resolution.value.set( width, height, 1 / width, 1 / height );
+
+	}
+
+	setup() {
+
+		const { textureNode, depthNode, normalNode } = this;
+
+		const uvNodeTexture = textureNode.uvNode || uv();
+		const uvNodeDepth = depthNode.uvNode || uv();
+		const uvNodeNormal = normalNode.uvNode || uv();
+
+		const sampleTexture = () => textureNode.uv( uvNodeTexture );
+
+		const sampleDepth = ( x, y ) => depthNode.uv( uvNodeDepth.add( vec2( x, y ).mul( this._resolution.zw ) ) ).r;
+
+		const sampleNormal = ( x, y ) => normalNode.uv( uvNodeNormal.add( vec2( x, y ).mul( this._resolution.zw ) ) ).rgb.normalize();
+
+		const depthEdgeIndicator = ( depth ) => {
+
+			const diff = property( 'float', 'diff' );
+			diff.addAssign( clamp( sampleDepth( 1, 0 ).sub( depth ) ) );
+			diff.addAssign( clamp( sampleDepth( - 1, 0 ).sub( depth ) ) );
+			diff.addAssign( clamp( sampleDepth( 0, 1 ).sub( depth ) ) );
+			diff.addAssign( clamp( sampleDepth( 0, - 1 ).sub( depth ) ) );
+
+			return floor( smoothstep( 0.01, 0.02, diff ).mul( 2 ) ).div( 2 );
+
+		};
+
+		const neighborNormalEdgeIndicator = ( x, y, depth, normal ) => {
+
+			const depthDiff = sampleDepth( x, y ).sub( depth );
+			const neighborNormal = sampleNormal( x, y );
+
+			// Edge pixels should yield to faces who's normals are closer to the bias normal.
+
+			const normalEdgeBias = vec3( 1, 1, 1 ); // This should probably be a parameter.
+			const normalDiff = dot( normal.sub( neighborNormal ), normalEdgeBias );
+			const normalIndicator = clamp( smoothstep( - 0.01, 0.01, normalDiff ), 0.0, 1.0 );
+
+			// Only the shallower pixel should detect the normal edge.
+
+			const depthIndicator = clamp( sign( depthDiff.mul( .25 ).add( .0025 ) ), 0.0, 1.0 );
+
+			return float( 1.0 ).sub( dot( normal, neighborNormal ) ).mul( depthIndicator ).mul( normalIndicator );
+
+		};
+
+		const normalEdgeIndicator = ( depth, normal ) => {
+
+			const indicator = property( 'float', 'indicator' );
+
+			indicator.addAssign( neighborNormalEdgeIndicator( 0, - 1, depth, normal ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( 0, 1, depth, normal ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( - 1, 0, depth, normal ) );
+			indicator.addAssign( neighborNormalEdgeIndicator( 1, 0, depth, normal ) );
+
+			return step( 0.1, indicator );
+
+		};
+
+		const pixelation = tslFn( () => {
+
+			const texel = sampleTexture();
+
+			const depth = property( 'float', 'depth' );
+			const normal = property( 'vec3', 'normal' );
+
+			If( this.depthEdgeStrength.greaterThan( 0.0 ).or( this.normalEdgeStrength.greaterThan( 0.0 ) ), () => {
+
+				depth.assign( sampleDepth( 0, 0 ) );
+				normal.assign( sampleNormal( 0, 0 ) );
+
+			} );
+
+			const dei = property( 'float', 'dei' );
+
+			If( this.depthEdgeStrength.greaterThan( 0.0 ), () => {
+
+				dei.assign( depthEdgeIndicator( depth ) );
+
+			} );
+
+			const nei = property( 'float', 'nei' );
+
+			If( this.normalEdgeStrength.greaterThan( 0.0 ), () => {
+
+				nei.assign( normalEdgeIndicator( depth, normal ) );
+
+			} );
+
+			const strength = dei.greaterThan( 0 ).cond( float( 1.0 ).sub( dei.mul( this.depthEdgeStrength ) ), nei.mul( this.normalEdgeStrength ).add( 1 ) );
+
+			return texel.mul( strength );
+
+		} );
+
+		const outputNode = pixelation();
+
+		return outputNode;
+
+	}
+
+}
+
+const pixelation = ( node, depthNode, normalNode, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) => nodeObject( new PixelationNode( nodeObject( node ).toTexture(), nodeObject( depthNode ).toTexture(), nodeObject( normalNode ).toTexture(), nodeObject( pixelSize ), nodeObject( normalEdgeStrength ), nodeObject( depthEdgeStrength ) ) );
+
+addNodeElement( 'pixelation', pixelation );
+
+class PixelationPassNode extends PassNode {
+
+	constructor( scene, camera, pixelSize = 6, normalEdgeStrength = 0.3, depthEdgeStrength = 0.4 ) {
+
+		super( 'color', scene, camera, { minFilter: NearestFilter, magFilter: NearestFilter } );
+
+		this.pixelSize = pixelSize;
+		this.normalEdgeStrength = normalEdgeStrength;
+		this.depthEdgeStrength = depthEdgeStrength;
+
+		this.isPixelationPassNode = true;
+
+		this._mrt = mrt( {
+			output: output,
+			normal: normalView
+		} );
+
+	}
+
+	setSize( width, height ) {
+
+		const pixelSize = this.pixelSize.value ? this.pixelSize.value : this.pixelSize;
+
+		const adjustedWidth = Math.floor( width / pixelSize );
+		const adjustedHeight = Math.floor( height / pixelSize );
+
+		super.setSize( adjustedWidth, adjustedHeight );
+
+	}
+
+	setup() {
+
+		const color = super.getTextureNode( 'output' );
+		const depth = super.getTextureNode( 'depth' );
+		const normal = super.getTextureNode( 'normal' );
+
+		return pixelation( color, depth, normal, this.pixelSize, this.normalEdgeStrength, this.depthEdgeStrength );
+
+	}
+
+}
+
+export const pixelationPass = ( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) => nodeObject( new PixelationPassNode( scene, camera, pixelSize, normalEdgeStrength, depthEdgeStrength ) );
+
+export default PixelationPassNode;