super-three 0.141.0 → 0.147.0

package/examples/js/objects/ReflectorForSSRPass.js

@@ -16,7 +16,9 @@
 			const useDepthTexture = options.useDepthTexture === true;
 			const yAxis = new THREE.Vector3( 0, 1, 0 );
 			const vecTemp0 = new THREE.Vector3();
-			const vecTemp1 = new THREE.Vector3(); //
+			const vecTemp1 = new THREE.Vector3();
+
+			//
 
 			scope.needsUpdate = false;
 			scope.maxDistance = ReflectorForSSRPass.ReflectorShader.uniforms.maxDistance.value;
@@ -30,7 +32,6 @@
 					return scope._distanceAttenuation;
 
 				},
-
 				set( val ) {
 
 					if ( scope._distanceAttenuation === val ) return;
@@ -39,7 +40,6 @@
 					scope.material.needsUpdate = true;
 
 				}
-
 			} );
 			scope._fresnel = ReflectorForSSRPass.ReflectorShader.defines.FRESNEL;
 			Object.defineProperty( scope, 'fresnel', {
@@ -48,7 +48,6 @@
 					return scope._fresnel;
 
 				},
-
 				set( val ) {
 
 					if ( scope._fresnel === val ) return;
@@ -57,7 +56,6 @@
 					scope.material.needsUpdate = true;
 
 				}
-
 			} );
 			const normal = new THREE.Vector3();
 			const reflectorWorldPosition = new THREE.Vector3();
@@ -69,7 +67,6 @@
 			const textureMatrix = new THREE.Matrix4();
 			const virtualCamera = new THREE.PerspectiveCamera();
 			let depthTexture;
-
 			if ( useDepthTexture ) {
 
 				depthTexture = new THREE.DepthTexture();
@@ -80,7 +77,8 @@
 			}
 
 			const parameters = {
-				depthTexture: useDepthTexture ? depthTexture : null
+				depthTexture: useDepthTexture ? depthTexture : null,
+				type: THREE.HalfFloatType
 			};
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
 			const material = new THREE.ShaderMaterial( {
@@ -95,7 +93,6 @@
 			material.uniforms[ 'tDiffuse' ].value = renderTarget.texture;
 			material.uniforms[ 'color' ].value = scope.color;
 			material.uniforms[ 'textureMatrix' ].value = textureMatrix;
-
 			if ( useDepthTexture ) {
 
 				material.uniforms[ 'tDepth' ].value = renderTarget.depthTexture;
@@ -105,7 +102,6 @@
 			this.material = material;
 			const globalPlane = new THREE.Plane( new THREE.Vector3( 0, 1, 0 ), clipBias );
 			const globalPlanes = [ globalPlane ];
-
 			this.doRender = function ( renderer, scene, camera ) {
 
 				material.uniforms[ 'maxDistance' ].value = scope.maxDistance;
@@ -120,7 +116,9 @@
 				rotationMatrix.extractRotation( scope.matrixWorld );
 				normal.set( 0, 0, 1 );
 				normal.applyMatrix4( rotationMatrix );
-				view.subVectors( reflectorWorldPosition, cameraWorldPosition ); // Avoid rendering when reflector is facing away
+				view.subVectors( reflectorWorldPosition, cameraWorldPosition );
+
+				// Avoid rendering when reflector is facing away
 
 				if ( view.dot( normal ) > 0 ) return;
 				view.reflect( normal ).negate();
@@ -146,23 +144,22 @@
 				material.uniforms[ 'virtualCameraMatrixWorld' ].value = virtualCamera.matrixWorld;
 				material.uniforms[ 'virtualCameraProjectionMatrix' ].value = camera.projectionMatrix;
 				material.uniforms[ 'virtualCameraProjectionMatrixInverse' ].value = camera.projectionMatrixInverse;
-				material.uniforms[ 'resolution' ].value = scope.resolution; // Update the texture matrix
+				material.uniforms[ 'resolution' ].value = scope.resolution;
 
+				// Update the texture matrix
 				textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
 				textureMatrix.multiply( virtualCamera.projectionMatrix );
 				textureMatrix.multiply( virtualCamera.matrixWorldInverse );
-				textureMatrix.multiply( scope.matrixWorld ); // Render
+				textureMatrix.multiply( scope.matrixWorld );
 
-				renderTarget.texture.encoding = renderer.outputEncoding; // scope.visible = false;
+				// scope.visible = false;
 
 				const currentRenderTarget = renderer.getRenderTarget();
 				const currentXrEnabled = renderer.xr.enabled;
 				const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
 				const currentClippingPlanes = renderer.clippingPlanes;
 				renderer.xr.enabled = false; // Avoid camera modification
-
 				renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
-
 				renderer.clippingPlanes = globalPlanes;
 				renderer.setRenderTarget( renderTarget );
 				renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
@@ -172,15 +169,18 @@
 				renderer.xr.enabled = currentXrEnabled;
 				renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
 				renderer.clippingPlanes = currentClippingPlanes;
-				renderer.setRenderTarget( currentRenderTarget ); // Restore viewport
+				renderer.setRenderTarget( currentRenderTarget );
 
-				const viewport = camera.viewport;
+				// Restore viewport
 
+				const viewport = camera.viewport;
 				if ( viewport !== undefined ) {
 
 					renderer.state.viewport( viewport );
 
-				} // scope.visible = true;
+				}
+
+				// scope.visible = true;
 
 			};
 
@@ -193,7 +193,6 @@
 		}
 
 	}
