javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
							<!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;
		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(void)
		{
			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(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 },
								brightMax: { type: "f", value: 0.5 }
							  },
                    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>