mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
Added HDR texture example.
This commit is contained in:
alteredq
@@ -0,0 +1,238 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>three.js - HDR texture - webgl</title>
|
||||
<meta charset="utf-8">
|
||||
<style type="text/css">
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
#oldie {
|
||||
font-family:monospace;
|
||||
font-size:13px;
|
||||
|
||||
text-align:center;
|
||||
background:#eee;
|
||||
color:#000;
|
||||
padding:1em;
|
||||
|
||||
width:475px;
|
||||
margin:5em auto 0;
|
||||
|
||||
display:none;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<center>
|
||||
<div id="oldie">
|
||||
Sorry, your browser doesn't support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>
|
||||
and <a href="http://www.whatwg.org/specs/web-workers/current-work/">Web Workers</a>.<br/>
|
||||
<br/>
|
||||
Please try in
|
||||
<a href="http://www.chromium.org/getting-involved/dev-channel">Chrome 9+</a> /
|
||||
<a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 4+</a> /
|
||||
<a href="http://nightly.webkit.org/">Safari OSX 10.6+</a>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
<script type="text/javascript" src="js/Stats.js"></script>
|
||||
<script type="text/javascript" src="../build/ThreeExtras.js"></script>
|
||||
|
||||
|
||||
<!-- HDR fragment shader -->
|
||||
<script id="fs-hdr" type="x-shader/x-fragment">
|
||||
uniform sampler2D tDiffuse;
|
||||
uniform float exposure;
|
||||
|
||||
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(void)
|
||||
{
|
||||
vec4 color = texture2D( tDiffuse, vUv );
|
||||
color.xyz = decode_pnghdr( color );
|
||||
|
||||
// apply gamma correction and exposure
|
||||
gl_FragData[0] = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- HDR vertex shader -->
|
||||
<script id="vs-hdr" type="x-shader/x-vertex">
|
||||
varying vec2 vUv;
|
||||
|
||||
void main(void)
|
||||
{
|
||||
vUv = uv;
|
||||
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
if ( !is_browser_compatible() ) {
|
||||
|
||||
document.getElementById( "oldie" ).style.display = "block";
|
||||
|
||||
}
|
||||
|
||||
var container, stats;
|
||||
|
||||
var camera, scene, renderer, mesh, directionalLight;
|
||||
|
||||
var windowHalfX = window.innerWidth / 2;
|
||||
var windowHalfY = window.innerHeight / 2;
|
||||
|
||||
var materialHDR, quad;
|
||||
|
||||
init();
|
||||
setInterval( loop, 1000 / 60 );
|
||||
|
||||
function init() {
|
||||
|
||||
container = document.getElementById( 'container' );
|
||||
|
||||
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
|
||||
camera.position.z = 900;
|
||||
|
||||
scene = new THREE.Scene();
|
||||
|
||||
directionalLight = new THREE.DirectionalLight( 0xffffff );
|
||||
directionalLight.position.x = 0;
|
||||
directionalLight.position.y = 0;
|
||||
directionalLight.position.z = 1;
|
||||
directionalLight.position.normalize();
|
||||
scene.addLight( directionalLight );
|
||||
|
||||
var texture = ImageUtils.loadTexture( "textures/memorial.png" );
|
||||
texture.min_filter = THREE.LinearFilter;
|
||||
texture.mag_filter = THREE.NearestFilter;
|
||||
|
||||
materialHDR = new THREE.MeshShaderMaterial( {
|
||||
|
||||
uniforms: { tDiffuse: { type: "t", value: 0, texture: texture },
|
||||
exposure: { type: "f", value: 0.125 }
|
||||
},
|
||||
vertex_shader: getText( 'vs-hdr' ),
|
||||
fragment_shader: getText( 'fs-hdr' )
|
||||
|
||||
} );
|
||||
|
||||
var plane = new Plane( 512, 768 );
|
||||
|
||||
quad = new THREE.Mesh( plane, materialHDR );
|
||||
quad.position.z = -100;
|
||||
scene.addObject( 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;
|
||||
}
|
||||
|
||||
var delta, current, old = 0, sign = 1, rate = 1;
|
||||
|
||||
function loop() {
|
||||
|
||||
if ( ! old ) old = new Date().getTime();
|
||||
current = new Date().getTime();
|
||||
delta = (current - old ) * 0.005;
|
||||
old = current;
|
||||
|
||||
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 );
|
||||
|
||||
stats.update();
|
||||
|
||||
}
|
||||
|
||||
function is_browser_compatible() {
|
||||
|
||||
// WebGL support
|
||||
|
||||
try { var test = new Float32Array(1); } catch(e) { return false; }
|
||||
|
||||
// Web workers
|
||||
|
||||
return !!window.Worker;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
Reference in New Issue
Block a user