super-three 0.171.0 → 0.173.0

package/examples/jsm/misc/ProgressiveLightMap.js

@@ -13,12 +13,13 @@ import { potpack } from '../libs/potpack.module.js';
  * This should begin accumulating lightmaps which apply to
  * your objects, so you can start jittering lighting to achieve
  * the texture-space effect you're looking for.
- *
- * @param {WebGLRenderer} renderer An instance of WebGLRenderer.
- * @param {number} res The side-long dimension of you total lightmap.
  */
 class ProgressiveLightMap {
 
+	/**
+	 * @param {WebGLRenderer} renderer An instance of WebGLRenderer.
+ 	 * @param {number} [res=1024] The side-long dimension of you total lightmap.
+	 */
 	constructor( renderer, res = 1024 ) {
 
 		this.renderer = renderer;

package/examples/jsm/misc/ProgressiveLightMapGPU.js

@@ -15,12 +15,13 @@ import { potpack } from '../libs/potpack.module.js';
  * This should begin accumulating lightmaps which apply to
  * your objects, so you can start jittering lighting to achieve
  * the texture-space effect you're looking for.
- *
- * @param {WebGPURenderer} renderer An instance of WebGPURenderer.
- * @param {number} resolution The side-long dimension of you total lightmap.
  */
 class ProgressiveLightMap {
 
+	/**
+	 * @param {WebGPURenderer} renderer An instance of WebGPURenderer.
+	 * @param {number} [resolution=1024] The side-long dimension of you total lightmap.
+	 */
 	constructor( renderer, resolution = 1024 ) {
 
 		this.renderer = renderer;
@@ -50,7 +51,7 @@ class ProgressiveLightMap {
 
 		this._uvMat = new MeshPhongNodeMaterial();
 		this._uvMat.vertexNode = vec4( sub( uvNode, vec2( 0.5 ) ).mul( 2 ), 1, 1 );
-		this._uvMat.outputNode = vec4( mix( this._previousShadowMap.uv( uv( 1 ) ), output, float( 1 ).div( this._averagingWindow ) ) );
+		this._uvMat.outputNode = vec4( mix( this._previousShadowMap.sample( uv( 1 ) ), output, float( 1 ).div( this._averagingWindow ) ) );
 
 	}
 
@@ -229,7 +230,7 @@ class ProgressiveLightMap {
 		if ( this._labelMesh === null ) {
 
 			const labelMaterial = new NodeMaterial();
-			labelMaterial.colorNode = texture( this._progressiveLightMap1.texture ).uv( uv().flipY() );
+			labelMaterial.colorNode = texture( this._progressiveLightMap1.texture ).sample( uv().flipY() );
 			labelMaterial.side = DoubleSide;
 
 			const labelGeometry = new PlaneGeometry( 100, 100 );
@@ -267,14 +268,14 @@ class ProgressiveLightMap {
 		const pixelOffset = float( 0.5 ).div( float( this.resolution ) ).toVar();
 
 		const color = add(
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, 0 ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( 0, pixelOffset ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( 0, pixelOffset.negate() ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), 0 ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, pixelOffset ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), pixelOffset ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, pixelOffset.negate() ) ) ),
-			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), pixelOffset.negate() ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset, 0 ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( 0, pixelOffset ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( 0, pixelOffset.negate() ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset.negate(), 0 ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset, pixelOffset ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset.negate(), pixelOffset ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset, pixelOffset.negate() ) ) ),
+			this._previousShadowMap.sample( uvNode.add( vec2( pixelOffset.negate(), pixelOffset.negate() ) ) ),
 		).div( 8 );
 
 		blurMaterial.fragmentNode = color;

package/examples/jsm/misc/Volume.js

@@ -7,18 +7,20 @@ import { VolumeSlice } from '../misc/VolumeSlice.js';
 
 /**
  * This class had been written to handle the output of the NRRD loader.
- * It contains a volume of data and informations about it.
+ * It contains a volume of data and information about it.
  * For now it only handles 3 dimensional data.
  * See the webgl_loader_nrrd.html example and the loaderNRRD.js file to see how to use this class.
  * @class
- * @param   {number}        xLength         Width of the volume
- * @param   {number}        yLength         Length of the volume
- * @param   {number}        zLength         Depth of the volume
- * @param   {string}        type            The type of data (uint8, uint16, ...)
- * @param   {ArrayBuffer}   arrayBuffer     The buffer with volume data
  */
 class Volume {
 
+	/**
+	 * @param   {number}        xLength         Width of the volume
+	 * @param   {number}        yLength         Length of the volume
+	 * @param   {number}        zLength         Depth of the volume
+	 * @param   {string}        type            The type of data (uint8, uint16, ...)
+	 * @param   {ArrayBuffer}   arrayBuffer     The buffer with volume data
+	 */
 	constructor( xLength, yLength, zLength, type, arrayBuffer ) {
 
 		if ( xLength !== undefined ) {
@@ -209,7 +211,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} getData Shortcut for data[access(i,j,k)]
+	 * Shortcut for data[access(i,j,k)]
+	 *
 	 * @memberof Volume
 	 * @param {number} i    First coordinate
 	 * @param {number} j    Second coordinate
@@ -223,7 +226,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} access compute the index in the data array corresponding to the given coordinates in IJK system
+	 * Compute the index in the data array corresponding to the given coordinates in IJK system
+	 *
 	 * @memberof Volume
 	 * @param {number} i    First coordinate
 	 * @param {number} j    Second coordinate
@@ -237,7 +241,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} reverseAccess Retrieve the IJK coordinates of the voxel corresponding of the given index in the data
+	 * Retrieve the IJK coordinates of the voxel corresponding of the given index in the data
+	 *
 	 * @memberof Volume
 	 * @param {number} index index of the voxel
 	 * @returns {Array}  [x,y,z]
@@ -252,7 +257,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} map Apply a function to all the voxels, be careful, the value will be replaced
+	 * Apply a function to all the voxels, be careful, the value will be replaced
+	 *
 	 * @memberof Volume
 	 * @param {Function} functionToMap A function to apply to every voxel, will be called with the following parameters :
 	 *                                 value of the voxel
@@ -277,11 +283,12 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} extractPerpendicularPlane Compute the orientation of the slice and returns all the information relative to the geometry such as sliceAccess, the plane matrix (orientation and position in RAS coordinate) and the dimensions of the plane in both coordinate system.
+	 * Compute the orientation of the slice and returns all the information relative to the geometry such as sliceAccess, the plane matrix (orientation and position in RAS coordinate) and the dimensions of the plane in both coordinate system.
+	 *
 	 * @memberof Volume
 	 * @param {string}            axis  the normal axis to the slice 'x' 'y' or 'z'
