Away3D TypeScriptではじめる3次元表現

第12回 パーティクルのアニメーションを加える

この記事を読むのに必要な時間:およそ 12 分

パーティクルのアニメーションを動かす

ようやくパーティクルをアニメーションとして動かせる。炎のMeshオブジェクトとそのMesh.animatorプロパティに与えたParticleAnimatorオブジェクトは,前掲コード1のクラス(FireObject)のコンストラクタに引数として与えてあった。アニメーションを動かすには,それぞれのParticleAnimatorオブジェクトに対してParticleAnimator.start()メソッドを呼び出す。その呼出しは,すでにクラスのメソッド(startAnimation())としてつぎのように定めた。

FireObject.prototype.startAnimation = function() {
  this.animator.start();
}

床はトゥイーンアニメーションしながら表れるので,パーティクルのアニメーションも始まりに待ちを加えよう。時間待ちはTimerクラスで行う。コンストラクタに待ち時間と繰返し回数の2つの引数を与え,TimerEvent.TIMERイベントのリスナー関数に待ち時間が済んだ後の処理を定める。Timer.start()メソッドを呼び出さないと,待ち時間が始まらないことに注意してほしい。

new Timer(待ち時間, 繰返し回数)

Timerクラスの時間待ちは,つぎのように初期設定の関数(initialize())で定めた。待ち時間が過ぎるごとに,炎のパーティクルをひとつずつアニメーションさせている。プロパティTimer.currentCountは何回目の待ち時間が過ぎたかを示し,Timer()コンストラクタに定めた繰返し回数はTimer.repeatCountで得られる。その回数を終えたら,イベントリスナー(startFire())は除いた。なお,リスナー関数が引数に受取ったイベントオブジェクト(eventObject)Event.targetプロパティで,イベントの起こったオブジェクト(ここではTimerインスタンス)が得られる。

var TimerEvent = require("awayjs-core/lib/events/TimerEvent");

var Timer = require("awayjs-core/lib/utils/Timer");

function initialize() {

  var fireTimer = new Timer(1000, fireObjects.length);
  fireTimer.addEventListener(TimerEvent.TIMER, startFire);
  fireTimer.start();
}

function startFire(eventObject) {
  var fireTimer = eventObject.target;
  var count = fireTimer.currentCount
  var fireObject = fireObjects[count - 1];
  fireObject.startAnimation();
  if (count >= fireTimer.repeatCount) {
    fireTimer.removeEventListener(TimerEvent.TIMER, startFire)
  }
}

パーティクルのアニメーションを動かすにはもうひとつだけ,ParticleAnimationSetオブジェクトのParticleAnimationSet.initParticleFuncプロパティに関数を定めなければならない。ParticleAnimationSetオブジェクトをつくる関数(getParticleAnimationSet())で,つぎのように取りあえず本体が空の関数(initParticle())を書き加えて与えよう。

function getParticleAnimationSet(animations, initParticleFunc) {
  var animationSet = new ParticleAnimationSet(true, true);

  animationSet.initParticleFunc = initParticleFunc;

}

function initParticle(prop) {
}

