Skip to content

Commit d116c6d

Browse files
mrdoobmrdoob
committed
Sky & Water: Improve physical accuracy and HDR support.
1 parent bd2462f commit d116c6d

File tree

8 files changed

+24
-34
lines changed

8 files changed

+24
-34
lines changed

‎examples/jsm/objects/Sky.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -93,16 +93,11 @@ Sky.SkyShader = {
9393
const float e = 2.71828182845904523536028747135266249775724709369995957;
9494
const float pi = 3.141592653589793238462643383279502884197169;
9595
96-
// wavelength of used primaries, according to preetham
97-
const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );
9896
// this pre-calculation replaces older TotalRayleigh(vec3 lambda) function:
9997
// (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))
10098
const vec3 totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );
10199
102100
// mie stuff
103-
// K coefficient for the primaries
104-
const float v = 4.0;
105-
const vec3 K = vec3( 0.686, 0.678, 0.666 );
106101
// MieConst = pi * pow( ( 2.0 * pi ) / lambda, vec3( v - 2.0 ) ) * K
107102
const vec3 MieConst = vec3( 1.8399918514433978E14, 2.7798023919660528E14, 4.0790479543861094E14 );
108103
@@ -134,7 +129,7 @@ Sky.SkyShader = {
134129
135130
vSunE = sunIntensity( dot( vSunDirection, up ) );
136131
137-
vSunfade = 1.0 - clamp( 1.0 - exp( ( sunPosition.y / 450000.0 ) ), 0.0, 1.0 );
132+
vSunfade = 1.0 - clamp( 1.0 - exp( dot( vSunDirection, up ) ), 0.0, 1.0 );
138133
139134
float rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );
140135
@@ -161,9 +156,6 @@ Sky.SkyShader = {
161156
// constants for atmospheric scattering
162157
const float pi = 3.141592653589793238462643383279502884197169;
163158
164-
const float n = 1.0003; // refractive index of air
165-
const float N = 2.545E25; // number of molecules per unit volume for air at 288.15K and 1013mb (sea level -45 celsius)
166-
167159
// optical length at zenith for molecules
168160
const float rayleighZenithLength = 8.4E3;
169161
const float mieZenithLength = 1.25E3;
@@ -221,11 +213,9 @@ Sky.SkyShader = {
221213
float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );
222214
L0 += ( vSunE * 19000.0 * Fex ) * sundisk;
223215
224-
vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );
225-
226-
vec3 retColor = pow( texColor, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );
216+
vec3 texColor = ( Lin + L0 );
227217
228-
gl_FragColor = vec4( retColor, 1.0 );
218+
gl_FragColor = vec4( texColor, 1.0 );
229219
230220
#include <tonemapping_fragment>
231221
#include <colorspace_fragment>

‎examples/jsm/objects/SkyMesh.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ class SkyMesh extends Mesh {
148148

149149
// varying sun fade
150150

151-
const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( this.sunPosition.y.div( 450000.0 ) ) ), 0, 1 ) );
151+
const sunfade = float( 1.0 ).sub( clamp( float( 1.0 ).sub( exp( dot( sunDirection, this.upUniform ) ) ), 0, 1 ) );
152152
vSunfade.assign( sunfade );
153153

154154
// varying vBetaR
@@ -232,11 +232,9 @@ class SkyMesh extends Mesh {
232232
const sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos.add( 0.00002 ), cosTheta );
233233
L0.addAssign( vSunE.mul( 19000.0 ).mul( Fex ).mul( sundisk ) );
234234

235-
const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) );
235+
const texColor = add( Lin, L0 );
236236

237-
const retColor = pow( texColor, vec3( float( 1.0 ).div( float( 1.2 ).add( vSunfade.mul( 1.2 ) ) ) ) );
238-
239-
return vec4( retColor, 1.0 );
237+
return vec4( texColor, 1.0 );
240238

241239
} )();
242240

‎examples/jsm/objects/Water.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ import {
1010
UniformsUtils,
1111
Vector3,
1212
Vector4,
13-
WebGLRenderTarget
13+
14+
WebGLRenderTarget,
15+
HalfFloatType
1416
} from 'three';
1517

