Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_postprocessing_unreal_bloom_selective.html 7.7 KB
Newer Older
M
r104  
Mr.doob 已提交
1 2 3 4 5 6 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - postprocessing - unreal bloom selective</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
M
r105  
Mr.doob 已提交
7 
		<link type="text/css" rel="stylesheet" href="main.css">
M
r104  
Mr.doob 已提交
8 9 10 11 
	</head>
	<body>

		<div id="info">
M
r113  
Mr.doob 已提交
12 
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> Click on a sphere to toggle bloom<br>By <a href="http://github.com/Temdog007" target="_blank" rel="noopener">Temdog007</a>
M
r104  
Mr.doob 已提交
13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 
		</div>

		<script type="x-shader/x-vertex" id="vertexshader">

			varying vec2 vUv;

			void main() {

				vUv = uv;

				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D baseTexture;
			uniform sampler2D bloomTexture;

			varying vec2 vUv;

			void main() {
M
r118  
Mr.doob 已提交
38 
				gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
M
r104  
Mr.doob 已提交
39 40 41 42 43 

			}

		</script>
M
r106  
Mr.doob 已提交
44 
		<script type="module">
M
Post release fixes.  
Mr.doob 已提交
45
M
r106  
Mr.doob 已提交
46 
			import * as THREE from '../build/three.module.js';
M
r104  
Mr.doob 已提交
47
M
r106  
Mr.doob 已提交
48 49 50 51 52 53 54 55 
			import { GUI } from './jsm/libs/dat.gui.module.js';

			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
			import { ShaderPass } from './jsm/postprocessing/ShaderPass.js';
			import { UnrealBloomPass } from './jsm/postprocessing/UnrealBloomPass.js';
M
r122  
Mr.doob 已提交
56 
			const ENTIRE_SCENE = 0, BLOOM_SCENE = 1;
M
r104  
Mr.doob 已提交
57
M
r122  
Mr.doob 已提交
58 
			const bloomLayer = new THREE.Layers();
M
r104  
Mr.doob 已提交
59 60 
			bloomLayer.set( BLOOM_SCENE );
M
r122  
Mr.doob 已提交
61 
			const params = {
M
r104  
Mr.doob 已提交
62 63 64 65 66 67 68 
				exposure: 1,
				bloomStrength: 5,
				bloomThreshold: 0,
				bloomRadius: 0,
				scene: "Scene with Glow"
			};
M
r122  
Mr.doob 已提交
69 70 
			const darkMaterial = new THREE.MeshBasicMaterial( { color: "black" } );
			const materials = {};
M
r104  
Mr.doob 已提交
71
M
r122  
Mr.doob 已提交
72 
			const renderer = new THREE.WebGLRenderer( { antialias: true } );
M
r104  
Mr.doob 已提交
73 74 75 76 77 
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			renderer.toneMapping = THREE.ReinhardToneMapping;
			document.body.appendChild( renderer.domElement );
M
r122  
Mr.doob 已提交
78 
			const scene = new THREE.Scene();
M
r104  
Mr.doob 已提交
79
M
r122  
Mr.doob 已提交
80 
			const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
M
r104  
Mr.doob 已提交
81 82 83 
			camera.position.set( 0, 0, 20 );
			camera.lookAt( 0, 0, 0 );
M
r122  
Mr.doob 已提交
84 
			const controls = new OrbitControls( camera, renderer.domElement );
M
r104  
Mr.doob 已提交
85 86 87 88 89 90 91 
			controls.maxPolarAngle = Math.PI * 0.5;
			controls.minDistance = 1;
			controls.maxDistance = 100;
			controls.addEventListener( 'change', render );

			scene.add( new THREE.AmbientLight( 0x404040 ) );
M
r122  
Mr.doob 已提交
92 
			const renderScene = new RenderPass( scene, camera );
M
r104  
Mr.doob 已提交
93
M
r122  
Mr.doob 已提交
94 
			const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
M
r104  
Mr.doob 已提交
95 96 97 98 
			bloomPass.threshold = params.bloomThreshold;
			bloomPass.strength = params.bloomStrength;
			bloomPass.radius = params.bloomRadius;
M
r122  
Mr.doob 已提交
99 
			const bloomComposer = new EffectComposer( renderer );
M
r104  
Mr.doob 已提交
100 101 102 103 
			bloomComposer.renderToScreen = false;
			bloomComposer.addPass( renderScene );
			bloomComposer.addPass( bloomPass );
M
r122  
Mr.doob 已提交
104 
			const finalPass = new ShaderPass(
M
r104  
Mr.doob 已提交
105 106 107 108 109 110 111 112 113 114 115 116 
				new THREE.ShaderMaterial( {
					uniforms: {
						baseTexture: { value: null },
						bloomTexture: { value: bloomComposer.renderTarget2.texture }
					},
					vertexShader: document.getElementById( 'vertexshader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
					defines: {}
				} ), "baseTexture"
			);
			finalPass.needsSwap = true;
M
r122  
Mr.doob 已提交
117 
			const finalComposer = new EffectComposer( renderer );
M
r104  
Mr.doob 已提交
118 119 120 
			finalComposer.addPass( renderScene );
			finalComposer.addPass( finalPass );
M
r122  
Mr.doob 已提交
121 
			const raycaster = new THREE.Raycaster();
M
r104  
Mr.doob 已提交
122
M
r122  
Mr.doob 已提交
123 
			const mouse = new THREE.Vector2();
M
r104  
Mr.doob 已提交
124
M
r124  
Mr.doob 已提交
125 
			window.addEventListener( 'pointerdown', onPointerDown, false );
M
r104  
Mr.doob 已提交
126
M
r122  
Mr.doob 已提交
127 
			const gui = new GUI();
M
r104  
Mr.doob 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 

			gui.add( params, 'scene', [ 'Scene with Glow', 'Glow only', 'Scene only' ] ).onChange( function ( value ) {

				switch ( value ) 	{

					case 'Scene with Glow':
						bloomComposer.renderToScreen = false;
						break;
					case 'Glow only':
						bloomComposer.renderToScreen = true;
						break;
					case 'Scene only':
						// nothing to do
						break;

				}

				render();

			} );
M
r122  
Mr.doob 已提交
149 
			const folder = gui.addFolder( 'Bloom Parameters' );
M
r104  
Mr.doob 已提交
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 

			folder.add( params, 'exposure', 0.1, 2 ).onChange( function ( value ) {

				renderer.toneMappingExposure = Math.pow( value, 4.0 );
				render();

			} );

			folder.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {

				bloomPass.threshold = Number( value );
				render();

			} );

			folder.add( params, 'bloomStrength', 0.0, 10.0 ).onChange( function ( value ) {

				bloomPass.strength = Number( value );
				render();

			} );

			folder.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {

				bloomPass.radius = Number( value );
				render();

			} );

			setupScene();
