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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
							<!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>
		
		<!-- -----------------------------------------------------------------
			Film grain & scanlines shader
				- ported from HLSL to WebGL / GLSL
					http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html

		// Screen Space Static Postprocessor
		//
		// Produces an analogue noise overlay similar to a film grain / TV static
		//
		// Original implementation and noise algorithm
		// Pat 'Hawthorne' Shearon
		//
		// Optimized scanlines + noise version with intensity scaling
		// Georg 'Leviathan' Steinrohder
		
		// This version is provided under a Creative Commons Attribution 3.0 License
		// http://creativecommons.org/licenses/by/3.0/
		----------------------------------------------------------------- -->
		
		<!-- Film grain & scanlines fragment shader -->
		<script id="fs-film" type="x-shader/x-fragment">
		varying vec2 vUv;
		uniform sampler2D tDiffuse; 
		
		// control parameter
		uniform float time;

		// noise effect intensity value (0 = no effect, 1 = full effect)
		const float fNintensity = 0.35;
		// scanlines effect intensity value (0 = no effect, 1 = full effect)
		const float fSintensity = 0.35;
		// scanlines effect count value (0 = no effect, 4096 = full effect)
		const float fScount = 4096.0;
		
		void main(void) {
			// sample the source
			vec4 cTextureScreen = texture2D( tDiffuse, vUv );

			// make some noise
			float x = vUv.x * vUv.y * time *  1000.0;
			x = mod( x, 13.0 ) * mod( x, 123.0 );
			float dx = mod( x, 0.01 );

			// add noise
			vec3 cResult = cTextureScreen.rgb + cTextureScreen.rgb * clamp( 0.1 + dx * 100.0, 0.0, 1.0 );

			// get us a sine and cosine
			vec2 sc = vec2( sin(vUv.y * fScount), cos(vUv.y * fScount) );

			// add scanlines
			cResult += cTextureScreen.rgb * vec3( sc.x, sc.y, sc.x ) * fSintensity;
			
			// interpolate between source and result by intensity
			cResult = cTextureScreen.rgb + clamp( fNintensity, 0.0,1.0 ) * ( cResult - cTextureScreen.rgb );

			// convert to grayscale if desired
			cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );

			gl_FragColor =  vec4( cResult, cTextureScreen.a );
		}
		</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

                } );

                materialFilm = new THREE.MeshShaderMaterial( {

                    uniforms: { tDiffuse: { type: "t", value: 0, texture: rtTexture1 },
								time: { type: "f", value: 0.0 }
							  },
                    vertex_shader: getText( 'vs-generic' ),
                    fragment_shader: getText( 'fs-film' )

                } );

				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>