threex

<!DOCTYPE html> <html> <head> <title>threex.sparks.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <div id="jump_to"> Jump To … <div id="jump_wrapper"> <div id="jump_page"> <a class="source" href="THREEx.CelShader.html"> THREEx.CelShader.js </a> <a class="source" href="THREEx.DeviceOrientationState.html"> THREEx.DeviceOrientationState.js </a> <a class="source" href="THREEx.FullScreen.html"> THREEx.FullScreen.js </a> <a class="source" href="THREEx.GeometryUtils.html"> THREEx.GeometryUtils.js </a> <a class="source" href="THREEx.GeometryWobble.html"> THREEx.GeometryWobble.js </a> <a class="source" href="THREEx.KeyboardState.html"> THREEx.KeyboardState.js </a> <a class="source" href="THREEx.LogoTurtle.html"> THREEx.LogoTurtle.js </a> <a class="source" href="THREEx.PlasmaShader.html"> THREEx.PlasmaShader.js </a> <a class="source" href="THREEx.SkyMap.html"> THREEx.SkyMap.js </a> <a class="source" href="THREEx.WindowResize.html"> THREEx.WindowResize.js </a> <a class="source" href="THREEx.glCapability.html"> THREEx.glCapability.js </a> <a class="source" href="THREEx.requestAnimationFrame.html"> THREEx.requestAnimationFrame.js </a> <a class="source" href="THREEx.screenshot.html"> THREEx.screenshot.js </a> <a class="source" href="threex.chromeWebStoreInstall.html"> threex.chromeWebStoreInstall.js </a> <a class="source" href="threex.domevent.html"> threex.domevent.js </a> <a class="source" href="threex.embedded.html"> threex.embedded.js </a> <a class="source" href="threex.sparks.html"> threex.sparks.js </a> <a class="source" href="threex.sparksPlugins.html"> threex.sparksPlugins.js </a> <a class="source" href="threex.texturePoolBall.html"> threex.texturePoolBall.js </a> </div> </div> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> threex.sparks.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> This THREEx helper makes it even easier to use spark.js with three.js * FIXME This is currently only with WebGL </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <h1>Code</h1> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> </td> <td class="code"> <div class="highlight"><pre>var THREEx = THREEx || {}; THREEx.Sparks = function(opts) { opts = opts || {}; this._maxParticles = opts.maxParticles || console.assert(false); this._texture = opts.texture || this._buildDefaultTexture(); var counter = opts.counter || console.assert(false); </pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> TODO replace this by objectpool.js </td> <td class="code"> <div class="highlight"><pre> var vertexIndexPool = { __pools: [],</pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> Get a new Vector </td> <td class="code"> <div class="highlight"><pre> get: function() { if( this.__pools.length > 0 ) return this.__pools.pop(); console.assert(false, "pool ran out!") return null; },</pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> Release a vector back into the pool </td> <td class="code"> <div class="highlight"><pre> add: function(v){ this.__pools.push(v); } }; var particles = new THREE.Geometry(); var vertices = particles.vertices; for ( i = 0; i < this._maxParticles; i++ ) { var position = new THREE.Vector3(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY); vertices.push(new THREE.Vertex(position)); vertexIndexPool.add(i); }</pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> to handle window resize </td> <td class="code"> <div class="highlight"><pre> this._$onWindowResize = this._onWindowResize.bind(this); window.addEventListener('resize', this._$onWindowResize, false); var attributes = this._attributes = { size : { type: 'f', value: [] }, aColor : { type: 'c', value: [] } }; var uniforms = this._uniforms = { texture : { type: "t", texture: this._texture }, color : { type: "c", value: new THREE.Color(0xffffff) }, sizeRatio : { type: "f", value: this._computeSizeRatio() } };</pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> fill attributes array </td> <td class="code"> <div class="highlight"><pre> var valuesSize = this._attributes.size.value; var valuesColor = this._attributes.aColor.value; for(var v = 0; v < particles.vertices.length; v++ ){ valuesSize[v] = 99; valuesColor[v] = new THREE.Color( 0x000000 ); } var material = new THREE.ShaderMaterial( { uniforms : this._uniforms, attributes : this._attributes, vertexShader : THREEx.Sparks.vertexShaderText, fragmentShader : THREEx.Sparks.fragmentShaderText, blending : THREE.AdditiveBlending, depthWrite : false,</pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> depthTest : false, </td> <td class="code"> <div class="highlight"><pre> transparent : true }); this._group = new THREE.ParticleSystem( particles, material ); this._group.dynamic = true; this._group.sortParticles = true; // TODO is this needed ? </pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> // EMITTER STUFF </td> <td class="code"> <div class="highlight"><pre> var setTargetParticle = function() { var vertexIdx = vertexIndexPool.get(); var target = { vertexIdx : vertexIdx, size : function(value){ if( value !== undefined ) valuesSize[vertexIdx] = value; return valuesSize[vertexIdx]; }, color : function(value){ if( value !== undefined ) valuesColor[vertexIdx] = value; return valuesColor[vertexIdx]; } }; return target; }; var onParticleCreated = function(particle) { var vertexIdx = particle.target.vertexIdx;</pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> copy particle position into three.js geometry </td> <td class="code"> <div class="highlight"><pre> vertices[vertexIdx].position = particle.position; }; var onParticleDead = function(particle) { var vertexIdx = particle.target.vertexIdx;</pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> Hide the particle </td> <td class="code"> <div class="highlight"><pre> valuesColor[vertexIdx].setHex( 0x000000 ); vertices[vertexIdx].position.set(Number.POSITIVE_INFINITY,Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY); </pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> Mark particle system as available by returning to pool </td> <td class="code"> <div class="highlight"><pre> vertexIndexPool.add( vertexIdx ); }; var emitter = this._emitter = new SPARKS.Emitter(counter); emitter.addInitializer(new SPARKS.Target(null, setTargetParticle)); emitter.addCallback("created" , onParticleCreated ); emitter.addCallback("dead" , onParticleDead ); } THREEx.Sparks.prototype.destroy = function() { window.removeEventListener('resize', this._$onWindowResize); if( this._emitter.isRunning() ) this._emitter.stop(); }</pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> //////////////////////////////////////////////////////////////////////////////// // //////////////////////////////////////////////////////////////////////////////// </td> <td class="code"> <div class="highlight"><pre>THREEx.Sparks.prototype.container = function() { return this._group; } THREEx.Sparks.prototype.emitter = function() { return this._emitter; } THREEx.Sparks.prototype.update = function() { this._group.geometry.__dirtyVertices = true; this._group.geometry.__dirtyColors = true; this._attributes.size.needsUpdate = true; this._attributes.aColor.needsUpdate = true; }</pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> //////////////////////////////////////////////////////////////////////////////// handle window resize // //////////////////////////////////////////////////////////////////////////////// </td> <td class="code"> <div class="highlight"><pre>THREEx.Sparks.prototype._onWindowResize = function() { this._uniforms.sizeRatio.value = this._computeSizeRatio(); this._uniforms.sizeRatio.needsUpdate = true; } THREEx.Sparks.prototype._computeSizeRatio = function() { return window.innerHeight / 1024; }</pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> //////////////////////////////////////////////////////////////////////////////// Shader Text // //////////////////////////////////////////////////////////////////////////////// </td> <td class="code"> <div class="highlight"><pre>THREEx.Sparks.vertexShaderText = [ "attribute float size;", "attribute vec4 aColor;", "uniform float sizeRatio;", "varying vec4 vColor;", "void main() {", "vec4 mvPosition= modelViewMatrix * vec4( position, 1.0 );",</pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> FIXME is that the proper formula for size ? doesnt this depends on the fov ? </td> <td class="code"> <div class="highlight"><pre> "gl_PointSize = size * sizeRatio * ( 150.0 / length( mvPosition.xyz ) );", "gl_Position = projectionMatrix * mvPosition;", "vColor = aColor;", "}" ].join('\n'); THREEx.Sparks.fragmentShaderText = [ "uniform vec3 color;", "uniform sampler2D texture;", "varying vec4 vColor;", "void main() {", "vec4 outColor = texture2D( texture, gl_PointCoord );", "gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );", "}" ].join('\n');</pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> //////////////////////////////////////////////////////////////////////////////// Texture // //////////////////////////////////////////////////////////////////////////////// </td> <td class="code"> <div class="highlight"><pre>THREEx.Sparks.prototype._buildDefaultTexture = function(size) { size = size || 128; var canvas = document.createElement( 'canvas' ); var context = canvas.getContext( '2d' ); canvas.width = canvas.height = size; var gradient = context.createRadialGradient( canvas.width/2, canvas.height /2, 0, canvas.width /2, canvas.height /2, canvas.width /2 ); gradient.addColorStop( 0 , 'rgba(255,255,255,1)' ); gradient.addColorStop( 0.2, 'rgba(255,255,255,1)' ); gradient.addColorStop( 0.4, 'rgba(128,128,128,1)' ); gradient.addColorStop( 1 , 'rgba(0,0,0,1)' ); context.beginPath(); context.arc(size/2, size/2, size/2, 0, Math.PI*2, false); context.closePath(); context.fillStyle = gradient;</pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> context.fillStyle = 'rgba(128,128,128,1)'; </td> <td class="code"> <div class="highlight"><pre> context.fill(); var texture = new THREE.Texture( canvas ); texture.needsUpdate = true; return texture; } </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>