|
|
@@ -0,0 +1,640 @@
|
|
|
+<!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>
|
alteredq