super-three 0.154.1 → 0.155.0

package/examples/jsm/nodes/functions/PhysicalLightingModel.js

@@ -3,16 +3,129 @@ import BRDF_GGX from './BSDF/BRDF_GGX.js';
 import DFGApprox from './BSDF/DFGApprox.js';
 import EnvironmentBRDF from './BSDF/EnvironmentBRDF.js';
 import F_Schlick from './BSDF/F_Schlick.js';
+import Schlick_to_F0 from './BSDF/Schlick_to_F0.js';
 import BRDF_Sheen from './BSDF/BRDF_Sheen.js';
-import { lightingModel } from '../core/LightingModel.js';
-import { diffuseColor, specularColor, roughness, clearcoat, clearcoatRoughness, sheen, sheenRoughness } from '../core/PropertyNode.js';
+import LightingModel from '../core/LightingModel.js';
+import { diffuseColor, specularColor, roughness, clearcoat, clearcoatRoughness, sheen, sheenRoughness, iridescence, iridescenceIOR, iridescenceThickness } from '../core/PropertyNode.js';
 import { transformedNormalView, transformedClearcoatNormalView } from '../accessors/NormalNode.js';
 import { positionViewDirection } from '../accessors/PositionNode.js';
-import { tslFn, float, vec3 } from '../shadernode/ShaderNode.js';
+import { float, vec3, mat3 } from '../shadernode/ShaderNode.js';
 import { cond } from '../math/CondNode.js';
+import { mix, smoothstep } from '../math/MathNode.js';
 
