Skip to content

Commit

Permalink
Merge pull request #14629 from donmccurdy/examples-keyframes-glb
Browse files Browse the repository at this point in the history 
Examples: Update unreal bloom example.
  • Loading branch information
@mrdoob
mrdoob authored Aug 4, 2018
2 parents fb20615 + a0c016e commit 7b9cbb4
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 186 deletions.
Binary file added examples/models/gltf/PrimaryIonDrive.glb
View file
Binary file not shown.
286 changes: 100 additions & 186 deletions examples/webgl_postprocessing_unreal_bloom.html
View file
Original file line number Diff line number Diff line change
@@ -1,223 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>threejs webgl - materials - hdr environment mapping</title>
<title>three.js webgl - postprocessing - unreal bloom</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
color: #fff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
}
a {
color:#00ff78;
background-color: #fff;
margin: 0px;
overflow: hidden;
}

#info {
color: #fff;
position: absolute;
top: 10px;
top: 0px;
width: 100%;
text-align: center;
display:block;
padding: 5px;
}
.dg.ac {
z-index: 1 !important; /* FIX DAT.GUI */
#info p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0 2em;
}
a {
color: #2983ff;
}
</style>
</head>

<body>

<div id="container"></div>

<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
<p>
This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them
with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips this bloom
is better in quality and performance.
</p>
Model: <a href="https://sketchfab.com/models/d3f50a66fee74c6588dd9bc92f7fe7b3" target="_blank" rel="noopener">Primary Ion Drive</a> by
<a href="https://sketchfab.com/indierocktopus" target="_blank" rel="noopener">indierocktopus</a>, CC Attribution.<br/>
Details in <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Art Spotlight</a> blog post.
</div>

<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/RGBELoader.js"></script>
<script src="js/loaders/HDRCubeTextureLoader.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<script src="js/pmrem/PMREMGenerator.js"></script>
<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/loaders/GLTFLoader.js"></script>

<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/shaders/ConvolutionShader.js"></script>
<script src="js/shaders/LuminosityHighPassShader.js"></script>
<script src="js/postprocessing/UnrealBloomPass.js"></script>

<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><br/><br/>
This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur them <br>
with different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips this bloom <br>
is better in quality and performance.<br>
</div>

<script>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var scene, camera, controls, pointLight, stats;
var composer, renderer, mixer;

var container, stats;
var params = {
projection: 'normal',
background: false,
exposure: 0.9,
exposure: 1,
bloomStrength: 1.5,
bloomThreshold: 0.85,
bloomRadius: 0.4
bloomThreshold: 0,
bloomRadius: 0
};
var camera, scene, renderer, controls, objects = [];
var effectFXAA, bloomPass, renderScene;
var hdrCubeMap;
var composer;
var standardMaterial;
var hdrCubeRenderTarget;

init();
animate();

function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0.0, 35, 35 * 3.5 );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x111111 );

renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.LinearToneMapping;

standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
color: 0xffffff,
metalness: 1.0
} );
var clock = new THREE.Clock();
var container = document.getElementById( 'container' );

var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = 0.0;
torusMesh1.castShadow = true;
torusMesh1.receiveShadow = true;
scene.add( torusMesh1 );
objects.push( torusMesh1 );
stats = new Stats();
container.appendChild( stats.dom );

var textureLoader = new THREE.TextureLoader();
textureLoader.load( './textures/roughness_map.jpg', function ( map ) {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ReinhardToneMapping;
container.appendChild( renderer.domElement );

map.wrapS = THREE.RepeatWrapping;
map.wrapT = THREE.RepeatWrapping;
map.anisotropy = 4;
map.repeat.set( 9, 2 );
standardMaterial.roughnessMap = map;
standardMaterial.bumpMap = map;
standardMaterial.needsUpdate = true;
scene = new THREE.Scene();

} );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 5, 2.5, -3.5 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

var genCubeUrls = function ( prefix, postfix ) {
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 0.1;
controls.maxDistance = 20;

return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
scene.add( new THREE.AmbientLight( 0x404040 ) );

};
pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.copy( camera.position );
scene.add( pointLight );

var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
var renderScene = new THREE.RenderPass( scene, camera );

var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
bloomPass.renderToScreen = true;
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;

var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( bloomPass );

hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
new THREE.GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {

} );
var model = gltf.scene;

// Lights
scene.add( model );

scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
// Mesh contains self-intersecting semi-transparent faces, which display
// z-fighting unless depthWrite is disabled.
var core = model.getObjectByName( 'geo1_HoloFillDark_0' );
core.material.depthWrite = false;

var spotLight = new THREE.SpotLight( 0xffffff, 1 );
spotLight.position.set( 50, 100, 50 );
spotLight.angle = Math.PI / 7;
spotLight.penumbra = 0.8;
spotLight.castShadow = true;
scene.add( spotLight );
mixer = new THREE.AnimationMixer( model );
var clip = gltf.animations[ 0 ];
mixer.clipAction( clip.optimize() ).play();

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
animate();

renderScene = new THREE.RenderPass( scene, camera );
} );

effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
var gui = new dat.GUI();

bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 ); //1.0, 9, 0.5, 512);
bloomPass.renderToScreen = true;
gui.add( params, 'exposure', 0.1, 2 );

composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( effectFXAA );
composer.addPass( bloomPass );
gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {

renderer.gammaInput = true;
renderer.gammaOutput = true;
bloomPass.threshold = Number( value );

stats = new Stats();
container.appendChild( stats.dom );
} );

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 50;
controls.maxDistance = 200;
gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {

window.addEventListener( 'resize', onWindowResize, false );
bloomPass.strength = Number( value );

var gui = new dat.GUI();
} );

gui.add( params, 'exposure', 0.1, 2 );
gui.add( params, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {

gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
bloomPass.radius = Number( value );

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

} );

gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {

bloomPass.strength = Number( value );

} );

gui.add( params, 'bloomRadius', 0.0, 1.0 ).onChange( function ( value ) {

bloomPass.radius = Number( value );

} );

gui.open();

}

function onWindowResize() {
window.onresize = function () {

var width = window.innerWidth;
var height = window.innerHeight;
Expand All @@ -227,61 +170,32 @@

renderer.setSize( width, height );
composer.setSize( width, height );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );

}
};

//

function animate() {

requestAnimationFrame( animate );

stats.begin();
render();
stats.end();

}
const delta = clock.getDelta();

function render() {
mixer.update( delta );
controls.update( delta );

if ( standardMaterial !== undefined ) {
pointLight.position.copy( camera.position );

standardMaterial.roughness = 1.0;
standardMaterial.bumpScale = 0.25;

var newEnvMap = standardMaterial.envMap;

if ( hdrCubeRenderTarget ) newEnvMap = hdrCubeRenderTarget.texture;

if ( newEnvMap !== standardMaterial.envMap ) {

standardMaterial.envMap = newEnvMap;
standardMaterial.envMapIntensity = 1;
standardMaterial.needsUpdate = true;

}

}
stats.update();

renderer.toneMappingExposure = Math.pow( params.exposure, 4.0 );

var timer = Date.now() * 0.00025;

camera.lookAt( scene.position );

for ( var i = 0, l = objects.length; i < l; i ++ ) {

var object = objects[ i ];
object.rotation.y += 0.005;

}

composer.render();

}


</script>

</body>

</html>

0 comments on commit 7b9cbb4

Please sign in to comment.