Introduction to Stage3D: Part 7

Introduction to Stage3D: Part 7
fire effect for stage3d tutorial
火/火球/火焰 效果教學

本篇是 Stage3D 的應用，
如果對 Stage3D 運作還不是很清楚，可以先看前幾篇入門文章。

在前一篇火焰效果教學，
是用 CPU Render 的方式處理效果，
接下來會用到 Stage3D GPU Render 運算功能來呈現火焰效果，
原理：
建立粒子 -> 改變粒子座標及大小 -> BlendMode="Add" -> Render 輸出

AGAL code 說明
vertex shader：
Register components can be accessed both through the coordinate accessors (xyzw), and through the color accessors (rgba)。
大小 vt0 * vc4.ww
mul vt0.xy, vt0, vc4.ww
座標 vt0 + vc4.xy
add vt0.xy, vt0, vc4.xy
4x4 矩陣運算(scale)
m44 op, vt0, vc0

fragment shader：
取得 uv
mov v0, va1
參照 v0 從材質 fs0 取樣放入 ft0
tex ft0, v0, fs0<2d,linear>
加上顏色 ft0 * fc0
mul oc, ft0, fc0

幾個重點如下：
此效果為 2D，不需要用到 3D 透視，
只有用到 Matrix3D 改變粒子的大小。
matrix3d = new Matrix3D();
matrix3d.appendScale(1 / (500 / 4), 1 / (500 / 4), 1);
context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, matrix3d, true);

同樣 2D 下不需要開啟 depthAndStencil，如果開啟 BlendFactors 也會無效。
context3D.configureBackBuffer(stage.stageWidth, stage.stageHeight, 2, false);
context3D.setBlendFactors(Context3DBlendFactor.ONE, Context3DBlendFactor.ONE);

最後 Render 輸出的地方，動態改變 transformConstants 及 colorConstants 。
transformConstants[0] = p.x;
transformConstants[1] = p.y;
transformConstants[3] = p.size;
colorConstants[0] = p.r;
colorConstants[1] = p.g;
colorConstants[2] = p.b;
context3D.setProgramConstantsFromVector(Context3DProgramType.VERTEX, 4, transformConstants);
context3D.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, colorConstants);

最後完成的效果如下：

fire effect for stage3d - wonderfl build flash online