試してみると,炎の数(3個)だけ小さなパーティクルが立ち上って,画面の上端に消える図1⁠。つぎのように引数を定めた前述のパーティクルをつくる関数には,炎の数3個,パーティクルは500個が与えてあったはずだ(createParticles(3, 500, 300, 5, scene)⁠⁠。炎は床を中心とした円周上に等間隔で位置決めした。だが,パーティクルについてはとくに何も定めていないため,すべて重なってしまったのだ。

createParticles(炎の数, パーティクル数, 炎の位置の半径, 炎の垂直座標, シーン)

図1 パーティクルが3つ浮上がる

図1 パーティクルが3つ浮上がる

実は,パーティクルにはParticleAnimationSet.initParticleFuncプロパティに定めた関数で初期値が与えられる。プロパティParticleProperties.startTimeParticleProperties.durationで,それぞれアニメーションを始める時間と長さが定まる。そこで,パーティクルを初期化する関数(initParticle())で,つぎのようにランダムな時間を与えた。受取る引数(prop)がパーティクルのParticlePropertiesオブジェクトだ。これで,パーティクルのアニメーションの時間がばらつく。

function initParticle(prop) {
  prop.startTime = Math.random() * 5;
  prop.duration = Math.random() * 4 + 0.1;
}

なお,ParticleAnimationSetオブジェクトをつくるコンストラクタの2つの引数には,前述のとおりともにtrueが渡してあった。したがって,パーティクルのアニメーションはつぎの構文のとおりに,定められた時間ずっと繰り返される。改めて試すと,炎の位置からパーティクルがのろしのように立ち上り続ける図2⁠。

new ParticleAnimationSet(時間設定, ループ)

図2 のろしのように立ち上るパーティクル

図2 のろしのように立ち上るパーティクル

これまで書いたスクリプトをコード2にまとめた。クラスの定めはコード1のまま変えていない。あわせて,サンプル1をjsdo.itに掲げた。今回はここまでで区切ろう。次回はパーティクルの見た目を炎らしく整える。

コード2 パーティクルを定めてアニメーションさせる

var LoaderEvent = require("awayjs-core/lib/events/LoaderEvent");
var TimerEvent = require("awayjs-core/lib/events/TimerEvent");
var Vector3D = require("awayjs-core/lib/geom/Vector3D");
var AssetLibrary = require("awayjs-core/lib/library/AssetLibrary");
var URLRequest = require("awayjs-core/lib/net/URLRequest");
var RequestAnimationFrame = require("awayjs-core/lib/utils/RequestAnimationFrame");
var Timer = require("awayjs-core/lib/utils/Timer");
var View = require("awayjs-display/lib/containers/View");
var DirectionalLight = require("awayjs-display/lib/entities/DirectionalLight");
var Mesh = require("awayjs-display/lib/entities/Mesh");

var StaticLightPicker = require("awayjs-display/lib/materials/lightpickers/StaticLightPicker");
var PrimitivePlanePrefab = require("awayjs-display/lib/prefabs/PrimitivePlanePrefab");
var ParticleAnimationSet = require("awayjs-renderergl/lib/animators/ParticleAnimationSet");
var ParticleAnimator = require("awayjs-renderergl/lib/animators/ParticleAnimator");
var ParticlePropertiesMode = require("awayjs-renderergl/lib/animators/data/ParticlePropertiesMode");
var ParticleBillboardNode = require("awayjs-renderergl/lib/animators/nodes/ParticleBillboardNode");
var ParticleVelocityNode = require("awayjs-renderergl/lib/animators/nodes/ParticleVelocityNode");
var DefaultRenderer = require("awayjs-renderergl/lib/DefaultRenderer");
var MethodMaterial = require("awayjs-methodmaterials/lib/MethodMaterial");
var MethodRendererPool = require("awayjs-methodmaterials/lib/pool/MethodRendererPool");
var HoverController = require("awayjs-display/lib/controllers/HoverController");
var ParticleGeometryHelper = require("awayjs-renderergl/lib/utils/ParticleGeometryHelper");
var view;
var plane;
var cameraController;
var lightPicker;
var timer;
var planeDiffuse = "assets/floor_diffuse.jpg";
var lastMouseX;
var lastMouseY;
var lastPanAngle;
var lastTiltAngle;
var fireObjects;

var particleMaterial;
function initialize() {
  var directionalLight = createDirectionalLight(0.25, 0xFFFFFF);
  view = createView(240, 180, 0x0);
  var scene = view.scene;
  lightPicker = new StaticLightPicker([directionalLight]);
  plane = createPlane(800, 800, lightPicker, -20);
  fireObjects = createParticles(3, 500, 300, 5, scene);
  scene.addChild(plane);
  cameraController = setupCameraController(view.camera, 1000, 0, 90, 45, 20);
  AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete);
  AssetLibrary.load(new URLRequest(planeDiffuse));
  document.onmousedown = startDrag;
  timer = new RequestAnimationFrame(render);
  timer.start();
  var fireTimer = new Timer(1000, fireObjects.length);
  fireTimer.addEventListener(TimerEvent.TIMER, startFire);
  fireTimer.start();
}
function createView(width, height, backgroundColor) {
  var defaultRenderer = new DefaultRenderer(MethodRendererPool);
  var view = new View(defaultRenderer);
  view.width = width;
  view.height = height;
  view.backgroundColor = backgroundColor;
  return view;
}
function createPlane(width, height, light, y) {
  var material = new MethodMaterial(); 
  var plane = new PrimitivePlanePrefab(width, height).getNewObject();
  plane.material = material;
  material.lightPicker = light;
  plane.y = y;
  return plane;
}
function createParticles(numFires, numParticles, radius, y, scene) {
  var GLOBAL = ParticlePropertiesMode.GLOBAL;
  var animations = [
    new ParticleBillboardNode(),
    new ParticleVelocityNode(GLOBAL, new Vector3D(0, 80, 0))
  ];
  var animationSet = getParticleAnimationSet(animations, initParticle);
  var primitive = new PrimitivePlanePrefab(10, 10, 1, 1, false);
  var geometry = primitive.geometry;
  var material = particleMaterial = new MethodMaterial(); 
  var geometrySet = [];
  for (var i = 0; i < numParticles; i++) {
    geometrySet[i] = geometry;
  }
  var fireObjects = getFireObjects(geometrySet, numFires, material, animationSet, radius, y, scene);
  return fireObjects;
}
function getFireObjects(geometrySet, numFires, material, animationSet, radius, y, scene) {
  var fireObjects = [];
  var particleGeometry = ParticleGeometryHelper.generateGeometry(geometrySet);
  var anglePerFire = Math.PI * 2 / numFires;
  for (var i = 0; i < numFires; i++) {
    var mesh = createAnimationParticle(particleGeometry, material, animationSet, fireObjects);
    var angle = i * anglePerFire;
    mesh.x = radius * Math.sin(angle);
    mesh.z = radius * Math.cos(angle);
    mesh.y = y;
    scene.addChild(mesh);
  }
  return fireObjects;
}
function getParticleAnimationSet(animations, initParticleFunc) {
  var animationSet = new ParticleAnimationSet(true, true);
  var count = animations.length;
  for (var i = 0; i < count; i++) {
    animationSet.addAnimation(animations[i]);
  }
  animationSet.initParticleFunc = initParticleFunc;
  return animationSet;
}
function createAnimationParticle(particleGeometry, material, animationSet, fireObjects) {
  var mesh = new Mesh(particleGeometry, material);
  var animator = new ParticleAnimator(animationSet);
  mesh.animator = animator;
  fireObjects.push(new FireObject(mesh, animator));
  return mesh;
}
function initParticle(prop) {
  prop.startTime = Math.random() * 5;
  prop.duration = Math.random() * 4 + 0.1;
}
function startFire(eventObject) {
  var fireTimer = eventObject.target;
  var count = fireTimer.currentCount;
  var fireObject = fireObjects[count - 1];
  fireObject.startAnimation();
  if (count >= fireTimer.repeatCount) {
    fireTimer.removeEventListener(TimerEvent.TIMER, startFire);
  }
}
function createDirectionalLight(ambient, color) {
  var light = new DirectionalLight();
  light.ambient = ambient;
  light.color = color;
  return light;
}
function setupCameraController(camera, distance, minTiltAngle, maxTiltAngle, panAngle, tiltAngle) {
  var cameraController = new HoverController(camera);
  cameraController.distance = distance;
  cameraController.minTiltAngle = minTiltAngle;
  cameraController.maxTiltAngle = maxTiltAngle;
  cameraController.panAngle = panAngle;
  cameraController.tiltAngle = tiltAngle;
  return cameraController;
}
function onResourceComplete(eventObject) {
  var assets = eventObject.assets;
  var material;
  var count = assets.length;
  var url = eventObject.url;
  for (var i = 0; i < count; i++) {
    var asset = assets[i];
    switch (url) {
      case (planeDiffuse):
        material = plane.material;
        material.texture = asset;
        break;
    }
  }
}
function render(timeStamp) {
  view.render();
}
function startDrag(eventObject) {
  lastMouseX = eventObject.clientX;
  lastMouseY = eventObject.clientY;
  lastPanAngle = cameraController.panAngle;
  lastTiltAngle = cameraController.tiltAngle;
  document.onmousemove = drag;
  document.onmouseup = stopDrag;
}
function drag(eventObject) {
  cameraController.panAngle = 0.5 * (eventObject.clientX - lastMouseX) + lastPanAngle;
  cameraController.tiltAngle = 0.3 * (eventObject.clientY - lastMouseY) + lastTiltAngle;
}
function stopDrag(eventObject) {
  document.onmousemove = null;
  document.onmouseup = null;
}

サンプル1 Away3D 15/03/13: Basic particles animation on a floor

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書