super-three 0.157.1 → 0.160.0

package/examples/jsm/nodes/display/GaussianBlurNode.js

@@ -0,0 +1,170 @@
+import TempNode from '../core/TempNode.js';
+import { nodeObject, addNodeElement, tslFn, float, vec2, vec3, vec4 } from '../shadernode/ShaderNode.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { mul } from '../math/OperatorNode.js';
+import { uv } from '../accessors/UVNode.js';
+import { texture } from '../accessors/TextureNode.js';
+import { uniform } from '../core/UniformNode.js';
+import { Vector2, RenderTarget } from 'three';
+import QuadMesh from '../../objects/QuadMesh.js';
+
+const quadMesh = new QuadMesh();
+
+class GaussianBlurNode extends TempNode {
+
+	constructor( textureNode, sigma = 2 ) {
+
+		super( textureNode );
+
+		this.textureNode = textureNode;
+		this.sigma = sigma;
+
+		this.directionNode = vec2( 1 );
+
+		this._invSize = uniform( new Vector2() );
+		this._passDirection = uniform( new Vector2() );
+
+		this._horizontalRT = new RenderTarget();
+		this._verticalRT = new RenderTarget();
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+		this.resolution = new Vector2( 1, 1 );
+
+	}
+
+	setSize( width, height ) {
+
+		width = Math.max( Math.round( width * this.resolution.x ), 1 );
+		height = Math.max( Math.round( height * this.resolution.y ), 1 );
+
+		this._invSize.value.set( 1 / width, 1 / height );
+		this._horizontalRT.setSize( width, height );
+		this._verticalRT.setSize( width, height );
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+
+		const textureNode = this.textureNode;
+		const map = textureNode.value;
+
+		const currentRenderTarget = renderer.getRenderTarget();
+		const currentTexture = textureNode.value;
+
+		quadMesh.material = this._material;
+
+		this.setSize( map.image.width, map.image.height );
+
+		// horizontal
+
+		renderer.setRenderTarget( this._horizontalRT );
+
+		this._passDirection.value.set( 1, 0 );
+
+		quadMesh.render( renderer );
+
+		// vertical
+
+		textureNode.value = this._horizontalRT.texture;
+		renderer.setRenderTarget( this._verticalRT );
+
+		this._passDirection.value.set( 0, 1 );
+
+		quadMesh.render( renderer );
+
+		// restore
+
+		renderer.setRenderTarget( currentRenderTarget );
+		textureNode.value = currentTexture;
+
+	}
+
+	setup( builder ) {
+
+		const textureNode = this.textureNode;
+
+		if ( textureNode.isTextureNode !== true ) {
+
+			console.error( 'GaussianBlurNode requires a TextureNode.' );
+
+			return vec4();
+
+		}
+
+		//
+
+		const uvNode = textureNode.uvNode || uv();
+
+		const sampleTexture = ( uv ) => textureNode.cache().context( { getUV: () => uv, forceUVContext: true } );
+
+		const blur = tslFn( () => {
+
+			const kernelSize = 3 + ( 2 * this.sigma );
+			const gaussianCoefficients = this._getCoefficients( kernelSize );
+
+			const invSize = this._invSize;
+			const direction = vec2( this.directionNode ).mul( this._passDirection );
+
+			const weightSum = float( gaussianCoefficients[ 0 ] ).toVar();
+			const diffuseSum = vec3( sampleTexture( uvNode ).mul( weightSum ) ).toVar();
+
+			for ( let i = 1; i < kernelSize; i ++ ) {
+
+				const x = float( i );
+				const w = float( gaussianCoefficients[ i ] );
+
+				const uvOffset = vec2( direction.mul( invSize.mul( x ) ) ).toVar();
+
+				const sample1 = vec3( sampleTexture( uvNode.add( uvOffset ) ) );
+				const sample2 = vec3( sampleTexture( uvNode.sub( uvOffset ) ) );
+
+				diffuseSum.addAssign( sample1.add( sample2 ).mul( w ) );
+				weightSum.addAssign( mul( 2.0, w ) );
+
+			}
+
+			return vec4( diffuseSum.div( weightSum ), 1.0 );
+
+		} );
+
+		//
+
+		const material = this._material || ( this._material = builder.createNodeMaterial( 'MeshBasicNodeMaterial' ) );
+		material.fragmentNode = blur();
+
+		//
+
+		const properties = builder.getNodeProperties( this );
+		properties.textureNode = textureNode;
+
+		//
+
+		return texture( this._verticalRT.texture );
+
+	}
+
+	_getCoefficients( kernelRadius ) {
+
+		const coefficients = [];
+
+		for ( let i = 0; i < kernelRadius; i ++ ) {
+
+			coefficients.push( 0.39894 * Math.exp( - 0.5 * i * i / ( kernelRadius * kernelRadius ) ) / kernelRadius );
+
+		}
+
+		return coefficients;
+
+	}
+
+}
+
+export const gaussianBlur = ( node, sigma ) => nodeObject( new GaussianBlurNode( nodeObject( node ), sigma ) );
+
+addNodeElement( 'gaussianBlur', gaussianBlur );
+
+export default GaussianBlurNode;
+

