@plastic-software/three 0.167.1 → 0.167.3

package/src/nodes/math/MathNode.js

@@ -1,7 +1,7 @@
 import TempNode from '../core/TempNode.js';
 import { sub, mul, div } from './OperatorNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, nodeObject, nodeProxy, float, vec2, vec3, vec4, tslFn } from '../shadernode/ShaderNode.js';
+import { addNodeElement, nodeObject, nodeProxy, float, vec2, vec3, vec4, Fn } from '../shadernode/ShaderNode.js';
 
 class MathNode extends TempNode {
 
@@ -330,7 +330,7 @@ export const refract = nodeProxy( MathNode, MathNode.REFRACT );
 export const smoothstep = nodeProxy( MathNode, MathNode.SMOOTHSTEP );
 export const faceForward = nodeProxy( MathNode, MathNode.FACEFORWARD );
 
-export const rand = tslFn( ( [ uv ] ) => {
+export const rand = Fn( ( [ uv ] ) => {
 
 	const a = 12.9898, b = 78.233, c = 43758.5453;
 	const dt = dot( uv.xy, vec2( a, b ) ), sn = mod( dt, PI );

package/src/nodes/math/TriNoise3D.js

@@ -1,28 +1,28 @@
 // https://github.com/cabbibo/glsl-tri-noise-3d
 
-import { loop } from '../utils/LoopNode.js';
-import { float, vec3, tslFn } from '../shadernode/ShaderNode.js';
+import { Loop } from '../utils/LoopNode.js';
+import { float, vec3, Fn } from '../shadernode/ShaderNode.js';
 
-const tri = tslFn( ( [ x ] ) => {
+const tri = Fn( ( [ x ] ) => {
 
 	return x.fract().sub( .5 ).abs();
 
 } );
 
-const tri3 = tslFn( ( [ p ] ) => {
+const tri3 = Fn( ( [ 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 triNoise3D = Fn( ( [ 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: '<=' }, () => {
+	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 ) ) ) );

package/src/nodes/pmrem/PMREMUtils.js

@@ -1,8 +1,8 @@
-import { tslFn, int, float, vec2, vec3, vec4, If } from '../shadernode/ShaderNode.js';
+import { Fn, int, float, vec2, vec3, vec4, If } from '../shadernode/ShaderNode.js';
 import { cos, sin, abs, max, exp2, log2, clamp, fract, mix, floor, normalize, cross, all } from '../math/MathNode.js';
 import { mul } from '../math/OperatorNode.js';
-import { cond } from '../math/CondNode.js';
-import { loop, Break } from '../utils/LoopNode.js';
+import { select } from '../math/CondNode.js';
+import { Loop, Break } from '../utils/LoopNode.js';
 
 // These defines must match with PMREMGenerator
 
@@ -24,7 +24,7 @@ const cubeUV_minTileSize = float( 16.0 );
 // a cubemap, the 0-5 integer index of a cube face, and the direction vector for
 // sampling a textureCube (not generally normalized ).
 
-const getFace = tslFn( ( [ direction ] ) => {
+const getFace = Fn( ( [ direction ] ) => {
 
 	const absDirection = vec3( abs( direction ) ).toVar();
 	const face = float( - 1.0 ).toVar();
@@ -33,23 +33,23 @@ const getFace = tslFn( ( [ direction ] ) => {
 
 		If( absDirection.x.greaterThan( absDirection.y ), () => {
 
-			face.assign( cond( direction.x.greaterThan( 0.0 ), 0.0, 3.0 ) );
+			face.assign( select( direction.x.greaterThan( 0.0 ), 0.0, 3.0 ) );
 
-		} ).else( () => {
+		} ).Else( () => {
 
-			face.assign( cond( direction.y.greaterThan( 0.0 ), 1.0, 4.0 ) );
+			face.assign( select( direction.y.greaterThan( 0.0 ), 1.0, 4.0 ) );
 
 		} );
 
-	} ).else( () => {
+	} ).Else( () => {
 
 		If( absDirection.z.greaterThan( absDirection.y ), () => {
 
-			face.assign( cond( direction.z.greaterThan( 0.0 ), 2.0, 5.0 ) );
+			face.assign( select( direction.z.greaterThan( 0.0 ), 2.0, 5.0 ) );
 
-		} ).else( () => {
+		} ).Else( () => {
 
-			face.assign( cond( direction.y.greaterThan( 0.0 ), 1.0, 4.0 ) );
+			face.assign( select( direction.y.greaterThan( 0.0 ), 1.0, 4.0 ) );
 
 		} );
 
@@ -66,7 +66,7 @@ const getFace = tslFn( ( [ direction ] ) => {
 } );
 
 // RH coordinate system; PMREM face-indexing convention
-const getUV = tslFn( ( [ direction, face ] ) => {
+const getUV = Fn( ( [ direction, face ] ) => {
 
 	const uv = vec2().toVar();
 
@@ -74,23 +74,23 @@ const getUV = tslFn( ( [ direction, face ] ) => {
 
 		uv.assign( vec2( direction.z, direction.y ).div( abs( direction.x ) ) ); // pos x
 
-	} ).elseif( face.equal( 1.0 ), () => {
+	} ).ElseIf( face.equal( 1.0 ), () => {
 
 		uv.assign( vec2( direction.x.negate(), direction.z.negate() ).div( abs( direction.y ) ) ); // pos y
 
-	} ).elseif( face.equal( 2.0 ), () => {
+	} ).ElseIf( face.equal( 2.0 ), () => {
 
 		uv.assign( vec2( direction.x.negate(), direction.y ).div( abs( direction.z ) ) ); // pos z
 
-	} ).elseif( face.equal( 3.0 ), () => {
+	} ).ElseIf( face.equal( 3.0 ), () => {
 
 		uv.assign( vec2( direction.z.negate(), direction.y ).div( abs( direction.x ) ) ); // neg x
 
-	} ).elseif( face.equal( 4.0 ), () => {
+	} ).ElseIf( face.equal( 4.0 ), () => {
 
 		uv.assign( vec2( direction.x.negate(), direction.z ).div( abs( direction.y ) ) ); // neg y
 
-	} ).else( () => {
+	} ).Else( () => {
 
 		uv.assign( vec2( direction.x, direction.y ).div( abs( direction.z ) ) ); // neg z
 
@@ -107,7 +107,7 @@ const getUV = tslFn( ( [ direction, face ] ) => {
 	]
 } );
 
-const roughnessToMip = tslFn( ( [ roughness ] ) => {
+const roughnessToMip = Fn( ( [ roughness ] ) => {
 
 	const mip = float( 0.0 ).toVar();
 
@@ -115,19 +115,19 @@ const roughnessToMip = tslFn( ( [ roughness ] ) => {
 
 		mip.assign( cubeUV_r0.sub( roughness ).mul( cubeUV_m1.sub( cubeUV_m0 ) ).div( cubeUV_r0.sub( cubeUV_r1 ) ).add( cubeUV_m0 ) );
 
-	} ).elseif( roughness.greaterThanEqual( cubeUV_r4 ), () => {
+	} ).ElseIf( roughness.greaterThanEqual( cubeUV_r4 ), () => {
 
 		mip.assign( cubeUV_r1.sub( roughness ).mul( cubeUV_m4.sub( cubeUV_m1 ) ).div( cubeUV_r1.sub( cubeUV_r4 ) ).add( cubeUV_m1 ) );
 
-	} ).elseif( roughness.greaterThanEqual( cubeUV_r5 ), () => {
+	} ).ElseIf( roughness.greaterThanEqual( cubeUV_r5 ), () => {
 
 		mip.assign( cubeUV_r4.sub( roughness ).mul( cubeUV_m5.sub( cubeUV_m4 ) ).div( cubeUV_r4.sub( cubeUV_r5 ) ).add( cubeUV_m4 ) );
 
-	} ).elseif( roughness.greaterThanEqual( cubeUV_r6 ), () => {
+	} ).ElseIf( roughness.greaterThanEqual( cubeUV_r6 ), () => {
 
 		mip.assign( cubeUV_r5.sub( roughness ).mul( cubeUV_m6.sub( cubeUV_m5 ) ).div( cubeUV_r5.sub( cubeUV_r6 ) ).add( cubeUV_m5 ) );
 
-	} ).else( () => {
+	} ).Else( () => {
 
 		mip.assign( float( - 2.0 ).mul( log2( mul( 1.16, roughness ) ) ) ); // 1.16 = 1.79^0.25
 
@@ -144,7 +144,7 @@ const roughnessToMip = tslFn( ( [ roughness ] ) => {
 } );
 
 // RH coordinate system; PMREM face-indexing convention
-export const getDirection = tslFn( ( [ uv_immutable, face ] ) => {
+export const getDirection = Fn( ( [ uv_immutable, face ] ) => {
 
 	const uv = uv_immutable.toVar();
 	uv.assign( mul( 2.0, uv ).sub( 1.0 ) );
@@ -154,26 +154,26 @@ export const getDirection = tslFn( ( [ uv_immutable, face ] ) => {
 
 		direction.assign( direction.zyx ); // ( 1, v, u ) pos x
 
-	} ).elseif( face.equal( 1.0 ), () => {
+	} ).ElseIf( face.equal( 1.0 ), () => {
 
 		direction.assign( direction.xzy );
 		direction.xz.mulAssign( - 1.0 ); // ( -u, 1, -v ) pos y
 
-	} ).elseif( face.equal( 2.0 ), () => {
+	} ).ElseIf( face.equal( 2.0 ), () => {
 
 		direction.x.mulAssign( - 1.0 ); // ( -u, v, 1 ) pos z
 
-	} ).elseif( face.equal( 3.0 ), () => {
+	} ).ElseIf( face.equal( 3.0 ), () => {
 
 		direction.assign( direction.zyx );
 		direction.xz.mulAssign( - 1.0 ); // ( -1, v, -u ) neg x
 
-	} ).elseif( face.equal( 4.0 ), () => {
+	} ).ElseIf( face.equal( 4.0 ), () => {
 
 		direction.assign( direction.xzy );
 		direction.xy.mulAssign( - 1.0 ); // ( -u, -1, v ) neg y
 
-	} ).elseif( face.equal( 5.0 ), () => {
+	} ).ElseIf( face.equal( 5.0 ), () => {
 
 		direction.z.mulAssign( - 1.0 ); // ( u, v, -1 ) neg zS
 
@@ -192,7 +192,7 @@ export const getDirection = tslFn( ( [ uv_immutable, face ] ) => {
 
 //
 
-export const textureCubeUV = tslFn( ( [ envMap, sampleDir_immutable, roughness_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
+export const textureCubeUV = Fn( ( [ envMap, sampleDir_immutable, roughness_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
 
 	const roughness = float( roughness_immutable );
 	const sampleDir = vec3( sampleDir_immutable );
@@ -214,7 +214,7 @@ export const textureCubeUV = tslFn( ( [ envMap, sampleDir_immutable, roughness_i
 
 } );
 
-const bilinearCubeUV = tslFn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
+const bilinearCubeUV = Fn( ( [ envMap, direction_immutable, mipInt_immutable, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP ] ) => {
 
 	const mipInt = float( mipInt_immutable ).toVar();
 	const direction = vec3( direction_immutable );
@@ -241,7 +241,7 @@ const bilinearCubeUV = tslFn( ( [ envMap, direction_immutable, mipInt_immutable,
 
 } );
 
-const getSample = tslFn( ( { envMap, mipInt, outputDirection, theta, axis, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
+const getSample = Fn( ( { envMap, mipInt, outputDirection, theta, axis, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
 
 	const cosTheta = cos( theta );
 
@@ -254,9 +254,9 @@ const getSample = tslFn( ( { envMap, mipInt, outputDirection, theta, axis, CUBEU
 
 } );
 
-export const blur = tslFn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
+export const blur = Fn( ( { n, latitudinal, poleAxis, outputDirection, weights, samples, dTheta, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) => {
 
-	const axis = vec3( cond( latitudinal, poleAxis, cross( poleAxis, outputDirection ) ) ).toVar();
+	const axis = vec3( select( latitudinal, poleAxis, cross( poleAxis, outputDirection ) ) ).toVar();
 
 	If( all( axis.equals( vec3( 0.0 ) ) ), () => {
 
@@ -269,7 +269,7 @@ export const blur = tslFn( ( { n, latitudinal, poleAxis, outputDirection, weight
 	const gl_FragColor = vec3().toVar();
 	gl_FragColor.addAssign( weights.element( int( 0 ) ).mul( getSample( { theta: 0.0, axis, outputDirection, mipInt, envMap, CUBEUV_TEXEL_WIDTH, CUBEUV_TEXEL_HEIGHT, CUBEUV_MAX_MIP } ) ) );
 
-	loop( { start: int( 1 ), end: n }, ( { i } ) => {
+	Loop( { start: int( 1 ), end: n }, ( { i } ) => {
 
 		If( i.greaterThanEqual( samples ), () => {
 

package/src/nodes/procedural/CheckerNode.js

@@ -1,9 +1,9 @@
 import TempNode from '../core/TempNode.js';
 import { uv } from '../accessors/UVNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { addNodeElement, tslFn, nodeProxy } from '../shadernode/ShaderNode.js';
+import { addNodeElement, Fn, nodeProxy } from '../shadernode/ShaderNode.js';
 
-const checkerShaderNode = tslFn( ( inputs ) => {
+const checkerShaderNode = Fn( ( inputs ) => {
 
 	const uv = inputs.uv.mul( 2.0 );
 

package/src/nodes/shadernode/ShaderNode.js

@@ -164,7 +164,7 @@ const ShaderNodeObject = function ( obj, altType = null ) {
 
 	} else if ( type === 'shader' ) {
 
-		return tslFn( obj );
+		return Fn( obj );
 
 	}
 
@@ -300,7 +300,7 @@ class ShaderCallNodeInternal extends Node {
 		}
 
 		const jsFunc = shaderNode.jsFunc;
-		const outputNode = inputNodes !== null ? jsFunc( inputNodes, builder.stack, builder ) : jsFunc( builder.stack, builder );
+		const outputNode = inputNodes !== null ? jsFunc( inputNodes, builder ) : jsFunc( builder );
 
 		return nodeObject( outputNode );
 
@@ -492,7 +492,7 @@ export const nodeArray = ( val, altType = null ) => new ShaderNodeArray( val, al
 export const nodeProxy = ( ...params ) => new ShaderNodeProxy( ...params );
 export const nodeImmutable = ( ...params ) => new ShaderNodeImmutable( ...params );
 
-export const tslFn = ( jsFunc ) => {
+export const Fn = ( jsFunc ) => {
 
 	const shaderNode = new ShaderNode( jsFunc );
 
@@ -529,6 +529,13 @@ export const tslFn = ( jsFunc ) => {
 
 };
 
+export const tslFn = ( ...params ) => { // @deprecated, r168
+
+	console.warn( 'TSL.tslFn: tslFn() has been renamed to Fn().' );
+	return Fn( ...params );
+
+};
+
 addNodeClass( 'ShaderNode', ShaderNode );
 
 //
@@ -557,7 +564,7 @@ export const setCurrentStack = ( stack ) => {
 
 export const getCurrentStack = () => currentStack;
 
-export const If = ( ...params ) => currentStack.if( ...params );
+export const If = ( ...params ) => currentStack.If( ...params );
 
 export function append( node ) {
 

package/src/nodes/utils/CubeMapNode.js

@@ -0,0 +1,157 @@
+import TempNode from '../core/TempNode.js';
+import { addNodeClass } from '../core/Node.js';
+import { NodeUpdateType } from '../core/constants.js';
+import { nodeProxy } from '../shadernode/ShaderNode.js';
+import { CubeTexture } from '../../textures/CubeTexture.js';
+import { cubeTexture } from '../accessors/CubeTextureNode.js';
+import CubeRenderTarget from '../../renderers/common/CubeRenderTarget.js';
+import { CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from '../../constants';
+
+const _cache = new WeakMap();
+
+class CubeMapNode extends TempNode {
+
+	constructor( envNode ) {
+
+		super( 'vec3' );
+
+		this.envNode = envNode;
+
+		this._cubeTexture = null;
+		this._cubeTextureNode = cubeTexture();
+
+		const defaultTexture = new CubeTexture();
+		defaultTexture.isRenderTargetTexture = true;
+
+		this._defaultTexture = defaultTexture;
+
+		this.updateBeforeType = NodeUpdateType.RENDER;
+
+	}
+
+	updateBefore( frame ) {
+
+		const { renderer, material } = frame;
+
+		const envNode = this.envNode;
+
+		if ( envNode.isTextureNode || envNode.isMaterialReferenceNode ) {
+
+			const texture = ( envNode.isTextureNode ) ? envNode.value : material[ envNode.property ];
+
+			if ( texture && texture.isTexture ) {
+
+				const mapping = texture.mapping;
+
+				if ( mapping === EquirectangularReflectionMapping || mapping === EquirectangularRefractionMapping ) {
+
+					// check for converted cubemap map
+
+					if ( _cache.has( texture ) ) {
+
+						const cubeMap = _cache.get( texture );
+
+						mapTextureMapping( cubeMap, texture.mapping );
+						this._cubeTexture = cubeMap;
+
+					} else {
+
+						// create cube map from equirectangular map
+
+						const image = texture.image;
+
+						if ( isEquirectangularMapReady( image ) ) {
+
+							const renderTarget = new CubeRenderTarget( image.height );
+							renderTarget.fromEquirectangularTexture( renderer, texture );
+
+							mapTextureMapping( renderTarget.texture, texture.mapping );
+							this._cubeTexture = renderTarget.texture;
+
+							_cache.set( texture, renderTarget.texture );
+
+							texture.addEventListener( 'dispose', onTextureDispose );
+
+						} else {
+
+							// default cube texture as fallback when equirectangular texture is not yet loaded
+
+							this._cubeTexture = this._defaultTexture;
+
+						}
+
+					}
+
+					//
+
+					this._cubeTextureNode.value = this._cubeTexture;
+
+				} else {
+
+					// envNode already refers to a cube map
+
+					this._cubeTextureNode = this.envNode;
+
+				}
+
+			}
+
+		}
+
+	}
+
+	setup( builder ) {
+
+		this.updateBefore( builder );
+
+		return this._cubeTextureNode;
+
+	}
+
+}
+
+function isEquirectangularMapReady( image ) {
+
+	if ( image === null || image === undefined ) return false;
+
+	return image.height > 0;
+
+}
+
+function onTextureDispose( event ) {
+
+	const texture = event.target;
+
+	texture.removeEventListener( 'dispose', onTextureDispose );
+
+	const renderTarget = _cache.get( texture );
+
+	if ( renderTarget !== undefined ) {
+
+		_cache.delete( texture );
+
+		renderTarget.dispose();
+
+	}
+
+}
+
+function mapTextureMapping( texture, mapping ) {
+
+	if ( mapping === EquirectangularReflectionMapping ) {
+
+		texture.mapping = CubeReflectionMapping;
+
+	} else if ( mapping === EquirectangularRefractionMapping ) {
+
+		texture.mapping = CubeRefractionMapping;
+
+	}
+
+}
+
+export const cubeMapNode = nodeProxy( CubeMapNode );
+
+addNodeClass( 'CubeMapNode', CubeMapNode );
+
+export default CubeMapNode;

package/src/nodes/utils/LoopNode.js

@@ -1,7 +1,6 @@
 import Node, { addNodeClass } from '../core/Node.js';
 import { expression } from '../code/ExpressionNode.js';
-import { bypass } from '../core/BypassNode.js';
-import { addNodeElement, nodeObject, nodeArray } from '../shadernode/ShaderNode.js';
+import { nodeObject, nodeArray } from '../shadernode/ShaderNode.js';
 
 class LoopNode extends Node {
 
@@ -192,10 +191,17 @@ class LoopNode extends Node {
 
 export default LoopNode;
 
-export const loop = ( ...params ) => nodeObject( new LoopNode( nodeArray( params, 'int' ) ) ).append();
+export const Loop = ( ...params ) => nodeObject( new LoopNode( nodeArray( params, 'int' ) ) ).append();
 export const Continue = () => expression( 'continue' ).append();
 export const Break = () => expression( 'break' ).append();
 
-addNodeElement( 'loop', ( returns, ...params ) => bypass( returns, loop( ...params ) ) );
+//
+
+export const loop = ( ...params ) => { // @deprecated, r168
+
+	console.warn( 'TSL.LoopNode: loop() has been renamed to Loop().' );
+	return Loop( ...params );
+
+};
 
 addNodeClass( 'LoopNode', LoopNode );

package/src/nodes/utils/SpriteUtils.js

@@ -1,9 +1,9 @@
 import { modelWorldMatrix } from '../accessors/ModelNode.js';
 import { cameraViewMatrix, cameraProjectionMatrix } from '../accessors/CameraNode.js';
 import { positionLocal } from '../accessors/PositionNode.js';
-import { tslFn, defined } from '../shadernode/ShaderNode.js';
+import { Fn, defined } from '../shadernode/ShaderNode.js';
 
-export const billboarding = tslFn( ( { position = null, horizontal = true, vertical = false } ) => {
+export const billboarding = Fn( ( { position = null, horizontal = true, vertical = false } ) => {
 
 	let worldMatrix;
 

package/src/nodes/utils/UVUtils.js

@@ -1,12 +1,12 @@
-import { addNodeElement, tslFn, vec2 } from '../shadernode/ShaderNode.js';
+import { addNodeElement, Fn, vec2 } from '../shadernode/ShaderNode.js';
 
-export const rotateUV = tslFn( ( [ uv, rotation, center = vec2( 0.5 ) ] ) => {
+export const rotateUV = Fn( ( [ uv, rotation, center = vec2( 0.5 ) ] ) => {
 
 	return uv.sub( center ).rotate( rotation ).add( center );
 
 } );
 
-export const spherizeUV = tslFn( ( [ uv, strength, center = vec2( 0.5 ) ] ) => {
+export const spherizeUV = Fn( ( [ uv, strength, center = vec2( 0.5 ) ] ) => {
 
 	const delta = uv.sub( center );
 	const delta2 = delta.dot( delta );

package/src/nodes/utils/ViewportUtils.js

@@ -1,13 +1,13 @@
-import { tslFn } from '../shadernode/ShaderNode.js';
+import { Fn } from '../shadernode/ShaderNode.js';
 import { viewportTopLeft } from '../display/ViewportNode.js';
 import { viewportDepthTexture } from '../display/ViewportDepthTextureNode.js';
 import { linearDepth } from '../display/ViewportDepthNode.js';
 
-export const viewportSafeUV = tslFn( ( [ uv = null ] ) => {
+export const viewportSafeUV = Fn( ( [ uv = null ] ) => {
 
 	const depth = linearDepth();
 	const depthDiff = linearDepth( viewportDepthTexture( uv ) ).sub( depth );
-	const finalUV = depthDiff.lessThan( 0 ).cond( viewportTopLeft, uv );
+	const finalUV = depthDiff.lessThan( 0 ).select( viewportTopLeft, uv );
 
 	return finalUV;
 

package/src/renderers/WebGLRenderer.js

@@ -1845,6 +1845,14 @@ class WebGLRenderer {
 
 					needsProgramChange = true;
 
+				} else if (object.isBatchedMesh && materialProperties.batchingMatrix === false && object._matricesTexture !== null) {
+
+					needsProgramChange = true;
+
+				} else if (object.isBatchedMesh && materialProperties.batchingMatrix === true && object._matricesTexture === null) {
+
+					needsProgramChange = true;
+
 				} else if ( object.isInstancedMesh && materialProperties.instancing === false ) {
 
 					needsProgramChange = true;

package/src/renderers/common/RenderContext.js

@@ -38,6 +38,30 @@ class RenderContext {
 
 	}
 
+	getCacheKey() {
+
+		return getCacheKey( this );
+
+	}
+
+}
+
+export function getCacheKey( renderContext ) {
+
+	const { textures, activeCubeFace } = renderContext;
+
+	let key = '';
+
+	for ( const texture of textures ) {
+
+		key += texture.id + ',';
+
+	}
+
+	key += activeCubeFace;
+
+	return key;
+
 }
 
 export default RenderContext;

package/src/renderers/common/RenderObject.js

@@ -263,7 +263,7 @@ export default class RenderObject {
 
 		if ( object.count > 1 ) {
 
-			cacheKey += object.count + ',';
+			cacheKey += object.count + ',' + object.uuid + ',';
 
 		}
 

package/src/renderers/shaders/ShaderChunk/batching_pars_vertex.glsl.js

@@ -7,7 +7,7 @@ export default /* glsl */`
 
 	uniform highp sampler2D batchingTexture;
 	uniform highp usampler2D batchingIdTexture;
-	mat4 getBatchingMatrix( const in float i ) {
+	mat4 getBatchingMatrix( const in int i ) {
 
 		int size = textureSize( batchingTexture, 0 ).x;
 		int j = int( i ) * 4;

package/src/renderers/shaders/ShaderChunk/batching_vertex.glsl.js

@@ -1,6 +1,6 @@
 export default /* glsl */`
 #ifdef USE_BATCHING_MATRIX
-	mat4 batchingMatrix = getBatchingMatrix( getIndirectIndex( gl_DrawID ) );
+	mat4 batchingMatrix = getBatchingMatrix( gl_DrawID );
 #elif defined ( USE_BATCHING )
 	mat4 batchingMatrix = mat4( 1.0 );
 #endif

package/src/renderers/shaders/ShaderLib/linedashed.glsl.js

@@ -5,7 +5,6 @@ attribute float lineDistance;
 varying float vLineDistance;
 
 #include <common>
-#include <batching_pars_vertex>
 #include <uv_pars_vertex>
 #include <color_pars_vertex>
 #include <fog_pars_vertex>
@@ -21,7 +20,6 @@ void main() {
 	#include <color_vertex>
 	#include <morphinstance_vertex>
 	#include <morphcolor_vertex>
-	#include <batching_vertex>
 	#include <begin_vertex>
 	#include <morphtarget_vertex>
 	#include <project_vertex>

package/src/renderers/shaders/ShaderLib/points.glsl.js

@@ -3,7 +3,6 @@ uniform float size;
 uniform float scale;
 
 #include <common>
-#include <batching_pars_vertex>
 #include <color_pars_vertex>
 #include <fog_pars_vertex>
 #include <morphtarget_pars_vertex>
@@ -28,7 +27,6 @@ void main() {
 	#include <color_vertex>
 	#include <morphinstance_vertex>
 	#include <morphcolor_vertex>
-	#include <batching_vertex>
 	#include <begin_vertex>
 	#include <morphtarget_vertex>
 	#include <project_vertex>