-
 	ReflectorForSSRPass.ReflectorShader = {
 		defines: {
 			DISTANCE_ATTENUATION: true,
@@ -240,9 +239,7 @@
 				value: new THREE.Vector2()
 			}
 		},
-		vertexShader:
-  /* glsl */
-  `
+		vertexShader: /* glsl */`
 		uniform mat4 textureMatrix;
 		varying vec4 vUv;
 
@@ -253,9 +250,7 @@
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
 		}`,
-		fragmentShader:
-  /* glsl */
-  `
+		fragmentShader: /* glsl */`
 		uniform vec3 color;
 		uniform sampler2D tDiffuse;
 		uniform sampler2D tDepth;

package/examples/js/objects/Refractor.js

@@ -14,29 +14,40 @@
 			const textureHeight = options.textureHeight || 512;
 			const clipBias = options.clipBias || 0;
 			const shader = options.shader || Refractor.RefractorShader;
-			const multisample = options.multisample !== undefined ? options.multisample : 4; //
+			const multisample = options.multisample !== undefined ? options.multisample : 4;
+
+			//
 
 			const virtualCamera = this.camera;
 			virtualCamera.matrixAutoUpdate = false;
-			virtualCamera.userData.refractor = true; //
+			virtualCamera.userData.refractor = true;
+
+			//
 
 			const refractorPlane = new THREE.Plane();
-			const textureMatrix = new THREE.Matrix4(); // render target
+			const textureMatrix = new THREE.Matrix4();
+
+			// render target
 
 			const renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, {
-				samples: multisample
-			} ); // material
+				samples: multisample,
+				type: THREE.HalfFloatType
+			} );
+
+			// material
 
 			this.material = new THREE.ShaderMaterial( {
 				uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
 				vertexShader: shader.vertexShader,
 				fragmentShader: shader.fragmentShader,
 				transparent: true // ensures, refractors are drawn from farthest to closest
-
 			} );
+
 			this.material.uniforms[ 'color' ].value = color;
 			this.material.uniforms[ 'tDiffuse' ].value = renderTarget.texture;
-			this.material.uniforms[ 'textureMatrix' ].value = textureMatrix; // functions
+			this.material.uniforms[ 'textureMatrix' ].value = textureMatrix;
+
+			// functions
 
 			const visible = function () {
 
@@ -58,7 +69,6 @@
 				};
 
 			}();
-
 			const updateRefractorPlane = function () {
 
 				const normal = new THREE.Vector3();
@@ -68,7 +78,9 @@
 				return function updateRefractorPlane() {
 
 					scope.matrixWorld.decompose( position, quaternion, scale );
-					normal.set( 0, 0, 1 ).applyQuaternion( quaternion ).normalize(); // flip the normal because we want to cull everything above the plane
+					normal.set( 0, 0, 1 ).applyQuaternion( quaternion ).normalize();
+
+					// flip the normal because we want to cull everything above the plane
 
 					normal.negate();
 					refractorPlane.setFromNormalAndCoplanarPoint( normal, position );
@@ -76,7 +88,6 @@
 				};
 
 			}();
-
 			const updateVirtualCamera = function () {
 
 				const clipPlane = new THREE.Plane();
@@ -88,22 +99,29 @@
 					virtualCamera.matrixWorldInverse.copy( virtualCamera.matrixWorld ).invert();
 					virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
 					virtualCamera.far = camera.far; // used in WebGLBackground
+
 					// The following code creates an oblique view frustum for clipping.
 					// see: Lengyel, Eric. “Oblique View Frustum Depth Projection and Clipping”.
 					// Journal of Game Development, Vol. 1, No. 2 (2005), Charles River Media, pp. 5–16
 
 					clipPlane.copy( refractorPlane );
 					clipPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
-					clipVector.set( clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.constant ); // calculate the clip-space corner point opposite the clipping plane and
+					clipVector.set( clipPlane.normal.x, clipPlane.normal.y, clipPlane.normal.z, clipPlane.constant );
+
+					// calculate the clip-space corner point opposite the clipping plane and
 					// transform it into camera space by multiplying it by the inverse of the projection matrix
 
 					const projectionMatrix = virtualCamera.projectionMatrix;
 					q.x = ( Math.sign( clipVector.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
 					q.y = ( Math.sign( clipVector.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
 					q.z = - 1.0;
-					q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ]; // calculate the scaled plane vector
+					q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
+
+					// calculate the scaled plane vector
+
+					clipVector.multiplyScalar( 2.0 / clipVector.dot( q ) );
 
-					clipVector.multiplyScalar( 2.0 / clipVector.dot( q ) ); // replacing the third row of the projection matrix
+					// replacing the third row of the projection matrix
 
 					projectionMatrix.elements[ 2 ] = clipVector.x;
 					projectionMatrix.elements[ 6 ] = clipVector.y;
@@ -112,14 +130,18 @@
 
 				};
 
-			}(); // This will update the texture matrix that is used for projective texture mapping in the shader.
-			// see: http://developer.download.nvidia.com/assets/gamedev/docs/projective_texture_mapping.pdf
+			}();
 
+			// This will update the texture matrix that is used for projective texture mapping in the shader.
+			// see: http://developer.download.nvidia.com/assets/gamedev/docs/projective_texture_mapping.pdf
 
 			function updateTextureMatrix( camera ) {
 
 				// this matrix does range mapping to [ 0, 1 ]
-				textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 ); // we use "Object Linear Texgen", so we need to multiply the texture matrix T
+
+				textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
+
+				// we use "Object Linear Texgen", so we need to multiply the texture matrix T
 				// (matrix above) with the projection and view matrix of the virtual camera
 				// and the model matrix of the refractor
 
@@ -127,8 +149,9 @@
 				textureMatrix.multiply( camera.matrixWorldInverse );
 				textureMatrix.multiply( scope.matrixWorld );
 
-			} //
+			}
 
+			//
 
 			function render( renderer, scene, camera ) {
 
@@ -136,19 +159,24 @@
 				const currentRenderTarget = renderer.getRenderTarget();
 				const currentXrEnabled = renderer.xr.enabled;
 				const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+				const currentOutputEncoding = renderer.outputEncoding;
+				const currentToneMapping = renderer.toneMapping;
 				renderer.xr.enabled = false; // avoid camera modification
-
 				renderer.shadowMap.autoUpdate = false; // avoid re-computing shadows
-
+				renderer.outputEncoding = THREE.LinearEncoding;
+				renderer.toneMapping = THREE.NoToneMapping;
 				renderer.setRenderTarget( renderTarget );
 				if ( renderer.autoClear === false ) renderer.clear();
 				renderer.render( scene, virtualCamera );
 				renderer.xr.enabled = currentXrEnabled;
 				renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-				renderer.setRenderTarget( currentRenderTarget ); // restore viewport
+				renderer.outputEncoding = currentOutputEncoding;
+				renderer.toneMapping = currentToneMapping;
+				renderer.setRenderTarget( currentRenderTarget );
 
-				const viewport = camera.viewport;
+				// restore viewport
 
+				const viewport = camera.viewport;
 				if ( viewport !== undefined ) {
 
 					renderer.state.viewport( viewport );
@@ -157,17 +185,21 @@
 
 				scope.visible = true;
 
-			} //
+			}
 
+			//
 
 			this.onBeforeRender = function ( renderer, scene, camera ) {
 
-				// Render
-				renderTarget.texture.encoding = renderer.outputEncoding; // ensure refractors are rendered only once per frame
+				// ensure refractors are rendered only once per frame
 
-				if ( camera.userData.refractor === true ) return; // avoid rendering when the refractor is viewed from behind
+				if ( camera.userData.refractor === true ) return;
 
-				if ( ! visible( camera ) === true ) return; // update
+				// avoid rendering when the refractor is viewed from behind
+
+				if ( ! visible( camera ) === true ) return;
+
+				// update
 
 				updateRefractorPlane();
 				updateTextureMatrix( camera );
@@ -192,7 +224,6 @@
 		}
 
 	}
-
 	Refractor.RefractorShader = {
 		uniforms: {
 			'color': {
@@ -205,9 +236,7 @@
 				value: null
 			}
 		},
-		vertexShader:
-  /* glsl */
-  `
+		vertexShader: /* glsl */`
 
 		uniform mat4 textureMatrix;
 
@@ -219,9 +248,7 @@
 			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
 		}`,