package/examples/jsm/nodes/display/NormalMapNode.js

@@ -8,7 +8,7 @@ import { tangentView } from '../accessors/TangentNode.js';
 import { uv } from '../accessors/UVNode.js';
 import { faceDirection } from './FrontFacingNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { tslFn, nodeProxy, vec3, mat3 } from '../shadernode/ShaderNode.js';
+import { addNodeElement, tslFn, nodeProxy, vec3, mat3 } from '../shadernode/ShaderNode.js';
 
 import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from 'three';
 
@@ -103,4 +103,6 @@ export const normalMap = nodeProxy( NormalMapNode );
 
 export const TBNViewMatrix = mat3( tangentView, bitangentView, normalView );
 
+addNodeElement( 'normalMap', normalMap );
+
 addNodeClass( 'NormalMapNode', NormalMapNode );

package/examples/jsm/nodes/display/PassNode.js

@@ -0,0 +1,182 @@
+import { addNodeClass } from '../core/Node.js';
+import TempNode from '../core/TempNode.js';
+import TextureNode 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 { RenderTarget, Vector2, HalfFloatType, DepthTexture, FloatType, NoToneMapping } from 'three';
+
+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 PassNode extends TempNode {
+
+	constructor( scope, scene, camera ) {
+
+		super( 'vec4' );
+
+		this.scope = scope;
+		this.scene = scene;
+		this.camera = camera;
+
+		this._pixelRatio = 1;
+		this._width = 1;
+		this._height = 1;
+
+		const depthTexture = new DepthTexture();
+		depthTexture.isRenderTargetTexture = true;
+		depthTexture.type = FloatType;
+		depthTexture.name = 'PostProcessingDepth';
+
+		const renderTarget = new RenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
+		renderTarget.texture.name = 'PostProcessing';
+		renderTarget.depthTexture = depthTexture;
+
+		this.renderTarget = renderTarget;
+
+		this.updateBeforeType = NodeUpdateType.FRAME;
+
+		this._textureNode = nodeObject( new PassTextureNode( this, renderTarget.texture ) );
+		this._depthTextureNode = nodeObject( new PassTextureNode( this, depthTexture ) );
+
+		this._depthNode = null;
+		this._cameraNear = uniform( 0 );
+		this._cameraFar = uniform( 0 );
+
+		this.isPassNode = true;
+
+	}
+
+	isGlobal() {
+
+		return true;
+
+	}
+
+	getTextureNode() {
+
+		return this._textureNode;
+
+	}
+
+	getTextureDepthNode() {
+
+		return this._depthTextureNode;
+
+	}
+
+	getDepthNode() {
+
+		if ( this._depthNode === null ) {
+
+			const cameraNear = this._cameraNear;
+			const cameraFar = this._cameraFar;
+
+			this._depthNode = viewZToOrthographicDepth( perspectiveDepthToViewZ( this._depthTextureNode, cameraNear, cameraFar ), cameraNear, cameraFar );
+
+		}
+
+		return this._depthNode;
+
+	}
+
+	setup() {
+
+		return this.scope === PassNode.COLOR ? this.getTextureNode() : this.getDepthNode();
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer } = frame;
+		const { scene, camera } = this;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		const size = renderer.getSize( new Vector2() );
+
+		this.setSize( size.width, size.height );
+
+		const currentToneMapping = renderer.toneMapping;
+		const currentToneMappingNode = renderer.toneMappingNode;
+		const currentRenderTarget = renderer.getRenderTarget();
+
+		this._cameraNear.value = camera.near;
+		this._cameraFar.value = camera.far;
+
+		renderer.toneMapping = NoToneMapping;
+		renderer.toneMappingNode = null;
+		renderer.setRenderTarget( this.renderTarget );
+
+		renderer.render( scene, camera );
+
+		renderer.toneMapping = currentToneMapping;
+		renderer.toneMappingNode = currentToneMappingNode;
+		renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	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 ) => nodeObject( new PassNode( PassNode.COLOR, scene, camera ) );
+export const depthPass = ( scene, camera ) => nodeObject( new PassNode( PassNode.DEPTH, scene, camera ) );
+
+addNodeClass( 'PassNode', PassNode );

