mrdoob · mrdoob · Nov 21, 2025 · Nov 21, 2025 · Nov 21, 2025 · Mugen87
diff --git a/examples/jsm/objects/Sky.js b/examples/jsm/objects/Sky.js
@@ -93,16 +93,11 @@ Sky.SkyShader = {
 		const float e = 2.71828182845904523536028747135266249775724709369995957;
 		const float pi = 3.141592653589793238462643383279502884197169;
 
-		// wavelength of used primaries, according to preetham
-		const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );
 		// 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 );
 
 		// mie stuff
-		// K coefficient for the primaries
-		const float v = 4.0;
-		const vec3 K = vec3( 0.686, 0.678, 0.666 );
 		// MieConst = pi * pow( ( 2.0 * pi ) / lambda, vec3( v - 2.0 ) ) * K
 		const vec3 MieConst = vec3( 1.8399918514433978E14, 2.7798023919660528E14, 4.0790479543861094E14 );
 
@@ -134,7 +129,7 @@ Sky.SkyShader = {
 
 			vSunE = sunIntensity( dot( vSunDirection, up ) );
 
-			vSunfade = 1.0 - clamp( 1.0 - exp( ( sunPosition.y / 450000.0 ) ), 0.0, 1.0 );
+			vSunfade = 1.0 - clamp( 1.0 - exp( dot( vSunDirection, up ) ), 0.0, 1.0 );
 
 			float rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );
 
@@ -161,9 +156,6 @@ Sky.SkyShader = {
 		// constants for atmospheric scattering
 		const float pi = 3.141592653589793238462643383279502884197169;
 
-		const float n = 1.0003; // refractive index of air
-		const float N = 2.545E25; // number of molecules per unit volume for air at 288.15K and 1013mb (sea level -45 celsius)
-
 		// optical length at zenith for molecules
 		const float rayleighZenithLength = 8.4E3;
 		const float mieZenithLength = 1.25E3;
@@ -221,11 +213,9 @@ Sky.SkyShader = {
 			float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );
 			L0 += ( vSunE * 19000.0 * Fex ) * sundisk;
 
-			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 ) ) ) );
+			vec3 texColor = ( Lin + L0 );
 
-			gl_FragColor = vec4( retColor, 1.0 );
+			gl_FragColor = vec4( texColor, 1.0 );
 
 			#include <tonemapping_fragment>
 			#include <colorspace_fragment>

diff --git a/examples/jsm/objects/SkyMesh.js b/examples/jsm/objects/SkyMesh.js
@@ -148,7 +148,7 @@ class SkyMesh extends Mesh {
 
 			// varying sun fade
 
-			const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( this.sunPosition.y.div( 450000.0 ) ) ), 0, 1 ) );
+			const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( dot( sunDirection, this.upUniform ) ) ), 0, 1 ) );
 			vSunfade.assign( sunfade );
 
 			// varying vBetaR
@@ -232,11 +232,9 @@ class SkyMesh extends Mesh {
 			const sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta );
 			L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisk ) );
 
-			const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) );
+			const texColor = add( Lin, L0 );
 
-			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 );
 
 		} )();
 

diff --git a/examples/jsm/objects/Water.js b/examples/jsm/objects/Water.js
@@ -10,7 +10,9 @@ import {
 	UniformsUtils,
 	Vector3,
 	Vector4,
-	WebGLRenderTarget
+
+	WebGLRenderTarget,
+	HalfFloatType
 } from 'three';
 
 /**
@@ -84,7 +86,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 = {
 
@@ -193,19 +195,19 @@ class Water extends Mesh {
 					float distance = length(worldToEye);
 
 					vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;
-					vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
+					vec3 reflectionSample = vec3( texture2D( mirrorSampler, clamp( mirrorCoord.xy / mirrorCoord.w + distortion, 0.0, 1.0 ) ) );
 
 					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 );
 
 					#include <tonemapping_fragment>
 					#include <colorspace_fragment>
-					#include <fog_fragment>	
+					#include <fog_fragment>
 				}`
 
 		};

diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js
@@ -2,7 +2,7 @@ import {
 	Color,
 	Mesh,
 	Vector3,
-	MeshLambertNodeMaterial
+	MeshBasicNodeMaterial
 } 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';
@@ -32,7 +32,7 @@ class WaterMesh extends Mesh {
 	 */
 	constructor( geometry, options ) {
 
-		const material = new MeshLambertNodeMaterial();
+		const material = new MeshBasicNodeMaterial();
 
 		super( geometry, material );
 
@@ -166,10 +166,10 @@ class WaterMesh extends Mesh {
 			this.add( mirrorSampler.target );
 
 			const theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
-			const rf0 = float( 0.3 );
+			const rf0 = float( 0.02 );
 			const reflectance = mul( pow( float( 1.0 ).sub( theta ), 5.0 ), float( 1.0 ).sub( rf0 ) ).add( rf0 );
 			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 );
+			const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.add( specularLight ), reflectance );
 
 			return albedo;
 

diff --git a/examples/screenshots/webgl_shaders_ocean.jpg b/examples/screenshots/webgl_shaders_ocean.jpg
diff --git a/examples/screenshots/webgl_shaders_sky.jpg b/examples/screenshots/webgl_shaders_sky.jpg
diff --git a/examples/screenshots/webgpu_ocean.jpg b/examples/screenshots/webgpu_ocean.jpg
diff --git a/examples/screenshots/webgpu_sky.jpg b/examples/screenshots/webgpu_sky.jpg
diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html
@@ -45,12 +45,12 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.5;
+				renderer.toneMappingExposure = 0.0025;
 				container.appendChild( renderer.domElement );
 
 				//
@@ -99,12 +99,12 @@
 				const skyUniforms = sky.material.uniforms;
 
 				skyUniforms[ 'turbidity' ].value = 10;
-				skyUniforms[ 'rayleigh' ].value = 2;
+				skyUniforms[ 'rayleigh' ].value = 1;
 				skyUniforms[ 'mieCoefficient' ].value = 0.005;
 				skyUniforms[ 'mieDirectionalG' ].value = 0.8;
 
 				const parameters = {
-					elevation: 2,
+					elevation: 15,
 					azimuth: 180
 				};
 

diff --git a/examples/webgl_shaders_sky.html b/examples/webgl_shaders_sky.html
@@ -104,7 +104,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.5;
+				renderer.toneMappingExposure = 0.0025;
 				document.body.appendChild( renderer.domElement );
 
 				const controls = new OrbitControls( camera, renderer.domElement );

diff --git a/examples/webgpu_ocean.html b/examples/webgpu_ocean.html
@@ -55,12 +55,12 @@
 
 				//
 
-				renderer = new THREE.WebGPURenderer();
+				renderer = new THREE.WebGPURenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.5;
+				renderer.toneMappingExposure = 0.0025;
 				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
 
@@ -104,12 +104,12 @@
 				scene.add( sky );
 
 				sky.turbidity.value = 10;
-				sky.rayleigh.value = 2;
+				sky.rayleigh.value = 1;
 				sky.mieCoefficient.value = 0.005;
 				sky.mieDirectionalG.value = 0.8;
 
 				const parameters = {
-					elevation: 2,
+					elevation: 15,
 					azimuth: 180
 				};
 

diff --git a/examples/webgpu_sky.html b/examples/webgpu_sky.html
@@ -111,7 +111,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.5;
+				renderer.toneMappingExposure = 0.0025;
 				renderer.inspector = new Inspector();
 				document.body.appendChild( renderer.domElement );