如何使用 Adobe 新的 Flash Stage3D 網頁技術來建構下一代 3D 網頁多人線上遊戲穆道聖 , 程式組長張銘光 , 技術長樂陞科技股份有限公司 (XPEC Entertainment Inc.)

大綱• 講者簡介• Adobe Flash Stage3D API 介紹• XPEC Flash 3D 引擎• Flash 程式的最佳化 • 未來工作• 結論• Q & A

講者簡介• 張銘光

– 19 年的遊戲產業資歷– 跨平台 3D 引擎研發經驗– PC/Console/Web

講者簡介• 穆道聖

– 超過 4 年以上的跨平台 3D 引擎研發經驗– PC/Console/Web

為何選擇 Flash?Native C/C++ vs. Unity vs. Flash

Native C/C++ Unity Flash

開發難度 高 低 中跨平台性 低 高 高效能 高 中 低市場接受度 低 中 高

(>95%)

Project C4 Demo Video

Adobe Flash Stage3D API 介紹

Stage3D• 支援所有瀏覽器

Stage3D• Stage3D 包含了支援 GPU 加速的 3D APIs

– Z-buffering– Stencil/Color buffer– Vertex shaders– Fragment shaders– Cube textures– More…

Stage3D• 優點 :

– 支援 GPU 加速的 API– 整合自 DirectX, OpenGL, OpenGL ES– 可編程管線 (Programmable Pipeline)

• 缺點 :– 不支援 alpha test– 不支援高精確度的紋理格式

Stage3D

資源數量 允許總數 記憶體Vertex buffers 4096 256 MBIndex buffers 4096 128 MB Programs 4096 16 MB Textures 4096 128 MB*Cube textures 4096 256 MB Draw call limits 32,768

*350 MB 為 texture 的絕對限制 , 340 MB 為我們實測的結果

AGAL• Adobe Graphics Assembly Language

– 不支援’ if-else’ 條件式– 不支援’ constants’

Program3D

XPEC Flash 3D 引擎

Model Pipeline• Action Message Format (AMF):

– 原生 ByteArray 壓縮– 原生物件 serialization

Collada AMF3DS Max

EngineLoader

Exporter BinaryConverter

AMFEngineRender

XPEC Flash 3D 引擎

• 應用層 : 在 CPU 執行更新及渲染物件• Command buffer: 儲存 graphics API 指令

應用層

Command buffer

驅動程式

GPUCPU

XPEC Flash 3D 引擎 : 應用層Object3D• Material• Geometry

Update• UpdateDeltaTime• UpdateTransform

Scene management• Scene partition• Frustum culling

Update• UpdateHierarchy

Draw• SetMaterial• SetGeometry

Stage3D• Set Stage3D APIs

場景管理• 目的 : 盡可能減少 draw call 的數量• 室內場景

– BSP tree• 開放場景

– Octree/Quad tree– Cell– Grid

場景管理 : Project C4• Grid partition• 座標化三維物件 : (MinX, MaxX), (MinY, MaxY)

(0, 0)

(2, 2)

(4, 4)

(0,0),(1,2)

(3,4),(0,2)

y

x

場景管理 : Project C4• Frustum: (MinX, MaxX), (MinY, MaxY)

(0, 0)

(2, 2)

(4, 4)

(1,4),(0,4)

(0,0),(1,2)

(3,4),(0,2)

y

x

XPEC Flash 3D 引擎 : Command buffer

初始化•createVertex/Index Buffer

•createTexture•createProgram

開始•clear•setRenderToTexture

繪圖•setVertex/Index Buffer•setProgram•setProgramConstants•setRenderState•setTextureAt•drawTriangles

結束•present

• 避免 user/kernel mode 切換• 減少材質切換

– “ 材質排序”• 減少 draw call

– “ 共用 vertex/index buffer”– “ 動態合併 vertex/index buffer”

材質排序• 不透明半透明

材質排序• 材質狀態管理• 1047/2598 draw calls

0

20

40

60

CPU waiting GPURender loop

Elap

sed

time(

ms)

020406080

100

CPU waiting GPURender loop

Elap

sed

time(

ms)

Before sorting(ms) After sorting(ms)NVIDIA 8800 GT- 1047 draw calls

Render loop elapsed time

16 16

Total elapsed time

41 40

NVIDIA 8800 GT- 2598 draw calls

Render loop elapsed time

36 36

Total elapsed time

50 50

Before sorting(ms) After sorting(ms)NVIDIA 6600 GT- 1047 draw calls

Render loop elapsed time

34 31

Total elapsed time

53 48

NVIDIA 6600 GT- 2598 draw calls

Render loop elapsed time

81 64

Total elapsed time

89 89

共用 vertex/index buffer• 問題 :

– Buffer 的數量是受限制的資源數量 允許總量 記憶體Vertex buffers 4096 256 MBIndex buffers 4096 128 MB Programs 4096 16 MB

共用 vertex/index bufferVertex Buffer

Index Buffer

Vertex Buffer

Index Buffer

Vertex Buffer

Index Buffer

粒子系統• 在 CPU 計算粒子的行為參數

– 透明度 , 顏色 , 運動力 , 尺寸 , 速度 , 紋理座標– 面向方式

粒子系統• Index buffer

– index 都是固定不會被改變• Vertex buffer