-const clearcoatF0 = vec3( 0.04 );
-const clearcoatF90 = vec3( 1 );
+//
+// Iridescence
+//
+
+// XYZ to linear-sRGB color space
+const XYZ_TO_REC709 = mat3(
+	3.2404542, - 0.9692660, 0.0556434,
+	- 1.5371385, 1.8760108, - 0.2040259,
+	- 0.4985314, 0.0415560, 1.0572252
+);
+
+// Assume air interface for top
+// Note: We don't handle the case fresnel0 == 1
+const Fresnel0ToIor = ( fresnel0 ) => {
+
+	const sqrtF0 = fresnel0.sqrt();
+	return vec3( 1.0 ).add( sqrtF0 ).div( vec3( 1.0 ).sub( sqrtF0 ) );
+
+};
+
+// ior is a value between 1.0 and 3.0. 1.0 is air interface
+const IorToFresnel0 = ( transmittedIor, incidentIor ) => {
+
+	return transmittedIor.sub( incidentIor ).div( transmittedIor.add( incidentIor ) ).pow2();
+
+};
+
+// Fresnel equations for dielectric/dielectric interfaces.
+// Ref: https://belcour.github.io/blog/research/2017/05/01/brdf-thin-film.html
+// Evaluation XYZ sensitivity curves in Fourier space
+const evalSensitivity = ( OPD, shift ) => {
+
+	const phase = OPD.mul( 2.0 * Math.PI * 1.0e-9 );
+	const val = vec3( 5.4856e-13, 4.4201e-13, 5.2481e-13 );
+	const pos = vec3( 1.6810e+06, 1.7953e+06, 2.2084e+06 );
+	const VAR = vec3( 4.3278e+09, 9.3046e+09, 6.6121e+09 );
+
+	const x = float( 9.7470e-14 * Math.sqrt( 2.0 * Math.PI * 4.5282e+09 ) ).mul( phase.mul( 2.2399e+06 ).add( shift.x ).cos() ).mul( phase.pow2().mul( - 4.5282e+09 ).exp() );
+
+	let xyz = val.mul( VAR.mul( 2.0 * Math.PI ).sqrt() ).mul( pos.mul( phase ).add( shift ).cos() ).mul( phase.pow2().negate().mul( VAR ).exp() );
+	xyz = vec3( xyz.x.add( x ), xyz.y, xyz.z ).div( 1.0685e-7 );
+
+	const rgb = XYZ_TO_REC709.mul( xyz );
+	return rgb;
+
+};
+
+const evalIridescence = ( outsideIOR, eta2, cosTheta1, thinFilmThickness, baseF0 ) => {
+
+	// Force iridescenceIOR -> outsideIOR when thinFilmThickness -> 0.0
+	const iridescenceIOR = mix( outsideIOR, eta2, smoothstep( 0.0, 0.03, thinFilmThickness ) );
+	// Evaluate the cosTheta on the base layer (Snell law)
+	const sinTheta2Sq = outsideIOR.div( iridescenceIOR ).pow2().mul( float( 1 ).sub( cosTheta1.pow2() ) );
+
+	// Handle TIR:
+	const cosTheta2Sq = float( 1 ).sub( sinTheta2Sq );
+	/*if ( cosTheta2Sq < 0.0 ) {
+
+			return vec3( 1.0 );
+
+	}*/
+
+	const cosTheta2 = cosTheta2Sq.sqrt();
+
+	// First interface
+	const R0 = IorToFresnel0( iridescenceIOR, outsideIOR );
+	const R12 = F_Schlick( { f0: R0, f90: 1.0, dotVH: cosTheta1 } );
+	//const R21 = R12;
+	const T121 = R12.oneMinus();
+	const phi12 = iridescenceIOR.lessThan( outsideIOR ).cond( Math.PI, 0.0 );
+	const phi21 = float( Math.PI ).sub( phi12 );
+
+	// Second interface
+	const baseIOR = Fresnel0ToIor( baseF0.clamp( 0.0, 0.9999 ) ); // guard against 1.0
+	const R1 = IorToFresnel0( baseIOR, iridescenceIOR.vec3() );
+	const R23 = F_Schlick( { f0: R1, f90: 1.0, dotVH: cosTheta2 } );
+	const phi23 = vec3(
+		baseIOR.x.lessThan( iridescenceIOR ).cond( Math.PI, 0.0 ),
+		baseIOR.y.lessThan( iridescenceIOR ).cond( Math.PI, 0.0 ),
+		baseIOR.z.lessThan( iridescenceIOR ).cond( Math.PI, 0.0 )
+	);
+
+	// Phase shift
+	const OPD = iridescenceIOR.mul( thinFilmThickness, cosTheta2, 2.0 );
+	const phi = vec3( phi21 ).add( phi23 );
+
+	// Compound terms
+	const R123 = R12.mul( R23 ).clamp( 1e-5, 0.9999 );
+	const r123 = R123.sqrt();
+	const Rs = T121.pow2().mul( R23 ).div( vec3( 1.0 ).sub( R123 ) );
+
+	// Reflectance term for m = 0 (DC term amplitude)
+	const C0 = R12.add( Rs );
+	let I = C0;
+
+	// Reflectance term for m > 0 (pairs of diracs)
+	let Cm = Rs.sub( T121 );
+	for ( let m = 1; m <= 2; ++ m ) {
+
+		Cm = Cm.mul( r123 );
+		const Sm = evalSensitivity( float( m ).mul( OPD ), float( m ).mul( phi ) ).mul( 2.0 );
+		I = I.add( Cm.mul( Sm ) );
+
+	}
+
+	// Since out of gamut colors might be produced, negative color values are clamped to 0.
+	return I.max( vec3( 0.0 ) );
+
+};
+
+//
+//	Sheen
+//
 
 // This is a curve-fit approxmation to the "Charlie sheen" BRDF integrated over the hemisphere from
 // Estevez and Kulla 2017, "Production Friendly Microfacet Sheen BRDF". The analysis can be found
@@ -41,164 +154,190 @@ const IBLSheenBRDF = ( normal, viewDir, roughness ) => {
 
 };
 
