super-three 0.179.0 → 0.184.0

package/examples/jsm/objects/Reflector.js

@@ -2,7 +2,6 @@ import {
 	Color,
 	Matrix4,
 	Mesh,
-	PerspectiveCamera,
 	Plane,
 	ShaderMaterial,
 	UniformsUtils,
@@ -67,12 +66,12 @@ class Reflector extends Mesh {
 		this.forceUpdate = false;
 
 		/**
-		 * The reflector's virtual camera. This is used to render
-		 * the scene from the mirror's point of view.
+		 * Weak map for managing reflection cameras.
 		 *
-		 * @type {PerspectiveCamera}
+		 * @private
+		 * @type {WeakMap<Camera, Camera>}
 		 */
-		this.camera = new PerspectiveCamera();
+		this._reflectionCameras = new WeakMap();
 
 		const scope = this;
 
@@ -98,7 +97,6 @@ class Reflector extends Mesh {
 		const q = new Vector4();
 
 		const textureMatrix = new Matrix4();
-		const virtualCamera = this.camera;
 
 		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { samples: multisample, type: HalfFloatType } );
 
@@ -117,6 +115,8 @@ class Reflector extends Mesh {
 
 		this.onBeforeRender = function ( renderer, scene, camera ) {
 
+			const reflectionCamera = this._getReflectionCamera( camera );
+
 			reflectorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
 			cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
 
@@ -145,16 +145,16 @@ class Reflector extends Mesh {
 			target.reflect( normal ).negate();
 			target.add( reflectorWorldPosition );
 
-			virtualCamera.position.copy( view );
-			virtualCamera.up.set( 0, 1, 0 );
-			virtualCamera.up.applyMatrix4( rotationMatrix );
-			virtualCamera.up.reflect( normal );
-			virtualCamera.lookAt( target );
+			reflectionCamera.position.copy( view );
+			reflectionCamera.up.set( 0, 1, 0 );
+			reflectionCamera.up.applyMatrix4( rotationMatrix );
+			reflectionCamera.up.reflect( normal );
+			reflectionCamera.lookAt( target );
 
-			virtualCamera.far = camera.far; // Used in WebGLBackground
+			reflectionCamera.far = camera.far; // Used in WebGLBackground
 
-			virtualCamera.updateMatrixWorld();
-			virtualCamera.projectionMatrix.copy( camera.projectionMatrix );
+			reflectionCamera.updateMatrixWorld();
+			reflectionCamera.projectionMatrix.copy( camera.projectionMatrix );
 
 			// Update the texture matrix
 			textureMatrix.set(
@@ -163,23 +163,34 @@ class Reflector extends Mesh {
 				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( reflectionCamera.projectionMatrix );
+			textureMatrix.multiply( reflectionCamera.matrixWorldInverse );
 			textureMatrix.multiply( scope.matrixWorld );
 
 			// 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
 			reflectorPlane.setFromNormalAndCoplanarPoint( normal, reflectorWorldPosition );
-			reflectorPlane.applyMatrix4( virtualCamera.matrixWorldInverse );
+			reflectorPlane.applyMatrix4( reflectionCamera.matrixWorldInverse );
 
 			clipPlane.set( reflectorPlane.normal.x, reflectorPlane.normal.y, reflectorPlane.normal.z, reflectorPlane.constant );
 
-			const projectionMatrix = virtualCamera.projectionMatrix;
+			const projectionMatrix = reflectionCamera.projectionMatrix;
+
+			if ( reflectionCamera.isOrthographicCamera ) {
+
+				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 = - camera.far; // actual view-space z at the far plane, no normalization needed
+				q.w = 1.0; // w_clip = 1 in orthographic (no perspective division)
+
+			} else {
 
-			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 ];
+				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
 			clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
@@ -187,8 +198,21 @@ class Reflector extends Mesh {
 			// 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;
+
+			if ( reflectionCamera.isOrthographicCamera ) {
+
+				// For orthographic cameras, w_clip = 1 always (no perspective division),
+				// so the -1 near-plane offset must go into the constant term (elements[14])
+				// rather than the z coefficient (elements[10]).
+				projectionMatrix.elements[ 10 ] = clipPlane.z - clipBias;
+				projectionMatrix.elements[ 14 ] = clipPlane.w - 1.0;
+
+			} else {
+
+				projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
+				projectionMatrix.elements[ 14 ] = clipPlane.w;
+
+			}
 
 			// Render
 			scope.visible = false;
@@ -206,7 +230,7 @@ class Reflector extends Mesh {
 			renderer.state.buffers.depth.setMask( true ); // make sure the depth buffer is writable so it can be properly cleared, see #18897
 
 			if ( renderer.autoClear === false ) renderer.clear();
-			renderer.render( scene, virtualCamera );
+			renderer.render( scene, reflectionCamera );
 
 			renderer.xr.enabled = currentXrEnabled;
 			renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
@@ -250,6 +274,30 @@ class Reflector extends Mesh {
 
 		};
 
+		/**
+		 * Returns a reflection camera for the given camera. The reflection camera is used to
+		 * render the scene from the reflector's view so correct reflections can be produced.
+		 *
+		 * @private
+		 * @param {Camera} camera - The scene's camera.
+		 * @return {Camera} The corresponding reflection camera.
+		 */
+		this._getReflectionCamera = function ( camera ) {
+
+			let reflectionCamera = this._reflectionCameras.get( camera );
+
+			if ( reflectionCamera === undefined ) {
+
+				reflectionCamera = camera.clone();
+
+				this._reflectionCameras.set( camera, reflectionCamera );
+
+			}
+
+			return reflectionCamera;
+
+		};
+
 	}
 
 }

package/examples/jsm/objects/ReflectorForSSRPass.js

@@ -387,6 +387,7 @@ ReflectorForSSRPass.ReflectorShader = {
  * @property {number} [clipBias=0] - The clip bias.
  * @property {Object} [shader] - Can be used to pass in a custom shader that defines how the reflective view is projected onto the reflector's geometry.
  * @property {boolean} [useDepthTexture=true] - Whether to store depth values in a texture or not.
+ * @property {Vector2} [resolution] - Resolution for the Reflector Pass.
  **/
 
 export { ReflectorForSSRPass };

package/examples/jsm/objects/Sky.js

@@ -8,7 +8,7 @@ import {
 } from 'three';
 
 /**
- * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight]{@link https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight}
+ * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight](https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight)
  * aka The Preetham Model, the de facto standard for analytical skydomes.
  *
  * Note that this class can only be used with {@link WebGLRenderer}.
@@ -25,6 +25,16 @@ import {
  * sky.scale.setScalar( 10000 );
  * scene.add( sky );
  * ```
+ * 
+ * It can be useful to hide the sun disc when generating an environment map to avoid artifacts
+ * 
+ * ```js
+ * // disable before rendering environment map
+ * sky.material.uniforms.showSunDisc.value = false;
+ * // ...
+ * // re-enable before scene sky box rendering
+ * sky.material.uniforms.showSunDisc.value = true;
+ * ```
  *
  * @augments Mesh
  * @three_import import { Sky } from 'three/addons/objects/Sky.js';
@@ -72,7 +82,14 @@ Sky.SkyShader = {
 		'mieCoefficient': { value: 0.005 },
 		'mieDirectionalG': { value: 0.8 },
 		'sunPosition': { value: new Vector3() },
-		'up': { value: new Vector3( 0, 1, 0 ) }
+		'up': { value: new Vector3( 0, 1, 0 ) },
+		'cloudScale': { value: 0.0002 },
+		'cloudSpeed': { value: 0.0001 },
+		'cloudCoverage': { value: 0.4 },
+		'cloudDensity': { value: 0.4 },
+		'cloudElevation': { value: 0.5 },
+		'showSunDisc': { value: 1 },
+		'time': { value: 0.0 }
 	},
 
 	vertexShader: /* glsl */`
@@ -150,13 +167,46 @@ Sky.SkyShader = {
 	fragmentShader: /* glsl */`
 		varying vec3 vWorldPosition;
 		varying vec3 vSunDirection;
-		varying float vSunfade;
 		varying vec3 vBetaR;
 		varying vec3 vBetaM;
 		varying float vSunE;
 
 		uniform float mieDirectionalG;
 		uniform vec3 up;
+		uniform float cloudScale;
+		uniform float cloudSpeed;
+		uniform float cloudCoverage;
+		uniform float cloudDensity;
+		uniform float cloudElevation;
+		uniform float showSunDisc;
+		uniform float time;
+
+		// Cloud noise functions
+		float hash( vec2 p ) {
+			return fract( sin( dot( p, vec2( 127.1, 311.7 ) ) ) * 43758.5453123 );
+		}
+
+		float noise( vec2 p ) {
+			vec2 i = floor( p );
+			vec2 f = fract( p );
+			f = f * f * ( 3.0 - 2.0 * f );
+			float a = hash( i );
+			float b = hash( i + vec2( 1.0, 0.0 ) );
+			float c = hash( i + vec2( 0.0, 1.0 ) );
+			float d = hash( i + vec2( 1.0, 1.0 ) );
+			return mix( mix( a, b, f.x ), mix( c, d, f.x ), f.y );
+		}
+
+		float fbm( vec2 p ) {
+			float value = 0.0;
+			float amplitude = 0.5;
+			for ( int i = 0; i < 5; i ++ ) {
+				value += amplitude * noise( p );
+				p *= 2.0;
+				amplitude *= 0.5;
+			}
+			return value;
+		}
 
 		// constants for atmospheric scattering
 		const float pi = 3.141592653589793238462643383279502884197169;
@@ -218,14 +268,48 @@ Sky.SkyShader = {
 			vec3 L0 = vec3( 0.1 ) * Fex;
 
 			// composition + solar disc
-			float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );
-			L0 += ( vSunE * 19000.0 * Fex ) * sundisk;
+			float sundisc = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta ) * showSunDisc;
+			L0 += ( vSunE * 19000.0 * Fex ) * sundisc;
 
 			vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );
 
-			vec3 retColor = pow( texColor, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );
+			// Clouds
+			if ( direction.y > 0.0 && cloudCoverage > 0.0 ) {
+
+				// Project to cloud plane (higher elevation = clouds appear lower/closer)
+				float elevation = mix( 1.0, 0.1, cloudElevation );
+				vec2 cloudUV = direction.xz / ( direction.y * elevation );
+				cloudUV *= cloudScale;
+				cloudUV += time * cloudSpeed;
+
+				// Multi-octave noise for fluffy clouds
+				float cloudNoise = fbm( cloudUV * 1000.0 );
+				cloudNoise += 0.5 * fbm( cloudUV * 2000.0 + 3.7 );
+				cloudNoise = cloudNoise * 0.5 + 0.5;
+
+				// Apply coverage threshold
+				float cloudMask = smoothstep( 1.0 - cloudCoverage, 1.0 - cloudCoverage + 0.3, cloudNoise );
+
+				// Fade clouds near horizon (adjusted by elevation)
+				float horizonFade = smoothstep( 0.0, 0.1 + 0.2 * cloudElevation, direction.y );
+				cloudMask *= horizonFade;
+
+				// Cloud lighting based on sun position
+				float sunInfluence = dot( direction, vSunDirection ) * 0.5 + 0.5;
+				float daylight = max( 0.0, vSunDirection.y * 2.0 );
+
+				// Base cloud color affected by atmosphere
+				vec3 atmosphereColor = Lin * 0.04;
+				vec3 cloudColor = mix( vec3( 0.3 ), vec3( 1.0 ), daylight );
+				cloudColor = mix( cloudColor, atmosphereColor + vec3( 1.0 ), sunInfluence * 0.5 );
+				cloudColor *= vSunE * 0.00002;
+
+				// Blend clouds with sky
+				texColor = mix( texColor, cloudColor, cloudMask * cloudDensity );
+
+			}
 
-			gl_FragColor = vec4( retColor, 1.0 );
+			gl_FragColor = vec4( texColor, 1.0 );
 
 			#include <tonemapping_fragment>
 			#include <colorspace_fragment>

package/examples/jsm/objects/SkyMesh.js

@@ -6,14 +6,14 @@ import {
 	NodeMaterial
 } from 'three/webgpu';
 
-import { Fn, float, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varyingProperty, vec4, uniform, cameraPosition } from 'three/tsl';
+import { Fn, float, vec2, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelViewProjection, normalize, positionWorld, pow, smoothstep, sub, varyingProperty, vec4, uniform, cameraPosition, fract, floor, sin, time, Loop, If } from 'three/tsl';
 
 /**
- * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight]{@link https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight}
+ * Represents a skydome for scene backgrounds. Based on [A Practical Analytic Model for Daylight](https://www.researchgate.net/publication/220720443_A_Practical_Analytic_Model_for_Daylight)
  * aka The Preetham Model, the de facto standard for analytical skydomes.
  *
- * Note that this class can only be used with {@link WebGLRenderer}.
- * When using {@link WebGPURenderer}, use {@link SkyMesh}.
+ * Note that this class can only be used with {@link WebGPURenderer}.
+ * When using {@link WebGLRenderer}, use {@link Sky}.
  *
  * More references:
  *
@@ -26,6 +26,16 @@ import { Fn, float, vec3, acos, add, mul, clamp, cos, dot, exp, max, mix, modelV
  * scene.add( sky );
  * ```
  *
+ * It can be useful to hide the sun disc when generating an environment map to avoid artifacts
+ * 
+ * ```js
+ * // disable before rendering environment map
+ * sky.showSunDisc.value = false;
+ * // ...
+ * // re-enable before scene sky box rendering
+ * sky.showSunDisc.value = true;
+ * ```
+ *
  * @augments Mesh
  * @three_import import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
  */
@@ -82,6 +92,58 @@ class SkyMesh extends Mesh {
 		 */
 		this.upUniform = uniform( new Vector3( 0, 1, 0 ) );
 
+		/**
+		 * The cloud scale uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudScale = uniform( 0.0002 );
+
+		/**
+		 * The cloud speed uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudSpeed = uniform( 0.0001 );
+
+		/**
+		 * The cloud coverage uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudCoverage = uniform( 0.4 );
+
+		/**
+		 * The cloud density uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudDensity = uniform( 0.4 );
+
+		/**
+		 * The cloud elevation uniform.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.cloudElevation = uniform( 0.5 );
+
+		/**
+		 * Whether to render the solar disc.
+		 *
+		 * @type {UniformNode<float>}
+		 */
+		this.showSunDisc = uniform( 1 );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 * @deprecated Use isSkyMesh instead.
+		 */
+		this.isSky = true; // @deprecated, r182
+
 		/**
 		 * This flag can be used for type testing.
 		 *
@@ -89,21 +151,20 @@ class SkyMesh extends Mesh {
 		 * @readonly
 		 * @default true
 		 */
-		this.isSky = true;
+		this.isSkyMesh = true;
 
 		// Varyings
 
 		const vSunDirection = varyingProperty( 'vec3' );
 		const vSunE = varyingProperty( 'float' );
-		const vSunfade = varyingProperty( 'float' );
 		const vBetaR = varyingProperty( 'vec3' );
 		const vBetaM = varyingProperty( 'vec3' );
 
 		const vertexNode = /*@__PURE__*/ Fn( () => {
 
 			// constants for atmospheric scattering
-			const e = float( 2.71828182845904523536028747135266249775724709369995957 );
-			// const pi = float( 3.141592653589793238462643383279502884197169 );
+			const e = float( 2.718281828459045 );
+			// const pi = float( 3.141592653589793 );
 
 			// wavelength of used primaries, according to preetham
 			// const lambda = vec3( 680E-9, 550E-9, 450E-9 );
@@ -136,10 +197,9 @@ class SkyMesh extends Mesh {
 			const sunIntensity = EE.mul( max( 0.0, float( 1.0 ).sub( pow( e, cutoffAngle.sub( acos( zenithAngleCos ) ).div( steepness ).negate() ) ) ) );
 			vSunE.assign( sunIntensity );
 
-			// varying sun fade
+			// sun fade
 
 			const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( this.sunPosition.y.div( 450000.0 ) ) ), 0, 1 ) );
-			vSunfade.assign( sunfade );
 
 			// varying vBetaR
 
@@ -168,13 +228,13 @@ class SkyMesh extends Mesh {
 		const colorNode = /*@__PURE__*/ Fn( () => {
 
 			// constants for atmospheric scattering
-			const pi = float( 3.141592653589793238462643383279502884197169 );
+			const pi = float( 3.141592653589793 );
 
 			// optical length at zenith for molecules
 			const rayleighZenithLength = float( 8.4E3 );
 			const mieZenithLength = float( 1.25E3 );
 			// 66 arc seconds -> degrees, and the cosine of that
-			const sunAngularDiameterCos = float( 0.999956676946448443553574619906976478926848692873900859324 );
+			const sunAngularDiameterCos = float( 0.9999566769464484 );
 
 			// 3.0 / ( 16.0 * pi )
 			const THREE_OVER_SIXTEENPI = float( 0.05968310365946075 );
@@ -219,14 +279,88 @@ class SkyMesh extends Mesh {
 			const L0 = vec3( 0.1 ).mul( Fex );
 
 			// composition + solar disc
-			const sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta );
-			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisk ) );
+			const sundisc = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta ).mul( this.showSunDisc );
+			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisc ) );
+
+			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) ).toVar();
+
+			// Cloud noise functions
+			const hash = Fn( ( [ p ] ) => {
+
+				return fract( sin( dot( p, vec2( 127.1, 311.7 ) ) ).mul( 43758.5453123 ) );
+
+			} );
+
+			const noise = Fn( ( [ p_immutable ] ) => {
+
+				const p = vec2( p_immutable ).toVar();
+				const i = floor( p );
+				const f = fract( p );
+				const ff = f.mul( f ).mul( sub( 3.0, f.mul( 2.0 ) ) );
+
+				const a = hash( i );
+				const b = hash( add( i, vec2( 1.0, 0.0 ) ) );
+				const c = hash( add( i, vec2( 0.0, 1.0 ) ) );
+				const d = hash( add( i, vec2( 1.0, 1.0 ) ) );
+
+				return mix( mix( a, b, ff.x ), mix( c, d, ff.x ), ff.y );
+
+			} );
+
+			const fbm = Fn( ( [ p_immutable ] ) => {
+
+				const p = vec2( p_immutable ).toVar();
+				const value = float( 0.0 ).toVar();
+				const amplitude = float( 0.5 ).toVar();
+
+				Loop( 5, () => {
+
+					value.addAssign( amplitude.mul( noise( p ) ) );
+					p.mulAssign( 2.0 );
+					amplitude.mulAssign( 0.5 );
+
+				} );
+
+				return value;
+
+			} );
+
+			// Clouds
+			If( direction.y.greaterThan( 0.0 ).and( this.cloudCoverage.greaterThan( 0.0 ) ), () => {
+
+				// Project to cloud plane (higher elevation = clouds appear lower/closer)
+				const elevation = mix( 1.0, 0.1, this.cloudElevation );
+				const cloudUV = direction.xz.div( direction.y.mul( elevation ) ).toVar();
+				cloudUV.mulAssign( this.cloudScale );
+				cloudUV.addAssign( time.mul( this.cloudSpeed ) );
+
+				// Multi-octave noise for fluffy clouds
+				const cloudNoise = fbm( cloudUV.mul( 1000.0 ) ).add( fbm( cloudUV.mul( 2000.0 ).add( 3.7 ) ).mul( 0.5 ) ).toVar();
+				cloudNoise.assign( cloudNoise.mul( 0.5 ).add( 0.5 ) );
+
+				// Apply coverage threshold
+				const cloudMask = smoothstep( sub( 1.0, this.cloudCoverage ), sub( 1.0, this.cloudCoverage ).add( 0.3 ), cloudNoise ).toVar();
+
+				// Fade clouds near horizon (adjusted by elevation)
+				const horizonFade = smoothstep( 0.0, add( 0.1, mul( 0.2, this.cloudElevation ) ), direction.y );
+				cloudMask.mulAssign( horizonFade );
+
+				// Cloud lighting based on sun position
+				const sunInfluence = dot( direction, vSunDirection ).mul( 0.5 ).add( 0.5 );
+				const daylight = max( 0.0, vSunDirection.y.mul( 2.0 ) );
+
+				// Base cloud color affected by atmosphere
+				const atmosphereColor = Lin.mul( 0.04 );
+				const cloudColor = mix( vec3( 0.3 ), vec3( 1.0 ), daylight ).toVar();
+				cloudColor.assign( mix( cloudColor, atmosphereColor.add( vec3( 1.0 ) ), sunInfluence.mul( 0.5 ) ) );
+				cloudColor.mulAssign( vSunE.mul( 0.00002 ) );
 
-			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) );
+				// Blend clouds with sky
+				texColor.assign( mix( texColor, cloudColor, cloudMask.mul( this.cloudDensity ) ) );
 
-			const retColor = pow( texColor, vec3( float( 1.0 ).div( float( 1.2 ).add( vSunfade.mul( 1.2 ) ) ) ) );
+			} );
 
-			return vec4( retColor, 1.0 );
+			return vec4( texColor, 1.0 );
 
 		} )();
 

