@needle-tools/three 0.146.10 → 0.153.0

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

@@ -1,9 +1,11 @@
-import TempNode from '../core/Node.js';
-import { ShaderNode, EPSILON, vec3, sub, mul, div, cond, lessThan, equal, max } from '../shadernode/ShaderNodeBaseElements.js';
+import TempNode from '../core/TempNode.js';
+import { EPSILON } from '../math/MathNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, ShaderNode, nodeProxy, vec3 } from '../shadernode/ShaderNode.js';
 
 export const BurnNode = new ShaderNode( ( { base, blend } ) => {
 
-	const fn = ( c ) => cond( lessThan( blend[ c ], EPSILON ), blend[ c ], max( sub( 1.0, div( sub( 1.0, base[ c ] ), blend[ c ] ) ), 0 ) );
+	const fn = ( c ) => blend[ c ].lessThan( EPSILON ).cond( blend[ c ], base[ c ].oneMinus().div( blend[ c ] ).oneMinus().max( 0 ) );
 
 	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
 
@@ -11,7 +13,7 @@ export const BurnNode = new ShaderNode( ( { base, blend } ) => {
 
 export const DodgeNode = new ShaderNode( ( { base, blend } ) => {
 
-	const fn = ( c ) => cond( equal( blend[ c ], 1.0 ), blend[ c ], max( div( base[ c ], sub( 1.0, blend[ c ] ) ), 0 ) );
+	const fn = ( c ) => blend[ c ].equal( 1.0 ).cond( blend[ c ], base[ c ].div( blend[ c ].oneMinus() ).max( 0 ) );
 
 	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
 
@@ -19,7 +21,7 @@ export const DodgeNode = new ShaderNode( ( { base, blend } ) => {
 
 export const ScreenNode = new ShaderNode( ( { base, blend } ) => {
 
-	const fn = ( c ) => sub( 1.0, mul( sub( 1.0, base[ c ] ), sub( 1.0, blend[ c ] ) ) );
+	const fn = ( c ) => base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus();
 
 	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
 
@@ -27,7 +29,7 @@ export const ScreenNode = new ShaderNode( ( { base, blend } ) => {
 
 export const OverlayNode = new ShaderNode( ( { base, blend } ) => {
 
-	const fn = ( c ) => cond( lessThan( base[ c ], 0.5 ), mul( 2.0, base[ c ], blend[ c ] ), sub( 1.0, mul( sub( 1.0, base[ c ] ), sub( 1.0, blend[ c ] ) ) ) );
+	const fn = ( c ) => base[ c ].lessThan( 0.5 ).cond( base[ c ].mul( blend[ c ], 2.0 ), base[ c ].oneMinus().mul( blend[ c ].oneMinus() ).oneMinus() );
 
 	return vec3( fn( 'x' ), fn( 'y' ), fn( 'z' ) );
 
@@ -35,11 +37,6 @@ export const OverlayNode = new ShaderNode( ( { base, blend } ) => {
 
 class BlendModeNode extends TempNode {
 
-	static BURN = 'burn';
-	static DODGE = 'dodge';
-	static SCREEN = 'screen';
-	static OVERLAY = 'overlay';
-
 	constructor( blendMode, baseNode, blendNode ) {
 
 		super();
@@ -82,4 +79,21 @@ class BlendModeNode extends TempNode {
 
 }
 
+BlendModeNode.BURN = 'burn';
+BlendModeNode.DODGE = 'dodge';
+BlendModeNode.SCREEN = 'screen';
+BlendModeNode.OVERLAY = 'overlay';
+
 export default BlendModeNode;
+
+export const burn = nodeProxy( BlendModeNode, BlendModeNode.BURN );
+export const dodge = nodeProxy( BlendModeNode, BlendModeNode.DODGE );
+export const overlay = nodeProxy( BlendModeNode, BlendModeNode.OVERLAY );
+export const screen = nodeProxy( BlendModeNode, BlendModeNode.SCREEN );
+
+addNodeElement( 'burn', burn );
+addNodeElement( 'dodge', dodge );
+addNodeElement( 'overlay', overlay );
+addNodeElement( 'screen', screen );
+
+addNodeClass( BlendModeNode );

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

@@ -1,20 +1,23 @@
 import TempNode from '../core/TempNode.js';
-import { ShaderNode, vec3, mat3, add, sub, mul, max, div, float, mix, cos, sin, atan2, sqrt, luminance } from '../shadernode/ShaderNodeBaseElements.js';
+import { dot, mix } from '../math/MathNode.js';
+import { add } from '../math/OperatorNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, ShaderNode, nodeProxy, float, vec3, mat3 } from '../shadernode/ShaderNode.js';
 
 const saturationNode = new ShaderNode( ( { color, adjustment } ) => {
 
-	return mix( luminance( color ), color, adjustment );
+	return adjustment.mix( luminance( color ), color );
 
 } );
 
 const vibranceNode = new ShaderNode( ( { color, adjustment } ) => {
 
-	const average = div( add( color.r, color.g, color.b ), 3.0 );
+	const average = add( color.r, color.g, color.b ).div( 3.0 );
 
-	const mx = max( color.r, max( color.g, color.b ) );
-	const amt = mul( sub( mx, average ), mul( - 3.0, adjustment ) );
+	const mx = color.r.max( color.g.max( color.b ) );
+	const amt = mx.sub( average ).mul( adjustment ).mul( - 3.0 );
 
-	return mix( color.rgb, vec3( mx ), amt );
+	return mix( color, mx, amt );
 
 } );
 
@@ -23,21 +26,17 @@ const hueNode = new ShaderNode( ( { color, adjustment } ) => {
 	const RGBtoYIQ = mat3( 0.299, 0.587, 0.114, 0.595716, - 0.274453, - 0.321263, 0.211456, - 0.522591, 0.311135 );
 	const YIQtoRGB = mat3( 1.0, 0.9563, 0.6210, 1.0, - 0.2721, - 0.6474, 1.0, - 1.107, 1.7046 );
 
-	const yiq = mul( RGBtoYIQ, color );
+	const yiq = RGBtoYIQ.mul( color );
 
-	const hue = add( atan2( yiq.z, yiq.y ), adjustment );
-	const chroma = sqrt( add( mul( yiq.z, yiq.z ), mul( yiq.y, yiq.y ) ) );
+	const hue = yiq.z.atan2( yiq.y ).add( adjustment );
+	const chroma = yiq.yz.length();
 
-	return mul( YIQtoRGB, vec3( yiq.x, mul( chroma, cos( hue ) ), mul( chroma, sin( hue ) ) ) );
+	return YIQtoRGB.mul( vec3( yiq.x, chroma.mul( hue.cos() ), chroma.mul( hue.sin() ) ) );
 
 } );
 
 class ColorAdjustmentNode extends TempNode {
 
-	static SATURATION = 'saturation';
-	static VIBRANCE = 'vibrance';
-	static HUE = 'hue';
-
 	constructor( method, colorNode, adjustmentNode = float( 1 ) ) {
 
 		super( 'vec3' );
@@ -81,4 +80,21 @@ class ColorAdjustmentNode extends TempNode {
 
 }
 
+ColorAdjustmentNode.SATURATION = 'saturation';
+ColorAdjustmentNode.VIBRANCE = 'vibrance';
+ColorAdjustmentNode.HUE = 'hue';
+
 export default ColorAdjustmentNode;
+
+export const saturation = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.SATURATION );
+export const vibrance = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.VIBRANCE );
+export const hue = nodeProxy( ColorAdjustmentNode, ColorAdjustmentNode.HUE );
+
+export const lumaCoeffs = vec3( 0.2125, 0.7154, 0.0721 );
+export const luminance = ( color, luma = lumaCoeffs ) => dot( color, luma );
+
+addNodeElement( 'saturation', saturation );
+addNodeElement( 'vibrance', vibrance );
+addNodeElement( 'hue', hue );
+
+addNodeClass( ColorAdjustmentNode );

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

@@ -1,7 +1,9 @@
-import TempNode from '../core/Node.js';
-import { ShaderNode, vec3, pow, mul, sub, mix, vec4, lessThanEqual } from '../shadernode/ShaderNodeBaseElements.js';
+import TempNode from '../core/TempNode.js';
+import { mix } from '../math/MathNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, ShaderNode, nodeObject, vec4 } from '../shadernode/ShaderNode.js';
 
-import { LinearEncoding, sRGBEncoding } from 'three';
+import { LinearEncoding, LinearSRGBColorSpace, sRGBEncoding, SRGBColorSpace } from 'three';
 
 export const LinearToLinear = new ShaderNode( ( inputs ) => {
 
@@ -12,12 +14,11 @@ export const LinearToLinear = new ShaderNode( ( inputs ) => {
 export const LinearTosRGB = new ShaderNode( ( inputs ) => {
 
 	const { value } = inputs;
+	const { rgb } = value;
 
-	const rgb = value.rgb;
-
-	const a = sub( mul( pow( value.rgb, vec3( 0.41666 ) ), 1.055 ), vec3( 0.055 ) );
-	const b = mul( rgb, 12.92 );
-	const factor = vec3( lessThanEqual( rgb, vec3( 0.0031308 ) ) );
+	const a = rgb.pow( 0.41666 ).mul( 1.055 ).sub( 0.055 );
+	const b = rgb.mul( 12.92 );
+	const factor = rgb.lessThanEqual( 0.0031308 );
 
 	const rgbResult = mix( a, b, factor );
 
@@ -32,9 +33,6 @@ const EncodingLib = {
 
 class ColorSpaceNode extends TempNode {
 
-	static LINEAR_TO_LINEAR = 'LinearToLinear';
-	static LINEAR_TO_SRGB = 'LinearTosRGB';
-
 	constructor( method, node ) {
 
 		super( 'vec4' );
@@ -45,15 +43,15 @@ class ColorSpaceNode extends TempNode {
 
 	}
 
-	fromEncoding( encoding ) {
+	fromColorSpace( colorSpace ) {
 
 		let method = null;
 
-		if ( encoding === LinearEncoding ) {
+		if ( colorSpace === LinearSRGBColorSpace ) {
 
 			method = 'Linear';
 
-		} else if ( encoding === sRGBEncoding ) {
+		} else if ( colorSpace === SRGBColorSpace ) {
 
 			method = 'sRGB';
 
@@ -65,31 +63,45 @@ class ColorSpaceNode extends TempNode {
 
 	}
 
-	construct() {
-
-		const method = this.method;
-		const node = this.node;
+	fromEncoding( encoding ) { // @deprecated, r152
 
-		let outputNode = null;
+		console.warn( 'THREE.ColorSpaceNode: Method .fromEncoding renamed to .fromColorSpace.' );
 
-		if ( method !== ColorSpaceNode.LINEAR_TO_LINEAR ) {
+		let method = null;
 
-			const encodingFunctionNode = EncodingLib[ method ];
+		if ( encoding === LinearEncoding ) {
 
-			outputNode = encodingFunctionNode.call( {
-				value: node
-			} );
+			method = 'Linear';
 
-		} else {
+		} else if ( encoding === sRGBEncoding ) {
 
-			outputNode = node;
+			method = 'sRGB';
 
 		}
 
-		return outputNode;
+		this.method = 'LinearTo' + method;
+
+		return this;
+
+	}
+
+	construct() {
+
+		const { method, node } = this;
+
+		return EncodingLib[ method ].call( { value: node } );
 
 	}
 
 }
 
+ColorSpaceNode.LINEAR_TO_LINEAR = 'LinearToLinear';
+ColorSpaceNode.LINEAR_TO_SRGB = 'LinearTosRGB';
+
 export default ColorSpaceNode;
+
+export const colorSpace = ( node, colorSpace ) => nodeObject( new ColorSpaceNode( null, nodeObject( node ) ).fromColorSpace( colorSpace ) );
+
+addNodeElement( 'colorSpace', colorSpace );
+
+addNodeClass( ColorSpaceNode );

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

@@ -1,4 +1,5 @@
-import Node from '../core/Node.js';
+import Node, { addNodeClass } from '../core/Node.js';
+import { nodeImmutable, float } from '../shadernode/ShaderNode.js';
 
 class FrontFacingNode extends Node {
 
@@ -19,3 +20,8 @@ class FrontFacingNode extends Node {
 }
 
 export default FrontFacingNode;
+
+export const frontFacing = nodeImmutable( FrontFacingNode );
+export const faceDirection = float( frontFacing ).mul( 2.0 ).sub( 1.0 );
+
+addNodeClass( FrontFacingNode );

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

@@ -1,5 +1,14 @@
 import TempNode from '../core/TempNode.js';
-import { ShaderNode, positionView, normalView, uv, vec3, add, sub, mul, dFdx, dFdy, cross, max, dot, normalize, inversesqrt, faceDirection, modelNormalMatrix, TBNViewMatrix } from '../shadernode/ShaderNodeBaseElements.js';
+import { add } from '../math/OperatorNode.js';
+import { bitangentView } from '../accessors/BitangentNode.js';
+import { modelNormalMatrix } from '../accessors/ModelNode.js';
+import { normalView } from '../accessors/NormalNode.js';
+import { positionView } from '../accessors/PositionNode.js';
+import { tangentView } from '../accessors/TangentNode.js';
+import { uv } from '../accessors/UVNode.js';
+import { faceDirection } from './FrontFacingNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { ShaderNode, nodeProxy, vec3, mat3 } from '../shadernode/ShaderNode.js';
 
 import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from 'three';
 
@@ -10,23 +19,23 @@ const perturbNormal2ArbNode = new ShaderNode( ( inputs ) => {
 
 	const { eye_pos, surf_norm, mapN, uv } = inputs;
 
-	const q0 = dFdx( eye_pos.xyz );
-	const q1 = dFdy( eye_pos.xyz );
-	const st0 = dFdx( uv.st );
-	const st1 = dFdy( uv.st );
+	const q0 = eye_pos.dFdx();
+	const q1 = eye_pos.dFdy();
+	const st0 = uv.dFdx();
+	const st1 = uv.dFdy();
 
 	const N = surf_norm; // normalized
 
-	const q1perp = cross( q1, N );
-	const q0perp = cross( N, q0 );
+	const q1perp = q1.cross( N );
+	const q0perp = N.cross( q0 );
 
-	const T = add( mul( q1perp, st0.x ), mul( q0perp, st1.x ) );
-	const B = add( mul( q1perp, st0.y ), mul( q0perp, st1.y ) );
+	const T = q1perp.mul( st0.x ).add( q0perp.mul( st1.x ) );
+	const B = q1perp.mul( st0.y ).add( q0perp.mul( st1.y ) );
 
-	const det = max( dot( T, T ), dot( B, B ) );
-	const scale = mul( faceDirection, inversesqrt( det ) );
+	const det = T.dot( T ).max( B.dot( B ) );
+	const scale = faceDirection.mul( det.inverseSqrt() );
 
-	return normalize( add( mul( T, mul( mapN.x, scale ) ), mul( B, mul( mapN.y, scale ) ), mul( N, mapN.z ) ) );
+	return add( T.mul( mapN.x, scale ), B.mul( mapN.y, scale ), N.mul( mapN.z ) ).normalize();
 
 } );
 
@@ -47,13 +56,11 @@ class NormalMapNode extends TempNode {
 
 		const { normalMapType, scaleNode } = this;
 
-		const normalOP = mul( this.node, 2.0 );
-		let normalMap = sub( normalOP, 1.0 );
+		let normalMap = this.node.mul( 2.0 ).sub( 1.0 );
 
 		if ( scaleNode !== null ) {
 
-			const normalMapScale = mul( normalMap.xy, scaleNode );
-			normalMap = vec3( normalMapScale, normalMap.z );
+			normalMap = vec3( normalMap.xy.mul( scaleNode ), normalMap.z );
 
 		}
 
@@ -61,7 +68,7 @@ class NormalMapNode extends TempNode {
 
 		if ( normalMapType === ObjectSpaceNormalMap ) {
 
-			outputNode = normalize( mul( modelNormalMatrix, normalMap ) );
+			outputNode = modelNormalMatrix.mul( normalMap ).normalize();
 
 		} else if ( normalMapType === TangentSpaceNormalMap ) {
 
@@ -69,7 +76,7 @@ class NormalMapNode extends TempNode {
 
 			if ( tangent === true ) {
 
-				outputNode = normalize( mul( TBNViewMatrix, normalMap ) );
+				outputNode = TBNViewMatrix.mul( normalMap ).normalize();
 
 			} else {
 
@@ -91,3 +98,9 @@ class NormalMapNode extends TempNode {
 }
 
 export default NormalMapNode;
+
+export const normalMap = nodeProxy( NormalMapNode );
+
+export const TBNViewMatrix = mat3( tangentView, bitangentView, normalView );
+
+addNodeClass( NormalMapNode );

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

@@ -1,5 +1,6 @@
-import TempNode from '../core/Node.js';
-import { mul, floor, reciprocal } from '../shadernode/ShaderNodeBaseElements.js';
+import TempNode from '../core/TempNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
 
 class PosterizeNode extends TempNode {
 
@@ -16,10 +17,16 @@ class PosterizeNode extends TempNode {
 
 		const { sourceNode, stepsNode } = this;
 
-		return mul( floor( mul( sourceNode, stepsNode ) ), reciprocal( stepsNode ) );
+		return sourceNode.mul( stepsNode ).floor().div( stepsNode );
 
 	}
 
 }
 
 export default PosterizeNode;
+
+export const posterize = nodeProxy( PosterizeNode );
+
+addNodeElement( 'posterize', posterize );
+
+addNodeClass( PosterizeNode );

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

@@ -1,18 +1,90 @@
-import TempNode from '../core/Node.js';
-import { ShaderNode, mul, float } from '../shadernode/ShaderNodeBaseElements.js';
+import TempNode from '../core/TempNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { ShaderNode, nodeObject, float, mat3 } from '../shadernode/ShaderNode.js';
 
-import { LinearToneMapping } from 'three';
+import { NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping } from 'three';
 
 // exposure only
-export const LinearToneMappingNode = new ShaderNode( ( { color, exposure } ) => {
+const LinearToneMappingNode = new ShaderNode( ( { color, exposure } ) => {
 
-	return mul( color, exposure );
+	return color.mul( exposure ).clamp();
 
 } );
 
+// source: https://www.cs.utah.edu/docs/techreports/2002/pdf/UUCS-02-001.pdf
+const ReinhardToneMappingNode = new ShaderNode( ( { color, exposure } ) => {
+
+	color = color.mul( exposure );
+
+	return color.div( color.add( 1.0 ) ).clamp();
+
+} );
+
+// source: http://filmicworlds.com/blog/filmic-tonemapping-operators/
+const OptimizedCineonToneMappingNode = new ShaderNode( ( { color, exposure } ) => {
+
+	// optimized filmic operator by Jim Hejl and Richard Burgess-Dawson
+	color = color.mul( exposure );
+	color = color.sub( 0.004 ).max( 0.0 );
+
+	const a = color.mul( color.mul( 6.2 ).add( 0.5 ) );
+	const b = color.mul( color.mul( 6.2 ).add( 1.7 ) ).add( 0.06 );
+
+	return a.div( b ).pow( 2.2 );
+
+} );
+
+// source: https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs
+const RRTAndODTFit = new ShaderNode( ( { color } ) => {
+
+	const a = color.mul( color.add( 0.0245786 ) ).sub( 0.000090537 );
+	const b = color.mul( color.add( 0.4329510 ).mul( 0.983729 ) ).add( 0.238081 );
+
+	return a.div( b );
+
+} );
+
+// source: https://github.com/selfshadow/ltc_code/blob/master/webgl/shaders/ltc/ltc_blit.fs
+const ACESFilmicToneMappingNode = new ShaderNode( ( { color, exposure } ) => {
+
+	// sRGB => XYZ => D65_2_D60 => AP1 => RRT_SAT
+	const ACESInputMat = mat3(
+		0.59719, 0.35458, 0.04823,
+		0.07600, 0.90834, 0.01566,
+		0.02840, 0.13383, 0.83777
+	);
+
+	// ODT_SAT => XYZ => D60_2_D65 => sRGB
+	const ACESOutputMat = mat3(
+		1.60475, - 0.53108, - 0.07367,
+		- 0.10208, 1.10813, - 0.00605,
+		- 0.00327, - 0.07276, 1.07602
+	);
+
+	color = color.mul( exposure ).div( 0.6 );
+
+	color = ACESInputMat.mul( color );
+
+	// Apply RRT and ODT
+	color = RRTAndODTFit.call( { color } );
+
+	color = ACESOutputMat.mul( color );
+
+	// Clamp to [0, 1]
+	return color.clamp();
+
+} );
+
+const toneMappingLib = {
+	[ LinearToneMapping ]: LinearToneMappingNode,
+	[ ReinhardToneMapping ]: ReinhardToneMappingNode,
+	[ CineonToneMapping ]: OptimizedCineonToneMappingNode,
+	[ ACESFilmicToneMapping ]: ACESFilmicToneMappingNode
+};
+
 class ToneMappingNode extends TempNode {
 
-	constructor( toneMapping, exposureNode = float( 1 ), colorNode = null ) {
+	constructor( toneMapping = NoToneMapping, exposureNode = float( 1 ), colorNode = null ) {
 
 		super( 'vec3' );
 
@@ -23,22 +95,36 @@ class ToneMappingNode extends TempNode {
 
 	}
 
-	construct( builder ) {
+	getCacheKey() {
+
+		let cacheKey = super.getCacheKey();
+		cacheKey = '{toneMapping:' + this.toneMapping + ',nodes:' + cacheKey + '}';
 
-		const colorNode = this.color || builder.context.color;
+		return cacheKey;
 
+	}
+
+	construct( builder ) {
+
+		const colorNode = this.colorNode || builder.context.color;
 		const toneMapping = this.toneMapping;
+
+		if ( toneMapping === NoToneMapping ) return colorNode;
+
 		const toneMappingParams = { exposure: this.exposureNode, color: colorNode };
+		const toneMappingNode = toneMappingLib[ toneMapping ];
 
 		let outputNode = null;
 
-		if ( toneMapping === LinearToneMapping ) {
+		if ( toneMappingNode ) {
 
-			outputNode = LinearToneMappingNode.call( toneMappingParams );
+			outputNode = toneMappingNode.call( toneMappingParams );
 
 		} else {
 
-			outputNode = this.colorNode;
+			console.error( 'ToneMappingNode: Unsupported Tone Mapping configuration.', toneMapping );
+
+			outputNode = colorNode;
 
 		}
 
@@ -49,3 +135,7 @@ class ToneMappingNode extends TempNode {
 }
 
 export default ToneMappingNode;
+
+export const toneMapping = ( mapping, exposure, color ) => nodeObject( new ToneMappingNode( mapping, nodeObject( exposure ), nodeObject( color ) ) );
+
+addNodeClass( ToneMappingNode );

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

@@ -1,19 +1,14 @@
-import Node from '../core/Node.js';
-import { uniform, div, vec2, invert } from '../shadernode/ShaderNodeBaseElements.js';
-import { Vector2 } from 'three';
+import Node, { addNodeClass } from '../core/Node.js';
 import { NodeUpdateType } from '../core/constants.js';
+import { uniform } from '../core/UniformNode.js';
+import { nodeImmutable, vec2 } from '../shadernode/ShaderNode.js';
+
+import { Vector2 } from 'three';
 
 let resolution;
 
 class ViewportNode extends Node {
 
-	static COORDINATE = 'coordinate';
-	static RESOLUTION = 'resolution';
-	static TOP_LEFT = 'topLeft';
-	static BOTTOM_LEFT = 'bottomLeft';
-	static TOP_RIGHT = 'topRight';
-	static BOTTOM_RIGHT = 'bottomRight';
-
 	constructor( scope ) {
 
 		super();
@@ -48,7 +43,7 @@ class ViewportNode extends Node {
 
 	update( { renderer } ) {
 
-		renderer.getSize( resolution );
+		renderer.getDrawingBufferSize( resolution );
 
 	}
 
@@ -62,24 +57,22 @@ class ViewportNode extends Node {
 
 		if ( scope === ViewportNode.RESOLUTION ) {
 
-			resolution ||= new Vector2();
-
-			output = uniform( resolution );
+			output = uniform( resolution || ( resolution = new Vector2() ) );
 
 		} else {
 
 			const coordinateNode = vec2( new ViewportNode( ViewportNode.COORDINATE ) );
 			const resolutionNode = new ViewportNode( ViewportNode.RESOLUTION );
 
-			output = div( coordinateNode, resolutionNode );
+			output = coordinateNode.div( resolutionNode );
 
 			let outX = output.x;
 			let outY = output.y;
 
-			if ( /top/i.test( scope ) && builder.isFlipY() ) outY = invert( outY );
-			else if ( /bottom/i.test( scope ) && builder.isFlipY() === false ) outY = invert( outY );
+			if ( /top/i.test( scope ) && builder.isFlipY() ) outY = outY.oneMinus();
+			else if ( /bottom/i.test( scope ) && builder.isFlipY() === false ) outY = outY.oneMinus();
 
-			if ( /right/i.test( scope ) ) outX = invert( outX );
+			if ( /right/i.test( scope ) ) outX = outX.oneMinus();
 
 			output = vec2( outX, outY );
 
@@ -103,4 +96,20 @@ class ViewportNode extends Node {
 
 }
 
+ViewportNode.COORDINATE = 'coordinate';
+ViewportNode.RESOLUTION = 'resolution';
+ViewportNode.TOP_LEFT = 'topLeft';
+ViewportNode.BOTTOM_LEFT = 'bottomLeft';
+ViewportNode.TOP_RIGHT = 'topRight';
+ViewportNode.BOTTOM_RIGHT = 'bottomRight';
+
 export default ViewportNode;
+
+export const viewportCoordinate = nodeImmutable( ViewportNode, ViewportNode.COORDINATE );
+export const viewportResolution = nodeImmutable( ViewportNode, ViewportNode.RESOLUTION );
+export const viewportTopLeft = nodeImmutable( ViewportNode, ViewportNode.TOP_LEFT );
+export const viewportBottomLeft = nodeImmutable( ViewportNode, ViewportNode.BOTTOM_LEFT );
+export const viewportTopRight = nodeImmutable( ViewportNode, ViewportNode.TOP_RIGHT );
+export const viewportBottomRight = nodeImmutable( ViewportNode, ViewportNode.BOTTOM_RIGHT );
+
+addNodeClass( ViewportNode );

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

@@ -0,0 +1,30 @@
+import ViewportTextureNode from './ViewportTextureNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { addNodeElement, nodeProxy } from '../shadernode/ShaderNode.js';
+import { viewportTopLeft } from './ViewportNode.js';
+
+let sharedFramebuffer = null;
+
+class ViewportSharedTextureNode extends ViewportTextureNode {
+
+	constructor( uv = viewportTopLeft ) {
+
+		super( uv );
+
+	}
+
+	constructFramebuffer( builder ) {
+
+		return sharedFramebuffer || ( sharedFramebuffer = super.constructFramebuffer( builder ) );
+
+	}
+
+}
+
+export default ViewportSharedTextureNode;
+
+export const viewportSharedTexture = nodeProxy( ViewportSharedTextureNode );
+
+addNodeElement( 'viewportSharedTexture', viewportSharedTexture );
+
+addNodeClass( ViewportSharedTextureNode );