@plastic-software/three 0.167.4 → 0.174.0

package/examples/jsm/objects/LensflareMesh.js

@@ -0,0 +1,324 @@
+import {
+	AdditiveBlending,
+	Box2,
+	BufferGeometry,
+	Color,
+	FramebufferTexture,
+	InterleavedBuffer,
+	InterleavedBufferAttribute,
+	Mesh,
+	MeshBasicNodeMaterial,
+	NodeMaterial,
+	UnsignedByteType,
+	Vector2,
+	Vector3,
+	Vector4,
+	Node
+} from 'three/webgpu';
+
+import { texture, textureLoad, uv, ivec2, vec2, vec4, positionGeometry, reference, varyingProperty, materialReference, Fn } from 'three/tsl';
+
+class LensflareMesh extends Mesh {
+
+	constructor() {
+
+		super( LensflareMesh.Geometry, new MeshBasicNodeMaterial( { opacity: 0, transparent: true } ) );
+
+		this.isLensflare = true;
+
+		this.type = 'LensflareMesh';
+		this.frustumCulled = false;
+		this.renderOrder = Infinity;
+
+		//
+
+		const positionView = new Vector3();
+
+		// textures
+
+		const tempMap = new FramebufferTexture( 16, 16 );
+		const occlusionMap = new FramebufferTexture( 16, 16 );
+
+		let currentType = UnsignedByteType;
+
+		const geometry = LensflareMesh.Geometry;
+
+		// values for shared material uniforms
+
+		const sharedValues = {
+			scale: new Vector2(),
+			positionScreen: new Vector3()
+		};
+
+		// materials
+
+		const scale = reference( 'scale', 'vec2', sharedValues );
+		const screenPosition = reference( 'positionScreen', 'vec3', sharedValues );
+
+		const vertexNode = vec4( positionGeometry.xy.mul( scale ).add( screenPosition.xy ), screenPosition.z, 1.0 );
+
+		const material1a = new NodeMaterial();
+
+		material1a.depthTest = true;
+		material1a.depthWrite = false;
+		material1a.transparent = false;
+		material1a.fog = false;
+		material1a.type = 'Lensflare-1a';
+
+		material1a.vertexNode = vertexNode;
+		material1a.fragmentNode = vec4( 1.0, 0.0, 1.0, 1.0 );
+
+		const material1b = new NodeMaterial();
+
+		material1b.depthTest = false;
+		material1b.depthWrite = false;
+		material1b.transparent = false;
+		material1b.fog = false;
+		material1b.type = 'Lensflare-1b';
+
+		material1b.vertexNode = vertexNode;
+		material1b.fragmentNode = texture( tempMap, vec2( uv().flipY() ) );
+
+		// the following object is used for occlusionMap generation
+
+		const mesh1 = new Mesh( geometry, material1a );
+
+		//
+
+		const elements = [];
+		const elementMeshes = [];
+
+		const material2 = new NodeMaterial();
+
+		material2.transparent = true;
+		material2.blending = AdditiveBlending;
+		material2.depthWrite = false;
+		material2.depthTest = false;
+		material2.fog = false;
+		material2.type = 'Lensflare-2';
+
+		material2.screenPosition = new Vector3();
+		material2.scale = new Vector2();
+		material2.occlusionMap = occlusionMap;
+
+		material2.vertexNode = Fn( ( { material } ) => {
+
+			const scale = materialReference( 'scale', 'vec2' );
+			const screenPosition = materialReference( 'screenPosition', 'vec3' );
+
+			const occlusionMap = material.occlusionMap;
+
+			const pos = positionGeometry.xy.toVar();
+
+			const visibility = textureLoad( occlusionMap, ivec2( 2, 2 ) ).toVar();
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 2 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 2 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 8 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 14, 14 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 14 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 2, 14 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 2, 8 ) ) );
+			visibility.addAssign( textureLoad( occlusionMap, ivec2( 8, 8 ) ) );
+
+			const vVisibility = varyingProperty( 'float', 'vVisibility' );
+
+			vVisibility.assign( visibility.r.div( 9.0 ) );
+			vVisibility.mulAssign( visibility.g.div( 9.0 ).oneMinus() );
+			vVisibility.mulAssign( visibility.b.div( 9.0 ) );
+
+			return vec4( ( pos.mul( scale ).add( screenPosition.xy ).xy ), screenPosition.z, 1.0 );
+
+		} )();
+
+		material2.fragmentNode = Fn( () => {
+
+			const color = reference( 'color', 'color' );
+			const map = reference( 'map', 'texture' );
+
+			const vVisibility = varyingProperty( 'float', 'vVisibility' );
+
+			const output = map.toVar();
+
+			output.a.mulAssign( vVisibility );
+			output.rgb.mulAssign( color );
+
+			return output;
+
+		} )();
+
+
+		this.addElement = function ( element ) {
+
+			elements.push( element );
+
+		};
+
+		//
+
+		const positionScreen = sharedValues.positionScreen;
+		const screenPositionPixels = new Vector4( 0, 0, 16, 16 );
+		const validArea = new Box2();
+		const viewport = new Vector4();
+
+		// dummy node for renderer.renderObject()
+		const lightsNode = new Node();
+
+		this.onBeforeRender = ( renderer, scene, camera ) => {
+
+			renderer.getViewport( viewport );
+
+			viewport.multiplyScalar( window.devicePixelRatio );
+
+			const renderTarget = renderer.getRenderTarget();
+			const type = ( renderTarget !== null ) ? renderTarget.texture.type : UnsignedByteType;
+
+			if ( currentType !== type ) {
+
+				tempMap.dispose();
+				occlusionMap.dispose();
+
+				tempMap.type = occlusionMap.type = type;
+
+				currentType = type;
+
+			}
+
+			const invAspect = viewport.w / viewport.z;
+			const halfViewportWidth = viewport.z / 2.0;
+			const halfViewportHeight = viewport.w / 2.0;
+
+			const size = 16 / viewport.w;
+
+			sharedValues.scale.set( size * invAspect, size );
+
+			validArea.min.set( viewport.x, viewport.y );
+			validArea.max.set( viewport.x + ( viewport.z - 16 ), viewport.y + ( viewport.w - 16 ) );
+
+			// calculate position in screen space
+
+			positionView.setFromMatrixPosition( this.matrixWorld );
+			positionView.applyMatrix4( camera.matrixWorldInverse );
+
+			if ( positionView.z > 0 ) return; // lensflare is behind the camera
+
+			positionScreen.copy( positionView ).applyMatrix4( camera.projectionMatrix );
+
+			// horizontal and vertical coordinate of the lower left corner of the pixels to copy
+
+			screenPositionPixels.x = viewport.x + ( positionScreen.x * halfViewportWidth ) + halfViewportWidth - 8;
+			screenPositionPixels.y = viewport.y - ( positionScreen.y * halfViewportHeight ) + halfViewportHeight - 8;
+
+			// screen cull
+
+			if ( validArea.containsPoint( screenPositionPixels ) ) {
+
+				// save current RGB to temp texture
+
+				renderer.copyFramebufferToTexture( tempMap, screenPositionPixels );
+
+				// render pink quad
+
+				renderer.renderObject( mesh1, scene, camera, geometry, material1a, null, lightsNode );
+
+				// copy result to occlusionMap
+
+				renderer.copyFramebufferToTexture( occlusionMap, screenPositionPixels );
+
+				// restore graphics
+
+				renderer.renderObject( mesh1, scene, camera, geometry, material1b, null, lightsNode );
+
+				// render elements
+
+				const vecX = - positionScreen.x * 2;
+				const vecY = - positionScreen.y * 2;
+
+				for ( let i = 0, l = elements.length; i < l; i ++ ) {
+
+					const element = elements[ i ];
+
+					let mesh2 = elementMeshes[ i ];
+
+					if ( mesh2 === undefined ) {
+
+						mesh2 = elementMeshes[ i ] = new Mesh( geometry, material2 );
+
+						mesh2.color = element.color.convertSRGBToLinear();
+						mesh2.map = element.texture;
+
+					}
+
+					material2.screenPosition.x = positionScreen.x + vecX * element.distance;
+					material2.screenPosition.y = positionScreen.y - vecY * element.distance;
+					material2.screenPosition.z = positionScreen.z;
+
+					const size = element.size / viewport.w;
+
+					material2.scale.set( size * invAspect, size );
+
+					renderer.renderObject( mesh2, scene, camera, geometry, material2, null, lightsNode );
+
+				}
+
+			}
+
+		};
+
+		this.dispose = function () {
+
+			material1a.dispose();
+			material1b.dispose();
+			material2.dispose();
+
+			tempMap.dispose();
+			occlusionMap.dispose();
+
+			for ( let i = 0, l = elements.length; i < l; i ++ ) {
+
+				elements[ i ].texture.dispose();
+
+			}
+
+		};
+
+	}
+
+}
+
+//
+
+class LensflareElement {
+
+	constructor( texture, size = 1, distance = 0, color = new Color( 0xffffff ) ) {
+
+		this.texture = texture;
+		this.size = size;
+		this.distance = distance;
+		this.color = color;
+
+	}
+
+}
+
+LensflareMesh.Geometry = ( function () {
+
+	const geometry = new BufferGeometry();
+
+	const float32Array = new Float32Array( [
+		- 1, - 1, 0, 0, 0,
+		1, - 1, 0, 1, 0,
+		1, 1, 0, 1, 1,
+		- 1, 1, 0, 0, 1
+	] );
+
+	const interleavedBuffer = new InterleavedBuffer( float32Array, 5 );
+
+	geometry.setIndex( [ 0, 1, 2,	0, 2, 3 ] );
+	geometry.setAttribute( 'position', new InterleavedBufferAttribute( interleavedBuffer, 3, 0, false ) );
+	geometry.setAttribute( 'uv', new InterleavedBufferAttribute( interleavedBuffer, 2, 3, false ) );
+
+	return geometry;
+
+} )();
+
+export { LensflareMesh, LensflareElement };

