Examples: Added bloom to ocean examples. (#32680)

Author: mrdoob

examples/screenshots/webgl_shaders_ocean.jpg

@@ -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 );

examples/screenshots/webgpu_ocean.jpg

@@ -36,6 +36,8 @@
 		<script type="module">
 
 			import * as THREE from 'three/webgpu';
+			import { pass } from 'three/tsl';
+			import { bloom } from 'three/addons/tsl/display/BloomNode.js';
 
 			import { Inspector } from 'three/addons/inspector/Inspector.js';
 
@@ -44,8 +46,8 @@
 			import { SkyMesh } from 'three/addons/objects/SkyMesh.js';
 
 			let container;
-			let camera, scene, renderer;
-			let controls, water, sun, mesh;
+			let camera, scene, renderer, postProcessing;
+			let controls, water, sun, mesh, bloomPass;
 
 			init();
 
@@ -60,7 +62,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( render );
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.5;
+				renderer.toneMappingExposure = 0.1;
 				renderer.inspector = new Inspector();
 				container.appendChild( renderer.domElement );
 
@@ -71,6 +73,20 @@
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
 				camera.position.set( 30, 30, 100 );
 
+				// Post-processing
+
+				postProcessing = new THREE.PostProcessing( renderer );
+
+				const scenePass = pass( scene, camera );
+				const scenePassColor = scenePass.getTextureNode( 'output' );
+
+				bloomPass = bloom( scenePassColor );
+				bloomPass.threshold.value = 0;
+				bloomPass.strength.value = 0.1;
+				bloomPass.radius.value = 0;
+
+				postProcessing.outputNode = scenePassColor.add( bloomPass );
+
 				//
 
 				sun = new THREE.Vector3();
@@ -110,7 +126,8 @@
 
 				const parameters = {
 					elevation: 2,
-					azimuth: 180
+					azimuth: 180,
+					exposure: 0.1
 				};
 
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
@@ -164,12 +181,20 @@
 				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;
 
+				} );
 
 				const folderWater = gui.addFolder( 'Water' );
 				folderWater.add( water.distortionScale, 'value', 0, 8, 0.1 ).name( 'distortionScale' );
 				folderWater.add( water.size, 'value', 0.1, 10, 0.1 ).name( 'size' );
 
+				const folderBloom = gui.addFolder( 'Bloom' );
+				folderBloom.add( bloomPass.strength, 'value', 0, 3, 0.01 ).name( 'strength' );
+				folderBloom.add( bloomPass.radius, 'value', 0, 1, 0.01 ).name( 'radius' );
+
 				//
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -193,7 +218,7 @@
 				mesh.rotation.x = time * 0.5;
 				mesh.rotation.z = time * 0.51;
 
-				renderer.render( scene, camera );
+				postProcessing.render();
 
 			}