Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Added HDR texture example.

alteredq 14 years ago
parent
3e36fed048
commit
8f133abd30
2 changed files with 238 additions and 0 deletions
Split View Show Diff Stats
  1. 238 0
      examples/hdr.html
  2. BIN
      examples/textures/memorial.png

+ 238 - 0
examples/hdr.html
View File 

@@ -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>

BIN
examples/textures/memorial.png
View File