mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-24 12:25:56 +10:00
alteredq
942a6c89c9
Lots of code got cleaner with seconds, seems we used them before all around. Also changed examples that didn't need deltas to simple Date.now() plus some more examples cleaning, trying to get rid of obsolescence warnings.
219 lines
4.7 KiB
HTML
219 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - materials - HDR texture</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 {
|
|
color: #000;
|
|
font-family:Monospace;
|
|
font-size:13px;
|
|
text-align:center;
|
|
font-weight: bold;
|
|
|
|
background-color: #fff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#info {
|
|
color:#000;
|
|
position: absolute;
|
|
top: 0px; width: 100%;
|
|
padding: 5px;
|
|
|
|
}
|
|
|
|
a { color: red; }
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="container"></div>
|
|
<div id="info">
|
|
<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl HDR texture example -
|
|
based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
|
|
</div>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/Detector.js"></script>
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<!-- HDR fragment shader -->
|
|
|
|
<script id="fs-hdr" type="x-shader/x-fragment">
|
|
|
|
uniform sampler2D tDiffuse;
|
|
uniform float exposure;
|
|
uniform float brightMax;
|
|
|
|
varying vec2 vUv;
|
|
|
|
vec3 decode_pnghdr( const in vec4 color ) {
|
|
|
|
// remove gamma correction
|
|
vec4 res = color * color;
|
|
|
|
// decoded RI
|
|
float ri = pow( 2.0, res.w * 32.0 - 16.0 );
|
|
|
|
// decoded HDR pixel
|
|
res.xyz = res.xyz * ri;
|
|
return res.xyz;
|
|
|
|
}
|
|
|
|
void main() {
|
|
|
|
vec4 color = texture2D( tDiffuse, vUv );
|
|
color.xyz = decode_pnghdr( color );
|
|
|
|
// apply gamma correction and exposure
|
|
//gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
|
|
|
|
// Perform tone-mapping
|
|
float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
|
|
float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
|
|
color *= YD;
|
|
|
|
gl_FragColor = vec4( color.xyz, 1.0 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- HDR vertex shader -->
|
|
|
|
<script id="vs-hdr" type="x-shader/x-vertex">
|
|
|
|
varying vec2 vUv;
|
|
|
|
void main() {
|
|
|
|
vUv = uv;
|
|
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
|
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer, mesh, directionalLight;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
var materialHDR, quad;
|
|
|
|
var sign = 1, rate = 1;
|
|
|
|
var clock = new THREE.Clock();
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.getElementById( 'container' );
|
|
|
|
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
camera.position.z = 900;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
|
directionalLight.position.set( 0, 0, 1 ).normalize();
|
|
scene.add( directionalLight );
|
|
|
|
var texture = THREE.ImageUtils.loadTexture( "textures/memorial.png" );
|
|
texture.minFilter = THREE.LinearFilter;
|
|
texture.magFilter = THREE.NearestFilter;
|
|
|
|
materialHDR = new THREE.ShaderMaterial( {
|
|
|
|
uniforms: {
|
|
tDiffuse: { type: "t", value: 0, texture: texture },
|
|
exposure: { type: "f", value: 0.125 },
|
|
brightMax: { type: "f", value: 0.5 }
|
|
},
|
|
vertexShader: getText( 'vs-hdr' ),
|
|
fragmentShader: getText( 'fs-hdr' )
|
|
|
|
} );
|
|
|
|
var plane = new THREE.PlaneGeometry( 512, 768 );
|
|
|
|
quad = new THREE.Mesh( plane, materialHDR );
|
|
quad.position.z = -100;
|
|
scene.add( quad );
|
|
|
|
renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
}
|
|
|
|
function getText( id ) {
|
|
|
|
return document.getElementById( id ).textContent;
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
delta = clock.getDelta() * 5;
|
|
|
|
if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
|
|
|
|
rate = 0.25;
|
|
|
|
} else {
|
|
|
|
rate = 1;
|
|
|
|
}
|
|
|
|
if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
|
|
|
|
sign *= -1;
|
|
|
|
}
|
|
|
|
materialHDR.uniforms.exposure.value += sign * rate * delta;
|
|
|
|
// Render final scene to the screen with film shader
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|