Simplified selective bloom example.

mrdoob · Apr 24, 2019 · 2a174cf · 2a174cf
1 parent 1ecb2d0
commit 2a174cf
Showing 1 changed file with 24 additions and 73 deletions.
diff --git a/examples/webgl_postprocessing_unreal_bloom_selective.html b/examples/webgl_postprocessing_unreal_bloom_selective.html
@@ -100,15 +100,9 @@
 
  var params = {
  exposure: 1,
- bloomStrength: 1.5,
+ bloomStrength: 5,
  bloomThreshold: 0,
  bloomRadius: 0,
- rows: 6,
- columns: 6,
- size: 2,
- zOffset: 5,
- minLightness: 0,
- maxLightness: 0.1,
  scene: "Scene with Glow"
  };
 
@@ -126,7 +120,7 @@
  scene = new THREE.Scene();
 
  camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 200 );
- camera.position.set( 0, 0, 30 );
+ camera.position.set( 0, 0, 20 );
  camera.lookAt( 0, 0, 0 );
 
  controls = new THREE.OrbitControls( camera, renderer.domElement );
@@ -146,7 +140,7 @@
 
  var bloomComposer = new THREE.EffectComposer( renderer );
  bloomComposer.renderToScreen = false;
- bloomComposer.setSize( window.innerWidth, window.innerHeight );
+ bloomComposer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio );
  bloomComposer.addPass( renderScene );
  bloomComposer.addPass( bloomPass );
 
@@ -164,7 +158,7 @@
  finalPass.needsSwap = true;
 
  var finalComposer = new THREE.EffectComposer( renderer );
- finalComposer.setSize( window.innerWidth, window.innerHeight );
+ finalComposer.setSize( window.innerWidth * window.devicePixelRatio, window.innerHeight * window.devicePixelRatio );
  finalComposer.addPass( renderScene );
  finalComposer.addPass( finalPass );
 
@@ -212,7 +206,7 @@
 
  } );
 
- folder.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
+ folder.add( params, 'bloomStrength', 0.0, 10.0 ).onChange( function ( value ) {
 
  bloomPass.strength = Number( value );
  render();
@@ -226,21 +220,7 @@
 
  } );
 
- folder = gui.addFolder( 'Object parameters' );
-
- folder.add( params, 'rows', 1, 20 ).step( 1 ).onChange( setupBoxes );
-
- folder.add( params, 'columns', 1, 20 ).step( 1 ).onChange( setupBoxes );
-
- folder.add( params, 'size', 0.1, 3 ).onChange( setupBoxes );
-
- folder.add( params, 'zOffset', 0, 10 ).onChange( setupBoxes );
-
- folder.add( params, 'minLightness', 0, 1 ).onChange( setupBoxes );
-
- folder.add( params, 'maxLightness', 0, 1 ).onChange( setupBoxes );
-
- setupBoxes();
+ setupScene();
 
  function onDocumentMouseClick( event ) {
 
@@ -271,43 +251,38 @@
 
  renderer.setSize( width, height );
 
- bloomComposer.setSize( width, height );
- finalComposer.setSize( width, height );
+ bloomComposer.setSize( width * window.devicePixelRatio, height * window.devicePixelRatio );
+ finalComposer.setSize( width * window.devicePixelRatio, height * window.devicePixelRatio );
 
  render();
 
  };
 
- function setupBoxes() {
+ function setupScene() {
 
- var columns = params.columns;
- var rows = params.rows;
- var size = params.size;
- var zOffset = params.zOffset;
- var minLightness = params.minLightness;
- var maxLightness = params.maxLightness;
+ var minLightness = 0;
+ var maxLightness = 0.1;
 
  scene.traverse( disposeMaterial );
  scene.children.length = 0;
 
- var hsl = { h: 0, s: 0, l: 0 };
- for ( var x = - columns * size / 2; x < columns * size / 2; x += size ) {
+ var geometry = new THREE.IcosahedronBufferGeometry( 1, 4 );
 
-  for ( var y = - rows * size / 2; y < rows * size / 2; y += size ) {
+ for ( var i = 0; i < 50; i ++ ) {
 
- var color = new THREE.Color( Math.floor( Math.random() * 0xffffff ) );
- color.getHSL( hsl );
- hsl.l = Math.min( Math.max( minLightness, hsl.l ), maxLightness );
- color.setHSL( hsl.h, hsl.s, hsl.l );
+ var color = new THREE.Color();
+ color.setHSL( Math.random(), 0.7, Math.random() * 0.2 + 0.05 );
 
- var box = new THREE.Mesh( getGeometry(), new THREE.MeshBasicMaterial( {
- color: color
- } ) );
- box.position.set( x, y, - zOffset + Math.random() * zOffset * 2 );
- scene.add( box );
- if ( Math.random() < 0.125 ) box.layers.enable( BLOOM_SCENE );
+ var material = new THREE.MeshBasicMaterial( { color: color } );
+ var box = new THREE.Mesh( geometry, material );
+ box.position.x = Math.random() * 10 - 5;
+ box.position.y = Math.random() * 10 - 5;
+ box.position.z = Math.random() * 10 - 5;
+ box.position.normalize().multiplyScalar( Math.random() * 4.0 + 2.0 );
+ box.scale.setScalar( Math.random() * Math.random() + 0.5 );
+ scene.add( box );
 
- }
+ if ( Math.random() < 0.25 ) box.layers.enable( BLOOM_SCENE );
 
  }
 
@@ -325,30 +300,6 @@
 
  }
 
- function getGeometry() {
-
- if ( geometry === undefined ) {
-
- makeGeometry();
-
- } else if ( geometry.parameters.width !== params.size ) {
-
- geometry.dispose();
- makeGeometry();
-
- }
-
- return geometry;
-
- }
-
- function makeGeometry() {
-
- var size = params.size;
- geometry = new THREE.BoxBufferGeometry( size, size, size );
-
- }
-
  function render() {
 
  switch ( params.scene ) {