1618
/**
@@ -84,7 +86,7 @@ class Water extends Mesh {
8486

8587
const mirrorCamera = new PerspectiveCamera();
8688

87-
const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight );
89+
const renderTarget = new WebGLRenderTarget( textureWidth, textureHeight, { type: HalfFloatType } );
8890

8991
const mirrorShader = {
9092

@@ -193,19 +195,19 @@ class Water extends Mesh {
193195
float distance = length(worldToEye);
194196
195197
vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;
196-
vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
198+
vec3 reflectionSample = vec3( texture2D( mirrorSampler, clamp( mirrorCoord.xy / mirrorCoord.w + distortion, 0.0, 1.0 ) ) );
197199
198200
float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
199-
float rf0 = 0.3;
201+
float rf0 = 0.02;
200202
float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );
201203
vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;
202-
vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);
204+
vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( reflectionSample + specularLight ), reflectance);
203205
vec3 outgoingLight = albedo;
204206
gl_FragColor = vec4( outgoingLight, alpha );
205207
206208
#include <tonemapping_fragment>
207209
#include <colorspace_fragment>
208-
#include <fog_fragment>
210+
#include <fog_fragment>
209211
}`
210212

211213
};

‎examples/jsm/objects/WaterMesh.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
Color,
33
Mesh,
44
Vector3,
5-
MeshLambertNodeMaterial
5+
MeshBasicNodeMaterial
66
} from 'three/webgpu';
77

88
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 {
3232
*/
3333
constructor( geometry, options ) {
3434

35-
const material = new MeshLambertNodeMaterial();
35+
const material = new MeshBasicNodeMaterial();
3636

3737
super( geometry, material );
3838

@@ -166,10 +166,10 @@ class WaterMesh extends Mesh {
166166
this.add( mirrorSampler.target );
167167

168168
const theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
169-
const rf0 = float( 0.3 );
169+
const rf0 = float( 0.02 );
170170
const reflectance = mul( pow( float( 1.0 ).sub( theta ), 5.0 ), float( 1.0 ).sub( rf0 ) ).add( rf0 );
171171
const scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ).mul( this.waterColor );
172-
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 );
172+
const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.add( specularLight ), reflectance );
173173

174174
return albedo;
175175

‎examples/webgl_shaders_ocean.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@
4545

4646
//
4747

48-
renderer = new THREE.WebGLRenderer();
48+
renderer = new THREE.WebGLRenderer( { antialias: true } );
4949
renderer.setPixelRatio( window.devicePixelRatio );
5050
renderer.setSize( window.innerWidth, window.innerHeight );
5151
renderer.setAnimationLoop( animate );
5252
renderer.toneMapping = THREE.ACESFilmicToneMapping;
53-
renderer.toneMappingExposure = 0.5;
53+
renderer.toneMappingExposure = 0.0025;
5454
container.appendChild( renderer.domElement );
5555

5656
//

‎examples/webgl_shaders_sky.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
renderer.setPixelRatio( window.devicePixelRatio );
105105
renderer.setSize( window.innerWidth, window.innerHeight );
106106
renderer.toneMapping = THREE.ACESFilmicToneMapping;
107-
renderer.toneMappingExposure = 0.5;
107+
renderer.toneMappingExposure = 0.0025;
108108
document.body.appendChild( renderer.domElement );
109109

110110
const controls = new OrbitControls( camera, renderer.domElement );

‎examples/webgpu_ocean.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@
5555

5656
//
5757

58-
renderer = new THREE.WebGPURenderer();
58+
renderer = new THREE.WebGPURenderer( { antialias: true } );
5959
renderer.setPixelRatio( window.devicePixelRatio );
6060
renderer.setSize( window.innerWidth, window.innerHeight );
6161
renderer.setAnimationLoop( render );
6262
renderer.toneMapping = THREE.ACESFilmicToneMapping;
63-
renderer.toneMappingExposure = 0.5;
63+
renderer.toneMappingExposure = 0.0025;
6464
renderer.inspector = new Inspector();
6565
container.appendChild( renderer.domElement );
6666

‎examples/webgpu_sky.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
renderer.setSize( window.innerWidth, window.innerHeight );
112112
renderer.setAnimationLoop( animate );
113113
renderer.toneMapping = THREE.ACESFilmicToneMapping;
114-
renderer.toneMappingExposure = 0.5;
114+
renderer.toneMappingExposure = 0.0025;
115115
renderer.inspector = new Inspector();
116116
document.body.appendChild( renderer.domElement );
117117

0 commit comments

Comments
 (0)