using the new flash stage3d web technology to build your own next 3d browser mmog
DESCRIPTION
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. Outline. Brief of Speakers Introduction of Adobe Flash Stage3D API XPEC Flash 3D Engine Optimization for Flash Program Future Works - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/1.jpg)
Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG
Daosheng Mu, Lead ProgrammerEric Chang, CTOXPEC Entertainment Inc.
![Page 2: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/2.jpg)
Outline• Brief of Speakers• Introduction of Adobe Flash Stage3D API• XPEC Flash 3D Engine• Optimization for Flash Program• Future Works• Conclusion• Q & A
![Page 3: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/3.jpg)
Brief of Speakers• Eric Chang
– 19 Years of Game Industry Experiences
– Cross-platform 3D Game Engine Development
– PC/Console/Web
![Page 4: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/4.jpg)
![Page 5: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/5.jpg)
Brief of Speakers• Daosheng Mu
– 4.5 Years of Cross-platform 3D Game Engine Development Experiences
– PC/Console/Web
![Page 6: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/6.jpg)
Why Flash?Native C/C++ vs. Unity vs. Flash
Native C/C++ Unity Flash
DevelopmentDifficulty High Low Mid
Ease ofCross Platform Low High High
Performance High Mid Low
Market Popularity Low Mid
High(>95%)
![Page 7: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/7.jpg)
Project C4 Demo Video
![Page 8: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/8.jpg)
Introduction of Adobe Flash Stage3D API
![Page 9: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/9.jpg)
Stage3D• Support all browsers
![Page 10: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/10.jpg)
Stage3D• Stage3D includes with GPU-accelerated
3D APIs– Z-buffering– Stencil/Color buffer– Vertex shaders– Fragment shaders– Cube textures– More…
![Page 11: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/11.jpg)
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
![Page 12: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/12.jpg)
Stage3D
ResourceNumber allowedTotal memoryVertex 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 is absolute limit for textures, 340 MB is the result we gather
![Page 13: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/13.jpg)
AGAL• Adobe Graphics Assembly Language
– No support of ‘if-else’ statements– No support of ‘constants’
Program3D
![Page 14: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/14.jpg)
XPEC Flash 3D Engine
![Page 15: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/15.jpg)
Model Pipeline• Action Message Format (AMF):
– Native ByteArray compression– Native object serialization
3DS Max
EngineLoader
Exporter ColladaBinary
Converter AMF
AMFEngineRender
![Page 16: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/16.jpg)
XPEC Flash 3D Engine
• Application: update/render on CPU• Command buffer: store graphics API
instruction
Application DriverCPU
![Page 17: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/17.jpg)
XPEC Flash 3D Engine: ApplicationObject3D•Material•Geometry
Update•UpdateDeltaTime•UpdateTransform
Scene management•Scene partition•Frustum culling
Update•UpdateHierarchy
Draw•SetMaterial•SetGeometry
Stage3D•Set Stage3D APIs
![Page 18: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/18.jpg)
Scene Management• Goal: Minimize draw calls as possible• Indoor Scene
– BSP tree• Outdoor Scene
– Octree/Quad tree– Cell– Grid
![Page 19: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/19.jpg)
Scene Management: Project C4• Grid partition• Object3D: (MinX, MaxX), (MinY, MaxY)
(0, 0)
(2, 2)
(4, 4)
(0,0),(1,2)
(3,4),(0,2)
y
x
![Page 20: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/20.jpg)
Scene Management: 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
![Page 21: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/21.jpg)
XPEC Flash 3D Engine:Command BufferInitialize
• createVertex/Index Buffer
• createTexture
• createProgram
Begin
• clear• setRend
erToTexture
Draw
• setVertex/Index Buffer
• setProgram• setProgram
Constants• setRenderS
tate• setTextureA
t• drawTriangl
es
• Avoid user/kernel mode transition• Decrease shader patching
– “Material sorting”• Reduce draw call
– “Shared buffers”– “Dynamic batching”
![Page 22: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/22.jpg)
Material Sorting• Opaque/Translucent
![Page 23: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/23.jpg)
Material Sorting• State management• 1047/2598 draw calls
![Page 24: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/24.jpg)
0
20
40
60
CPU waiting GPURender loop
Elap
sed
time(
ms)
![Page 25: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/25.jpg)
020406080
100
CPU waiting GPURender loop
Elap
sed
time(
ms)
![Page 26: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/26.jpg)
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
![Page 27: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/27.jpg)
Shared Buffers• Problem:
– Numbers of buffers are limited
ResourceNumber allowedTotal memoryVertex buffers 4096 256 MBIndex buffers 4096 128 MB Programs 4096 16 MB
![Page 28: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/28.jpg)
Shared BuffersVertex Buffer
Index Buffer
Vertex Buffer
Index Buffer
Vertex Buffer
Index Buffer
![Page 29: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/29.jpg)
Particle System• Each particle
property is computed on the CPU at each frame– Alpha, Color,
LinearForce, Size, Speed, UV
– Facing
![Page 30: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/30.jpg)
Particle System• Index buffer
– Indices will not be changed
• Vertex buffer– Problem:
• Particle amount depends on frame• Upload data to vertex buffer frequently
![Page 31: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/31.jpg)
Particle System
StaticIndex Buffer
DynamicVertex Buffer
Vertex Data
![Page 32: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/32.jpg)
Skinned Model• Problem:
– Lesser vertex constants allowed
• 128 constants per vertex program
– Global vertex constants• Lighting, Fog, Const
![Page 33: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/33.jpg)
Skinned Model• 4x3 Matrix• Bone count per
geometry is limited to 29– “Split mesh”
128 constants / 3 = 42.6666 bones3 * 29 bones = 87 constants
![Page 34: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/34.jpg)
Shadow Map
![Page 35: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/35.jpg)
Shadow Map
present()
End frame
setRenderToBackBuffer()
Set shadow map
setRenderToTexture()
Clear shadow map Draw to shadow map
clear()
Clear back buffer
![Page 36: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/36.jpg)
Shadow Map• Problem:
– Texture format: RGBA8– Artifact
• Aliasing• Popping while moving
![Page 37: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/37.jpg)
• Size: 1024x1024• RGBA8 R32
Shadow Map
![Page 38: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/38.jpg)
Shadow Map• Percentage Closer Filtering (PCF) solution:
– Hard shadow– Aliasing– Popping while moving
![Page 39: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/39.jpg)
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)
![Page 40: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/40.jpg)
Shadow Map• PCF based solution:
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)
![Page 41: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/41.jpg)
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
𝑣→
:𝑣𝑖𝑒𝑤𝑣𝑒𝑐𝑡𝑜𝑟𝜃
𝑖𝑓 𝜃> h h𝑡 𝑟𝑒𝑠 𝑜𝑙𝑑 ,𝑑𝑟𝑎𝑤𝑡𝑜𝑜𝑛𝑐𝑜𝑙𝑜𝑟
𝑁→
:𝑣𝑒𝑟𝑡𝑒𝑥 𝑛𝑜𝑟𝑚𝑎𝑙
![Page 42: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/42.jpg)
Toon Shading
• Enable back face
• Scale vertex position
• Draw color
Toon• Enable front
face• Draw material
General Result
![Page 43: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/43.jpg)
Alpha Test• Problem:
– Stage3D without alpha test– “kil opcode in AGAL”
• Performance penalty on mobile device
![Page 44: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/44.jpg)
Alpha Test• Solution:
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
• 304 draw calls• Alpha-test performance is better on
desktop
Replace alpha-test with alpha-blend
![Page 45: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/45.jpg)
Post EffectOriginGlowDOFColor Filter
![Page 46: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/46.jpg)
Static Lightmap• Pros:
– Pre-computation– Global illumination
• Cons:– More textures
![Page 47: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/47.jpg)
Optimization for Flash Program
![Page 48: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/48.jpg)
Optimization for Flash Program
• Problem:– For Each is slow
• “Use for-loop to replace it”– Memory management
• “Recycle manager”• “Strengthen garbage collection”
![Page 49: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/49.jpg)
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 ):*
![Page 50: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/50.jpg)
Optimization for Flash Program
• Solution:– Strengthen garbage collection
• Avoid inner function• Force to dereference function pointer• Dereference attribute in object destructor
![Page 51: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/51.jpg)
• Avoid inner function• Force to dereference function pointer
Without inner function
Use inner function
![Page 52: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/52.jpg)
Optimization for Flash Program
• Experiment: before vs. after– Switching among levels
Before improvement: After improvement :
![Page 53: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/53.jpg)
Rapid loading
![Page 54: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/54.jpg)
Rapid loading• Streaming
– Data compression• PNG: swf compression: 20%~55%• Package: zip compression: 25~30%
– Batch loading• Separate resource to several packages• Download what you really need
![Page 55: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/55.jpg)
![Page 56: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/56.jpg)
Rapid loading
Enter to avatar stage
Enter to game stage
After loading picture finished
5Mb/sElapsed time (sec)
15 6 12
• game code• ui
• game scene • scene textures
![Page 57: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/57.jpg)
Future Works• Adobe Texture Format (ATF)
– Support for compressed/mipmap textures on the different GPU chipset
• FlasCC– C++ AS3 Compilation
• AS3 Workers– Multi-thread support
• MovieClip– Replace with Stage3D UI framework, ex: Starling
![Page 58: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/58.jpg)
Conclusion• Cross-Device/Cross-OS/Cross-Browser
– Browser + Cloud Computing– Write Once, Run Anywhere
• Flash vs. HTML5• Cross-Compiling Technology Trend
– C/C++ + Flash/ActionScript– C/C++ + HTML5/JavaScript
![Page 59: Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser MMOG](https://reader035.vdocument.in/reader035/viewer/2022062302/56816777550346895ddc75d5/html5/thumbnails/59.jpg)
Acknowledgements• XPEC - Project C4 Team• XPEC - RDO Team