The document discusses workflows for developing 3D browser games. It covers 3D basics like terminology, shading, and texturing. It then discusses moving from 2D to 3D by comparing display lists and 3D scene graphs. The document outlines the workflow from concept art to importing 3D in-game assets. It also covers advanced 3D topics like post-processing, animation, and particles. Finally, it compares the pros and cons of different 3D web technologies.

1. WORKFLOWS FOR DEVELOPING
NEXT-GEN 3D BROWSER GAMES
@Michael_Plank

2. ABOUT ME
Michael Plank (28, Austria)
Studied computer science (MSc)
Software Developer, Product Owner & Evangelist for
FDT @ Powerflasher >
Co-founded Pro 3 Games developing Delta Strike
@Michael_Plank blog.deltastrike.org

3. AGENDA
3D Basics
• Terminology (Vertex, Face, Polygon, ...)
• Shading, Lighting, Texturing
From 2D to 3D
• Display List vs 3D Scene Graph
• 3D Tools and Libraries
@Michael_Plank blog.deltastrike.org

4. AGENDA
Workflow: From Concept Art to 3D In-Game Asset
• Modeling, Texturing, Importing
Advanced 3D Topics
• Postprocessing, Animation, Particles
Pros/Cons of 3D Web Technologies
@Michael_Plank blog.deltastrike.org

5. 3D BASICS
Terminology, Shading, Lighting, Textures

6. TERMINOLOGY
Face
Vertex Edge
(pl.: Vertices)
x
P( y )
z
Polygon Mesh
@Michael_Plank blog.deltastrike.org

7. PRIMITIVES
Cube Sphere
Torus Cone
Cylinder
@Michael_Plank blog.deltastrike.org

8. PIPELINE
Die Pipeline
input devices modeler
Modeling
transformations
projection
clipping visibility
Rendering shading
rasterization
Output
device drivers output devices 2
@Michael_Plank blog.deltastrike.org

9. Motivation
Motivation
TRANSFORMATION
Object2
Object Object1
Eye
World
Screen
position object add object to
in object space world space project to screen
space (2D)
transform in transform in 4
4
object space world space @Michael_Plank blog.deltastrike.org

10. PROJECTION
Perspektivische Projektion
P(x y z) y
• Isometric P'(x' y' z')
• Dimetric E(0 0 –d)
P
d P' z z
• Trimetric x'
x
• Perspective x x' : x = d : (d + z)
x·d y·d
x' = y' = z' = 0
z+d z+d 19
@Michael_Plank blog.deltastrike.org

11. CULLING
Culling Beispiele
View frustum Detail
Backface
ortal Occlusion
P
9
@Michael_Plank blog.deltastrike.org

12. LIGHTING
lightsources
direct indirect
point light spot light directional light ambient light
@Michael_Plank blog.deltastrike.org

13. SHADING
Flat Gouraud Phong
@Michael_Plank blog.deltastrike.org

14. TEXTURING
0 1 u
1
v
@Michael_Plank blog.deltastrike.org

15. TEXTURING
@Michael_Plank blog.deltastrike.org

16. FROM 2D TO 3D
2D/3D Scence Graph, Tools & Libs

17. COORDINATE SYSTEM
2D 3D right handed 3D left handed
y y
x
z
y
x x
z
translate x, y translate x, y, z
scale x, y scale x, y, z
rotate rotate x, y, z
@Michael_Plank blog.deltastrike.org

18. DEPTH SORTING
2D 3D
index 2
index 1
index 0
Z-Buffer
depth sort each layer depth sort each pixel
@Michael_Plank blog.deltastrike.org

19. CONTAINERS
2D 3D (Away3D)
DisplayObject
Object3D
(Bitmap, Shape, Video, ...)
DisplayObjectContainer
ObjectContainer3D
(Sprite, MovieClip, ...)
@Michael_Plank blog.deltastrike.org

20. SCENE GRAPH
2D 3D (Away3D)
Sprite ObjectContainer3D
Sprite Bitmap ObjectContainer3D Sphere3D
Video Shape Cube3D Plane3D
@Michael_Plank blog.deltastrike.org

