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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>three.js - postprocessing - 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 postprocessing example -
			<a href="http://www.ir-ltd.net/infinite-3d-head-scan-released/" target="_blank">Lee Perry-Smith</a> head
		</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>

		<!-- Time modulated procedural color fragment shader -->
        <script id="fs-colors" type="x-shader/x-fragment">
			varying vec2 vUv;
			uniform float time;
			
            void main(void)
            {
                gl_FragColor = vec4( time, vUv.x, vUv.y, 1.0 );
            }
        </script>

		<!-- Generic vertex shader -->
        <script id="vs-generic" type="x-shader/x-vertex">
            varying vec2 vUv;

            void main()
            {
               vUv = vec2( uv.x, 1.0 - uv.y );
			   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 cameraOrtho, cameraPerspective, sceneModel, sceneScreen, sceneBG, renderer, mesh, directionalLight;
			
			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
			
            var rtTexture, materialColor, materialScreen, materialFilm, materialConvolution, blurx, blury, quadBG, quadScreen;

            init();
            setInterval( loop, 1000 / 60 );

            function init() {

                container = document.getElementById( 'container' );

                cameraOrtho = new THREE.Camera();
				cameraOrtho.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
                cameraOrtho.position.z = 100;

				cameraPerspective = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
				cameraPerspective.position.z = 900;

                sceneModel = new THREE.Scene();
				sceneScreen = new THREE.Scene();
				sceneBG = new THREE.Scene();

				directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.x = 0;
				directionalLight.position.y = 0;
				directionalLight.position.z = 1;
				directionalLight.position.normalize();
				sceneModel.addLight( directionalLight );

                rtTexture1 = new THREE.RenderTarget( window.innerWidth, window.innerHeight, { min_filter: THREE.LinearFilter, mag_filter: THREE.NearestFilter } );
                rtTexture2 = new THREE.RenderTarget( 256, 512, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );
                rtTexture3 = new THREE.RenderTarget( 512, 256, { min_filter: THREE.LinearFilter, mag_filter: THREE.LinearFilter } );

                materialColor = new THREE.MeshShaderMaterial( {

                    uniforms: { time: { type: "f", value: 0.0 } },
                    vertex_shader: getText( 'vs-generic' ),
                    fragment_shader: getText( 'fs-colors' )

                } );

				var screen_shader = ShaderUtils.lib["screen"];
				var screen_uniforms = Uniforms.clone( screen_shader.uniforms );
				
				screen_uniforms["tDiffuse"].texture = rtTexture1;
				screen_uniforms["opacity"].value = 0.4;
				
                materialScreen = new THREE.MeshShaderMaterial( {

                    uniforms: screen_uniforms,
                    vertex_shader: screen_shader.vertex_shader,
                    fragment_shader: screen_shader.fragment_shader,
					blending: THREE.AdditiveBlending

                } );

				var film_shader = ShaderUtils.lib["film"];
				var film_uniforms = Uniforms.clone( film_shader.uniforms );
				
				film_uniforms["tDiffuse"].texture = rtTexture1;
				
                materialFilm = new THREE.MeshShaderMaterial( {

                    uniforms: film_uniforms,
                    vertex_shader: film_shader.vertex_shader,
                    fragment_shader: film_shader.fragment_shader

                } );


				var increment = 0.001953125;
				
				blurx = new THREE.Vector2( increment, 0.0 ),
				blury = new THREE.Vector2( 0.0, increment );
				
				var convolution_shader = ShaderUtils.lib["convolution"];
				var convolution_uniforms = Uniforms.clone( convolution_shader.uniforms );
				
				convolution_uniforms["tDiffuse"].texture = rtTexture1;
				convolution_uniforms["uImageIncrement"].value = blurx;
				convolution_uniforms["cKernel"].value = ShaderUtils.buildKernel( 4.0 );
				
                materialConvolution = new THREE.MeshShaderMaterial( {

                    uniforms: convolution_uniforms,
                    vertex_shader: convolution_shader.vertex_shader,
                    fragment_shader: convolution_shader.fragment_shader

                } );

				var plane = new Plane( window.innerWidth, window.innerHeight );
				
                quadBG = new THREE.Mesh( plane, materialColor );
				quadBG.position.z = -500;
                sceneBG.addObject( quadBG );

				loader = new THREE.Loader( true );
				document.body.appendChild( loader.statusDomElement );
				loader.loadAscii( { model: "obj/leeperrysmith/LeePerrySmith.js", callback: function( geometry ) { createMesh( geometry, sceneModel, 100 ) } } );
				
                quadScreen = new THREE.Mesh( plane, materialConvolution );
				quadScreen.position.z = -100;
                sceneScreen.addObject( quadScreen );

                renderer = new THREE.WebGLRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.autoClear = false;
                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 createMesh( geometry, scene, scale ) {

				geometry.computeTangents();
				
				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;

				var shader = ShaderUtils.lib[ "normal" ];
				var uniforms = Uniforms.clone( shader.uniforms );
 
				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
				uniforms[ "uNormalScale" ].value = - 0.75;

				uniforms[ "tDiffuse" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );

				uniforms[ "enableAO" ].value = false;
				uniforms[ "enableDiffuse" ].value = true;

				uniforms[ "uPointLightPos" ].value = new THREE.Vector3(0,0,0);
				uniforms[ "uPointLightColor" ].value = new THREE.Color(1,0,0);

				uniforms[ "uDirLightPos" ].value = directionalLight.position;
				uniforms[ "uDirLightColor" ].value = directionalLight.color;

				uniforms[ "uAmbientLightColor" ].value = new THREE.Color(0,0,0);

				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
				uniforms[ "uSpecularColor" ].value.setHex( specular );
				uniforms[ "uAmbientColor" ].value.setHex( ambient );

				uniforms[ "uShininess" ].value = shininess;

				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
				var mat2 = new THREE.MeshShaderMaterial( parameters );
				
				mesh = new THREE.Mesh( geometry, mat2 );
				mesh.position.x = 0;
				mesh.position.y = -50;
				mesh.position.z = 0;
				mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
				mesh.updateMatrix();
				scene.addObject( mesh );
				
				loader.statusDomElement.style.display = "none";

			}

			var delta = 0.01;
			var start = 0;
			
            function loop() {

				if ( ! start ) start = new Date().getTime();
				var time = ( new Date().getTime() - start ) * 0.0004;

				if ( mesh  ) {
				
					mesh.rotation.y = -time;

				}
				
				if ( materialColor.uniforms.time.value > 1 || materialColor.uniforms.time.value < 0 ) {
				
					delta *= -1;
					
				}
					
				materialColor.uniforms.time.value += delta/2;
				materialFilm.uniforms.time.value += delta;
				
				renderer.clear();
				
				// Render scene into texture
				
				// background 
				
				renderer.context.disable( renderer.context.DEPTH_TEST );
				renderer.render( sceneBG, cameraOrtho, rtTexture1 );
				renderer.context.enable( renderer.context.DEPTH_TEST );
				
				// model
				
                renderer.render( sceneModel, cameraPerspective, rtTexture1 );

				// Render quad with blured scene into texture (convolution pass 1)
				
				quadScreen.materials = [ materialConvolution ];
				materialConvolution.uniforms.tDiffuse.texture = rtTexture1;
				materialConvolution.uniforms.uImageIncrement.value = blurx;
				renderer.render( sceneScreen, cameraOrtho, rtTexture2 );
				
				// Render quad with blured scene into texture (convolution pass 2)
				
				materialConvolution.uniforms.tDiffuse.texture = rtTexture2;
				materialConvolution.uniforms.uImageIncrement.value = blury;
				renderer.render( sceneScreen, cameraOrtho, rtTexture3 );
				
				// Render original scene with superimposed blur into texture
				
				quadScreen.materials = [ materialScreen ];
				
				materialScreen.uniforms.tDiffuse.texture = rtTexture3;
				materialScreen.uniforms.opacity.value = 1.0;
				renderer.render( sceneScreen, cameraOrtho, rtTexture1, false );

				// Render final scene to the screen with film shader

				materialFilm.uniforms.tDiffuse.texture = rtTexture1;
				quadScreen.materials = [ materialFilm ];
				renderer.render( sceneScreen, cameraOrtho );

                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>