package/examples/jsm/objects/Reflector.js

@@ -21,6 +21,7 @@ class Reflector extends Mesh {
 		this.isReflector = true;
 
 		this.type = 'Reflector';
+		this.forceUpdate = false;
 		this.camera = new PerspectiveCamera();
 
 		const scope = this;
@@ -76,9 +77,10 @@ class Reflector extends Mesh {
 
 			view.subVectors( reflectorWorldPosition, cameraWorldPosition );
 
-			// Avoid rendering when reflector is facing away
+			// Avoid rendering when reflector is facing away unless forcing an update
+			const isFacingAway = view.dot( normal ) > 0;
 
-			if ( view.dot( normal ) > 0 ) return;
+			if ( isFacingAway === true && this.forceUpdate === false ) return;
 
 			view.reflect( normal ).negate();
 			view.add( reflectorWorldPosition );
@@ -172,6 +174,7 @@ class Reflector extends Mesh {
 			}
 
 			scope.visible = true;
+			this.forceUpdate = false;
 
 		};
 

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

@@ -2,10 +2,11 @@ import {
 	BackSide,
 	BoxGeometry,
 	Mesh,
-	NodeMaterial,
-	Vector3
-} from 'three';
-import { float, tslFn, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varying, varyingProperty, vec4, uniform, cameraPosition } from 'three/tsl';
+	Vector3,
+	NodeMaterial
+} from 'three/webgpu';
+
+import { Fn, float, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varying, varyingProperty, vec4, uniform, cameraPosition } from 'three/tsl';
 
 /**
  * Based on "A Practical Analytic Model for Daylight"
@@ -34,11 +35,11 @@ class SkyMesh extends Mesh {
 		this.mieCoefficient = uniform( 0.005 );
 		this.mieDirectionalG = uniform( 0.8 );
 		this.sunPosition = uniform( new Vector3() );
-		this.up = uniform( new Vector3( 0, 1, 0 ) );
+		this.upUniform = uniform( new Vector3( 0, 1, 0 ) );
 
 		this.isSky = true;
 
-		const vertexNode = /*@__PURE__*/ tslFn( () => {
+		const vertexNode = /*@__PURE__*/ Fn( () => {
 
 			// constants for atmospheric scattering
 			const e = float( 2.71828182845904523536028747135266249775724709369995957 );
@@ -46,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 );
 
@@ -70,7 +71,7 @@ class SkyMesh extends Mesh {
 
 			// varying sun intensity
 
-			const angle = dot( vSunDirection, this.up );
+			const angle = dot( vSunDirection, this.upUniform );
 			const zenithAngleCos = clamp( angle, - 1, 1 );
 			const sunIntensity = EE.mul( max( 0.0, float( 1.0 ).sub( pow( e, cutoffAngle.sub( acos( zenithAngleCos ) ).div( steepness ).negate() ) ) ) );
 			varyingProperty( 'float', 'vSunE' ).assign( sunIntensity );
@@ -84,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 ) );
 
@@ -97,14 +98,14 @@ class SkyMesh extends Mesh {
 
 			// position
 
-			const position = modelViewProjection();
+			const position = modelViewProjection;
 			position.z.assign( position.w ); // set z to camera.far
 
 			return position;
 
 		} )();
 
-		const fragmentNode = /*@__PURE__*/ tslFn( () => {
+		const fragmentNode = /*@__PURE__*/ Fn( () => {
 
 			const vSunDirection = varying( vec3(), 'vSunDirection' );
 			const vSunE = varying( float(), 'vSunE' );
@@ -132,7 +133,7 @@ class SkyMesh extends Mesh {
 
 			// optical length
 			// cutoff angle at 90 to avoid singularity in next formula.
-			const zenithAngle = acos( max( 0.0, dot( this.up, direction ) ) );
+			const zenithAngle = acos( max( 0.0, dot( this.upUniform, direction ) ) );
 			const inverse = float( 1.0 ).div( cos( zenithAngle ).add( float( 0.15 ).mul( pow( float( 93.885 ).sub( zenithAngle.mul( 180.0 ).div( pi ) ), - 1.253 ) ) ) );
 			const sR = rayleighZenithLength.mul( inverse );
 			const sM = mieZenithLength.mul( inverse );
@@ -157,7 +158,7 @@ class SkyMesh extends Mesh {
 			const betaMTheta = vBetaM.mul( mPhase );
 
 			const Lin = pow( vSunE.mul( add( betaRTheta, betaMTheta ).div( add( vBetaR, vBetaM ) ) ).mul( sub( 1.0, Fex ) ), vec3( 1.5 ) );
-			Lin.mulAssign( mix( vec3( 1.0 ), pow( vSunE.mul( add( betaRTheta, betaMTheta ).div( add( vBetaR, vBetaM ) ) ).mul( Fex ), vec3( 1.0 / 2.0 ) ), clamp( pow( sub( 1.0, dot( this.up, vSunDirection ) ), 5.0 ), 0.0, 1.0 ) ) );
+			Lin.mulAssign( mix( vec3( 1.0 ), pow( vSunE.mul( add( betaRTheta, betaMTheta ).div( add( vBetaR, vBetaM ) ) ).mul( Fex ), vec3( 1.0 / 2.0 ) ), clamp( pow( sub( 1.0, dot( this.upUniform, vSunDirection ) ), 5.0 ), 0.0, 1.0 ) ) );
 
 			// nightsky
 
@@ -175,7 +176,6 @@ class SkyMesh extends Mesh {
 
 		} )();
 
-		material.normals = false;
 		material.side = BackSide;
 		material.depthWrite = false;
 

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

@@ -1,11 +1,14 @@
 import {
 	Color,
 	Mesh,
-	NodeMaterial,
 	Vector2,
-	Vector3
-} from 'three';
-import { vec2, viewportSafeUV, viewportSharedTexture, reflector, pow, float, abs, texture, uniform, TempNode, NodeUpdateType, vec4, tslFn, cameraPosition, positionWorld, uv, mix, vec3, normalize, max, dot, viewportTopLeft } from 'three/tsl';
+	Vector3,
+	NodeMaterial,
+	NodeUpdateType,
+	TempNode
+} from 'three/webgpu';
+
+import { Fn, vec2, viewportSafeUV, viewportSharedTexture, reflector, pow, float, abs, texture, uniform, vec4, cameraPosition, positionWorld, uv, mix, vec3, normalize, max, dot, screenUV } from 'three/tsl';
 
 /**
  * References:
@@ -24,7 +27,6 @@ class WaterMesh extends Mesh {
 
 		this.isWater = true;
 
-		material.normals = false;
 		material.fragmentNode = new WaterNode( options, this );
 
 	}
@@ -91,7 +93,7 @@ class WaterNode extends TempNode {
 
 	setup() {
 
-		const outputNode = tslFn( () => {
+		const outputNode = Fn( () => {
 
 			const flowMapOffset0 = this.flowConfig.x;
 			const flowMapOffset1 = this.flowConfig.y;
@@ -120,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 );
@@ -142,7 +144,7 @@ class WaterNode extends TempNode {
 			this.waterBody.add( reflectionSampler.target );
 			reflectionSampler.uvNode = reflectionSampler.uvNode.add( offset );
 
-			const refractorUV = viewportTopLeft.add( offset );
+			const refractorUV = screenUV.add( offset );
 			const refractionSampler = viewportSharedTexture( viewportSafeUV( refractorUV ) );
 
 			// calculate final uv coords

package/examples/jsm/objects/WaterMesh.js

@@ -1,10 +1,11 @@
 import {
 	Color,
 	Mesh,
-	NodeMaterial,
-	Vector3
-} from 'three';
-import { add, cameraPosition, div, normalize, positionWorld, sub, timerLocal, tslFn, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
+	Vector3,
+	MeshLambertNodeMaterial
+} from 'three/webgpu';
+
+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 :
@@ -17,7 +18,7 @@ class WaterMesh extends Mesh {
 
 	constructor( geometry, options ) {
 
-		const material = new NodeMaterial();
+		const material = new MeshLambertNodeMaterial();
 
 		super( geometry, material );
 
@@ -25,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 );
@@ -37,19 +38,19 @@ class WaterMesh extends Mesh {
 
 		// TSL
 
-		const timeNode = timerLocal();
+		const getNoise = Fn( ( [ uv ] ) => {
 
-		const getNoise = tslFn( ( [ uv ] ) => {
+			const offset = time;
 
-			const uv0 = add( div( uv, 103 ), vec2( div( timeNode, 17 ), div( timeNode, 29 ) ) ).toVar();
-			const uv1 = div( uv, 107 ).sub( vec2( div( timeNode, - 19 ), div( timeNode, 31 ) ) ).toVar();
-			const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( timeNode, 101 ), div( timeNode, 97 ) ) ).toVar();
-			const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( timeNode, 109 ), div( timeNode, - 113 ) ) ).toVar();
+			const uv0 = add( div( uv, 103 ), vec2( div( offset, 17 ), div( offset, 29 ) ) ).toVar();
+			const uv1 = div( uv, 107 ).sub( vec2( div( offset, - 19 ), div( offset, 31 ) ) ).toVar();
+			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 );
 
@@ -57,25 +58,32 @@ class WaterMesh extends Mesh {
 
 		} );
 
-		const fragmentNode = tslFn( () => {
+		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 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 noise = getNoise( positionWorld.xz.mul( this.size ) );
-			const surfaceNormal = normalize( noise.xzy.mul( 1.5, 1.0, 1.5 ) );
+		const distance = length( worldToEye );
 
-			const diffuseLight = vec3( 0 ).toVar();
-			const specularLight = vec3( 0 ).toVar();
+		const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
 
-			const worldToEye = cameraPosition.sub( positionWorld );
-			const eyeDirection = normalize( worldToEye );
+		// Material
 
-			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 ) );
+		material.transparent = true;
 
-			const distance = length( worldToEye );
+		material.opacityNode = this.alpha;
 
-			const distortion = surfaceNormal.xy.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
+		material.shadowPositionNode = positionWorld.add( distortion );
+
+		material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility
+
+		material.colorNode = Fn( () => {
 
 			const mirrorSampler = reflector();
 			mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion );
@@ -89,13 +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.normals = false;
-		material.fragmentNode = fragmentNode;
-
 	}
 
 }