21. GETTING STARTED
WITH AWAY3D
• Primitives
• Materials
• Lights
• Containers
@Michael_Plank blog.deltastrike.org

22. CREATING 3D ASSETS
• 3D Packages
• Blender (Open Source)
• Maya
• 3ds max
• ...
@Michael_Plank blog.deltastrike.org

23. STAGE 3D LIBRARIES
• Away3D (Open Source & no restrictions)
• Alternativa (Open Source)
• Minko (Open Source)
• Flare3D
• ...
@Michael_Plank blog.deltastrike.org

24. FLASH STAGES
3D Game 2D Game UI
@Michael_Plank blog.deltastrike.org

26. WORKFLOW
From concept art to in-game asset

27. WORK-PIPELINE
Preproduction Production Interaction
@Michael_Plank blog.deltastrike.org

28. WORK-PIPELINE
Preproduction Production Interaction
•Concept Art
•Image Planes
@Michael_Plank blog.deltastrike.org

29. 2 MINUTE SCRIBBLES

30. SKETCHES

31. IMAGE PLANES

32. WORK-PIPELINE
export image
planes
Preproduction Production Interaction
•Concept Art •Modeling
•Image Planes •Texturing
•Color
•Specular
•Normal
@Michael_Plank blog.deltastrike.org

33. 3D MODEL
POLY COUNT!
BUFFALO: 5400 POLYS

34. UV MAP

35. COLOR MAP

36. SPECULAR MAP

37. NORMAL MAP

38. TEXTURED 3D MODEL

39. WORK-PIPELINE
export image export
planes 3D asset
Preproduction Production Interaction
•Concept Art •Modeling •Load 3D Asset
•Image Planes •Texturing •Add functionality
•Color
•Specular
•Normal
@Michael_Plank blog.deltastrike.org

40. WORK-PIPELINE
export imageMaterials
Geometry export
Scene-graph Animation
3DS Yesplanes Yes 3D asset
Yes Not in Away3D
Preproduction
AC3D Yes
Production
Yes Yes
Interaction
Not in Away3D
AWD1 Yes Yes Yes No support
•Concept Art
AWD2 •Modeling
Yes Yes Yes •Load 3D Asset
Yes, skeletal
•Image Planes •Texturing
DAE (pending) Yes Yes Yes
•Add functionality
Yes, skeletal
MD2
•Color
Yes Yes No support Yes, vertex
MD5 Yes No support No support Yes, skeletal
OBJ
•Specular
Yes Yes Inconsistent* No support
•Normal
Prefab 2 is coming
@Michael_Plank blog.deltastrike.org

41. IN-GAME ASSET

42. ADVANCED 3D STUFF
Postprocessing, Animation, Particles

43. POSTPROCESSING
EFFECTS
• Blur
• Bloom
• Depth of Field
• ...
• implemented using
AGAL shaders
@Michael_Plank blog.deltastrike.org

44. POSTPROCESSING
Die Pipeline
EFFECTS
input devices modeler
Modeling
• Blur transformations
projection
• Bloom
clipping visibility
• Depth of Field
Rendering shading
• ... rasterization
Output
device drivers output devices 2
• implemented using
AGAL shaders
@Michael_Plank blog.deltastrike.org

45. POSTPROCESSING
EFFECTS
• Blur
• Bloom
• Depth of Field
• ...
• implemented using
AGAL shaders
@Michael_Plank blog.deltastrike.org

46. ANIMATION
@Michael_Plank blog.deltastrike.org

47. PARTICLES
• Flint Particles
• Away3D renderer GPU
• Physics calculated on CPU
• Away3D Particles System
• Physics calculated on GPU!
@Michael_Plank blog.deltastrike.org

48. Flash Unity (Plugin) WebGL
+ Compatibility + Tooling + No Plugin
Desktop
- Tooling + C# performance - Compatibility
- AS3 performance - Compatibility - JS
Unity SWF export
Unreal SWF export
+ Tooling
- Licensing (Unity /
Unreal + 9% Adobe)
Mobile
AIR Unity mobile
iOS + Android iOS + Android
@Michael_Plank blog.deltastrike.org

49. THX
@Michael_Plank
blog.deltastrike.org