-		fragmentShader:
-  /* glsl */
-  `
+		fragmentShader: /* glsl */`
 
 		uniform vec3 color;
 		uniform sampler2D tDiffuse;
@@ -245,6 +272,7 @@
 			vec4 base = texture2DProj( tDiffuse, vUv );
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
 			#include <encodings_fragment>
 
 		}`

package/examples/js/objects/ShadowMesh.js

@@ -5,7 +5,6 @@
  */
 
 	const _shadowMatrix = new THREE.Matrix4();
-
 	class ShadowMesh extends THREE.Mesh {
 
 		constructor( mesh ) {
@@ -14,7 +13,11 @@
 				color: 0x000000,
 				transparent: true,
 				opacity: 0.6,
-				depthWrite: false
+				depthWrite: false,
+				stencilWrite: true,
+				stencilFunc: THREE.EqualStencilFunc,
+				stencilRef: 0,
+				stencilZPass: THREE.IncrementStencilOp
 			} );
 			super( mesh.geometry, shadowMaterial );
 			this.isShadowMesh = true;
@@ -23,10 +26,10 @@
 			this.matrixAutoUpdate = false;
 
 		}
-
 		update( plane, lightPosition4D ) {
 
 			// based on https://www.opengl.org/archives/resources/features/StencilTalk/tsld021.htm
+
 			const dot = plane.normal.x * lightPosition4D.x + plane.normal.y * lightPosition4D.y + plane.normal.z * lightPosition4D.z + - plane.constant * lightPosition4D.w;
 			const sme = _shadowMatrix.elements;
 			sme[ 0 ] = dot - lightPosition4D.x * plane.normal.x;

package/examples/js/objects/Sky.js

@@ -33,7 +33,6 @@
 		}
 
 	}
-
 	Sky.SkyShader = {
 		uniforms: {
 			'turbidity': {
@@ -55,9 +54,7 @@
 				value: new THREE.Vector3( 0, 1, 0 )
 			}
 		},
-		vertexShader:
-  /* glsl */
-  `
+		vertexShader: /* glsl */`
 		uniform vec3 sunPosition;
 		uniform float rayleigh;
 		uniform float turbidity;
@@ -128,9 +125,7 @@
 			vBetaM = totalMie( turbidity ) * mieCoefficient;
 
 		}`,