package/examples/jsm/nodes/display/ViewportDepthNode.js

@@ -6,17 +6,31 @@ import { viewportDepthTexture } from './ViewportDepthTextureNode.js';
 
 class ViewportDepthNode extends Node {
 
-	constructor( scope, textureNode = null ) {
+	constructor( scope, valueNode = null ) {
 
 		super( 'float' );
 
 		this.scope = scope;
-		this.textureNode = textureNode;
+		this.valueNode = valueNode;
 
 		this.isViewportDepthNode = true;
 
 	}
 
+	generate( builder ) {
+
+		const { scope } = this;
+
+		if ( scope === ViewportDepthNode.DEPTH_PIXEL ) {
+
+			return builder.getFragDepth();
+
+		}
+
+		return super.generate( builder );
+
+	}
+
 	setup( /*builder*/ ) {
 
 		const { scope } = this;
@@ -29,11 +43,19 @@ class ViewportDepthNode extends Node {
 
 		} else if ( scope === ViewportDepthNode.DEPTH_TEXTURE ) {
 
-			const texture = this.textureNode || viewportDepthTexture();
+			const texture = this.valueNode || viewportDepthTexture();
 
 			const viewZ = perspectiveDepthToViewZ( texture, cameraNear, cameraFar );
 			node = viewZToOrthographicDepth( viewZ, cameraNear, cameraFar );
 
+		} else if ( scope === ViewportDepthNode.DEPTH_PIXEL ) {
+
+			if ( this.valueNode !== null ) {
+
+ 				node = depthPixelBase().assign( this.valueNode );
+
+			}
+
 		}
 
 		return node;
@@ -60,10 +82,16 @@ export const perspectiveDepthToViewZ = ( depth, near, far ) => near.mul( far ).d
 
 ViewportDepthNode.DEPTH = 'depth';
 ViewportDepthNode.DEPTH_TEXTURE = 'depthTexture';
+ViewportDepthNode.DEPTH_PIXEL = 'depthPixel';
 
 export default ViewportDepthNode;
 
+const depthPixelBase = nodeProxy( ViewportDepthNode, ViewportDepthNode.DEPTH_PIXEL );
+
 export const depth = nodeImmutable( ViewportDepthNode, ViewportDepthNode.DEPTH );
 export const depthTexture = nodeProxy( ViewportDepthNode, ViewportDepthNode.DEPTH_TEXTURE );
+export const depthPixel = nodeImmutable( ViewportDepthNode, ViewportDepthNode.DEPTH_PIXEL );
+
+depthPixel.assign = ( value ) => depthPixelBase( value );
 
 addNodeClass( 'ViewportDepthNode', ViewportDepthNode );

package/examples/jsm/nodes/display/ViewportDepthTextureNode.js

@@ -2,7 +2,7 @@ import ViewportTextureNode from './ViewportTextureNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
 import { viewportTopLeft } from './ViewportNode.js';
-import { DepthTexture, LinearMipmapLinearFilter, DepthFormat, UnsignedIntType } from 'three';
+import { DepthTexture, NearestMipmapNearestFilter, DepthFormat, UnsignedIntType } from 'three';
 
 let sharedDepthbuffer = null;
 
@@ -13,7 +13,7 @@ class ViewportDepthTextureNode extends ViewportTextureNode {
 		if ( sharedDepthbuffer === null ) {
 
 			sharedDepthbuffer = new DepthTexture();
-			sharedDepthbuffer.minFilter = LinearMipmapLinearFilter;
+			sharedDepthbuffer.minFilter = NearestMipmapNearestFilter;
 			sharedDepthbuffer.type = UnsignedIntType;
 			sharedDepthbuffer.format = DepthFormat;
 

package/examples/jsm/nodes/display/ViewportNode.js

@@ -21,7 +21,7 @@ class ViewportNode extends Node {
 
 	getNodeType() {
 
-		return this.scope === ViewportNode.COORDINATE || this.scope === ViewportNode.VIEWPORT ? 'vec4' : 'vec2';
+		return this.scope === ViewportNode.VIEWPORT ? 'vec4' : 'vec2';
 
 	}
 
@@ -55,7 +55,7 @@ class ViewportNode extends Node {
 
 	}
 
-	setup( builder ) {
+	setup( /*builder*/ ) {
 
 		const scope = this.scope;
 
@@ -73,17 +73,12 @@ class ViewportNode extends Node {
 
 		} else {
 
-			const coordinateNode = vec2( new ViewportNode( ViewportNode.COORDINATE ) );
-			const resolutionNode = new ViewportNode( ViewportNode.RESOLUTION );
-
-			output = coordinateNode.div( resolutionNode );
+			output = viewportCoordinate.div( viewportResolution );
 
 			let outX = output.x;
 			let outY = output.y;
 
-			if ( /top/i.test( scope ) && builder.isFlipY() ) outY = outY.oneMinus();
-			else if ( /bottom/i.test( scope ) && builder.isFlipY() === false ) outY = outY.oneMinus();
-
+			if ( /bottom/i.test( scope ) ) outY = outY.oneMinus();
 			if ( /right/i.test( scope ) ) outX = outX.oneMinus();
 
 			output = vec2( outX, outY );
@@ -98,7 +93,19 @@ class ViewportNode extends Node {
 
 		if ( this.scope === ViewportNode.COORDINATE ) {
 
-			return builder.getFragCoord();
+			let coord = builder.getFragCoord();
+
+			if ( builder.isFlipY() ) {
+
+				// follow webgpu standards
+
+				const resolution = builder.getNodeProperties( viewportResolution ).outputNode.build( builder );
+
+				coord = `${ builder.getType( 'vec2' ) }( ${ coord }.x, ${ resolution }.y - ${ coord }.y )`;
+
+			}
+
+			return coord;
 
 		}
 

package/examples/jsm/nodes/functions/BSDF/BRDF_Sheen.js

@@ -4,7 +4,7 @@ import { sheen, sheenRoughness } from '../../core/PropertyNode.js';
 import { tslFn, float } from '../../shadernode/ShaderNode.js';
 
 // https://github.com/google/filament/blob/master/shaders/src/brdf.fs
-const D_Charlie = ( roughness, dotNH ) => {
+const D_Charlie = tslFn( ( { roughness, dotNH } ) => {
 
 	const alpha = roughness.pow2();
 
@@ -15,15 +15,29 @@ const D_Charlie = ( roughness, dotNH ) => {
 
 	return float( 2.0 ).add( invAlpha ).mul( sin2h.pow( invAlpha.mul( 0.5 ) ) ).div( 2.0 * Math.PI );
 
-};
+} ).setLayout( {
+	name: 'D_Charlie',
+	type: 'float',
+	inputs: [
+		{ name: 'roughness', type: 'float' },
+		{ name: 'dotNH', type: 'float' }
+	]
+} );
 
 // https://github.com/google/filament/blob/master/shaders/src/brdf.fs
-const V_Neubelt = ( dotNV, dotNL ) => {
+const V_Neubelt = tslFn( ( { dotNV, dotNL } ) => {
 
 	// Neubelt and Pettineo 2013, "Crafting a Next-gen Material Pipeline for The Order: 1886"
 	return float( 1.0 ).div( float( 4.0 ).mul( dotNL.add( dotNV ).sub( dotNL.mul( dotNV ) ) ) );
 
-};
+} ).setLayout( {
+	name: 'V_Neubelt',
+	type: 'float',
+	inputs: [
+		{ name: 'dotNV', type: 'float' },
+		{ name: 'dotNL', type: 'float' }
+	]
+} );
 
 const BRDF_Sheen = tslFn( ( { lightDirection } ) => {
 
@@ -33,8 +47,8 @@ const BRDF_Sheen = tslFn( ( { lightDirection } ) => {
 	const dotNV = transformedNormalView.dot( positionViewDirection ).clamp();
 	const dotNH = transformedNormalView.dot( halfDir ).clamp();
 
-	const D = D_Charlie( sheenRoughness, dotNH );
-	const V = V_Neubelt( dotNV, dotNL );
+	const D = D_Charlie( { roughness: sheenRoughness, dotNH } );
+	const V = V_Neubelt( { dotNV, dotNL } );
 
 	return sheen.mul( D ).mul( V );
 

package/examples/jsm/nodes/functions/BSDF/DFGApprox.js

@@ -1,16 +1,10 @@
-import { transformedNormalView } from '../../accessors/NormalNode.js';
-import { positionViewDirection } from '../../accessors/PositionNode.js';
 import { tslFn, vec2, vec4 } from '../../shadernode/ShaderNode.js';
 
 // Analytical approximation of the DFG LUT, one half of the
 // split-sum approximation used in indirect specular lighting.
 // via 'environmentBRDF' from "Physically Based Shading on Mobile"
 // https://www.unrealengine.com/blog/physically-based-shading-on-mobile
-const DFGApprox = tslFn( ( inputs ) => {
-
-	const { roughness } = inputs;
-
-	const dotNV = inputs.dotNV || transformedNormalView.dot( positionViewDirection ).clamp(); // @ TODO: Move to core dotNV
+const DFGApprox = tslFn( ( { roughness, dotNV } ) => {
 
 	const c0 = vec4( - 1, - 0.0275, - 0.572, 0.022 );
 
@@ -24,6 +18,13 @@ const DFGApprox = tslFn( ( inputs ) => {
 
 	return fab;
 
+} ).setLayout( {
+	name: 'DFGApprox',
+	type: 'vec2',
+	inputs: [
+		{ name: 'roughness', type: 'float' },
+		{ name: 'dotNV', type: 'vec3' }
+	]
 } );
 
 export default DFGApprox;

package/examples/jsm/nodes/functions/BSDF/D_GGX.js

@@ -3,9 +3,7 @@ import { tslFn } from '../../shadernode/ShaderNode.js';
 // Microfacet Models for Refraction through Rough Surfaces - equation (33)
 // http://graphicrants.blogspot.com/2013/08/specular-brdf-reference.html
 // alpha is "roughness squared" in Disney’s reparameterization
-const D_GGX = tslFn( ( inputs ) => {
-
-	const { alpha, dotNH } = inputs;
+const D_GGX = tslFn( ( { alpha, dotNH } ) => {
 
 	const a2 = alpha.pow2();
 
@@ -13,6 +11,13 @@ const D_GGX = tslFn( ( inputs ) => {
 
 	return a2.div( denom.pow2() ).mul( 1 / Math.PI );
 
+} ).setLayout( {
+	name: 'D_GGX',
+	type: 'float',
+	inputs: [
+		{ name: 'alpha', type: 'float' },
+		{ name: 'dotNH', type: 'float' }
+	]
 } ); // validated
 
 export default D_GGX;

package/examples/jsm/nodes/functions/BSDF/Schlick_to_F0.js

@@ -8,6 +8,14 @@ const Schlick_to_F0 = tslFn( ( { f, f90, dotVH } ) => {
 
 	return f.sub( vec3( f90 ).mul( x5 ) ).div( x5.oneMinus() );
 
+} ).setLayout( {
+	name: 'Schlick_to_F0',
+	type: 'vec3',
+	inputs: [
+		{ name: 'f', type: 'vec3' },
+		{ name: 'f90', type: 'float' },
+		{ name: 'dotVH', type: 'float' }
+	]
 } );
 
 export default Schlick_to_F0;

package/examples/jsm/nodes/functions/BSDF/V_GGX_SmithCorrelated.js

@@ -15,6 +15,14 @@ const V_GGX_SmithCorrelated = tslFn( ( inputs ) => {
 
 	return div( 0.5, gv.add( gl ).max( EPSILON ) );
 
+} ).setLayout( {
+	name: 'V_GGX_SmithCorrelated',
+	type: 'float',
+	inputs: [
+		{ name: 'alpha', type: 'float' },
+		{ name: 'dotNL', type: 'float' },
+		{ name: 'dotNV', type: 'float' }
+	]
 } ); // validated
 
 export default V_GGX_SmithCorrelated;