Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 4b0b147b 编写于 作者: D Don McCurdy
浏览文件
操作

Examples: Use 'PrimaryIonDrive.glb' for bloom example.

上级 afe89065
隐藏空白更改
内联 并排
Showing with 104 addition and 186 deletion
examples/webgl_postprocessing_unreal_bloom.html
浏览文件 @ 4b0b147b
<!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;
width: 100%;
text-align: center;
display:block;
top: 0px; width: 100%;
padding: 5px;
}
#info p {
max-width: 600px;
margin-left: auto;
margin-right: auto;
padding: 0 2em;
margin-top: 2em;
}
.dg.ac {
z-index: 1 !important; /* FIX DAT.GUI */
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><br/><br/>
<div id="info">
<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/>
<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 );
var clock = new THREE.Clock();
var container = document.getElementById( 'container' );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x111111 );
stats = new Stats();
container.appendChild( stats.dom );
renderer = new THREE.WebGLRenderer();
renderer.toneMapping = THREE.LinearToneMapping;
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ReinhardToneMapping;
container.appendChild( renderer.domElement );
standardMaterial = new THREE.MeshStandardMaterial( {
map: null,
color: 0xffffff,
metalness: 1.0
} );
scene = new THREE.Scene();
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 );
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 textureLoader = new THREE.TextureLoader();
textureLoader.load( './textures/roughness_map.jpg', function ( map ) {
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 0.1;
controls.maxDistance = 20;
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.add( new THREE.AmbientLight( 0x404040 ) );
} );
pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.copy( camera.position );
scene.add( pointLight );
var genCubeUrls = function ( prefix, postfix ) {
var renderScene = new THREE.RenderPass( scene, camera );
return [
prefix + 'px' + postfix, prefix + 'nx' + postfix,
prefix + 'py' + postfix, prefix + 'ny' + postfix,
prefix + 'pz' + postfix, prefix + 'nz' + postfix
];
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;
};
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( bloomPass );
var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
new THREE.GLTFLoader().load( 'models/gltf/PrimaryIonDrive.glb', function ( gltf ) {
var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
pmremGenerator.update( renderer );
var model = gltf.scene;
var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
pmremCubeUVPacker.update( renderer );
scene.add( model );
hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
// 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;
} );
mixer = new THREE.AnimationMixer( model );
var clip = gltf.animations[ 0 ];
mixer.clipAction( clip.optimize() ).play();
// Lights
animate();
scene.add( new THREE.AmbientLight( 0xffffff, 0.1 ) );
} );
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 );
var gui = new dat.GUI();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
container.appendChild( renderer.domElement );
gui.add( params, 'exposure', 0.1, 2 );
renderScene = new THREE.RenderPass( scene, camera );
gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( value ) {
effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
effectFXAA.uniforms[ 'resolution' ].value.set( 1 / window.innerWidth, 1 / window.innerHeight );
bloomPass.threshold = Number( value );
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;
} );
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );
composer.addPass( renderScene );
composer.addPass( effectFXAA );
composer.addPass( bloomPass );
gui.add( params, 'bloomStrength', 0.0, 3.0 ).onChange( function ( value ) {
renderer.gammaInput = true;
renderer.gammaOutput = true;
bloomPass.strength = 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, 'bloomRadius', 0.0, 1.0 ).step( 0.01 ).onChange( function ( value ) {
window.addEventListener( 'resize', onWindowResize, false );
bloomPass.radius = Number( value );
var gui = new dat.GUI();
} );
gui.add( params, 'exposure', 0.1, 2 );
gui.open();
gui.add( params, 'bloomThreshold', 0.0, 1.0 ).onChange( function ( 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;
......@@ -227,61 +174,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();
}
mixer.update( delta );
controls.update( delta );
function render() {
pointLight.position.copy( camera.position );
if ( standardMaterial !== undefined ) {
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>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或