如何使用 adobe 新的 flash stage3d 網頁技術來建構下一代 3d 網頁多人線上遊戲
DESCRIPTION
如何使用 Adobe 新的 Flash Stage3D 網頁技術來建構下一代 3D 網頁多人線上遊戲. 穆道聖 , 程式組長 張銘光 , 技術長 樂陞科技股份有限公司 (XPEC Entertainment Inc.). 大綱. 講者簡介 Adobe Flash Stage3D API 介紹 XPEC Flash 3D 引擎 Flash 程式的最佳化 未來工作 結論 Q & A. 講者簡介. 張銘光 19 年的遊戲產業資歷 跨平台 3D 引擎研發經驗 PC/Console/Web. 講者簡介. 穆道聖 超過 4 年以上的跨平台 3D 引擎研發經驗 - PowerPoint PPT PresentationTRANSCRIPT
如何使用 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