M
r124  
Mr.doob 已提交
181 
			function onPointerDown( event ) {
M
r104  
Mr.doob 已提交
182 183 184 185 186 187 188 

				event.preventDefault();

				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

				raycaster.setFromCamera( mouse, camera );
M
r122  
Mr.doob 已提交
189 
				const intersects = raycaster.intersectObjects( scene.children );
M
r104  
Mr.doob 已提交
190 191 
				if ( intersects.length > 0 ) {
M
r122  
Mr.doob 已提交
192 
					const object = intersects[ 0 ].object;
M
r104  
Mr.doob 已提交
193 194 195 196 197 198 199 200 201 
					object.layers.toggle( BLOOM_SCENE );
					render();

				}

			}

			window.onresize = function () {
M
r122  
Mr.doob 已提交
202 203 
				const width = window.innerWidth;
				const height = window.innerHeight;
M
r104  
Mr.doob 已提交
204 205 206 207 208 209 

				camera.aspect = width / height;
				camera.updateProjectionMatrix();

				renderer.setSize( width, height );
M
r105  
Mr.doob 已提交
210 211 
				bloomComposer.setSize( width, height );
				finalComposer.setSize( width, height );
M
r104  
Mr.doob 已提交
212 213 214 215 216 217 218 219 220 221 

				render();

			};

			function setupScene() {

				scene.traverse( disposeMaterial );
				scene.children.length = 0;
M
r122  
Mr.doob 已提交
222 
				const geometry = new THREE.IcosahedronBufferGeometry( 1, 15 );
M
r104  
Mr.doob 已提交
223
M
r122  
Mr.doob 已提交
224 
				for ( let i = 0; i < 50; i ++ ) {
M
r104  
Mr.doob 已提交
225
M
r122  
Mr.doob 已提交
226 
					const color = new THREE.Color();
M
r104  
Mr.doob 已提交
227 228 
					color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );
M
r122  
Mr.doob 已提交
229 230 
					const material = new THREE.MeshBasicMaterial( { color: color } );
					const sphere = new THREE.Mesh( geometry, material );
M
r105  
Mr.doob 已提交
231 232 233 234 235 236 237 238 
					sphere.position.x = Math.random() * 10 - 5;
					sphere.position.y = Math.random() * 10 - 5;
					sphere.position.z = Math.random() * 10 - 5;
					sphere.position.normalize().multiplyScalar( Math.random() * 4.0 + 2.0 );
					sphere.scale.setScalar( Math.random() * Math.random() + 0.5 );
					scene.add( sphere );

					if ( Math.random() < 0.25 ) sphere.layers.enable( BLOOM_SCENE );
M
r104  
Mr.doob 已提交
239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 

				}

				render();

			}

			function disposeMaterial( obj ) {

				if ( obj.material ) {

					obj.material.dispose();

				}

			}

			function render() {

				switch ( params.scene ) {

					case 'Scene only':
						renderer.render( scene, camera );
						break;
					case 'Glow only':
						renderBloom( false );
						break;
					case 'Scene with Glow':
					default:
						// render scene with bloom
						renderBloom( true );

						// render the entire scene, then render bloom scene on top
						finalComposer.render();
						break;

				}

			}

			function renderBloom( mask ) {

				if ( mask === true ) {

					scene.traverse( darkenNonBloomed );
					bloomComposer.render();
					scene.traverse( restoreMaterial );

				} else {

					camera.layers.set( BLOOM_SCENE );
					bloomComposer.render();
					camera.layers.set( ENTIRE_SCENE );

				}

			}

			function darkenNonBloomed( obj ) {

				if ( obj.isMesh && bloomLayer.test( obj.layers ) === false ) {

					materials[ obj.uuid ] = obj.material;
					obj.material = darkMaterial;

				}

			}

			function restoreMaterial( obj ) {

				if ( materials[ obj.uuid ] ) {

					obj.material = materials[ obj.uuid ];
					delete materials[ obj.uuid ];

				}

			}

		</script>

	</body>

</html>