away3d 4.1 パーティクル入門
TRANSCRIPT
![Page 1: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/1.jpg)
Away3D 4.1 パーティクル入門
2013-02-12株式会社 ICS 池田泰延
![Page 2: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/2.jpg)
Agenda
• What’s new Away3D 4.1 alpha• Particle System• Official Examples• How to use• Technical Examples
![Page 3: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/3.jpg)
What’s new Away3D 4.1 alpha
• Rendering• Materials• Particles• Performance
![Page 4: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/4.jpg)
Rendering
![Page 5: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/5.jpg)
Materials
![Page 6: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/6.jpg)
Particles
![Page 7: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/7.jpg)
Performance
![Page 8: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/8.jpg)
PARTICLE SYSTEM
![Page 9: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/9.jpg)
Official Examples
![Page 10: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/10.jpg)
FLINT と Away3D 4.1 のパーティクルシステムの比較
• FLINT のほうが自由度が高い• FLINT はクロスライブラリ (Away3D だけで
はなく、 Alternativa3D も使える )• FLINT よりも Away3D 4.1 のほうが軽量
![Page 11: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/11.jpg)
How to Use
1. ジオメトリの作成2. アニメーションセットの作成3. アニメーターの作成4. テクスチャの作成5. メッシュの作成6. アニメーションを再生
![Page 12: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/12.jpg)
ジオメトリの作成var plane = new PlaneGeometry(10, 10, 1, 1, false);var geometrySet = new Vector.<Geometry>();for (var i:int = 0; i < 20000; i++) // ①
geometrySet.push(plane); var geometry = ParticleGeometryHelper.generateGeometry(geometrySet);
![Page 13: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/13.jpg)
アニメーションセット /アニメーターの作成
// アニメーションセットの作成var animSet = new ParticleAnimationSet(true, true);animSet.addAnimation(…);animSet.addAnimation(…);animSet.initParticleFunc = initParticleFunc;
// アニメーターの作成var animator = new ParticleAnimator(animSet);
![Page 14: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/14.jpg)
パーティクルのプロパティfunction initParticleFunc(prop:ParticleProperties):void{
prop.startTime = 0;prop.duration = 4;
// 1 秒間に移動する距離 ( 速度 )prop[ParticleVelocityNode.VELOCITY_VECTOR3D] = new Vector3D(
200 * (Math.random() - 0.5),200 * (Math.random() - 0.5),200 * (Math.random() - 0.5));
}
![Page 15: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/15.jpg)
アニメーションセット /アニメーターの作成
// テクスチャの作成var texure = Cast.bitmapTexture(new BitmapData(2, 2));var material = new TextureMaterial(texure);
// メッシュの作成var mesh = new Mesh(geometry, material);mesh.animator = animator;this.scene.addChild(mesh);
// アニメーションを再生animator.start();
![Page 16: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/16.jpg)
パーティクルの振る舞い• away3d.animators.nodes.* の「 Particle○○○Node 」クラス
で指定• 初期位置 (ParticlePositionNode)• 速度 (ParticleVelocityNode)• 加速度 (ParticleAccelerationNode)• スケール変化 (ParticleScaleNode)• スプライトシート (ParticleSpriteSheetNode)• ビルボード (ParticleBillboardNode)• 色変化 (ParticleColorNode)• 追随 (ParticleFollowNode)• etc ・・・
![Page 17: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/17.jpg)
パーティクルの振る舞いvar animSet = new ParticleAnimationSet(true, true);animSet.addAnimation(
new ParticleVelocityNode(ParticlePropertiesMode.LOCAL_STATIC));
animSet.initParticleFunc = initParticleFunc;
function initParticleFunc(prop:ParticleProperties):void{
prop.startTime = 0;prop.duration = 4;
// 1 秒間に移動する距離 ( 速度 )prop[ParticleVelocityNode.VELOCITY_VECTOR3D] = new Vector3D(
200 * (Math.random() - 0.5),200 * (Math.random() - 0.5),200 * (Math.random() - 0.5));
}
![Page 18: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/18.jpg)
ParticlePropertiesMode クラス• パーティクルのプロパティをどのように設定する
かを指定• GLOBAL– Node クラスのコンストラクタもしくはアニメーション
ステートで設定する• LOCAL_STATIC– パーティクルのプロパティをアニメーションセットの初
期化関数で設定する• LOCAL_DYNAMIC– パーティクルのプロパティをアニメーションステートで
設定する
![Page 19: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/19.jpg)
Technical Examples
![Page 20: Away3D 4.1 パーティクル入門](https://reader035.vdocuments.net/reader035/viewer/2022081502/5591a66a1a28abd9098b46e0/html5/thumbnails/20.jpg)
参考資料• http://away3d.com/tutorials/
Introduction_to_Particles