diff --git a/examples/jsm/objects/Sky.js b/examples/jsm/objects/Sky.js index d18a396efc4266..d5429971c95a79 100644 --- 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 #include diff --git a/examples/jsm/objects/SkyMesh.js b/examples/jsm/objects/SkyMesh.js index 49b213e48214ce..e25afc701b5d27 100644 --- 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 index 61853a4b81f3c4..c3c32b55f4d756 100644 --- 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 #include - #include + #include }` }; diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 18458e53e55091..00631f19055023 100644 --- 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 index 3ef3e57b7bb885..7a8be524ff178b 100644 Binary files a/examples/screenshots/webgl_shaders_ocean.jpg and b/examples/screenshots/webgl_shaders_ocean.jpg differ diff --git a/examples/screenshots/webgl_shaders_sky.jpg b/examples/screenshots/webgl_shaders_sky.jpg index d474d6616e74fd..20351340ecfde8 100644 Binary files a/examples/screenshots/webgl_shaders_sky.jpg and b/examples/screenshots/webgl_shaders_sky.jpg differ diff --git a/examples/screenshots/webgpu_ocean.jpg b/examples/screenshots/webgpu_ocean.jpg index d0c16c5f27f3cf..efddb1bf2b10d1 100644 Binary files a/examples/screenshots/webgpu_ocean.jpg and b/examples/screenshots/webgpu_ocean.jpg differ diff --git a/examples/screenshots/webgpu_sky.jpg b/examples/screenshots/webgpu_sky.jpg index 590ee1df9ba6be..0a1fa3e9beea54 100644 Binary files a/examples/screenshots/webgpu_sky.jpg and b/examples/screenshots/webgpu_sky.jpg differ diff --git a/examples/webgl_shaders_ocean.html b/examples/webgl_shaders_ocean.html index fbac83ec291162..1b1b896927ea9c 100644 --- 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 index 817aa1d1eb0d4f..26858559cb05b8 100644 --- 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 index e056b31cabde50..014765b25c08be 100644 --- 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 index 6610da08086276..57ec2b94095e5f 100644 --- 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 );