SlideShare a Scribd company logo

Workflows for developing next gen 3D browser games

•
•
Michael Plank
Michael Plank

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.

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 49
Downloaded 147 times
WORKFLOWS FOR DEVELOPING NEXT-GEN 3D BROWSER GAMES @Michael_Plank
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
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
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
3D BASICS Terminology, Shading, Lighting, Textures
TERMINOLOGY Face Vertex Edge (pl.: Vertices) x P( y ) z Polygon Mesh @Michael_Plank blog.deltastrike.org
PRIMITIVES Cube Sphere Torus Cone Cylinder @Michael_Plank blog.deltastrike.org
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
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
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
CULLING Culling Beispiele View frustum Detail Backface ortal Occlusion P 9 @Michael_Plank blog.deltastrike.org
LIGHTING lightsources direct indirect point light spot light directional light ambient light @Michael_Plank blog.deltastrike.org
SHADING Flat Gouraud Phong @Michael_Plank blog.deltastrike.org
TEXTURING 0 1 u 1 v @Michael_Plank blog.deltastrike.org
TEXTURING @Michael_Plank blog.deltastrike.org
FROM 2D TO 3D 2D/3D Scence Graph, Tools & Libs
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
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
CONTAINERS 2D 3D (Away3D) DisplayObject Object3D (Bitmap, Shape, Video, ...) DisplayObjectContainer ObjectContainer3D (Sprite, MovieClip, ...) @Michael_Plank blog.deltastrike.org
SCENE GRAPH 2D 3D (Away3D) Sprite ObjectContainer3D Sprite Bitmap ObjectContainer3D Sphere3D Video Shape Cube3D Plane3D @Michael_Plank blog.deltastrike.org
GETTING STARTED WITH AWAY3D • Primitives • Materials • Lights • Containers @Michael_Plank blog.deltastrike.org
CREATING 3D ASSETS • 3D Packages • Blender (Open Source) • Maya • 3ds max • ... @Michael_Plank blog.deltastrike.org
STAGE 3D LIBRARIES • Away3D (Open Source & no restrictions) • Alternativa (Open Source) • Minko (Open Source) • Flare3D • ... @Michael_Plank blog.deltastrike.org
FLASH STAGES 3D Game 2D Game UI @Michael_Plank blog.deltastrike.org
Workflows for developing next gen 3D browser games
WORKFLOW From concept art to in-game asset
WORK-PIPELINE Preproduction Production Interaction @Michael_Plank blog.deltastrike.org
WORK-PIPELINE Preproduction Production Interaction •Concept Art •Image Planes @Michael_Plank blog.deltastrike.org
2 MINUTE SCRIBBLES
SKETCHES
IMAGE PLANES
WORK-PIPELINE export image planes Preproduction Production Interaction •Concept Art •Modeling •Image Planes •Texturing •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
3D MODEL POLY COUNT! BUFFALO: 5400 POLYS
UV MAP
COLOR MAP
SPECULAR MAP
NORMAL MAP
TEXTURED 3D MODEL
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
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
IN-GAME ASSET
ADVANCED 3D STUFF Postprocessing, Animation, Particles
POSTPROCESSING EFFECTS • Blur • Bloom • Depth of Field • ... • implemented using AGAL shaders @Michael_Plank blog.deltastrike.org
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
POSTPROCESSING EFFECTS • Blur • Bloom • Depth of Field • ... • implemented using AGAL shaders @Michael_Plank blog.deltastrike.org
ANIMATION @Michael_Plank blog.deltastrike.org
PARTICLES • Flint Particles • Away3D renderer GPU • Physics calculated on CPU • Away3D Particles System • Physics calculated on GPU! @Michael_Plank blog.deltastrike.org
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
THX @Michael_Plank blog.deltastrike.org

More Related Content

Workflows for developing next gen 3D browser games

  • 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
  • 32. WORK-PIPELINE export image planes Preproduction Production Interaction •Concept Art •Modeling •Image Planes •Texturing •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
  • 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
  • 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