– 問題 :• 粒子數量不固定• 易於頻繁地更新 vertex buffer 資料

粒子系統

StaticIndex Buffer

DynamicVertex Buffer

Vertex Data

Skinned Model• 問題 :

– 允許較少 vertex constants

• 每個 vertex shader 只允許128 條 constants

– 全域 vertex constants• 打光 , 霧 , 常數

Skinned Model• 4x3 矩陣• 骨骼數目限制為 29

– “ 拆分網格模型”128 constants / 3 = 42.6666 bones3 * 29 bones = 87 constants

Shadow Map

Shadow Map

Shadow Map• 問題 :

– 紋理格式 : RGBA8– 視覺缺陷

• 鋸齒化• 移動時會閃爍

• 尺寸 : 1024x1024• RGBA8 R32

Shadow Map

Shadow Map• Percentage Closer Filtering (PCF) 可解決 :

– Hard shadow– 鋸齒化– 移動時會閃爍

Shadow Map• PCF pw = 1/mapWidth ph = 1/mapHeight

• Result = 0.5 * texel( 0, 0) + 0.125 * texel( -pw, +ph) + 0.125 * texel(-pw, -ph)+ 0.125 * texel( +pw, +ph) + 0.125 * texel(+pw, -ph)

(-pw , +ph) (+pw , +ph)

(0, 0)

(+pw , -ph)(-pw , -ph)

Shadow Map• 基於 PCF 解法 :

NVIDIA 6600GT - 1047 draw

calls

NVIDIA 6600GT - 1047 draw calls with

PCF

NVIDIA 8800GT - 1047 draw

calls

NVIDIA 8800GT - 1047 draw calls with

PCF

020406080

100

CPU waiting GPURender loop

Elap

sed

time(

ms)

Toon Shading• Single pass

– 問題 : 相依於模型面數

• Two passes– 沿著頂點法向量延伸頂點位置– 不相依於模型面數

𝑣→

:𝑣𝑖𝑒𝑤𝑣𝑒𝑐𝑡𝑜𝑟𝜃

𝑖𝑓 𝜃> h h𝑡 𝑟𝑒𝑠 𝑜𝑙𝑑 ,𝑑𝑟𝑎𝑤𝑡𝑜𝑜𝑛𝑐𝑜𝑙𝑜𝑟

𝑁→

:𝑣𝑒𝑟𝑡𝑒𝑥 𝑛𝑜𝑟𝑚𝑎𝑙

Toon Shading

• 保留後方網格• 延展頂點位置• 繪製顏色

Toon• 保留前方網格• 繪製材質一般 結果

Alpha Test• 問題 :

– Stage3D 不提供 alpha test– “ 在片段著色器使用 kil 指令”

• 在行動裝置上損害效能

Alpha Test• 解決方法 :

• 304 draw calls• Alpha-test 效能在桌上型電腦較佳

Render loop time(ms)

Total time(ms)

6600GT alpha test

17~19 47

6600GT alpha blend

18~19 65~67

8800GT alpha test

0.16 37

8800GT alpha blend

0.3 36

使用 alpha-blend取代alpha-test

Post EffectOriginGlowDOFColor Filter

Static Lightmap• 優點 :

–事先計算– Global illumination

• 缺點 :– 紋理數量多

Flash 程式的最佳化

Flash 程式的最佳化 • 問題 :

– For Each 較慢• “使用 for-loop取代它”

– 記憶體管理• “Recycle manager”• “強化 garbage collection”

Flash 程式的最佳化• 解決方法 :

– Recycle manager• 減少 garbage collection 的負擔• 節省物件的初始化時間• public function

recycleObject3D( obj:IObject3D ):void• public function requestObject3D( classType:int ,

searchKey:*, renderHandle:int = 0 ):*

Flash 程式的最佳化• 解決方法 :

–強化 garbage collection• 避免 inner function• 強制解參考 function pointer• 解構時解參考物件的屬性

使用 inner function

不使用 inner function

Flash 程式的最佳化• 實驗 : 優化前 vs. 優化後

– 不停地切換關卡優化前 : 優化後 :

快速載入機制

快速載入機制• 串流載入 (Streaming)

– 資料壓縮• PNG: swf 壓縮率 : 20%~55%• 打包 : zip 壓縮率 : 25~30%

– 分批下載• 將資源分配在不同包• 只下載實際上需要的資源

快速載入機制進入選角場景 進入遊戲場景 完成所有紋理

的載入5Mb/s花費時間(秒 )

15 6 12

• 遊戲主程式• 遊戲介面 • 遊戲場景資料 • 場景紋理

未來工作• Adobe Texture Format (ATF)

– 支援 compressed/mipmap 紋理於不同的 GPU晶片• FlasCC

– 編譯 C++AS3• AS3 Workers

– 支援 multi-thread• MovieClip

– 改用 Stage3D UI framework, 例如 : Starling

結論• 跨平台 / 跨作業系統 / 跨瀏覽器

– 瀏覽器 + 雲端運算–寫一次程式碼，運行於任何平台

• Flash vs. HTML5• 混合語言程式開發的趨勢

– C/C++ + Flash/ActionScript– C/C++ + HTML5/JavaScript

致謝• XPEC - Project C4 Team• XPEC - RDO Team

Q & AEllison_Mu@xpec.comEric_Chang@xpec.com