如何使用 Adobe 新的 Flash Stage3D 網頁技術來建構下一代 3D 網頁多人線上遊戲

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

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

3. 講者簡介 張銘光 19年的遊戲產業資歷 跨平台3D引擎研發經驗 PC/Console/Web

5. 講者簡介 穆道聖 超過4年以上的跨平台3D引擎研發經驗 PC/Console/Web

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

7. Project C4 Demo Video

8. Adobe Flash Stage3D API介紹

9. Stage3D • 支援所有瀏覽器

10. Stage3D • Stage3D包含了支援GPU加速的3D APIs • Z-buffering • Stencil/Color buffer • Vertex shaders • Fragment shaders • Cube textures • More…

11. Stage3D • 優點: • 支援GPU加速的API • 整合自DirectX, OpenGL, OpenGL ES • 可編程管線(Programmable Pipeline) • 缺點: • 不支援alpha test • 不支援高精確度的紋理格式

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

13. AGAL • Adobe Graphics Assembly Language • 不支援’if-else’條件式 • 不支援’constants’ Program3D

14. XPEC Flash 3D引擎

15. Model Pipeline • Action Message Format (AMF): • 原生ByteArray壓縮 • 原生物件serialization Collada AMF 3DS Max Exporter Binary Converter AMF EngineLoader EngineRender

16. XPEC Flash 3D引擎 CPU • 應用層: 在CPU執行更新及渲染物件 • Command buffer: 儲存graphics API指令

17. XPEC Flash 3D引擎:應用層

18. 場景管理 • 目的: 盡可能減少draw call的數量 • 室內場景 • BSP tree • 開放場景 • Octree/Quad tree • Cell • Grid

19. 場景管理: Project C4 • Grid partition • 座標化三維物件: (MinX, MaxX), (MinY, MaxY) x (3,4),(0,2) (0,0),(1,2) y

20. 場景管理: Project C4 • Frustum: (MinX, MaxX), (MinY, MaxY) x (3,4),(0,2) (0,0),(1,2) y (1,4),(0,4)

21. XPEC Flash 3D引擎:Command buffer • 避免user/kernelmode切換 • 減少材質切換 • “材質排序” • 減少draw call • “共用vertex/indexbuffer” • “動態合併vertex/indexbuffer”

22. 材質排序 • 不透明半透明

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

27. 共用vertex/indexbuffer • 問題: • Buffer的數量是受限制的

28. 共用vertex/indexbuffer Vertex Buffer Index Buffer Vertex Buffer Index Buffer Vertex Buffer Index Buffer

29. 粒子系統 • 在CPU計算粒子的行為參數 • 透明度, 顏色, 運動力, 尺寸, 速度, 紋理座標 • 面向方式

30. 粒子系統 • Index buffer • index都是固定不會被改變 • Vertex buffer • 問題: • 粒子數量不固定 • 易於頻繁地更新vertex buffer資料

31. 粒子系統 Static Index Buffer Dynamic Vertex Buffer Vertex Data

32. Skinned Model • 問題: • 允許較少vertex constants • 每個vertex shader只允許128條constants • 全域vertex constants • 打光, 霧, 常數

33. Skinned Model • 4x3 矩陣 • 骨骼數目限制為29 • “拆分網格模型” 128 constants / 3 = 42.6666 bones 3 * 29 bones = 87 constants

34. Shadow Map

35. Shadow Map

36. Shadow Map • 問題: • 紋理格式: RGBA8 • 視覺缺陷 • 鋸齒化 • 移動時會閃爍

37. Shadow Map • 尺寸: 1024x1024 • RGBA8 R32

38. Shadow Map • Percentage Closer Filtering (PCF)可解決: • Hard shadow • 鋸齒化 • 移動時會閃爍

39. 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)

40. Shadow Map • 基於PCF解法:

41. Toon Shading • Single pass • 問題: 相依於模型面數 • Two passes • 沿著頂點法向量延伸頂點位置 • 不相依於模型面數

42. Toon Shading

43. Alpha Test • 問題: • Stage3D 不提供alpha test • “在片段著色器使用kil指令” • 在行動裝置上損害效能

44. Alpha Test • 解決方法 : • 使用alpha-blend取代alpha-test • 304 draw calls • Alpha-test 效能在桌上型電腦較佳

45. Post Effect Color Filter Origin Glow DOF

46. Static Lightmap • 優點: • 事先計算 • Global illumination • 缺點: • 紋理數量多

47. Flash程式的最佳化

48. Flash程式的最佳化 • 問題: • For Each較慢 • “使用for-loop取代它” • 記憶體管理 • “Recycle manager” • “強化garbage collection”

49. Flash程式的最佳化 • 解決方法: • Recycle manager • 減少garbage collection的負擔 • 節省物件的初始化時間 • public function recycleObject3D( obj:IObject3D ):void • public function requestObject3D( classType:int , searchKey:*, renderHandle:int = 0 ):*

50. Flash程式的最佳化 • 解決方法: • 強化garbage collection • 避免inner function • 強制解參考function pointer • 解構時解參考物件的屬性