-// Fdez-Agüera's "Multiple-Scattering Microfacet Model for Real-Time Image Based Lighting"
-// Approximates multiscattering in order to preserve energy.
-// http://www.jcgt.org/published/0008/01/03/
-const computeMultiscattering = ( singleScatter, multiScatter, specularF90 = float( 1 ) ) => {
+const clearcoatF0 = vec3( 0.04 );
+const clearcoatF90 = vec3( 1 );
 
-	const fab = DFGApprox( { roughness } );
+//
 
-	const FssEss = specularColor.mul( fab.x ).add( specularF90.mul( fab.y ) );
+class PhysicalLightingModel extends LightingModel {
 
-	const Ess = fab.x.add( fab.y );
-	const Ems = Ess.oneMinus();
+	constructor( clearcoat = true, sheen = true, iridescence = true ) {
 
-	const Favg = specularColor.add( specularColor.oneMinus().mul( 0.047619 ) ); // 1/21
-	const Fms = FssEss.mul( Favg ).div( Ems.mul( Favg ).oneMinus() );
+		super();
 
-	singleScatter.addAssign( FssEss );
-	multiScatter.addAssign( Fms.mul( Ems ) );
+		this.clearcoat = clearcoat;
+		this.sheen = sheen;
+		this.iridescence = iridescence;
 
-};
+		this.clearcoatRadiance = null;
+		this.clearcoatSpecular = null;
+		this.sheenSpecular = null;
+		this.iridescenceFresnel = null;
+		this.iridescenceF0 = null;
 
-const LM_Init = tslFn( ( context, stack, builder ) => {
+	}
 
-	if ( builder.includes( clearcoat ) ) {
+	init( { reflectedLight } ) {
 
-		context.clearcoatRadiance = vec3().temp();
-		context.reflectedLight.clearcoatSpecular = vec3().temp();
+		if ( this.clearcoat === true ) {
 
-		const dotNVcc = transformedClearcoatNormalView.dot( positionViewDirection ).clamp();
+			this.clearcoatRadiance = vec3().temp();
+			this.clearcoatSpecular = vec3().temp();
 
-		const Fcc = F_Schlick( {
-			dotVH: dotNVcc,
-			f0: clearcoatF0,
-			f90: clearcoatF90
-		} );
+			const dotNVcc = transformedClearcoatNormalView.dot( positionViewDirection ).clamp();
 
-		const outgoingLight = context.reflectedLight.total;
-		const clearcoatLight = outgoingLight.mul( clearcoat.mul( Fcc ).oneMinus() ).add( context.reflectedLight.clearcoatSpecular.mul( clearcoat ) );
+			const Fcc = F_Schlick( {
+				dotVH: dotNVcc,
+				f0: clearcoatF0,
+				f90: clearcoatF90
+			} );
 
-		outgoingLight.assign( clearcoatLight );
+			const outgoingLight = reflectedLight.total;
+			const clearcoatLight = outgoingLight.mul( clearcoat.mul( Fcc ).oneMinus() ).add( this.clearcoatSpecular.mul( clearcoat ) );
 
-	}
+			outgoingLight.assign( clearcoatLight );
 
-	if ( builder.includes( sheen ) ) {
+		}
 
-		context.reflectedLight.sheenSpecular = vec3().temp();
+		if ( this.sheen === true ) {
 
-		const outgoingLight = context.reflectedLight.total;
+			this.sheenSpecular = vec3().temp();
 
-		const sheenEnergyComp = sheen.r.max( sheen.g ).max( sheen.b ).mul( 0.157 ).oneMinus();
-		const sheenLight = outgoingLight.mul( sheenEnergyComp ).add( context.reflectedLight.sheenSpecular );
+			const outgoingLight = reflectedLight.total;
 
-		outgoingLight.assign( sheenLight );
+			const sheenEnergyComp = sheen.r.max( sheen.g ).max( sheen.b ).mul( 0.157 ).oneMinus();
+			const sheenLight = outgoingLight.mul( sheenEnergyComp ).add( this.sheenSpecular );
 
-	}
+			outgoingLight.assign( sheenLight );
 
-} );
+		}
 
-const RE_IndirectSpecular_Physical = tslFn( ( context ) => {
+		if ( this.iridescence === true ) {
 
-	const { radiance, iblIrradiance, reflectedLight } = context;
+			const dotNVi = transformedNormalView.dot( positionViewDirection ).clamp();
 
-	if ( reflectedLight.sheenSpecular ) {
+			this.iridescenceFresnel = evalIridescence( float( 1.0 ), iridescenceIOR, dotNVi, iridescenceThickness, specularColor );
+			this.iridescenceF0 = Schlick_to_F0( { f: this.iridescenceFresnel, f90: 1.0, dotVH: dotNVi } );
 
-		reflectedLight.sheenSpecular.addAssign( iblIrradiance.mul(
-			sheen,
-			IBLSheenBRDF( transformedNormalView, positionViewDirection, sheenRoughness )
-		) );
+		}
 
 	}
 
-	if ( reflectedLight.clearcoatSpecular ) {
+	// Fdez-Agüera's "Multiple-Scattering Microfacet Model for Real-Time Image Based Lighting"
+	// Approximates multiscattering in order to preserve energy.
+	// http://www.jcgt.org/published/0008/01/03/
 
-		const dotNVcc = transformedClearcoatNormalView.dot( positionViewDirection ).clamp();
+	computeMultiscattering( singleScatter, multiScatter, specularF90 = float( 1 ) ) {
 
-		const clearcoatEnv = EnvironmentBRDF( {
-			dotNV: dotNVcc,
-			specularColor: clearcoatF0,
-			specularF90: clearcoatF90,
-			roughness: clearcoatRoughness
-		} );
+		const fab = DFGApprox( { roughness } );
 
-		reflectedLight.clearcoatSpecular.addAssign( context.clearcoatRadiance.mul( clearcoatEnv ) );
+		const Fr = this.iridescenceF0 ? iridescence.mix( specularColor, this.iridescenceF0 ) : specularColor;
 
-	}
+		const FssEss = Fr.mul( fab.x ).add( specularF90.mul( fab.y ) );
 
-	// Both indirect specular and indirect diffuse light accumulate here
+		const Ess = fab.x.add( fab.y );
+		const Ems = Ess.oneMinus();
 
-	const singleScattering = vec3().temp();
-	const multiScattering = vec3().temp();
-	const cosineWeightedIrradiance = iblIrradiance.mul( 1 / Math.PI );
+		const Favg = specularColor.add( specularColor.oneMinus().mul( 0.047619 ) ); // 1/21
+		const Fms = FssEss.mul( Favg ).div( Ems.mul( Favg ).oneMinus() );
 
-	computeMultiscattering( singleScattering, multiScattering );
+		singleScatter.addAssign( FssEss );
+		multiScatter.addAssign( Fms.mul( Ems ) );
 
-	const totalScattering = singleScattering.add( multiScattering );
+	}
+
+	direct( { lightDirection, lightColor, reflectedLight } ) {
 
-	const diffuse = diffuseColor.mul( totalScattering.r.max( totalScattering.g ).max( totalScattering.b ).oneMinus() );
+		const dotNL = transformedNormalView.dot( lightDirection ).clamp();
+		const irradiance = dotNL.mul( lightColor );
 
-	reflectedLight.indirectSpecular.addAssign( radiance.mul( singleScattering ) );
-	reflectedLight.indirectSpecular.addAssign( multiScattering.mul( cosineWeightedIrradiance ) );
+		if ( this.sheen === true ) {
 
-	reflectedLight.indirectDiffuse.addAssign( diffuse.mul( cosineWeightedIrradiance ) );
+			this.sheenSpecular.addAssign( irradiance.mul( BRDF_Sheen( { lightDirection } ) ) );
 
-} );
+		}
 
-const RE_IndirectDiffuse_Physical = tslFn( ( context ) => {
+		if ( this.clearcoat === true ) {
 
-	const { irradiance, reflectedLight } = context;
+			const dotNLcc = transformedClearcoatNormalView.dot( lightDirection ).clamp();
+			const ccIrradiance = dotNLcc.mul( lightColor );
 
-	reflectedLight.indirectDiffuse.addAssign( irradiance.mul( BRDF_Lambert( { diffuseColor } ) ) );
+			this.clearcoatSpecular.addAssign( ccIrradiance.mul( BRDF_GGX( { lightDirection, f0: clearcoatF0, f90: clearcoatF90, roughness: clearcoatRoughness, normalView: transformedClearcoatNormalView } ) ) );
 
-} );
+		}
 
-const RE_Direct_Physical = tslFn( ( inputs ) => {
+		reflectedLight.directDiffuse.addAssign( irradiance.mul( BRDF_Lambert( { diffuseColor: diffuseColor.rgb } ) ) );
 
-	const { lightDirection, lightColor, reflectedLight } = inputs;
+		reflectedLight.directSpecular.addAssign( irradiance.mul( BRDF_GGX( { lightDirection, f0: specularColor, f90: 1, roughness, iridescence: this.iridescence, iridescenceFresnel: this.iridescenceFresnel } ) ) );
 
-	const dotNL = transformedNormalView.dot( lightDirection ).clamp();
-	const irradiance = dotNL.mul( lightColor );
+	}
 
-	if ( reflectedLight.sheenSpecular ) {
+	indirectDiffuse( { irradiance, reflectedLight } ) {
 
-		reflectedLight.sheenSpecular.addAssign( irradiance.mul( BRDF_Sheen( { lightDirection } ) ) );
+		reflectedLight.indirectDiffuse.addAssign( irradiance.mul( BRDF_Lambert( { diffuseColor } ) ) );
 
 	}
 
-	if ( reflectedLight.clearcoatSpecular ) {
+	indirectSpecular( { radiance, iblIrradiance, reflectedLight, } ) {
 
-		const dotNLcc = transformedClearcoatNormalView.dot( lightDirection ).clamp();
-		const ccIrradiance = dotNLcc.mul( lightColor );
+		if ( this.sheen === true ) {
 
-		reflectedLight.clearcoatSpecular.addAssign( ccIrradiance.mul( BRDF_GGX( { lightDirection, f0: clearcoatF0, f90: clearcoatF90, roughness: clearcoatRoughness, normalView: transformedClearcoatNormalView } ) ) );
+			this.sheenSpecular.addAssign( iblIrradiance.mul(
+				sheen,
+				IBLSheenBRDF( transformedNormalView, positionViewDirection, sheenRoughness )
+			) );
 
-	}
+		}
+
+		if ( this.clearcoat === true ) {
+
+			const dotNVcc = transformedClearcoatNormalView.dot( positionViewDirection ).clamp();
+
+			const clearcoatEnv = EnvironmentBRDF( {
+				dotNV: dotNVcc,
+				specularColor: clearcoatF0,
+				specularF90: clearcoatF90,
+				roughness: clearcoatRoughness
+			} );
 
-	reflectedLight.directDiffuse.addAssign( irradiance.mul( BRDF_Lambert( { diffuseColor: diffuseColor.rgb } ) ) );
+			this.clearcoatSpecular.addAssign( this.clearcoatRadiance.mul( clearcoatEnv ) );
 
-	reflectedLight.directSpecular.addAssign( irradiance.mul( BRDF_GGX( { lightDirection, f0: specularColor, f90: 1, roughness } ) ) );
+		}
 
-} );
+		// Both indirect specular and indirect diffuse light accumulate here
 
-const RE_AmbientOcclusion_Physical = tslFn( ( context ) => {
+		const singleScattering = vec3().temp();
+		const multiScattering = vec3().temp();
+		const cosineWeightedIrradiance = iblIrradiance.mul( 1 / Math.PI );
 
-	const { ambientOcclusion, reflectedLight } = context;
+		this.computeMultiscattering( singleScattering, multiScattering );
 
-	const dotNV = transformedNormalView.dot( positionViewDirection ).clamp(); // @ TODO: Move to core dotNV
+		const totalScattering = singleScattering.add( multiScattering );
 
-	const aoNV = dotNV.add( ambientOcclusion );
-	const aoExp = roughness.mul( - 16.0 ).oneMinus().negate().exp2();
+		const diffuse = diffuseColor.mul( totalScattering.r.max( totalScattering.g ).max( totalScattering.b ).oneMinus() );
 
-	const aoNode = ambientOcclusion.sub( aoNV.pow( aoExp ).oneMinus() ).clamp();
+		reflectedLight.indirectSpecular.addAssign( radiance.mul( singleScattering ) );
+		reflectedLight.indirectSpecular.addAssign( multiScattering.mul( cosineWeightedIrradiance ) );
 
-	reflectedLight.indirectDiffuse.mulAssign( ambientOcclusion );
+		reflectedLight.indirectDiffuse.addAssign( diffuse.mul( cosineWeightedIrradiance ) );
 
-	reflectedLight.indirectSpecular.mulAssign( aoNode );
+	}
+
+	ambientOcclusion( { ambientOcclusion, reflectedLight } ) {
+
+		const dotNV = transformedNormalView.dot( positionViewDirection ).clamp(); // @ TODO: Move to core dotNV
+
+		const aoNV = dotNV.add( ambientOcclusion );
+		const aoExp = roughness.mul( - 16.0 ).oneMinus().negate().exp2();
 
+		const aoNode = ambientOcclusion.sub( aoNV.pow( aoExp ).oneMinus() ).clamp();
 
-} );
+		reflectedLight.indirectDiffuse.mulAssign( ambientOcclusion );
+
+		reflectedLight.indirectSpecular.mulAssign( aoNode );
+
+	}
 
-const physicalLightingModel = lightingModel( LM_Init, RE_Direct_Physical, RE_IndirectDiffuse_Physical, RE_IndirectSpecular_Physical, RE_AmbientOcclusion_Physical );
+}
 
-export default physicalLightingModel;
+export default PhysicalLightingModel;

package/examples/jsm/nodes/geometry/RangeNode.js

@@ -44,8 +44,8 @@ class RangeNode extends Node {
 
 		if ( object.isInstancedMesh === true ) {
 
-			let minValue = this.minNode.value;
-			let maxValue = this.maxNode.value;
+			const minValue = this.minNode.value;
+			const maxValue = this.maxNode.value;
 
 			const minLength = builder.getTypeLength( getValueType( minValue ) );
 			const maxLength = builder.getTypeLength( getValueType( maxValue ) );

package/examples/jsm/nodes/gpgpu/ComputeNode.js

@@ -16,12 +16,25 @@ class ComputeNode extends Node {
 		this.workgroupSize = workgroupSize;
 		this.dispatchCount = 0;
 
+		this.version = 1;
 		this.updateType = NodeUpdateType.OBJECT;
 
 		this.updateDispatchCount();
 
 	}
 
+	dispose() {
+
+		this.dispatchEvent( { type: 'dispose' } );
+
+	}
+
+	set needsUpdate( value ) {
+
+		if ( value === true ) this.version ++;
+
+	}
+
 	updateDispatchCount() {
 
 		const { count, workgroupSize } = this;

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

@@ -14,7 +14,7 @@ class AONode extends LightingNode {
 	construct( builder ) {
 
 		const aoIntensity = 1;
-		const aoNode = this.aoNode.sub( 1.0 ).mul( aoIntensity ).add( 1.0 );
+		const aoNode = this.aoNode.x.sub( 1.0 ).mul( aoIntensity ).add( 1.0 );
 
 		builder.context.ambientOcclusion.mulAssign( aoNode );
 

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

@@ -2,14 +2,14 @@ import LightingNode from './LightingNode.js';
 import { NodeUpdateType } from '../core/constants.js';
 import { uniform } from '../core/UniformNode.js';
 import { addNodeClass } from '../core/Node.js';
-import { vec3 } from '../shadernode/ShaderNode.js';
+import { /*vec2,*/ vec3 } from '../shadernode/ShaderNode.js';
 import { reference } from '../accessors/ReferenceNode.js';
 import { texture } from '../accessors/TextureNode.js';
 import { positionWorld } from '../accessors/PositionNode.js';
-//import { step } from '../math/MathNode.js';
-import { cond } from '../math/CondNode.js';
+import { normalWorld } from '../accessors/NormalNode.js';
+//import { add } from '../math/OperatorNode.js';
 
-import { Color, DepthTexture, NearestFilter } from 'three';
+import { Color, DepthTexture, NearestFilter, LessCompare } from 'three';
 
 let depthMaterial = null;
 
@@ -53,7 +53,7 @@ class AnalyticLightNode extends LightingNode {
 			depthTexture.magFilter = NearestFilter;
 			depthTexture.image.width = shadow.mapSize.width;
 			depthTexture.image.height = shadow.mapSize.height;
-			//depthTexture.compareFunction = THREE.LessCompare;
+			depthTexture.compareFunction = LessCompare;
 
 			rtt.depthTexture = depthTexture;
 
@@ -62,31 +62,69 @@ class AnalyticLightNode extends LightingNode {
 			//
 
 			const bias = reference( 'bias', 'float', shadow );
+			const normalBias = reference( 'normalBias', 'float', shadow );
 
-			//const diffuseFactor = normalView.dot( objectViewPosition( this.light ).sub( positionView ).normalize().negate() );
-			//bias = mix( bias, 0, diffuseFactor );
-
-			let shadowCoord = uniform( shadow.matrix ).mul( positionWorld );
+			let shadowCoord = uniform( shadow.matrix ).mul( positionWorld.add( normalWorld.mul( normalBias ) ) );
 			shadowCoord = shadowCoord.xyz.div( shadowCoord.w );
 
+			const frustumTest = shadowCoord.x.greaterThanEqual( 0 )
+				.and( shadowCoord.x.lessThanEqual( 1 ) )
+				.and( shadowCoord.y.greaterThanEqual( 0 ) )
+				.and( shadowCoord.y.lessThanEqual( 1 ) )
+				.and( shadowCoord.z.lessThanEqual( 1 ) );
+
 			shadowCoord = vec3(
 				shadowCoord.x,
-				shadowCoord.y.oneMinus(),
-				shadowCoord.z
+				shadowCoord.y.oneMinus(), // WebGPU: Flip Y
+				shadowCoord.z.add( bias ).mul( 2 ).sub( 1 ) // WebGPU: Convertion [ 0, 1 ] to [ - 1, 1 ]
 			);
 
-			// @TODO: Optimize using WebGPU compare-sampler
-
-			let depth = texture( depthTexture, shadowCoord.xy );
-			depth = depth.mul( .5 ).add( .5 ).add( bias );
-
-			shadowNode = cond( shadowCoord.z.lessThan( depth ).or( shadowCoord.y.lessThan( .000001 ) /*@TODO: find the cause and remove it soon */ ), 1, 0 );
-			//shadowNode = step( shadowCoord.z, depth );
-
+			const textureCompare = ( depthTexture, shadowCoord, compare ) => texture( depthTexture, shadowCoord ).compare( compare );
+			//const textureCompare = ( depthTexture, shadowCoord, compare ) => compare.step( texture( depthTexture, shadowCoord ) );
+
+			// BasicShadowMap
+
+			shadowNode = textureCompare( depthTexture, shadowCoord.xy, shadowCoord.z );
+
+			// PCFShadowMap
+			/*
+			const mapSize = reference( 'mapSize', 'vec2', shadow );
+			const radius = reference( 'radius', 'float', shadow );
+
+			const texelSize = vec2( 1 ).div( mapSize );
+			const dx0 = texelSize.x.negate().mul( radius );
+			const dy0 = texelSize.y.negate().mul( radius );
+			const dx1 = texelSize.x.mul( radius );
+			const dy1 = texelSize.y.mul( radius );
+			const dx2 = dx0.mul( 2 );
+			const dy2 = dy0.mul( 2 );
+			const dx3 = dx1.mul( 2 );
+			const dy3 = dy1.mul( 2 );
+
+			shadowNode = add(
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx0, dy0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( 0, dy0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx1, dy0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx2, dy2 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( 0, dy2 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx3, dy2 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx0, 0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx2, 0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy, shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx3, 0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx1, 0 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx2, dy3 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( 0, dy3 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx3, dy3 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx0, dy1 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( 0, dy1 ) ), shadowCoord.z ),
+				textureCompare( depthTexture, shadowCoord.xy.add( vec2( dx1, dy1 ) ), shadowCoord.z )
+			).mul( 1 / 17 );
+			*/
 			//
 
 			this.rtt = rtt;
-			this.colorNode = this.colorNode.mul( shadowNode );
+			this.colorNode = this.colorNode.mul( frustumTest.mix( 1, shadowNode ) );
 
 			this.shadowNode = shadowNode;
 

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

@@ -17,20 +17,17 @@ class DirectionalLightNode extends AnalyticLightNode {
 
 		super.construct( builder );
 
+		const lightingModel = builder.context.lightingModel;
+
 		const lightColor = this.colorNode;
 		const lightDirection = lightTargetDirection( this.light );
-		const lightingModelFunctionNode = builder.context.lightingModelNode;
 		const reflectedLight = builder.context.reflectedLight;
 
-		if ( lightingModelFunctionNode && lightingModelFunctionNode.direct ) {
-
-			lightingModelFunctionNode.direct( {
-				lightDirection,
-				lightColor,
-				reflectedLight
-			} );
-
-		}
+		lightingModel.direct( {
+			lightDirection,
+			lightColor,
+			reflectedLight
+		} );
 
 	}