package/examples/jsm/objects/Water.js

@@ -1,6 +1,7 @@
 import {
 	Color,
 	FrontSide,
+	HalfFloatType,
 	Matrix4,
 	Mesh,
 	PerspectiveCamera,
@@ -21,9 +22,9 @@ import {
  *
  * References:
  *
- * - [Flat mirror for three.js]{@link https://github.com/Slayvin}
- * - [An implementation of water shader based on the flat mirror]{@link https://home.adelphi.edu/~stemkoski/}
- * - [Water shader explanations in WebGL]{@link http://29a.ch/slides/2012/webglwater/ }
+ * - [Flat mirror for three.js](https://github.com/Slayvin)
+ * - [An implementation of water shader based on the flat mirror](https://home.adelphi.edu/~stemkoski/)
+ * - [Water shader explanations in WebGL](http://29a.ch/slides/2012/webglwater/ )
  *
  * @augments Mesh
  * @three_import import { Water } from 'three/addons/objects/Water.js';
@@ -84,7 +85,7 @@ class Water extends Mesh {
 
 		const mirrorCamera = new PerspectiveCamera();
 
-		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );
+		const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { type: HalfFloatType } );
 
 		const mirrorShader = {
 
@@ -196,10 +197,10 @@ class Water extends Mesh {
 					vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
 
 					float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
-					float rf0 = 0.3;
+					float rf0 = 0.02;
 					float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );
 					vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;
-					vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);
+					vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), reflectionSample + specularLight, reflectance );
 					vec3 outgoingLight = albedo;
 					gl_FragColor = vec4( outgoingLight, alpha );
 

package/examples/jsm/objects/Water2.js

@@ -1,5 +1,5 @@
 import {
-	Clock,
+	Timer,
 	Color,
 	Matrix4,
 	Mesh,
@@ -74,7 +74,7 @@ class Water extends Mesh {
 		const cycle = 0.15; // a cycle of a flow map phase
 		const halfCycle = cycle * 0.5;
 		const textureMatrix = new Matrix4();
-		const clock = new Clock();
+		const timer = new Timer();
 
 		// internal components
 
@@ -180,7 +180,7 @@ class Water extends Mesh {
 
 		function updateFlow() {
 
-			const delta = clock.getDelta();
+			const delta = timer.getDelta();
 			const config = scope.material.uniforms[ 'config' ];
 
 			config.value.x += flowSpeed * delta; // flowMapOffset0
@@ -207,6 +207,8 @@ class Water extends Mesh {
 
 		this.onBeforeRender = function ( renderer, scene, camera ) {
 
+			timer.update();
+
 			updateTextureMatrix( camera );
 			updateFlow();