-	 * @param {number}            index the index of the slice
-	 * @returns {Object} an object containing all the usefull information on the geometry of the slice
+	 * @param {number}            RASIndex the index of the slice
+	 * @returns {Object} an object containing all the useful information on the geometry of the slice
 	 */
 	extractPerpendicularPlane( axis, RASIndex ) {
 
@@ -401,8 +408,9 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} extractSlice Returns a slice corresponding to the given axis and index
-	 *                        The coordinate are given in the Right Anterior Superior coordinate format
+	 * Returns a slice corresponding to the given axis and index.
+	 * The coordinate are given in the Right Anterior Superior coordinate format.
+	 *
 	 * @memberof Volume
 	 * @param {string}            axis  the normal axis to the slice 'x' 'y' or 'z'
 	 * @param {number}            index the index of the slice
@@ -417,7 +425,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} repaintAllSlices Call repaint on all the slices extracted from this volume
+	 * Call repaint on all the slices extracted from this volume
+	 *
 	 * @see VolumeSlice.repaint
 	 * @memberof Volume
 	 * @returns {Volume} this
@@ -435,7 +444,8 @@ class Volume {
 	}
 
 	/**
-	 * @member {Function} computeMinMax Compute the minimum and the maximum of the data in the volume
+	 * Compute the minimum and the maximum of the data in the volume
+	 *
 	 * @memberof Volume
 	 * @returns {Array} [min,max]
 	 */

package/examples/jsm/misc/VolumeSlice.js

