super-three 0.141.0 → 0.147.0

package/examples/jsm/nodes/utils/JoinNode.js

@@ -1,10 +1,10 @@
-import Node from '../core/Node.js';
+import TempNode from '../core/Node.js';
 
-class JoinNode extends Node {
+class JoinNode extends TempNode {
 
-	constructor( nodes = [] ) {
+	constructor( nodes = [], nodeType = null ) {
 
-		super();
+		super( nodeType );
 
 		this.nodes = nodes;
 
@@ -12,20 +12,24 @@ class JoinNode extends Node {
 
 	getNodeType( builder ) {
 
+		if ( this.nodeType !== null ) {
+
+			return builder.getVectorType( this.nodeType );
+
+		}
+
 		return builder.getTypeFromLength( this.nodes.reduce( ( count, cur ) => count + builder.getTypeLength( cur.getNodeType( builder ) ), 0 ) );
 
 	}
 
-	generate( builder ) {
+	generate( builder, output ) {
 
 		const type = this.getNodeType( builder );
 		const nodes = this.nodes;
 
 		const snippetValues = [];
 
-		for ( let i = 0; i < nodes.length; i ++ ) {
-
-			const input = nodes[ i ];
+		for ( const input of nodes ) {
 
 			const inputSnippet = input.build( builder );
 
@@ -33,7 +37,9 @@ class JoinNode extends Node {
 
 		}
 
-		return `${ builder.getType( type ) }( ${ snippetValues.join( ', ' ) } )`;
+		const snippet = `${ builder.getType( type ) }( ${ snippetValues.join( ', ' ) } )`;
+
+		return builder.format( snippet, type, output );
 
 	}
 

package/examples/jsm/nodes/utils/MatcapUVNode.js

@@ -9,14 +9,12 @@ class MatcapUVNode extends TempNode {
 
 	}
 
-	generate( builder ) {
+	construct() {
 
 		const x = normalize( vec3( positionViewDirection.z, 0, negate( positionViewDirection.x ) ) );
 		const y = cross( positionViewDirection, x );
 
-		const uv = add( mul( vec2( dot( x, transformedNormalView ), dot( y, transformedNormalView ) ), 0.495 ), 0.5 );
-
-		return uv.build( builder, this.getNodeType( builder ) );
+		return add( mul( vec2( dot( x, transformedNormalView ), dot( y, transformedNormalView ) ), 0.495 ), 0.5 );
 
 	}
 

package/examples/jsm/nodes/utils/MaxMipLevelNode.js

@@ -9,13 +9,14 @@ class MaxMipLevelNode extends UniformNode {
 
 		this.texture = texture;
 
-		this.updateType = NodeUpdateType.Frame;
+		this.updateType = NodeUpdateType.FRAME;
 
 	}
 
 	update() {
 
-		const image = this.texture.images ? this.texture.images[ 0 ].image || this.texture.images[ 0 ] : this.texture.image;
+		const images = this.texture.images;
+		const image = ( images && images.length > 0 ) ? ( images[ 0 ]?.image || images[ 0 ] ) : this.texture.image;
 
 		if ( image?.width !== undefined ) {
 

package/examples/jsm/nodes/utils/OscNode.js

@@ -24,7 +24,7 @@ class OscNode extends Node {
 
 	}
 
-	generate( builder ) {
+	construct() {
 
 		const method = this.method;
 		const timeNode = this.timeNode;
@@ -49,7 +49,7 @@ class OscNode extends Node {
 
 		}
 
-		return outputNode.build( builder );
+		return outputNode;
 
 	}
 

package/examples/jsm/nodes/utils/RemapNode.js

@@ -0,0 +1,34 @@
+import Node from '../core/Node.js';
+import { add, sub, div, mul, clamp } from '../shadernode/ShaderNodeBaseElements.js';
+
+class RemapNode extends Node {
+
+	constructor( node, inLowNode, inHighNode, outLowNode, outHighNode ) {
+
+		super();
+
+		this.node = node;
+		this.inLowNode = inLowNode;
+		this.inHighNode = inHighNode;
+		this.outLowNode = outLowNode;
+		this.outHighNode = outHighNode;
+
+		this.doClamp = true;
+
+	}
+
+	construct() {
+
+		const { node, inLowNode, inHighNode, outLowNode, outHighNode, doClamp } = this;
+
+		let t = div( sub( node, inLowNode ), sub( inHighNode, inLowNode ) );
+
+		if ( doClamp === true ) t = clamp( t );
+
+		return add( mul( sub( outHighNode, outLowNode ), t ), outLowNode );
+
+	}
+
+}
+
+export default RemapNode;

package/examples/jsm/nodes/utils/RotateUVNode.js

@@ -0,0 +1,32 @@
+import TempNode from '../core/TempNode.js';
+import { vec2, add, sub, mul, cos, sin } from '../shadernode/ShaderNodeBaseElements.js';
+
+class RotateUVNode extends TempNode {
+
+	constructor( uvNode, rotationNode, centerNode = vec2( .5 ) ) {
+
+		super( 'vec2' );
+
+		this.uvNode = uvNode;
+		this.rotationNode = rotationNode;
+		this.centerNode = centerNode;
+
+	}
+
+	construct() {
+
+		const { uvNode, rotationNode, centerNode } = this;
+
+		const cosAngle = cos( rotationNode );
+		const sinAngle = sin( rotationNode );
+
+		return vec2(
+			add( add( mul( cosAngle, sub( uvNode.x, centerNode.x ) ), mul( sinAngle, sub( uvNode.y, centerNode.y ) ) ), centerNode.x ),
+			add( sub( mul( cosAngle, sub( uvNode.y, centerNode.y ) ), mul( sinAngle, sub( uvNode.x, centerNode.x ) ) ), centerNode.y )
+		);
+
+	}
+
+}
+
+export default RotateUVNode;

package/examples/jsm/nodes/utils/SplitNode.js

@@ -1,6 +1,8 @@
 import Node from '../core/Node.js';
 import { vector } from '../core/NodeBuilder.js';
 
+const vectorComponents = 'xyzw';
+
 class SplitNode extends Node {
 
 	constructor( node, components = 'x' ) {
@@ -32,11 +34,13 @@ class SplitNode extends Node {
 
 	}
 
-	generate( builder ) {
+	generate( builder, output ) {
 
 		const node = this.node;
 		const nodeTypeLength = builder.getTypeLength( node.getNodeType( builder ) );
 
+		let snippet = null;
+
 		if ( nodeTypeLength > 1 ) {
 
 			let type = null;
@@ -45,7 +49,7 @@ class SplitNode extends Node {
 
 			if ( componentsLength >= nodeTypeLength ) {
 
-				// need expand the input node
+				// needed expand the input node
 
 				type = builder.getTypeFromLength( this.getVectorLength() );
 
@@ -53,16 +57,28 @@ class SplitNode extends Node {
 
 			const nodeSnippet = node.build( builder, type );
 
-			return `${nodeSnippet}.${this.components}`;
+			if ( this.components.length === nodeTypeLength && this.components === vectorComponents.slice( 0, this.components.length ) ) {
+
+				// unecessary swizzle
+
+				snippet = builder.format( nodeSnippet, type, output );
+
+			} else {
+
+				snippet = builder.format( `${nodeSnippet}.${this.components}`, this.getNodeType( builder ), output );
+
+			}
 
 		} else {
 
-			// ignore components if node is a float
+			// ignore .components if .node returns float/integer
 
-			return node.build( builder );
+			snippet = node.build( builder, output );
 
 		}
 
+		return snippet;
+
 	}
 
 	serialize( data ) {

package/examples/jsm/nodes/utils/SpriteSheetUVNode.js

@@ -18,20 +18,18 @@ class SpriteSheetUVNode extends Node {
 
 	}
 
-	generate( builder ) {
+	construct() {
 
-		const count = this.countNode;
-		const uv = this.uvNode;
-		const frame = this.frameNode;
+		const { frameNode, uvNode, countNode } = this;
 
 		const one = new ConstNode( 1 );
 
-		const width = new SplitNode( count, 'x' );
-		const height = new SplitNode( count, 'y' );
+		const width = new SplitNode( countNode, 'x' );
+		const height = new SplitNode( countNode, 'y' );
 
 		const total = new OperatorNode( '*', width, height );
 
-		const roundFrame = new MathNode( MathNode.FLOOR, new MathNode( MathNode.MOD, frame, total ) );
+		const roundFrame = new MathNode( MathNode.FLOOR, new MathNode( MathNode.MOD, frameNode, total ) );
 
 		const frameNum = new OperatorNode( '+', roundFrame, one );
 
@@ -39,17 +37,17 @@ class SpriteSheetUVNode extends Node {
 		const row = new MathNode( MathNode.CEIL, new OperatorNode( '/', frameNum, width ) );
 		const rowInv = new OperatorNode( '-', height, row );
 
-		const scale = new OperatorNode( '/', one, count );
+		const scale = new OperatorNode( '/', one, countNode );
 
 		const uvFrameOffset = new JoinNode( [
 			new OperatorNode( '*', cell, new SplitNode( scale, 'x' ) ),
 			new OperatorNode( '*', rowInv, new SplitNode( scale, 'y' ) )
 		] );
 
-		const uvScale = new OperatorNode( '*', uv, scale );
+		const uvScale = new OperatorNode( '*', uvNode, scale );
 		const uvFrame = new OperatorNode( '+', uvScale, uvFrameOffset );
 
-		return uvFrame.build( builder, this.getNodeType( builder ) );
+		return uvFrame;
 
 	}
 

package/examples/jsm/nodes/utils/TimerNode.js

@@ -6,18 +6,34 @@ class TimerNode extends UniformNode {
 	static LOCAL = 'local';
 	static GLOBAL = 'global';
 	static DELTA = 'delta';
+	static FRAME = 'frame';
 
-	constructor( scope = TimerNode.LOCAL, scale = 1 ) {
+	constructor( scope = TimerNode.LOCAL, scale = 1, value = 0 ) {
 
-		super( 0 );
+		super( value );
 
 		this.scope = scope;
 		this.scale = scale;
 
-		this.updateType = NodeUpdateType.Frame;
+		this.updateType = NodeUpdateType.FRAME;
 
 	}
+/*
+	@TODO:
+	getNodeType( builder ) {
 
+		const scope = this.scope;
+
+		if ( scope === TimerNode.FRAME ) {
+
+			return 'uint';
+
+		}
+
+		return 'float';
+
+	}
+*/
 	update( frame ) {
 
 		const scope = this.scope;
@@ -31,6 +47,10 @@ class TimerNode extends UniformNode {
 
 			this.value = frame.deltaTime * scale;
 
+		} else if ( scope === TimerNode.FRAME ) {
+
+			this.value = frame.frameId;
+
 		} else {
 
 			// global

package/examples/jsm/nodes/utils/TriplanarTexturesNode.js

@@ -0,0 +1,51 @@
+import Node from '../core/Node.js';
+import { float, vec3, add, mul, div, dot, normalize, abs, texture, positionWorld, normalWorld } from '../shadernode/ShaderNodeBaseElements.js';
+
+class TriplanarTexturesNode extends Node {
+
+	constructor( textureXNode, textureYNode = null, textureZNode = null, scaleNode = float( 1 ), positionNode = positionWorld, normalNode = normalWorld ) {
+
+		super( 'vec4' );
+
+		this.textureXNode = textureXNode;
+		this.textureYNode = textureYNode;
+		this.textureZNode = textureZNode;
+
+		this.scaleNode = scaleNode;
+
+		this.positionNode = positionNode;
+		this.normalNode = normalNode;
+
+	}
+
+	construct() {
+
+		const { textureXNode, textureYNode, textureZNode, scaleNode, positionNode, normalNode } = this;
+
+		// Ref: https://github.com/keijiro/StandardTriplanar
+
+		// Blending factor of triplanar mapping
+		let bf = normalize( abs( normalNode ) );
+		bf = div( bf, dot( bf, vec3( 1.0 ) ) );
+
+		// Triplanar mapping
+		const tx = mul( positionNode.yz, scaleNode );
+		const ty = mul( positionNode.zx, scaleNode );
+		const tz = mul( positionNode.xy, scaleNode );
+
+		// Base color
+		const textureX = textureXNode.value;
+		const textureY = textureYNode !== null ? textureYNode.value : textureX;
+		const textureZ = textureZNode !== null ? textureZNode.value : textureX;
+
+		const cx = mul( texture( textureX, tx ), bf.x );
+		const cy = mul( texture( textureY, ty ), bf.y );
+		const cz = mul( texture( textureZ, tz ), bf.z );
+
+		return add( cx, cy, cz );
+
+	}
+
+}
+
+export default TriplanarTexturesNode;

package/examples/jsm/objects/GroundProjectedEnv.js

@@ -0,0 +1,186 @@
+import { Mesh, IcosahedronGeometry, ShaderMaterial, DoubleSide } from 'three';
+
+/**
+ * Ground projected env map adapted from @react-three/drei.
+ * https://github.com/pmndrs/drei/blob/master/src/core/Environment.tsx
+ */
+export class GroundProjectedEnv extends Mesh {
+
+	constructor( texture, options ) {
+
+		const isCubeMap = texture.isCubeTexture;
+		const w =
+			( isCubeMap ? texture.image[ 0 ]?.width : texture.image.width ) ?? 1024;
+		const cubeSize = w / 4;
+		const _lodMax = Math.floor( Math.log2( cubeSize ) );
+		const _cubeSize = Math.pow( 2, _lodMax );
+		const width = 3 * Math.max( _cubeSize, 16 * 7 );
+		const height = 4 * _cubeSize;
+
+		const defines = [
+			isCubeMap ? '#define ENVMAP_TYPE_CUBE' : '',
+			`#define CUBEUV_TEXEL_WIDTH ${1.0 / width}`,
+			`#define CUBEUV_TEXEL_HEIGHT ${1.0 / height}`,
+			`#define CUBEUV_MAX_MIP ${_lodMax}.0`,
+		];
+
+		const vertexShader = /* glsl */ `
+        varying vec3 vWorldPosition;
+
+        void main() 
+        {
+
+            vec4 worldPosition = ( modelMatrix * vec4( position, 1.0 ) );
+            vWorldPosition = worldPosition.xyz;
+            
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+        }
+        `;
+		const fragmentShader = defines.join( '\n' ) + /* glsl */ `
+        #define ENVMAP_TYPE_CUBE_UV
+
+        varying vec3 vWorldPosition;
+
+        uniform float radius;
+        uniform float height;
+        uniform float angle;
+
+        #ifdef ENVMAP_TYPE_CUBE
+
+            uniform samplerCube map;
+
+        #else
+
+            uniform sampler2D map;
+
+        #endif
+
+        // From: https://www.shadertoy.com/view/4tsBD7
+        float diskIntersectWithBackFaceCulling( vec3 ro, vec3 rd, vec3 c, vec3 n, float r ) 
+        {
+
+            float d = dot ( rd, n );
+            
+            if( d > 0.0 ) { return 1e6; }
+            
+            vec3  o = ro - c;
+            float t = - dot( n, o ) / d;
+            vec3  q = o + rd * t;
+            
+            return ( dot( q, q ) < r * r ) ? t : 1e6;
+
+        }
+
+        // From: https://www.iquilezles.org/www/articles/intersectors/intersectors.htm
+        float sphereIntersect( vec3 ro, vec3 rd, vec3 ce, float ra ) 
+        {
+
+            vec3 oc = ro - ce;
+            float b = dot( oc, rd );
+            float c = dot( oc, oc ) - ra * ra;
+            float h = b * b - c;
+            
+            if( h < 0.0 ) { return -1.0; }
+            
+            h = sqrt( h );
+            
+            return - b + h;
+
+        }
+
+        vec3 project() 
+        {
+
+            vec3 p = normalize( vWorldPosition );
+            vec3 camPos = cameraPosition;
+            camPos.y -= height;
+
+            float intersection = sphereIntersect( camPos, p, vec3( 0.0 ), radius );
+            if( intersection > 0.0 ) {
+                
+                vec3 h = vec3( 0.0, - height, 0.0 );
+                float intersection2 = diskIntersectWithBackFaceCulling( camPos, p, h, vec3( 0.0, 1.0, 0.0 ), radius );
+                p = ( camPos + min( intersection, intersection2 ) * p ) / radius;
+
+            } else {
+
+                p = vec3( 0.0, 1.0, 0.0 );
+
+            }
+
+            return p;
+
+        }
+
+        #include <common>
+        #include <cube_uv_reflection_fragment>
+
+        void main() 
+        {
+
+            vec3 projectedWorldPosition = project();
+            
+            #ifdef ENVMAP_TYPE_CUBE
+
+                vec3 outcolor = textureCube( map, projectedWorldPosition ).rgb;
+
+            #else
+
+                vec3 direction = normalize( projectedWorldPosition );
+                vec2 uv = equirectUv( direction );
+                vec3 outcolor = texture2D( map, uv ).rgb;
+
+            #endif
+
+            gl_FragColor = vec4( outcolor, 1.0 );
+
+            #include <tonemapping_fragment>
+            #include <encodings_fragment>
+
+        }
+        `;
+
+		const uniforms = {
+			map: { value: texture },
+			height: { value: options?.height || 15 },
+			radius: { value: options?.radius || 100 },
+		};
+
+		const geometry = new IcosahedronGeometry( 1, 16 );
+		const material = new ShaderMaterial( {
+			uniforms,
+			fragmentShader,
+			vertexShader,
+			side: DoubleSide,
+		} );
+
+		super( geometry, material );
+
+	}
+
+	set radius( radius ) {
+
+		this.material.uniforms.radius.value = radius;
+
+	}
+
+	get radius() {
+
+		return this.material.uniforms.radius.value;
+
+	}
+
+	set height( height ) {
+
+		this.material.uniforms.height.value = height;
+
+	}
+
+	get height() {
+
+		return this.material.uniforms.height.value;
+
+	}
+
+}

package/examples/jsm/objects/Reflector.js

@@ -8,7 +8,10 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+	WebGLRenderTarget,
+	HalfFloatType,
+	NoToneMapping,
+	LinearEncoding
 } from 'three';
 
 class Reflector extends Mesh {
@@ -48,7 +51,7 @@ class Reflector extends Mesh {
 		const textureMatrix = new Matrix4();
 		const virtualCamera = this.camera;
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample } );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
 		const material = new ShaderMaterial( {
 			uniforms: UniformsUtils.clone( shader.uniforms ),
@@ -137,18 +140,19 @@ class Reflector extends Mesh {
 			projectionMatrix.elements[ 14 ] = clipPlane.w;
 
 			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			scope.visible = false;
 
 			const currentRenderTarget = renderer.getRenderTarget();
 
 			const currentXrEnabled = renderer.xr.enabled;
 			const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+			const currentOutputEncoding = renderer.outputEncoding;
+			const currentToneMapping = renderer.toneMapping;
 
 			renderer.xr.enabled = false; // Avoid camera modification
 			renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+			renderer.outputEncoding = LinearEncoding;
+			renderer.toneMapping = NoToneMapping;
 
 			renderer.setRenderTarget( renderTarget );
 
@@ -159,6 +163,8 @@ class Reflector extends Mesh {
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+			renderer.outputEncoding = currentOutputEncoding;
+			renderer.toneMapping = currentToneMapping;
 
 			renderer.setRenderTarget( currentRenderTarget );
 
@@ -254,6 +260,7 @@ Reflector.ReflectorShader = {
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/jsm/objects/ReflectorForSSRPass.js

@@ -11,7 +11,8 @@ import {
 	DepthTexture,
 	UnsignedShortType,
 	NearestFilter,
-	Plane
+	Plane,
+	HalfFloatType
 } from 'three';
 
 class ReflectorForSSRPass extends Mesh {
@@ -104,6 +105,7 @@ class ReflectorForSSRPass extends Mesh {
 
 		const parameters = {
 			depthTexture: useDepthTexture ? depthTexture : null,
+			type: HalfFloatType
 		};
 
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, parameters );
@@ -198,10 +200,6 @@ class ReflectorForSSRPass extends Mesh {
 			textureMatrix.multiply( virtualCamera.matrixWorldInverse );
 			textureMatrix.multiply( scope.matrixWorld );
 
-			// Render
-
-			renderTarget.texture.encoding = renderer.outputEncoding;
-
 			// scope.visible = false;
 
 			const currentRenderTarget = renderer.getRenderTarget();