-		fragmentShader:
-  /* glsl */
-  `
+		fragmentShader: /* glsl */`
 		varying vec3 vWorldPosition;
 		varying vec3 vSunDirection;
 		varying float vSunfade;

package/examples/js/objects/Water.js

@@ -26,7 +26,9 @@
 			const eye = options.eye !== undefined ? options.eye : new THREE.Vector3( 0, 0, 0 );
 			const distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
 			const side = options.side !== undefined ? options.side : THREE.FrontSide;
-			const fog = options.fog !== undefined ? options.fog : false; //
+			const fog = options.fog !== undefined ? options.fog : false;
+
+			//
 
 			const mirrorPlane = new THREE.Plane();
 			const normal = new THREE.Vector3();
@@ -77,9 +79,7 @@
 						value: new THREE.Color( 0x555555 )
 					}
 				} ] ),
-				vertexShader:
-      /* glsl */
-      `
+				vertexShader: /* glsl */`
 				uniform mat4 textureMatrix;
 				uniform float time;
 
@@ -104,9 +104,7 @@
 				#include <fog_vertex>
 				#include <shadowmap_vertex>
 			}`,
-				fragmentShader:
-      /* glsl */
-      `
+				fragmentShader: /* glsl */`
 				uniform sampler2D mirrorSampler;
 				uniform float alpha;
 				uniform float time;
@@ -198,7 +196,6 @@
 			material.uniforms[ 'distortionScale' ].value = distortionScale;
 			material.uniforms[ 'eye' ].value = eye;
 			scope.material = material;
-
 			scope.onBeforeRender = function ( renderer, scene, camera ) {
 
 				mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
@@ -206,7 +203,9 @@
 				rotationMatrix.extractRotation( scope.matrixWorld );
 				normal.set( 0, 0, 1 );
 				normal.applyMatrix4( rotationMatrix );
-				view.subVectors( mirrorWorldPosition, cameraWorldPosition ); // Avoid rendering when mirror is facing away
+				view.subVectors( mirrorWorldPosition, cameraWorldPosition );
+
+				// Avoid rendering when mirror is facing away
 
 				if ( view.dot( normal ) > 0 ) return;
 				view.reflect( normal ).negate();
@@ -226,13 +225,15 @@
 				mirrorCamera.far = camera.far; // Used in WebGLBackground
 
 				mirrorCamera.updateMatrixWorld();
-				mirrorCamera.projectionMatrix.copy( camera.projectionMatrix ); // Update the texture matrix
+				mirrorCamera.projectionMatrix.copy( camera.projectionMatrix );
 
+				// Update the texture matrix
 				textureMatrix.set( 0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0 );
 				textureMatrix.multiply( mirrorCamera.projectionMatrix );
-				textureMatrix.multiply( mirrorCamera.matrixWorldInverse ); // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-				// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+				textureMatrix.multiply( mirrorCamera.matrixWorldInverse );
 
+				// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+				// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
 				mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
 				mirrorPlane.applyMatrix4( mirrorCamera.matrixWorldInverse );
 				clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
@@ -240,22 +241,25 @@
 				q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
 				q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
 				q.z = - 1.0;
-				q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ]; // Calculate the scaled plane vector
+				q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
 
-				clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) ); // Replacing the third row of the projection matrix
+				// Calculate the scaled plane vector
+				clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
 
+				// Replacing the third row of the projection matrix
 				projectionMatrix.elements[ 2 ] = clipPlane.x;
 				projectionMatrix.elements[ 6 ] = clipPlane.y;
 				projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
 				projectionMatrix.elements[ 14 ] = clipPlane.w;
-				eye.setFromMatrixPosition( camera.matrixWorld ); // Render
+				eye.setFromMatrixPosition( camera.matrixWorld );
+
+				// Render
 
 				const currentRenderTarget = renderer.getRenderTarget();
 				const currentXrEnabled = renderer.xr.enabled;
 				const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
 				scope.visible = false;
 				renderer.xr.enabled = false; // Avoid camera modification and recursion
-
 				renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
 
 				renderer.setRenderTarget( renderTarget );
@@ -266,10 +270,11 @@
 				scope.visible = true;
 				renderer.xr.enabled = currentXrEnabled;
 				renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
-				renderer.setRenderTarget( currentRenderTarget ); // Restore viewport
+				renderer.setRenderTarget( currentRenderTarget );
 
-				const viewport = camera.viewport;
+				// Restore viewport
 
+				const viewport = camera.viewport;
 				if ( viewport !== undefined ) {
 
 					renderer.state.viewport( viewport );

package/examples/js/objects/Water2.js

@@ -29,10 +29,11 @@
 			const normalMap0 = options.normalMap0 || textureLoader.load( 'textures/water/Water_1_M_Normal.jpg' );
 			const normalMap1 = options.normalMap1 || textureLoader.load( 'textures/water/Water_2_M_Normal.jpg' );
 			const cycle = 0.15; // a cycle of a flow map phase
-
 			const halfCycle = cycle * 0.5;
 			const textureMatrix = new THREE.Matrix4();
-			const clock = new THREE.Clock(); // internal components
+			const clock = new THREE.Clock();
+
+			// internal components
 
 			if ( THREE.Reflector === undefined ) {
 
@@ -59,7 +60,9 @@
 				clipBias: clipBias
 			} );
 			reflector.matrixAutoUpdate = false;
-			refractor.matrixAutoUpdate = false; // material
+			refractor.matrixAutoUpdate = false;
+
+			// material
 
 			this.material = new THREE.ShaderMaterial( {
 				uniforms: THREE.UniformsUtils.merge( [ THREE.UniformsLib[ 'fog' ], shader.uniforms ] ),
@@ -68,7 +71,6 @@
 				transparent: true,
 				fog: true
 			} );
-
 			if ( flowMap !== undefined ) {
 
 				this.material.defines.USE_FLOWMAP = '';
@@ -84,27 +86,30 @@
 					value: flowDirection
 				};
 
-			} // maps
+			}
 
+			// maps
 
 			normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
 			normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;
 			this.material.uniforms[ 'tReflectionMap' ].value = reflector.getRenderTarget().texture;
 			this.material.uniforms[ 'tRefractionMap' ].value = refractor.getRenderTarget().texture;
 			this.material.uniforms[ 'tNormalMap0' ].value = normalMap0;
-			this.material.uniforms[ 'tNormalMap1' ].value = normalMap1; // water
+			this.material.uniforms[ 'tNormalMap1' ].value = normalMap1;
+
+			// water
 
 			this.material.uniforms[ 'color' ].value = color;
 			this.material.uniforms[ 'reflectivity' ].value = reflectivity;
-			this.material.uniforms[ 'textureMatrix' ].value = textureMatrix; // inital values
+			this.material.uniforms[ 'textureMatrix' ].value = textureMatrix;
 
-			this.material.uniforms[ 'config' ].value.x = 0; // flowMapOffset0
+			// inital values
 
+			this.material.uniforms[ 'config' ].value.x = 0; // flowMapOffset0
 			this.material.uniforms[ 'config' ].value.y = halfCycle; // flowMapOffset1
-
 			this.material.uniforms[ 'config' ].value.z = halfCycle; // halfCycle
-
 			this.material.uniforms[ 'config' ].value.w = scale; // scale
+
 			// functions
 
 			function updateTextureMatrix( camera ) {
@@ -121,8 +126,8 @@
 				const delta = clock.getDelta();
 				const config = scope.material.uniforms[ 'config' ];
 				config.value.x += flowSpeed * delta; // flowMapOffset0
-
 				config.value.y = config.value.x + halfCycle; // flowMapOffset1
+
 				// Important: The distance between offsets should be always the value of "halfCycle".
 				// Moreover, both offsets should be in the range of [ 0, cycle ].
 				// This approach ensures a smooth water flow and avoids "reset" effects.
@@ -138,8 +143,9 @@
 
 				}
 
-			} //
+			}
 
+			//
 
 			this.onBeforeRender = function ( renderer, scene, camera ) {
 
@@ -157,7 +163,6 @@
 		}
 
 	}
-
 	Water.WaterShader = {
 		uniforms: {
 			'color': {
@@ -193,9 +198,7 @@
 				value: new THREE.Vector4()
 			}
 		},
-		vertexShader:
-  /* glsl */
-  `
+		vertexShader: /* glsl */`
 
 		#include <common>
 		#include <fog_pars_vertex>
@@ -222,9 +225,7 @@
 			#include <fog_vertex>
 
 		}`,
-		fragmentShader:
-  /* glsl */
-  `
+		fragmentShader: /* glsl */`
 
 		#include <common>
 		#include <fog_pars_fragment>