Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG

1. Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG Daosheng Mu, Lead Programmer Eric Chang, CTO XPEC Entertainment Inc.

2. Outline • Brief of Speakers • Introduction of Adobe Flash Stage3D API • XPEC Flash 3D Engine • Optimization for Flash Program • Future Works • Conclusion • Q & A

3. Brief of Speakers Eric Chang 19 Years of Game Industry Experiences Cross-platform 3D Game Engine Development PC/Console/Web

5. Brief of Speakers Daosheng Mu 4.5 Years of Cross-platform 3D Game Engine Development Experiences PC/Console/Web

6. Why Flash? Native C/C++ vs. Unity vs. Flash

7. Project C4 Demo Video

8. Introduction of Adobe Flash Stage3D API

9. Stage3D • Support all browsers

10. Stage3D • Stage3D includes with GPU-accelerated 3D APIs • Z-buffering • Stencil/Color buffer • Vertex shaders • Fragment shaders • Cube textures • More…

11. Stage3D • Pros: • GPU accelerated API • Relies on DirectX, OpenGL, OpenGL ES • Programmable pipeline • Cons: • No support of alpha test • No support of high-precision texture format

12. Stage3D *350 MB is absolute limit for textures, 340 MB is the result we gather

13. AGAL • Adobe Graphics Assembly Language • No support of ‘if-else’ statements • No support of ‘constants’ Program3D

14. XPEC Flash 3D Engine

15. Model Pipeline • Action Message Format (AMF): • Native ByteArray compression • Native object serialization Collada AMF 3DS Max Exporter Binary Converter AMF EngineLoader EngineRender

16. XPEC Flash 3D Engine CPU • Application: update/render on CPU • Command buffer: store graphics APIinstruction

17. XPEC Flash 3D Engine: Application

18. Scene Management • Goal: Minimize draw calls as possible • Indoor Scene • BSP tree • Outdoor Scene • Octree/Quad tree • Cell • Grid

19. Scene Management: Project C4 • Grid partition • Object3D: (MinX, MaxX), (MinY, MaxY) x (3,4),(0,2) (0,0),(1,2) y

20. Scene Management: 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 Engine:Command Buffer • Avoid user/kernel mode transition • Decrease shader patching • “Material sorting” • Reduce draw call • “Shared buffers” • “Dynamic batching”

22. Material Sorting • Opaque/Translucent

23. Material Sorting • State management • 1047/2598 draw calls

27. Shared Buffers • Problem: • Numbers of buffers are limited

28. Shared Buffers Vertex Buffer Index Buffer Vertex Buffer Index Buffer Vertex Buffer Index Buffer

29. Particle System • Each particle property is computed on the CPU at each frame • Alpha, Color, LinearForce, Size, Speed, UV • Facing

30. Particle System • Index buffer • Indices will not be changed • Vertex buffer • Problem: • Particle amount depends on frame • Upload data to vertex buffer frequently

31. Particle System Static Index Buffer Dynamic Vertex Buffer Vertex Data

32. Skinned Model • Problem: • Lesser vertex constants allowed • 128 constants per vertex program • Global vertex constants • Lighting, Fog, Const

33. Skinned Model • 4x3 Matrix • Bone count per geometry is limited to 29 • “Split mesh” 128 constants / 3 = 42.6666 bones 3 * 29 bones = 87 constants

34. Shadow Map

35. Shadow Map

36. Shadow Map • Problem: • Texture format: RGBA8 • Artifact • Aliasing • Popping while moving

37. Shadow Map • Size: 1024x1024 • RGBA8 R32

38. Shadow Map • Percentage Closer Filtering (PCF) solution: • Hard shadow • Aliasing • Popping while moving

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 based solution:

41. Toon Shading • Single pass • Problem: Dependent on no. of face • Two passes • Scale vertex position following the vertex normal • Not dependent on no. of face

42. Toon Shading

43. Alpha Test • Problem: • Stage3D without alpha test • “kilopcode in AGAL” • Performance penalty on mobile device

44. Alpha Test • Solution: • Replace alpha-test • with alpha-blend • 304 draw calls • Alpha-test performance is better on desktop

45. Post Effect Origin Glow Color Filter DOF

46. Static Lightmap • Pros: • Pre-computation • Global illumination • Cons: • More textures

47. Optimization for Flash Program

48. Optimization for Flash Program • Problem: • For Each is slow • “Use for-loop to replace it” • Memory management • “Recycle manager” • “Strengthen garbage collection”

49. Optimization for Flash Program • Solution: • Recycle manager • Reduce garbage collection loading • Save objects initial time • public function recycleObject3D( obj:IObject3D ):void • public function requestObject3D( classType:int , searchKey:*, renderHandle:int = 0 ):*

50. Optimization for Flash Program • Solution: • Strengthen garbage collection • Avoid inner function • Force to dereference function pointer • Dereference attribute in object destructor