@@ -12,13 +12,15 @@ import {
 /**
  * This class has been made to hold a slice of a volume data
  * @class
- * @param   {Volume} volume    The associated volume
- * @param   {number}       [index=0] The index of the slice
- * @param   {string}       [axis='z']      For now only 'x', 'y' or 'z' but later it will change to a normal vector
  * @see Volume
  */
 class VolumeSlice {
 
+	/**
+ 	 * @param {Volume} volume     The associated volume
+ 	 * @param {number} [index=0]  The index of the slice
+ 	 * @param {string} [axis='z'] For now only 'x', 'y' or 'z' but later it will change to a normal vector
+	 */
 	constructor( volume, index, axis ) {
 
 		const slice = this;
@@ -103,7 +105,7 @@ class VolumeSlice {
 	}
 
 	/**
-	 * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
+	 * Refresh the texture and the geometry if geometryNeedsUpdate is set to true
 	 * @memberof VolumeSlice
 	 */
 	repaint() {
@@ -189,7 +191,7 @@ class VolumeSlice {
 	}
 
 	/**
-	 * @member {Function} Refresh the geometry according to axis and index
+	 * Refresh the geometry according to axis and index
 	 * @see Volume.extractPerpendicularPlane
 	 * @memberof VolumeSlice
 	 */

package/examples/jsm/modifiers/CurveModifier.js

@@ -20,6 +20,7 @@ import {
  * Make a new DataTexture to store the descriptions of the curves.
  *
  * @param { number } numberOfCurves the number of curves needed to be described by this texture.
+ * @returns { DataTexture }
  */
 export function initSplineTexture( numberOfCurves = 1 ) {
 
@@ -93,7 +94,8 @@ function setTextureValue( texture, index, x, y, z, o ) {
 /**
  * Create a new set of uniforms for describing the curve modifier
  *
- * @param { DataTexture } Texture which holds the curve description
+ * @param { DataTexture } splineTexture which holds the curve description
+ * @returns { Object } The uniforms object to be used in the shader
  */
 export function getUniforms( splineTexture ) {
 
@@ -137,10 +139,10 @@ export function modifyShader( material, uniforms, numberOfCurves = 1 ) {
 		// chunk import moved in front of modified shader below
 			.replace( '#include <beginnormal_vertex>', '' )
 
-			// vec3 transformedNormal declaration overriden below
+			// vec3 transformedNormal declaration overridden below
 			.replace( '#include <defaultnormal_vertex>', '' )
 
-			// vec3 transformed declaration overriden below
+			// vec3 transformed declaration overridden below
 			.replace( '#include <begin_vertex>', '' )
 
 			// shader override
@@ -196,7 +198,7 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 }
 
 /**
- * A helper class for making meshes bend aroudn curves
+ * A helper class for making meshes bend around curves
  */
 export class Flow {
 
@@ -207,8 +209,8 @@ export class Flow {
 	constructor( mesh, numberOfCurves = 1 ) {
 
 		const obj3D = mesh.clone();
-		const splineTexure = initSplineTexture( numberOfCurves );
-		const uniforms = getUniforms( splineTexure );
+		const splineTexture = initSplineTexture( numberOfCurves );
+		const uniforms = getUniforms( splineTexture );
 		obj3D.traverse( function ( child ) {
 
 			if (
@@ -245,7 +247,7 @@ export class Flow {
 		this.curveLengthArray = new Array( numberOfCurves );
 
 		this.object3D = obj3D;
-		this.splineTexure = splineTexure;
+		this.splineTexture = splineTexture;
 		this.uniforms = uniforms;
 
 	}
@@ -257,7 +259,7 @@ export class Flow {
 		this.uniforms.spineLength.value = curveLength;
 		this.curveLengthArray[ index ] = curveLength;
 		this.curveArray[ index ] = curve;
-		updateSplineTexture( this.splineTexure, curve, index );
+		updateSplineTexture( this.splineTexture, curve, index );
 
 	}
 

package/examples/jsm/modifiers/CurveModifierGPU.js

@@ -19,7 +19,8 @@ import { modelWorldMatrix, normalLocal, vec2, vec3, vec4, mat3, varyingProperty,
 /**
  * Make a new DataTexture to store the descriptions of the curves.
  *
- * @param { number } numberOfCurves the number of curves needed to be described by this texture.
+ * @param { number } [numberOfCurves=1] the number of curves needed to be described by this texture.
+ * @returns { DataTexture } The new DataTexture
  */
 export function initSplineTexture( numberOfCurves = 1 ) {
 
@@ -94,7 +95,8 @@ function setTextureValue( texture, index, x, y, z, o ) {
 /**
  * Create a new set of uniforms for describing the curve modifier
  *
- * @param { DataTexture } Texture which holds the curve description
+ * @param { DataTexture } splineTexture which holds the curve description
+ * @returns { Object } The uniforms object
  */
 export function getUniforms( splineTexture ) {
 
@@ -155,7 +157,7 @@ export function modifyShader( material, uniforms, numberOfCurves ) {
 }
 
 /**
- * A helper class for making meshes bend aroudn curves
+ * A helper class for making meshes bend around curves
  */
 export class Flow {
 
@@ -166,8 +168,8 @@ export class Flow {
 	constructor( mesh, numberOfCurves = 1 ) {
 
 		const obj3D = mesh.clone();
-		const splineTexure = initSplineTexture( numberOfCurves );
-		const uniforms = getUniforms( splineTexure );
+		const splineTexture = initSplineTexture( numberOfCurves );
+		const uniforms = getUniforms( splineTexture );
 
 		obj3D.traverse( function ( child ) {
 
@@ -205,7 +207,7 @@ export class Flow {
 		this.curveLengthArray = new Array( numberOfCurves );
 
 		this.object3D = obj3D;
-		this.splineTexure = splineTexure;
+		this.splineTexture = splineTexture;
 		this.uniforms = uniforms;
 
 	}
@@ -220,7 +222,7 @@ export class Flow {
 		this.curveLengthArray[ index ] = curveLength;
 		this.curveArray[ index ] = curve;
 
-		updateSplineTexture( this.splineTexure, curve, index );
+		updateSplineTexture( this.splineTexture, curve, index );
 
 	}
 

package/examples/jsm/modifiers/SimplifyModifier.js

@@ -29,7 +29,7 @@ class SimplifyModifier {
 		delete geometry.morphAttributes.normal;
 		const attributes = geometry.attributes;
 
-		// this modifier can only process indexed and non-indexed geomtries with at least a position attribute
+		// this modifier can only process indexed and non-indexed geometries with at least a position attribute
 
 		for ( const name in attributes ) {
 
@@ -584,7 +584,7 @@ class Vertex {
 
 		// these will be computed in computeEdgeCostAtVertex()
 		this.collapseCost = 0; // cost of collapsing this vertex, the less the better. aka objdist
-		this.collapseNeighbor = null; // best candinate for collapsing
+		this.collapseNeighbor = null; // best candidate for collapsing
 
 	}
 

package/examples/jsm/objects/GroundedSkybox.js

@@ -1,9 +1,9 @@
 import { Mesh, MeshBasicMaterial, SphereGeometry, Vector3 } from 'three';
 
 /**
- * A ground-projected skybox. The height is how far the camera that took the photo was above the ground - 
- * a larger value will magnify the downward part of the image. By default the object is centered at the camera, 
- * so it is often helpful to set skybox.position.y = height to put the ground at the origin. Set the radius 
+ * A ground-projected skybox. The height is how far the camera that took the photo was above the ground -
+ * a larger value will magnify the downward part of the image. By default the object is centered at the camera,
+ * so it is often helpful to set skybox.position.y = height to put the ground at the origin. Set the radius
  * large enough to ensure your user's camera stays inside.
  */
 
@@ -18,7 +18,7 @@ class GroundedSkybox extends Mesh {
 		}
 
 		const geometry = new SphereGeometry( radius, 2 * resolution, resolution );
-		geometry.scale( 1, 1, -1 );
+		geometry.scale( 1, 1, - 1 );
 
 		const pos = geometry.getAttribute( 'position' );
 		const tmp = new Vector3();

package/examples/jsm/objects/Sky.js

@@ -77,7 +77,7 @@ Sky.SkyShader = {
 
 		// wavelength of used primaries, according to preetham
 		const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );
-		// this pre-calcuation replaces older TotalRayleigh(vec3 lambda) function:
+		// this pre-calculation replaces older TotalRayleigh(vec3 lambda) function:
 		// (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn))
 		const vec3 totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );
 
@@ -120,7 +120,7 @@ Sky.SkyShader = {
 
 			float rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );
 
-			// extinction (absorbtion + out scattering)
+			// extinction (absorption + out scattering)
 			// rayleigh coefficients
 			vBetaR = totalRayleigh * rayleighCoefficient;
 

package/examples/jsm/objects/SkyMesh.js

@@ -47,7 +47,7 @@ class SkyMesh extends Mesh {
 
 			// wavelength of used primaries, according to preetham
 			// const lambda = vec3( 680E-9, 550E-9, 450E-9 );
-			// this pre-calcuation replaces older TotalRayleigh(vec3 lambda) function:
+			// this pre-calculation replaces older TotalRayleigh(vec3 lambda) function:
 			// (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn))
 			const totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );
 
@@ -85,7 +85,7 @@ class SkyMesh extends Mesh {
 
 			const rayleighCoefficient = this.rayleigh.sub( float( 1.0 ).mul( float( 1.0 ).sub( vSunfade ) ) );
 
-			// extinction (absorbtion + out scattering)
+			// extinction (absorption + out scattering)
 			// rayleigh coefficients
 			varyingProperty( 'vec3', 'vBetaR' ).assign( totalRayleigh.mul( rayleighCoefficient ) );
 
@@ -98,7 +98,7 @@ class SkyMesh extends Mesh {
 
 			// position
 
-			const position = modelViewProjection();
+			const position = modelViewProjection;
 			position.z.assign( position.w ); // set z to camera.far
 
 			return position;

package/examples/jsm/objects/Water2.js

@@ -132,7 +132,7 @@ class Water extends Mesh {
 		this.material.uniforms[ 'reflectivity' ].value = reflectivity;
 		this.material.uniforms[ 'textureMatrix' ].value = textureMatrix;
 
-		// inital values
+		// initial values
 
 		this.material.uniforms[ 'config' ].value.x = 0; // flowMapOffset0
 		this.material.uniforms[ 'config' ].value.y = halfCycle; // flowMapOffset1

package/examples/jsm/objects/Water2Mesh.js

@@ -122,8 +122,8 @@ class WaterNode extends TempNode {
 			const normalUv0 = uvs.mul( this.scale ).add( flow.mul( flowMapOffset0 ) );
 			const normalUv1 = uvs.mul( this.scale ).add( flow.mul( flowMapOffset1 ) );
 
-			const normalColor0 = this.normalMap0.uv( normalUv0 );
-			const normalColor1 = this.normalMap1.uv( normalUv1 );
+			const normalColor0 = this.normalMap0.sample( normalUv0 );
+			const normalColor1 = this.normalMap1.sample( normalUv1 );
 
 			// linear interpolate to get the final normal color
 			const flowLerp = abs( halfCycle.sub( flowMapOffset0 ) ).div( halfCycle );

package/examples/jsm/objects/WaterMesh.js

@@ -2,10 +2,10 @@ import {
 	Color,
 	Mesh,
 	Vector3,
-	NodeMaterial
+	MeshLambertNodeMaterial
 } from 'three/webgpu';
 
-import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
+import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl';
 
 /**
  * Work based on :
@@ -18,7 +18,7 @@ class WaterMesh extends Mesh {
 
 	constructor( geometry, options ) {
 
-		const material = new NodeMaterial();
+		const material = new MeshLambertNodeMaterial();
 
 		super( geometry, material );
 
@@ -26,7 +26,7 @@ class WaterMesh extends Mesh {
 
 		this.resolution = options.resolution !== undefined ? options.resolution : 0.5;
 
-		// uniforms
+		// Uniforms
 
 		this.waterNormals = texture( options.waterNormals );
 		this.alpha = uniform( options.alpha !== undefined ? options.alpha : 1.0 );
@@ -47,10 +47,10 @@ class WaterMesh extends Mesh {
 			const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( offset, 101 ), div( offset, 97 ) ) ).toVar();
 			const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( offset, 109 ), div( offset, - 113 ) ) ).toVar();
 
-			const sample0 = this.waterNormals.uv( uv0 );
-			const sample1 = this.waterNormals.uv( uv1 );
-			const sample2 = this.waterNormals.uv( uv2 );
-			const sample3 = this.waterNormals.uv( uv3 );
+			const sample0 = this.waterNormals.sample( uv0 );
+			const sample1 = this.waterNormals.sample( uv1 );
+			const sample2 = this.waterNormals.sample( uv2 );
+			const sample3 = this.waterNormals.sample( uv3 );
 
 			const noise = sample0.add( sample1 ).add( sample2 ).add( sample3 );
 
@@ -58,25 +58,32 @@ class WaterMesh extends Mesh {
 
 		} );
 
-		const fragmentNode = Fn( () => {
+		const noise = getNoise( positionWorld.xz.mul( this.size ) );
+		const surfaceNormal = normalize( noise.xzy.mul( 1.5, 1.0, 1.5 ) );
 
-			const noise = getNoise( positionWorld.xz.mul( this.size ) );
-			const surfaceNormal = normalize( noise.xzy.mul( 1.5, 1.0, 1.5 ) );
+		const worldToEye = cameraPosition.sub( positionWorld );
+		const eyeDirection = normalize( worldToEye );
 
-			const diffuseLight = vec3( 0 ).toVar();
-			const specularLight = vec3( 0 ).toVar();
+		const reflection = normalize( reflect( this.sunDirection.negate(), surfaceNormal ) );
+		const direction = max( 0.0, dot( eyeDirection, reflection ) );
+		const specularLight = pow( direction, 100 ).mul( this.sunColor ).mul( 2.0 );
+		const diffuseLight = max( dot( this.sunDirection, surfaceNormal ), 0.0 ).mul( this.sunColor ).mul( 0.5 );
 
-			const worldToEye = cameraPosition.sub( positionWorld );
-			const eyeDirection = normalize( worldToEye );
+		const distance = length( worldToEye );
 
-			const reflection = normalize( reflect( this.sunDirection.negate(), surfaceNormal ) );
-			const direction = max( 0.0, dot( eyeDirection, reflection ) );
-			specularLight.addAssign( pow( direction, 100 ).mul( this.sunColor ).mul( 2.0 ) );
-			diffuseLight.addAssign( max( dot( this.sunDirection, surfaceNormal ), 0.0 ).mul( this.sunColor ).mul( 0.5 ) );
+		const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
 
-			const distance = length( worldToEye );
+		// Material
 
-			const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
+		material.transparent = true;
+
+		material.opacityNode = this.alpha;
+
+		material.shadowPositionNode = positionWorld.add( distortion );
+
+		material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility
+
+		material.colorNode = Fn( () => {
 
 			const mirrorSampler = reflector();
 			mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion );
@@ -90,12 +97,10 @@ class WaterMesh extends Mesh {
 			const scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ).mul( this.waterColor );
 			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.mul( specularLight ).add( mirrorSampler.rgb.mul( 0.9 ) ).add( vec3( 0.1 ) ), reflectance );
 
-			return vec4( albedo, this.alpha );
+			return albedo;
 
 		} )();
 
-		material.fragmentNode = fragmentNode;
-
 	}
 
 }

package/examples/jsm/physics/JoltPhysics.js

@@ -39,7 +39,7 @@ const NUM_OBJECT_LAYERS = 2;
 
 function setupCollisionFiltering( settings ) {
 
-	let objectFilter = new Jolt.ObjectLayerPairFilterTable( NUM_OBJECT_LAYERS );
+	const objectFilter = new Jolt.ObjectLayerPairFilterTable( NUM_OBJECT_LAYERS );
 	objectFilter.EnableCollision( LAYER_NON_MOVING, LAYER_MOVING );
 	objectFilter.EnableCollision( LAYER_MOVING, LAYER_MOVING );
 
@@ -47,7 +47,7 @@ function setupCollisionFiltering( settings ) {
 	const BP_LAYER_MOVING = new Jolt.BroadPhaseLayer( 1 );
 	const NUM_BROAD_PHASE_LAYERS = 2;
 
-	let bpInterface = new Jolt.BroadPhaseLayerInterfaceTable( NUM_OBJECT_LAYERS, NUM_BROAD_PHASE_LAYERS );
+	const bpInterface = new Jolt.BroadPhaseLayerInterfaceTable( NUM_OBJECT_LAYERS, NUM_BROAD_PHASE_LAYERS );
 	bpInterface.MapObjectToBroadPhaseLayer( LAYER_NON_MOVING, BP_LAYER_NON_MOVING );
 	bpInterface.MapObjectToBroadPhaseLayer( LAYER_MOVING, BP_LAYER_MOVING );
 
@@ -55,7 +55,7 @@ function setupCollisionFiltering( settings ) {
 	settings.mBroadPhaseLayerInterface = bpInterface;
 	settings.mObjectVsBroadPhaseLayerFilter = new Jolt.ObjectVsBroadPhaseLayerFilterTable( settings.mBroadPhaseLayerInterface, NUM_BROAD_PHASE_LAYERS, settings.mObjectLayerPairFilter, NUM_OBJECT_LAYERS );
 
-};
+}
 
 async function JoltPhysics() {
 
@@ -111,8 +111,8 @@ async function JoltPhysics() {
 		if ( shape === null ) return;
 
 		const body = mesh.isInstancedMesh
-							? createInstancedBody( mesh, mass, restitution, shape )
-							: createBody( mesh.position, mesh.quaternion, mass, restitution, shape );
+			? createInstancedBody( mesh, mass, restitution, shape )
+			: createBody( mesh.position, mesh.quaternion, mass, restitution, shape );
 
 		if ( mass > 0 ) {
 
@@ -175,8 +175,8 @@ async function JoltPhysics() {
 
 			const physics = mesh.userData.physics;
 
-			let shape = body.GetShape();
-			let body2 = createBody( position, { x: 0, y: 0, z: 0, w: 1 }, physics.mass, physics.restitution, shape );
+			const shape = body.GetShape();
+			const body2 = createBody( position, { x: 0, y: 0, z: 0, w: 1 }, physics.mass, physics.restitution, shape );
 
 			bodies[ index ] = body2;
 

package/examples/jsm/physics/RapierPhysics.js

@@ -43,8 +43,8 @@ function getShape( geometry ) {
 
 		// if the buffer is non-indexed, generate an index buffer
 		const indices = geometry.getIndex() === null
-							? Uint32Array.from( Array( parseInt( vertices.length / 3 ) ).keys() )
-							: geometry.getIndex().array;
+			? Uint32Array.from( Array( parseInt( vertices.length / 3 ) ).keys() )
+			: geometry.getIndex().array;
 
 		return RAPIER.ColliderDesc.trimesh( vertices, indices );
 
@@ -105,8 +105,8 @@ async function RapierPhysics() {
 		shape.setRestitution( restitution );
 
 		const body = mesh.isInstancedMesh
-							? createInstancedBody( mesh, mass, shape )
-							: createBody( mesh.position, mesh.quaternion, mass, shape );
+			? createInstancedBody( mesh, mass, shape )
+			: createBody( mesh.position, mesh.quaternion, mass, shape );
 
 		if ( mass > 0 ) {
 

package/examples/jsm/postprocessing/BloomPass.js

@@ -71,7 +71,7 @@ class BloomPass extends Pass {
 
 		if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
 
-		// Render quad with blured scene into texture (convolution pass 1)
+		// Render quad with blurred scene into texture (convolution pass 1)
 
 		this.fsQuad.material = this.materialConvolution;
 
@@ -83,7 +83,7 @@ class BloomPass extends Pass {
 		this.fsQuad.render( renderer );
 
 
-		// Render quad with blured scene into texture (convolution pass 2)
+		// Render quad with blurred scene into texture (convolution pass 2)
 
 		this.convolutionUniforms[ 'tDiffuse' ].value = this.renderTargetX.texture;
 		this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurY;

package/examples/jsm/postprocessing/EffectComposer.js

@@ -7,8 +7,7 @@ import {
 } from 'three';
 import { CopyShader } from '../shaders/CopyShader.js';
 import { ShaderPass } from './ShaderPass.js';
-import { MaskPass } from './MaskPass.js';
-import { ClearMaskPass } from './MaskPass.js';
+import { ClearMaskPass, MaskPass } from './MaskPass.js';
 
 class EffectComposer {