diff --git a/examples/jsm/objects/Sky.js b/examples/jsm/objects/Sky.js index d18a396efc4266..b38759a8825081 100644 --- a/examples/jsm/objects/Sky.js +++ b/examples/jsm/objects/Sky.js @@ -150,7 +150,6 @@ Sky.SkyShader = { fragmentShader: /* glsl */` varying vec3 vWorldPosition; varying vec3 vSunDirection; - varying float vSunfade; varying vec3 vBetaR; varying vec3 vBetaM; varying float vSunE; @@ -223,9 +222,7 @@ Sky.SkyShader = { 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 ) ) ) ); - - 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..466ec571346083 100644 --- a/examples/jsm/objects/SkyMesh.js +++ b/examples/jsm/objects/SkyMesh.js @@ -105,7 +105,6 @@ class SkyMesh extends Mesh { const vSunDirection = varyingProperty( 'vec3' ); const vSunE = varyingProperty( 'float' ); - const vSunfade = varyingProperty( 'float' ); const vBetaR = varyingProperty( 'vec3' ); const vBetaM = varyingProperty( 'vec3' ); @@ -146,10 +145,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 @@ -234,9 +232,7 @@ class SkyMesh extends Mesh { const texColor = add( Lin, L0 ).mul( 0.04 ).add( vec3( 0.0, 0.0003, 0.00075 ) ); - 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..8575cb9c99291e 100644 --- a/examples/jsm/objects/Water.js +++ b/examples/jsm/objects/Water.js @@ -1,6 +1,7 @@ import { Color, FrontSide, + HalfFloatType, Matrix4, Mesh, PerspectiveCamera, @@ -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 ); diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 18458e53e55091..fd756adc8b4d88 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -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..a25240c49948f4 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..f7fcbcf2d635f5 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..7dfcae264c3d2b 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..09f3b0728fe89e 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..3b11646bcb092d 100644 --- a/examples/webgl_shaders_ocean.html +++ b/examples/webgl_shaders_ocean.html @@ -32,10 +32,11 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { Water } from 'three/addons/objects/Water.js'; import { Sky } from 'three/addons/objects/Sky.js'; + import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; let container, stats; let camera, scene, renderer; - let controls, water, sun, mesh; + let controls, water, sun, mesh, bloomPass; init(); @@ -45,14 +46,20 @@ // - renderer = new THREE.WebGLRenderer(); + renderer = new THREE.WebGLRenderer( { outputBufferType: THREE.HalfFloatType } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setAnimationLoop( animate ); renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.toneMappingExposure = 0.5; + renderer.toneMappingExposure = 0.1; container.appendChild( renderer.domElement ); + bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ) ); + bloomPass.threshold = 0; + bloomPass.strength = 0.1; + bloomPass.radius = 0; + renderer.setEffects( [ bloomPass ] ); + // scene = new THREE.Scene(); @@ -105,7 +112,8 @@ const parameters = { elevation: 2, - azimuth: 180 + azimuth: 180, + exposure: 0.1 }; const pmremGenerator = new THREE.PMREMGenerator( renderer ); @@ -164,6 +172,11 @@ const folderSky = gui.addFolder( 'Sky' ); folderSky.add( parameters, 'elevation', 0, 90, 0.1 ).onChange( updateSun ); folderSky.add( parameters, 'azimuth', - 180, 180, 0.1 ).onChange( updateSun ); + folderSky.add( parameters, 'exposure', 0, 1, 0.0001 ).onChange( function ( value ) { + + renderer.toneMappingExposure = value; + + } ); folderSky.open(); const waterUniforms = water.material.uniforms; @@ -173,6 +186,11 @@ folderWater.add( waterUniforms.size, 'value', 0.1, 10, 0.1 ).name( 'size' ); folderWater.open(); + const folderBloom = gui.addFolder( 'Bloom' ); + folderBloom.add( bloomPass, 'strength', 0, 3, 0.01 ); + folderBloom.add( bloomPass, 'radius', 0, 1, 0.01 ); + folderBloom.open(); + // window.addEventListener( 'resize', onWindowResize ); diff --git a/examples/webgpu_ocean.html b/examples/webgpu_ocean.html index e056b31cabde50..2df49543c57530 100644 --- a/examples/webgpu_ocean.html +++ b/examples/webgpu_ocean.html @@ -36,6 +36,8 @@