super-three 0.160.1 → 0.161.0

package/examples/jsm/nodes/lighting/AnalyticLightNode.js

@@ -2,7 +2,7 @@ import LightingNode from './LightingNode.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { uniform } from '../core/UniformNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { /*vec2,*/ vec3 } from '../shadernode/ShaderNode.js';
+import { /*vec2,*/ vec3, vec4 } from '../shadernode/ShaderNode.js';
 import { reference } from '../accessors/ReferenceNode.js';
 import { texture } from '../accessors/TextureNode.js';
 import { positionWorld } from '../accessors/PositionNode.js';
@@ -12,7 +12,7 @@ import { WebGPUCoordinateSystem } from 'three';
 
 import { Color, DepthTexture, NearestFilter, LessCompare } from 'three';
 
-let depthMaterial = null;
+let overrideMaterial = null;
 
 class AnalyticLightNode extends LightingNode {
 
@@ -54,7 +54,13 @@ class AnalyticLightNode extends LightingNode {
 
 		if ( shadowNode === null ) {
 
-			if ( depthMaterial === null ) depthMaterial = builder.createNodeMaterial( 'MeshBasicNodeMaterial' );
+			if ( overrideMaterial === null ) {
+
+				overrideMaterial = builder.createNodeMaterial();
+				overrideMaterial.fragmentNode = vec4( 0, 0, 0, 1 );
+				overrideMaterial.isShadowNodeMaterial = true; // Use to avoid other overrideMaterial override material.fragmentNode unintentionally when using material.shadowNode
+
+			}
 
 			const shadow = this.light.shadow;
 			const rtt = builder.getRenderTarget( shadow.mapSize.width, shadow.mapSize.height );
@@ -142,8 +148,10 @@ class AnalyticLightNode extends LightingNode {
 			*/
 			//
 
+			const shadowColor = texture( rtt.texture, shadowCoord );
+
 			this.rtt = rtt;
-			this.colorNode = this.colorNode.mul( frustumTest.mix( 1, shadowNode ) );
+			this.colorNode = this.colorNode.mul( frustumTest.mix( 1, shadowNode.mix( shadowColor.a.mix( 1, shadowColor ), 1 ) ) );
 
 			this.shadowNode = shadowNode;
 
@@ -169,7 +177,7 @@ class AnalyticLightNode extends LightingNode {
 
 		const currentOverrideMaterial = scene.overrideMaterial;
 
-		scene.overrideMaterial = depthMaterial;
+		scene.overrideMaterial = overrideMaterial;
 
 		rtt.setSize( light.shadow.mapSize.width, light.shadow.mapSize.height );
 

package/examples/jsm/nodes/lighting/LightingContextNode.js

@@ -39,7 +39,7 @@ class LightingContextNode extends ContextNode {
 			ambientOcclusion: float( 1 ).temp( 'ambientOcclusion' ),
 			reflectedLight,
 			backdrop: backdropNode,
-			backdropAlpha : backdropAlphaNode
+			backdropAlpha: backdropAlphaNode
 		};
 
 		return context;

package/examples/jsm/nodes/lighting/LightsNode.js

@@ -169,7 +169,7 @@ class LightsNode extends Node {
 export default LightsNode;
 
 export const lights = ( lights ) => nodeObject( new LightsNode().fromLights( lights ) );
-export const lightNodes = nodeProxy( LightsNode );
+export const lightsNode = nodeProxy( LightsNode );
 
 export function addLightNode( lightClass, lightNodeClass ) {
 

package/examples/jsm/nodes/materials/Line2NodeMaterial.js

@@ -133,50 +133,38 @@ class Line2NodeMaterial extends NodeMaterial {
 			if ( useWorldUnits ) {
 
 				// get the offset direction as perpendicular to the view vector
-				const worldDir = end.xyz.sub( start.xyz ).normalize();
 
-				const offset = positionGeometry.y.lessThan( 0.5 ).cond(
-					start.xyz.cross( worldDir ).normalize(),
-					end.xyz.cross( worldDir ).normalize()
+				const worldDir = end.xyz.sub( start.xyz ).normalize();
+				const tmpFwd = mix( start.xyz, end.xyz, 0.5 ).normalize();
+				const worldUp = worldDir.cross( tmpFwd ).normalize();
+				const worldFwd = worldDir.cross( worldUp );
 
-				);
+				const worldPos = varyingProperty( 'vec4', 'worldPos' );
 
-				// sign flip
-				offset.assign( positionGeometry.x.lessThan( 0.0 ).cond( offset.negate(), offset ) );
+				worldPos.assign( positionGeometry.y.lessThan( 0.5 ).cond( start, end) );
 
-				const forwardOffset = worldDir.dot( vec3( 0.0, 0.0, 1.0 ) );
+				// height offset
+				const hw = materialLineWidth.mul( 0.5 );
+				worldPos.addAssign( vec4( positionGeometry.x.lessThan( 0.0 ).cond( worldUp.mul( hw ), worldUp.mul( hw ).negate() ), 0 ) );
 
 				// don't extend the line if we're rendering dashes because we
 				// won't be rendering the endcaps
 				if ( ! useDash ) {
 
-					// extend the line bounds to encompass endcaps
-					start.assign( start.sub( vec4( worldDir.mul( materialLineWidth ).mul( 0.5 ), 0 ) ) );
-					end.assign( end.add( vec4( worldDir.mul( materialLineWidth ).mul( 0.5 ), 0 ) ) );
+					// cap extension
+					worldPos.addAssign( vec4( positionGeometry.y.lessThan( 0.5 ).cond( worldDir.mul( hw ).negate(), worldDir.mul( hw ) ), 0 ) );
 
-					// shift the position of the quad so it hugs the forward edge of the line
-					offset.assign( offset.sub( vec3( dir.mul( forwardOffset ), 0 ) ) );
-					offset.z.assign( offset.z.add( 0.5 ) );
-
-				}
-
-				// endcaps
+					// add width to the box
+					worldPos.addAssign( vec4( worldFwd.mul( hw ), 0 ) );
 
-				If( positionGeometry.y.greaterThan( 1.0 ).or( positionGeometry.y.lessThan( 0.0 ) ), () => {
+					// endcaps
+					If( positionGeometry.y.greaterThan( 1.0 ).or( positionGeometry.y.lessThan( 0.0 ) ), () => {
 
-					offset.assign( offset.add( vec3( dir.mul( 2.0 ).mul( forwardOffset ), 0 ) ) );
+						worldPos.subAssign( vec4( worldFwd.mul( 2.0 ).mul( hw ), 0 ) );
 
-				} );
-
-				// adjust for linewidth
-				offset.assign( offset.mul( materialLineWidth ).mul( 0.5 ) );
-
-				// set the world position
-
-				const worldPos = varyingProperty( 'vec4', 'worldPos' );
+					} );
 
-				worldPos.assign( positionGeometry.y.lessThan( 0.5 ).cond( start, end ) );
-				worldPos.assign( worldPos.add( vec4( offset, 0 ) ) );
+				}
 
 				// project the worldpos
 				clip.assign( cameraProjectionMatrix.mul( worldPos ) );

package/examples/jsm/nodes/materials/Materials.js

@@ -11,5 +11,6 @@ export { default as MeshLambertNodeMaterial } from './MeshLambertNodeMaterial.js
 export { default as MeshPhongNodeMaterial } from './MeshPhongNodeMaterial.js';
 export { default as MeshStandardNodeMaterial } from './MeshStandardNodeMaterial.js';
 export { default as MeshPhysicalNodeMaterial } from './MeshPhysicalNodeMaterial.js';
+export { default as MeshSSSNodeMaterial } from './MeshSSSNodeMaterial.js';
 export { default as PointsNodeMaterial } from './PointsNodeMaterial.js';
 export { default as SpriteNodeMaterial } from './SpriteNodeMaterial.js';

package/examples/jsm/nodes/materials/MeshSSSNodeMaterial.js

@@ -0,0 +1,84 @@
+import { addNodeMaterial } from './NodeMaterial.js';
+import { transformedNormalView } from '../accessors/NormalNode.js';
+import { positionViewDirection } from '../accessors/PositionNode.js';
+import PhysicalLightingModel from '../functions/PhysicalLightingModel.js';
+import MeshPhysicalNodeMaterial from './MeshPhysicalNodeMaterial.js';
+import { float, vec3 } from '../shadernode/ShaderNode.js';
+
+class SSSLightingModel extends PhysicalLightingModel {
+
+	constructor( useClearcoat, useSheen, useIridescence, useSSS ) {
+
+		super( useClearcoat, useSheen, useIridescence );
+
+		this.useSSS = useSSS;
+
+	}
+
+	direct( { lightDirection, lightColor, reflectedLight }, stack, builder ) {
+
+		if ( this.useSSS === true ) {
+
+			const material = builder.material;
+
+			const { thicknessColorNode, thicknessDistortionNode, thicknessAmbientNode, thicknessAttenuationNode, thicknessPowerNode, thicknessScaleNode } = material;
+
+			const scatteringHalf = lightDirection.add( transformedNormalView.mul( thicknessDistortionNode ) ).normalize();
+			const scatteringDot = float( positionViewDirection.dot( scatteringHalf.negate() ).saturate().pow( thicknessPowerNode ).mul( thicknessScaleNode ) );
+			const scatteringIllu = vec3( scatteringDot.add( thicknessAmbientNode ).mul( thicknessColorNode ) );
+
+			reflectedLight.directDiffuse.addAssign( scatteringIllu.mul( thicknessAttenuationNode.mul( lightColor ) ) );
+
+		}
+
+		super.direct( { lightDirection, lightColor, reflectedLight }, stack, builder );
+
+	}
+
+}
+
+class MeshSSSNodeMaterial extends MeshPhysicalNodeMaterial {
+
+	constructor( parameters ) {
+
+		super( parameters );
+
+		this.thicknessColorNode = null;
+		this.thicknessDistortionNode = float( 0.1 );
+		this.thicknessAmbientNode = float( 0.0 );
+		this.thicknessAttenuationNode = float( .1 );
+		this.thicknessPowerNode = float( 2.0 );
+		this.thicknessScaleNode = float( 10.0 );
+
+	}
+
+	get useSSS() {
+
+		return this.thicknessColorNode !== null;
+
+	}
+
+	setupLightingModel( /*builder*/ ) {
+
+		return new SSSLightingModel( this.useClearcoat, this.useSheen, this.useIridescence, this.useSSS );
+
+	}
+
+	copy( source ) {
+
+		this.thicknessColorNode = source.thicknessColorNode;
+		this.thicknessDistortionNode = source.thicknessDistortionNode;
+		this.thicknessAmbientNode = source.thicknessAmbientNode;
+		this.thicknessAttenuationNode = source.thicknessAttenuationNode;
+		this.thicknessPowerNode = source.thicknessPowerNode;
+		this.thicknessScaleNode = source.thicknessScaleNode;
+
+		return super.copy( source );
+
+	}
+
+}
+
+export default MeshSSSNodeMaterial;
+
+addNodeMaterial( 'MeshSSSNodeMaterial', MeshSSSNodeMaterial );

package/examples/jsm/nodes/materials/NodeMaterial.js

@@ -11,7 +11,7 @@ import { skinning } from '../accessors/SkinningNode.js';
 import { morph } from '../accessors/MorphNode.js';
 import { texture } from '../accessors/TextureNode.js';
 import { cubeTexture } from '../accessors/CubeTextureNode.js';
-import { lightNodes } from '../lighting/LightsNode.js';
+import { lightsNode } from '../lighting/LightsNode.js';
 import { mix } from '../math/MathNode.js';
 import { float, vec3, vec4 } from '../shadernode/ShaderNode.js';
 import AONode from '../lighting/AONode.js';
@@ -53,6 +53,7 @@ class NodeMaterial extends ShaderMaterial {
 		this.positionNode = null;
 
 		this.depthNode = null;
+		this.shadowNode = null;
 
 		this.outputNode = null;
 
@@ -289,15 +290,15 @@ class NodeMaterial extends ShaderMaterial {
 
 		}
 
-		let lightsNode = this.lightsNode || builder.lightsNode;
+		let lightsN = this.lightsNode || builder.lightsNode;
 
 		if ( materialLightsNode.length > 0 ) {
 
-			lightsNode = lightNodes( [ ...lightsNode.lightNodes, ...materialLightsNode ] );
+			lightsN = lightsNode( [ ...lightsN.lightNodes, ...materialLightsNode ] );
 
 		}
 
-		return lightsNode;
+		return lightsN;
 
 	}
 
@@ -496,6 +497,7 @@ class NodeMaterial extends ShaderMaterial {
 		this.positionNode = source.positionNode;
 
 		this.depthNode = source.depthNode;
+		this.shadowNode = source.shadowNode;
 
 		this.outputNode = source.outputNode;
 

package/examples/jsm/nodes/materials/SpriteNodeMaterial.js

@@ -61,13 +61,7 @@ class SpriteNodeMaterial extends NodeMaterial {
 
 		const rotation = float( rotationNode || materialRotation );
 
-		const cosAngle = rotation.cos();
-		const sinAngle = rotation.sin();
-
-		const rotatedPosition = vec2( // @TODO: Maybe we can create mat2 and write something like rotationMatrix.mul( alignedPosition )?
-			vec2( cosAngle, sinAngle.negate() ).dot( alignedPosition ),
-			vec2( sinAngle, cosAngle ).dot( alignedPosition )
-		);
+		const rotatedPosition = alignedPosition.rotate( rotation );
 
 		mvPosition = vec4( mvPosition.xy.add( rotatedPosition ), mvPosition.zw );
 

package/examples/jsm/nodes/math/MathNode.js

@@ -57,6 +57,10 @@ class MathNode extends TempNode {
 
 			return 'vec3';
 
+		} else if ( method === MathNode.MOD ) {
+
+			return this.aNode.getNodeType( builder );
+
 		} else {
 
 			return this.getInputType( builder );
@@ -120,7 +124,7 @@ class MathNode extends TempNode {
 
 			const params = [];
 
-			if ( method === MathNode.CROSS ) {
+			if ( method === MathNode.CROSS || method === MathNode.MOD ) {
 
 				params.push(
 					a.build( builder, type ),
@@ -165,7 +169,7 @@ class MathNode extends TempNode {
 
 			}
 
-			return builder.format( `${ builder.getMethod( method ) }( ${params.join( ', ' )} )`, type, output );
+			return builder.format( `${ builder.getMethod( method, type ) }( ${params.join( ', ' )} )`, type, output );
 
 		}
 
@@ -249,6 +253,8 @@ export default MathNode;
 
 export const EPSILON = float( 1e-6 );
 export const INFINITY = float( 1e6 );
+export const PI = float( Math.PI );
+export const PI2 = float( Math.PI * 2 );
 
 export const radians = nodeProxy( MathNode, MathNode.RADIANS );
 export const degrees = nodeProxy( MathNode, MathNode.DEGREES );
@@ -297,6 +303,8 @@ export const pow3 = nodeProxy( MathNode, MathNode.POW, 3 );
 export const pow4 = nodeProxy( MathNode, MathNode.POW, 4 );
 export const transformDirection = nodeProxy( MathNode, MathNode.TRANSFORM_DIRECTION );
 
+export const cbrt = ( a ) => mul( sign( a ), pow( abs( a ), 1.0 / 3.0 ) );
+export const lengthSq = ( a ) => dot( a, a );
 export const mix = nodeProxy( MathNode, MathNode.MIX );
 export const clamp = ( value, low = 0, high = 1 ) => nodeObject( new MathNode( MathNode.CLAMP, nodeObject( value ), nodeObject( low ), nodeObject( high ) ) );
 export const saturate = ( value ) => clamp( value );
@@ -328,6 +336,7 @@ addNodeElement( 'atan', atan );
 addNodeElement( 'abs', abs );
 addNodeElement( 'sign', sign );
 addNodeElement( 'length', length );
+addNodeElement( 'lengthSq', lengthSq );
 addNodeElement( 'negate', negate );
 addNodeElement( 'oneMinus', oneMinus );
 addNodeElement( 'dFdx', dFdx );
@@ -357,5 +366,6 @@ addNodeElement( 'smoothstep', smoothstepElement );
 addNodeElement( 'faceForward', faceForward );
 addNodeElement( 'difference', difference );
 addNodeElement( 'saturate', saturate );
+addNodeElement( 'cbrt', cbrt );
 
 addNodeClass( 'MathNode', MathNode );

package/examples/jsm/nodes/math/MathUtils.js

@@ -0,0 +1,15 @@
+import { sub, mul, div, add } from './OperatorNode.js';
+import { addNodeElement } from '../shadernode/ShaderNode.js';
+import { PI, pow, sin } from './MathNode.js';
+
+// remapping functions https://iquilezles.org/articles/functions/
+export const parabola = ( x, k ) => pow( mul( 4.0, x.mul( sub( 1.0, x ) ) ), k );
+export const gain = ( x, k ) => x.lessThan( 0.5 ) ? parabola( x.mul( 2.0 ), k ).div( 2.0 ) : sub( 1.0, parabola( mul( sub( 1.0, x ), 2.0 ), k ).div( 2.0 ) );
+export const pcurve = ( x, a, b ) => pow( div( pow( x, a ), add( pow( x, a ), pow( sub( 1.0, x ), b ) ) ), 1.0 / a );
+export const sinc = ( x, k ) => sin( PI.mul( k.mul( x ).sub( 1.0 ) ) ).div( PI.mul( k.mul( x ).sub( 1.0 ) ) );
+
+
+addNodeElement( 'parabola', parabola );
+addNodeElement( 'gain', gain );
+addNodeElement( 'pcurve', pcurve );
+addNodeElement( 'sinc', sinc );

package/examples/jsm/nodes/math/OperatorNode.js

@@ -37,7 +37,7 @@ class OperatorNode extends TempNode {
 		const bNode = this.bNode;
 
 		const typeA = aNode.getNodeType( builder );
-		const typeB = bNode.getNodeType( builder );
+		const typeB = typeof bNode !== 'undefined' ? bNode.getNodeType( builder ) : null;
 
 		if ( typeA === 'void' || typeB === 'void' ) {
 
@@ -47,11 +47,11 @@ class OperatorNode extends TempNode {
 
 			return typeA;
 
-		} else if ( op === '&' || op === '|' || op === '^' || op === '>>' || op === '<<' ) {
+		} else if ( op === '~' || op === '&' || op === '|' || op === '^' || op === '>>' || op === '<<' ) {
 
 			return builder.getIntegerType( typeA );
 
-		} else if ( op === '==' || op === '&&' || op === '||' || op === '^^' ) {
+		} else if ( op === '!' || op === '==' || op === '&&' || op === '||' || op === '^^' ) {
 
 			return 'bool';
 
@@ -108,7 +108,7 @@ class OperatorNode extends TempNode {
 		if ( type !== 'void' ) {
 
 			typeA = aNode.getNodeType( builder );
-			typeB = bNode.getNodeType( builder );
+			typeB = typeof bNode !== 'undefined' ? bNode.getNodeType( builder ) : null;
 
 			if ( op === '<' || op === '>' || op === '<=' || op === '>=' || op === '==' ) {
 
@@ -154,7 +154,7 @@ class OperatorNode extends TempNode {
 		}
 
 		const a = aNode.build( builder, typeA );
-		const b = bNode.build( builder, typeB );
+		const b = typeof bNode !== 'undefined' ? bNode.build( builder, typeB ) : null;
 
 		const outputLength = builder.getTypeLength( output );
 		const fnOpSnippet = builder.getFunctionOperator( op );
@@ -177,6 +177,10 @@ class OperatorNode extends TempNode {
 
 				return builder.format( `${ builder.getMethod( 'greaterThanEqual' ) }( ${ a }, ${ b } )`, type, output );
 
+			} else if ( op === '!' || op === '~' ) {
+
+				return builder.format( `(${op}${a})`, typeA, output );
+
 			} else if ( fnOpSnippet ) {
 
 				return builder.format( `${ fnOpSnippet }( ${ a }, ${ b } )`, type, output );
@@ -236,8 +240,10 @@ export const lessThanEqual = nodeProxy( OperatorNode, '<=' );
 export const greaterThanEqual = nodeProxy( OperatorNode, '>=' );
 export const and = nodeProxy( OperatorNode, '&&' );
 export const or = nodeProxy( OperatorNode, '||' );
+export const not = nodeProxy( OperatorNode, '!' );
 export const xor = nodeProxy( OperatorNode, '^^' );
 export const bitAnd = nodeProxy( OperatorNode, '&' );
+export const bitNot = nodeProxy( OperatorNode, '~' );
 export const bitOr = nodeProxy( OperatorNode, '|' );
 export const bitXor = nodeProxy( OperatorNode, '^' );
 export const shiftLeft = nodeProxy( OperatorNode, '<<' );
@@ -256,8 +262,10 @@ addNodeElement( 'lessThanEqual', lessThanEqual );
 addNodeElement( 'greaterThanEqual', greaterThanEqual );
 addNodeElement( 'and', and );
 addNodeElement( 'or', or );
+addNodeElement( 'not', not );
 addNodeElement( 'xor', xor );
 addNodeElement( 'bitAnd', bitAnd );
+addNodeElement( 'bitNot', bitNot );
 addNodeElement( 'bitOr', bitOr );
 addNodeElement( 'bitXor', bitXor );
 addNodeElement( 'shiftLeft', shiftLeft );

package/examples/jsm/nodes/math/TriNoise3D.js

@@ -0,0 +1,71 @@
+// https://github.com/cabbibo/glsl-tri-noise-3d
+
+import { loop } from '../utils/LoopNode.js';
+import { float, vec3, tslFn } from '../shadernode/ShaderNode.js';
+
+const tri = tslFn( ( [ x ] ) => {
+
+	return x.fract().sub( .5 ).abs();
+
+} );
+
+const tri3 = tslFn( ( [ p ] ) => {
+
+	return vec3( tri( p.z.add( tri( p.y.mul( 1. ) ) ) ), tri( p.z.add( tri( p.x.mul( 1. ) ) ) ), tri( p.y.add( tri( p.x.mul( 1. ) ) ) ) );
+
+} );
+
+const triNoise3D = tslFn( ( [ p_immutable, spd, time ] ) => {
+
+	const p = vec3( p_immutable ).toVar();
+	const z = float( 1.4 ).toVar();
+	const rz = float( 0.0 ).toVar();
+	const bp = vec3( p ).toVar();
+
+	loop( { start: float( 0.0 ), end: float( 3.0 ), type: 'float', condition: '<=' }, () => {
+
+		const dg = vec3( tri3( bp.mul( 2.0 ) ) ).toVar();
+		p.addAssign( dg.add( time.mul( float( 0.1 ).mul( spd ) ) ) );
+		bp.mulAssign( 1.8 );
+		z.mulAssign( 1.5 );
+		p.mulAssign( 1.2 );
+
+		const t = float( tri( p.z.add( tri( p.x.add( tri( p.y ) ) ) ) ) ).toVar();
+		rz.addAssign( t.div( z ) );
+		bp.addAssign( 0.14 );
+
+	} );
+
+	return rz;
+
+} );
+
+// layouts
+
+tri.setLayout( {
+	name: 'tri',
+	type: 'float',
+	inputs: [
+		{ name: 'x', type: 'float' }
+	]
+} );
+
+tri3.setLayout( {
+	name: 'tri3',
+	type: 'vec3',
+	inputs: [
+		{ name: 'p', type: 'vec3' }
+	]
+} );
+
+triNoise3D.setLayout( {
+	name: 'triNoise3D',
+	type: 'float',
+	inputs: [
+		{ name: 'p', type: 'vec3' },
+		{ name: 'spd', type: 'float' },
+		{ name: 'time', type: 'float' }
+	]
+} );
+
+export { tri, tri3, triNoise3D };

package/examples/jsm/nodes/shadernode/ShaderNode.js

@@ -341,7 +341,7 @@ class ShaderNodeInternal extends Node {
 
 	get isArrayInput() {
 
-		return /^\(\s+?\[/.test( this.jsFunc.toString() );
+		return /^\((\s+)?\[/.test( this.jsFunc.toString() );
 
 	}
 
@@ -574,6 +574,11 @@ export const ivec4 = new ConvertType( 'ivec4' );
 export const uvec4 = new ConvertType( 'uvec4' );
 export const bvec4 = new ConvertType( 'bvec4' );
 
+export const mat2 = new ConvertType( 'mat2' );
+export const imat2 = new ConvertType( 'imat2' );
+export const umat2 = new ConvertType( 'umat2' );
+export const bmat2 = new ConvertType( 'bmat2' );
+
 export const mat3 = new ConvertType( 'mat3' );
 export const imat3 = new ConvertType( 'imat3' );
 export const umat3 = new ConvertType( 'umat3' );
@@ -604,6 +609,10 @@ addNodeElement( 'vec4', vec4 );
 addNodeElement( 'ivec4', ivec4 );
 addNodeElement( 'uvec4', uvec4 );
 addNodeElement( 'bvec4', bvec4 );
+addNodeElement( 'mat2', mat2 );
+addNodeElement( 'imat2', imat2 );
+addNodeElement( 'umat2', umat2 );
+addNodeElement( 'bmat2', bmat2 );
 addNodeElement( 'mat3', mat3 );
 addNodeElement( 'imat3', imat3 );
 addNodeElement( 'umat3', umat3 );

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

@@ -24,6 +24,12 @@ class ArrayElementNode extends Node { // @TODO: If extending from TempNode it br
 		const nodeSnippet = this.node.build( builder );
 		const indexSnippet = this.indexNode.build( builder, 'uint' );
 
+		if ( this.node.isStorageBufferNode && ! builder.isAvailable( 'storageBuffer' ) ) {
+
+			return nodeSnippet;
+
+		}
+
 		return `${nodeSnippet}[ ${indexSnippet} ]`;
 
 	}

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

@@ -28,7 +28,7 @@ class JoinNode extends TempNode {
 		const type = this.getNodeType( builder );
 		const nodes = this.nodes;
 
-		const primitiveType = builder.getPrimitiveType( type );
+		const primitiveType = builder.getComponentType( type );
 
 		const snippetValues = [];
 
@@ -36,7 +36,7 @@ class JoinNode extends TempNode {
 
 			let inputSnippet = input.build( builder );
 
-			const inputPrimitiveType = builder.getPrimitiveType( input.getNodeType( builder ) );
+			const inputPrimitiveType = builder.getComponentType( input.getNodeType( builder ) );
 
 			if ( inputPrimitiveType !== primitiveType ) {
 

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

@@ -144,15 +144,15 @@ class LoopNode extends Node {
 
 			if ( ! update ) {
 
-				if ( type === 'int' ) {
+				if ( type === 'int' || type === 'uint' ) {
 
 					if ( condition.includes( '<' ) ) update = '++';
 					else update = '--';
 
 				} else {
 
-					if ( condition.includes( '<' ) ) update = '+= 1';
-					else update = '-= 1';
+					if ( condition.includes( '<' ) ) update = '+= 1.';
+					else update = '-= 1.';
 
 				}