Added particle trails for things like exhaust on a car.

samples/particles.html

 <!--
 Copyright 2009, Google Inc.
 All rights reserved.
 
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are
 met:
 
     * Redistributions of source code must retain the above copyright
 notice, this list of conditions and the following disclaimer.
@@ skipping 46 matching lines @@
 // global variables
 var g_o3d;
 var g_math;
 var g_client;
 var g_viewInfo;
 var g_pack;
 var g_particleSystem;
 var g_clockParam;
 var g_textures = [];
 var g_emitters = [];  // so we can find in the debugger to edit in real time.
+var g_poofs = [];
+var g_keyDown = [];
+var g_poofIndex = 0;
+var g_trail;
+var g_trailParameters;
+
+var MAX_POOFS = 3;
 
 /**
  * Loads a texture.
  * @param {!o3djs.loader.Loader} loader Loader to use to load texture.
  * @param {string} url relativel url of texture.
  * @param {number} index Index at which to record texture.
  */
 function loadTexture(loader, url, index) {
   loader.loadTexture(
       g_pack,
@@ skipping 57 matching lines @@
       g_math.degToRad(30), // 30 degree fov.
       g_client.width / g_client.height,
       0.1,                // Near plane.
       5000);              // Far plane.
 
   g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
       [500, 1000, 1000], // eye
       [0, 200, 0],   // target
       [0, 1, 0]);  // up
 
-
-
   // Load textures. This happens asynchronously.
   var loader = o3djs.loader.createLoader(initStep3);
   loadTexture(loader, 'assets/particle-anim.png', 0);
   loadTexture(loader, 'assets/ripple.png', 1);
   loader.finish();
 }
 
 function initStep3() {
   // Normally we wouldn't pass in a clock and the particle system would handle
   // this for me but for selenium testing we need to be able to control the
@@ skipping 11 matching lines @@
   setupFlame();
   setupNaturalGasFlame();
   setupSmoke();
   setupWhiteEnergy();
   setupGoogle();
   setupRain();
   setupRipples();
   setupAnim();
   setupBall();
   setupCube();
+  setupPoof();
+  setupTrail();
+
+  window.addEventListener('keypress', onKeyPress, true);
+  window.addEventListener('keydown', onKeyDown, true);
+  window.addEventListener('keyup', onKeyUp, true);
 
   // Setup an onrender callback for animation.
   g_client.setRenderCallback(onrender);
 
   window.g_finished = true;  // for selenium testing.
 }
 
+function onKeyPress(event) {
+  event = event || window.event;
+
+  var keyChar = String.fromCharCode(o3djs.event.getEventKeyChar(event));
+  // Just in case they have capslock on.
+  keyChar = keyChar.toLowerCase();
+
+  switch (keyChar) {
+  case 'p':
+    triggerPoof();
+    break;
+  }
+}
+
+function onKeyDown(event) {
+  event = event || window.event;
+  g_keyDown[event.keyCode] = true;
+}
+
+function onKeyUp(event) {
+  event = event || window.event;
+  g_keyDown[event.keyCode] = false;
+}
+
 function setupFlame() {
   var transform = g_pack.createObject('Transform');
   transform.parent = g_client.root;
   transform.translate(-300, 0, 0);
 
   var emitter = g_particleSystem.createParticleEmitter();
   g_emitters.push(emitter);
   emitter.setState(o3djs.particles.ParticleStateIds.ADD);
   emitter.setColorRamp(
       [1, 1, 0, 1,
@@ skipping 259 matching lines @@
                              Math.floor(pseudoRandom() * 3) * Math.PI * 0.5);
       parameters.orientation = o3djs.quaternions.rotationToQuaternion(matrix);
       var position = g_math.matrix4.transformDirection(
           matrix,
           [pseudoRandom() * 200 - 100, 100, pseudoRandom() * 200 - 100]);
       parameters.position = position;
     });
   transform.addShape(emitter.shape);
 }
 
+function setupPoof() {
+  var emitter = g_particleSystem.createParticleEmitter();
+  emitter.setState(o3djs.particles.ParticleStateIds.ADD);
+  emitter.setColorRamp(
+      [1, 1, 1, 0.3,
+       1, 1, 1, 0]);
+  emitter.setParameters({
+    numParticles: 30,
+    lifeTime: 1.5,
+    startTime: 0,
+    startSize: 50,
+    endSize: 200,
+    spinSpeedRange: 10},
+    function(index, parameters) {
+      var angle = Math.random() * 2 * Math.PI;
+      parameters.velocity = g_math.matrix4.transformPoint(
+          g_math.matrix4.rotationY(angle), [300, 0, 0]);
+      parameters.acceleration = g_math.mulVectorVector(
+          parameters.velocity, [-0.3, 0, -0.3]);
+    });
+  // make 3 poofs one shots
+  for (var ii = 0; ii < MAX_POOFS; ++ii) {
+    g_poofs[ii] = emitter.createOneShot(g_client.root);
+  }
+}
+
+function triggerPoof() {
+  // We have multiple poofs because if you only have one and it is still going
+  // when you trigger it a second time it will immediately start over.
+  g_poofs[g_poofIndex].trigger([100 + 100 * g_poofIndex, 0, 300]);
+  g_poofIndex++;
+  if (g_poofIndex == MAX_POOFS) {
+    g_poofIndex = 0;
+  }
+}
+
+function setupTrail() {
+  g_trailParameters = {
+    numParticles: 2,
+    lifeTime: 2,
+    startSize: 10,
+    endSize: 90,
+    velocityRange: [20, 20, 20],
+    spinSpeedRange: 4};
+  g_trail = g_particleSystem.createTrail(
+      g_client.root,
+      1000,
+      g_trailParameters);
+  g_trail.setState(o3djs.particles.ParticleStateIds.ADD);
+  g_trail.setColorRamp(
+      [1, 0, 0, 1,
+       1, 1, 0, 1,
+       1, 1, 1, 0]);
+}
+
+function leaveTrail() {
+  var trailClock = window.g_clock * -0.8;
+  g_trail.birthParticles(
+      [Math.sin(trailClock) * 400, 200, Math.cos(trailClock) * 400]);
+}
+
 /**
  * Called every frame.
  * @param {!o3d.RenderEvent} renderEvent Rendering Information.
  */
 function onrender(renderEvent) {
   var elapsedTime = renderEvent.elapsedTime;
   window.g_clock += elapsedTime * window.g_timeMult;
 
+  if (g_keyDown[84]) {  // 'T' key.
+    leaveTrail();
+  }
+
   var cameraClock = window.g_clock * 0.3;
   g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
       [Math.sin(cameraClock) * 1500, 500, Math.cos(cameraClock) * 1500], // eye
       [0, 100, 0],   // target
       [0, 1, 0]);  // up
 
   g_clockParam.value = window.g_clock;
 }
 
 /**
  * Remove any callbacks so they don't get called after the page has unloaded.
  */
 function unload() {
   if (g_client) {
     g_client.cleanup();
   }
 }
 </script>
 </head>
 <body onload="init();" onunload="unload();">
 <h1>Particles</h1>
 <br/>
 <!-- Start of O3D plugin -->
 <div id="o3d" style="width: 800px; height: 600px;"></div>
 <!-- End of O3D plugin -->
+Press 'P' to make a poof.<br/>
+Press 'T' to make a trail.
 </body>
 </html>