javascript
/
three.js
Mirror von https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640
							<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>three.js webgl - particles - dynamic - postprocessing</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                color: #fff;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;

                background-color: #000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
				color:#fff;
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
				
            }

            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 dynamic particles + postprocessing
			- models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1" target="_blank">Reallusion</a>
			<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255" target="_blank">iClone</a>,
			<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank">Troyano</a>

		</div>

        <script type="text/javascript" src="../build/Three.js"></script>
		
        <script type="text/javascript" src="js/Stats.js"></script>
        <script type="text/javascript" src="js/Detector.js"></script>
		<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>

        <script type="text/javascript">
			
			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

			var SCREEN_HEIGHT = window.innerHeight;
			var SCREEN_WIDTH = window.innerWidth;

            var container, stats;

            var camera, scene, renderer, mesh, directionalLight;
			
			var parent,
				meshes = [], clonemeshes = [];			
			
			var p;
			
			var aloader, bloader;
			
			var total = 0, totaln = 0;

			var postprocessing1 = {};
			var postprocessing2 = {};

            init();
            animate();
			
            function init() {

                container = document.getElementById( 'container' );

				camera = new THREE.Camera( 20, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 50000 );
				camera.position.z = 7000;
				camera.position.y = 700;

                scene = new THREE.Scene();

				scene.fog = new THREE.FogExp2( 0x000104, 0.0000675 );
				
				directionalLight = new THREE.DirectionalLight( 0xffffff );
				directionalLight.position.set( 0, 0, 1 );
				directionalLight.position.normalize();
				scene.addLight( directionalLight );

				initPostprocessingBloom( postprocessing1 );
				initPostprocessingFocus( postprocessing2 );

				aloader = new THREE.JSONLoader( );
				bloader = new THREE.BinaryLoader( true );

				document.body.appendChild( bloader.statusDomElement );
				
				aloader.load( { model: "obj/terrain.js", callback: function( geometry ) { 
						
					createMesh( geometry, scene, 16.8, -11000, -200,  -5000, 0x00ff44, false );
					createMesh( geometry, scene, 16.8,  11000, -200, -15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,      0, -200, -15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,      0, -200,  15000, 0x00ff33, false );
					createMesh( geometry, scene, 16.8,  11000, -200,  15000, 0x00ff22, false );
					createMesh( geometry, scene, 16.8, -11000, -200,   5000, 0x00ff11, false );
					createMesh( geometry, scene, 16.8,  13000, -200,   5000, 0x00ff55, false );
					createMesh( geometry, scene, 16.8,  13000, -200,  -5000, 0x00ff66, false );
						
				} } );
				
				bloader.load( { model: "obj/veyron/VeyronNoUv_bin.js", callback: function( geometry ) { createMesh( geometry, scene, 6.8, 2200, -200, -100, 0x0055ff, false ) } } );
				
				bloader.load( { model: "obj/female02/Female02_bin.js", callback: function( geometry ) { 
				
					createMesh( geometry, scene, 4.05, -1000, -350,    0, 0xffdd44, true );
					createMesh( geometry, scene, 4.05,     0, -350,    0, 0xffffff, true );
					createMesh( geometry, scene, 4.05,  1000, -350,  400, 0xff4422, true );
					createMesh( geometry, scene, 4.05,   250, -350, 1500, 0xff9955, true );
					createMesh( geometry, scene, 4.05,   250, -350, 2500, 0xff77dd, true );
					
				} } );
				
				bloader.load( { model: "obj/male02/Male02_bin.js", callback: function( geometry ) { 
				
					createMesh( geometry, scene, 4.05,  -500, -350,   600, 0xff7744, true );
					createMesh( geometry, scene, 4.05,   500, -350,     0, 0xff5522, true );
					createMesh( geometry, scene, 4.05,  -250, -350,  1500, 0xff9922, true );
					createMesh( geometry, scene, 4.05,  -250, -350, -1500, 0xff99ff, true );
					
				} } );
				
                renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1, antialias: false } );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				renderer.autoClear = false;
				renderer.sortObjects = false;
                container.appendChild( renderer.domElement );
				
				renderer.setClearColor( scene.fog.color, 1 );
				
                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                //container.appendChild( stats.domElement );
				
				parent = new THREE.Object3D();
				scene.addObject( parent );

				var grid = new THREE.ParticleSystem( new THREE.Plane( 15000, 15000, 64, 64 ), new THREE.ParticleBasicMaterial( { color: 0xff0000, size: 10 } ) );
				grid.rotation.x = 1.57;
				grid.position.y = -400;
				parent.addChild( grid );
				
				totaln += 1;
				total += grid.geometry.vertices.length;

            }

			function createMesh( originalGeometry, scene, scale, x, y, z, color, dynamic ) {

				var i, c;

				var vertices = originalGeometry.vertices;
				var vl = vertices.length;

				var geometry = new THREE.Geometry();
				var vertices_tmp = [];
				
				for( i = 0; i < vl; i++ ) {
				
					p = vertices[ i ].position;
					
					geometry.vertices[ i ] = new THREE.Vertex( p.clone() );
					vertices_tmp[ i ] = [ p.x, p.y, p.z, 0, 0 ];

				}

				var clones = [
								[  6000, 0, -4000 ], 
								[  5000, 0, 0 ], 
								[  1000, 0, 5000 ],
								[  1000, 0, -5000 ],
								[  4000, 0, 2000 ], 
								[ -4000, 0, 1000 ], 
								[ -5000, 0, -5000 ], 

								[ 0, 0, 0 ]

							  ];
				
				if ( dynamic ) {
					
					for( i = 0; i < clones.length; i++ ) {
					
						c = ( i < clones.length -1 ) ? 0x252525 : color;

						mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: c } ) );
						mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
						
						mesh.position.x = x + clones[ i ][ 0 ];
						mesh.position.y = y + clones[ i ][ 1 ];
						mesh.position.z = z + clones[ i ][ 2 ];
						
						parent.addChild( mesh );
						
						clonemeshes.push( { mesh: mesh, speed: 0.5 + Math.random() } );
						
					}
					
					totaln += clones.length;
					total += clones.length * vl;
				
				} else {
				
					mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: color } ) );
					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
					
					mesh.position.x = x;
					mesh.position.y = y;
					mesh.position.z = z;
					
					parent.addChild( mesh );
					
					totaln += 1;
					total += vl;

				}

				bloader.statusDomElement.style.display = "none";
				
				meshes.push( { mesh: mesh, vertices: geometry.vertices, vertices_tmp: vertices_tmp, vl: vl,
							  down: 0, up: 0, direction: 0, speed: 35, delay: Math.floor( 200 + 200 * Math.random() ),
							  started: false, start: Math.floor( 100 + 200 * Math.random() ),
							  dynamic: dynamic,
							  bb: geometry.boundingBox } );

				console.log( total, totaln );

			}

			function initPostprocessingFocus( effect ) {
				
				effect.type = "focus";
				
				effect.scene = new THREE.Scene();
				
				effect.camera = new THREE.Camera();
				effect.camera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
				effect.camera.position.z = 100;
				
				effect.texture = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat } );
				
				var heatUniforms = {

					"map": { type: "t", value:0, texture: effect.texture },
					"screenWidth": { type: "f", value: SCREEN_WIDTH },
					"screenHeight": { type: "f", value: SCREEN_HEIGHT },
					"sampleDistance": { type: "f", value: 0.94 },
					"waveFactor": { type: "f", value: 0.00125 }

				};

				effect.materialHeat = new THREE.MeshShaderMaterial( {

					uniforms: heatUniforms,
					vertexShader: [

						"varying vec2 vUv;",

						"void main() {",

							"vUv = vec2( uv.x, 1.0 - uv.y );",
							"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

						"}"

					].join("\n"),
					
					fragmentShader: [

							"uniform float screenWidth;",
							"uniform float screenHeight;",
							"uniform float sampleDistance;",
							"uniform float waveFactor;",
							
							"uniform sampler2D map;",
							"varying vec2 vUv;",
				
							"void main() {",

								"vec4 color, org, tmp, add;",
								"float sample_dist, f;",
								"vec2 vin;",				
								"vec2 uv = vUv;",
								
								"add += color = org = texture2D( map, uv );",

								"vin = ( uv - vec2( 0.5 ) ) * vec2( 1.4 );",
								"sample_dist = dot( vin, vin ) * 2.0;",
								
								"f = ( waveFactor * 100.0 + sample_dist ) * sampleDistance * 4.0;",
				
								"vec2 sampleSize = vec2(  1.0 / screenWidth, 1.0 / screenHeight ) * vec2(f);",
				
								"add += tmp = texture2D( map, uv + vec2(0.111964, 0.993712) * sampleSize );", 
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(0.846724, 0.532032) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(0.943883, -0.330279) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(0.330279, -0.943883) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(-0.532032, -0.846724) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(-0.993712, -0.111964) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",
				
								"add += tmp = texture2D( map, uv + vec2(-0.707107, 0.707107) * sampleSize );",
								"if( tmp.b < color.b ) color = tmp;",

								"color = color * vec4( 2.0 ) - ( add / vec4( 8.0 ) );",
								"color = color + ( add / vec4(8.0) - color ) * ( vec4(1.0) - vec4(sample_dist * 0.5) );",

								"gl_FragColor = vec4( color.rgb * color.rgb * vec3( 0.95 ) + color.rgb, 1.0 );",								
								
							"}"


						].join("\n")

				} );
				
				effect.quad = new THREE.Mesh( new THREE.Plane( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialHeat );
				effect.quad.position.z = -500;
				effect.scene.addObject( effect.quad );

			}

			function initPostprocessingBloom( effect ) {

				effect.type = "bloomnoise";
				
				effect.scene = new THREE.Scene();

				effect.camera = new THREE.Camera();
				effect.camera.projectionMatrix = THREE.Matrix4.makeOrtho( SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2, -10000, 10000 );
				effect.camera.position.z = 100;

				var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
				
				effect.rtTexture1 = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, pars );
				effect.rtTexture2 = new THREE.WebGLRenderTarget( 256, 512, pars );
				effect.rtTexture3 = new THREE.WebGLRenderTarget( 512, 256, pars );
				
				var screen_shader = THREE.ShaderUtils.lib["screen"];
				var screen_uniforms = THREE.UniformsUtils.clone( screen_shader.uniforms );

				screen_uniforms["tDiffuse"].texture = effect.rtTexture3;
				screen_uniforms["opacity"].value = 0.75;

				effect.materialScreen = new THREE.MeshShaderMaterial( {

					uniforms: screen_uniforms,
					vertexShader: screen_shader.vertexShader,
					fragmentShader: screen_shader.fragmentShader,
					blending: THREE.AdditiveBlending,
					transparent: true

				} );

				var convolution_shader = THREE.ShaderUtils.lib["convolution"];
				var convolution_uniforms = THREE.UniformsUtils.clone( convolution_shader.uniforms );

				effect.blurx = new THREE.Vector2( 0.001953125, 0.0 ),
				effect.blury = new THREE.Vector2( 0.0, 0.001953125 );

				convolution_uniforms["tDiffuse"].texture = effect.rtTexture1;
				convolution_uniforms["uImageIncrement"].value = effect.blurx;
				convolution_uniforms["cKernel"].value = THREE.ShaderUtils.buildKernel( 4.0 );

				effect.materialConvolution = new THREE.MeshShaderMaterial( {

					uniforms: convolution_uniforms,
					vertexShader:   "#define KERNEL_SIZE 25.0\n" + convolution_shader.vertexShader,
					fragmentShader: "#define KERNEL_SIZE 25\n"   + convolution_shader.fragmentShader

				} );

				var film_shader = THREE.ShaderUtils.lib["film"];
				var film_uniforms = THREE.UniformsUtils.clone( film_shader.uniforms );
				
				film_uniforms["tDiffuse"].texture = effect.rtTexture1;
				
				effect.materialFilm = new THREE.MeshShaderMaterial( { uniforms: film_uniforms, vertexShader: film_shader.vertexShader, fragmentShader: film_shader.fragmentShader } );
				effect.materialFilm.uniforms.grayscale.value = 0;
				effect.materialFilm.uniforms.nIntensity.value = 0.5;
				effect.materialFilm.uniforms.sIntensity.value = 0.5;
				effect.materialFilm.uniforms.sCount.value = 1448;

				effect.quad = new THREE.Mesh( new THREE.Plane( SCREEN_WIDTH, SCREEN_HEIGHT ), effect.materialConvolution );
				effect.quad.position.z = -500;
				effect.scene.addObject( effect.quad );

			}

			var j, jl, cm, data, vertices, vertices_tmp, vl, d, vt,
				time, oldTime, delta;
			
			function animate() {

				requestAnimationFrame( animate );

				render();
				//stats.update();

			}
			
            function render() {

				if ( ! oldTime ) {

					oldTime = new Date().getTime();
					
				}
					
				time = new Date().getTime();				

				delta = 0.01 * ( time - oldTime );
				oldTime = time;
				
				delta = delta < 2 ? delta : 2;
				
				parent.rotation.y += -0.02 * delta;
				
				for( j = 0, jl = clonemeshes.length; j < jl; j++ ) {
				
					cm = clonemeshes[ j ];
					cm.mesh.rotation.y += -0.1 * delta * cm.speed;
					
				}
				
				for( j = 0, jl = meshes.length; j < jl; j++ ) {				

					data = meshes[ j ];
					mesh = data.mesh;
					vertices = data.vertices;
					vertices_tmp = data.vertices_tmp;
					vl = data.vl;

					if ( ! data.dynamic ) continue;
					
					if ( data.start > 0 ) {
					
						data.start -= 1;

					} else {
					
						if ( !data.started ) {

							data.direction = -1;
							data.started = true;
							
						}

					}

					for ( i = 0; i < vl; i ++ ) {

						p = vertices[ i ].position;
						vt = vertices_tmp[ i ];

						// falling down
						
						if ( data.direction < 0 ) {

							// var d = Math.abs( p.x - vertices_tmp[ i ][ 0 ] ) + Math.abs( p.y - vertices_tmp[ i ][ 1 ] ) + Math.abs( p.z - vertices_tmp[ i ][ 2 ] );
							// if ( d < 200 ) {

							if ( p.y > 0 ) {

								// p.y += data.direction * data.speed * delta;

								p.x += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;
								p.y += 3.0 * ( 0.25 - Math.random() ) * data.speed * delta;
								p.z += 1.5 * ( 0.50 - Math.random() ) * data.speed * delta;

							} else {
							
								if ( ! vt[ 3 ] ) {
								
									vt[ 3 ] = 1;
									data.down += 1;
									
								}
								
							}
							
						}
						
						// rising up 
						
						if ( data.direction > 0 ) {
							
							//if ( p.y < vertices_tmp[ i ][ 1 ] ) {
							
							//	p.y += data.direction * data.speed * delta;
							
							d = Math.abs( p.x - vt[ 0 ] ) + Math.abs( p.y - vt[ 1 ] ) + Math.abs( p.z - vt[ 2 ] );
							
							if ( d > 1 ) {
							
								p.x += - ( p.x - vt[ 0 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
								p.y += - ( p.y - vt[ 1 ] ) / d * data.speed * delta * ( 1 + Math.random() );
								p.z += - ( p.z - vt[ 2 ] ) / d * data.speed * delta * ( 0.85 - Math.random() );
							
							} else {
						
								if ( ! vt[ 4 ] ) {
								
									vt[ 4 ] = 1;
									data.up += 1;
									
								}
								
							}
							
						}						
						

					}
					
					// all down
					
					if ( data.down == vl ) {
						
						if ( data.delay == 0 ) {
						
							data.direction = 1;
							data.speed = 10;
							data.down = 0;
							data.delay = 320;
							
							for ( i = 0; i < vl; i ++ ) {
							
								vertices_tmp[ i ][ 3 ] = 0;
								
							}
							
						} else {
						
							data.delay -= 1;
							
						}
						
						
					}
					
					// all up
					
					if ( data.up == vl ) {
						
						if ( data.delay == 0 ) {
							
							data.direction = -1;
							data.speed = 35;
							data.up = 0;
							data.delay = 120;

							for ( i = 0; i < vl; i ++ ) {
							
								vertices_tmp[ i ][ 4 ] = 0;
								
							}

						} else {
						
							data.delay -= 1;
							
						}


					}
					
					mesh.geometry.__dirtyVertices = true;

				}

				renderer.clear();

				// BLOOM

				// Render scene into texture

				renderer.render( scene, camera, postprocessing1.rtTexture1, true );

				// Render quad with blured scene into texture (convolution pass 1)

				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialConvolution;

				postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture1;
				postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blurx;

				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture2, true );

				// Render quad with blured scene into texture (convolution pass 2)

				postprocessing1.materialConvolution.uniforms.tDiffuse.texture = postprocessing1.rtTexture2;
				postprocessing1.materialConvolution.uniforms.uImageIncrement.value = postprocessing1.blury;

				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture3, true );

				// Render original scene with superimposed blur to texture

				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialScreen;

				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing1.rtTexture1, false );


				// NOISE + SCANLINES
				
				postprocessing1.materialFilm.uniforms.time.value += 0.01;
				postprocessing1.quad.materials[ 0 ] = postprocessing1.materialFilm;

				renderer.render( postprocessing1.scene, postprocessing1.camera, postprocessing2.texture, true );

				// FOCUS				

				renderer.render( postprocessing2.scene, postprocessing2.camera );

            }

        </script>

    </body>
</html>