WORKFLOWS FOR DEVELOPINGNEXT-GEN 3D BROWSER GAMES        @Michael_Plank
ABOUT MEMichael Plank (28, Austria)Studied computer science (MSc)Software Developer, Product Owner & Evangelist forFDT @ P...
AGENDA3D Basics•   Terminology (Vertex, Face, Polygon, ...)•   Shading, Lighting, TexturingFrom 2D to 3D•   Display List v...
AGENDAWorkflow: From Concept Art to 3D In-Game Asset•   Modeling, Texturing, ImportingAdvanced 3D Topics•   Postprocessing,...
3D BASICSTerminology, Shading, Lighting, Textures
TERMINOLOGY                  Face    Vertex                       Edge(pl.: Vertices)       x    P( y )       z           ...
PRIMITIVES Cube           SphereTorus                        Cone           Cylinder                         @Michael_Plan...
PIPELINE Die Pipeline               input devices           modeler    Modeling                   transformationsprojectio...
MotivationMotivation      TRANSFORMATION                                            Object2                   Object      ...
PROJECTION                     Perspektivische Projektion                  P(x y z)                       y•   Isometric  ...
CULLINGCulling Beispiele View frustum                        Detail                Backface                             or...
LIGHTING                           lightsources                direct                             indirectpoint light   sp...
SHADINGFlat   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 3D2D/3D Scence Graph, Tools & Libs
COORDINATE SYSTEM      2D         3D right handed            3D left handed                        y                    y ...
DEPTH SORTING              2D                           3Dindex 2index 1index 0                                  Z-Buffer ...
CONTAINERS        2D                    3D (Away3D)     DisplayObject                                  Object3D(Bitmap, Sh...
SCENE GRAPH             2D                 3D (Away3D)         Sprite                     ObjectContainer3D    Sprite     ...
GETTING STARTED WITH AWAY3D•   Primitives•   Materials•   Lights•   Containers                 @Michael_Plank   blog.delta...
CREATING 3D ASSETS •   3D Packages     •   Blender (Open Source)     •   Maya     •   3ds max     •   ...                 ...
STAGE 3D LIBRARIES•   Away3D (Open Source & no restrictions)•   Alternativa (Open Source)•   Minko (Open Source)•   Flare3...
FLASH STAGES 3D Game   2D Game UI                @Michael_Plank   blog.deltastrike.org
WORKFLOWFrom concept art to in-game asset
WORK-PIPELINEPreproduction   Production   Interaction                               @Michael_Plank   blog.deltastrike.org
WORK-PIPELINEPreproduction   Production   Interaction•Concept Art•Image Planes                               @Michael_Plan...
2 MINUTE SCRIBBLES
SKETCHES
IMAGE PLANES
WORK-PIPELINE                export image                   planesPreproduction            Production   Interaction•Concep...
3D MODELPOLY COUNT!BUFFALO: 5400 POLYS
UV MAP
COLOR MAP
SPECULAR MAP
NORMAL MAP
TEXTURED 3D MODEL
WORK-PIPELINE                export image           export                   planes             3D assetPreproduction     ...
WORK-PIPELINE                       export imageMaterials                        Geometry                      export     ...
IN-GAME ASSET
ADVANCED 3D STUFFPostprocessing, Animation, Particles
POSTPROCESSING          EFFECTS•   Blur•   Bloom•   Depth of Field•   ...•   implemented using    AGAL shaders            ...
POSTPROCESSING       Die Pipeline              EFFECTS                 input devices modeler          Modeling• Blur      ...
POSTPROCESSING          EFFECTS•   Blur•   Bloom•   Depth of Field•   ...•   implemented using    AGAL shaders            ...
ANIMATION        @Michael_Plank   blog.deltastrike.org
PARTICLES•   Flint Particles    •   Away3D renderer GPU    •   Physics calculated on CPU•   Away3D Particles System    •  ...
Flash                Unity (Plugin)              WebGL          + Compatibility           + Tooling                  + No ...
THX@Michael_Plankblog.deltastrike.org
Workflows for developing next gen 3D browser games
Upcoming SlideShare
Loading in …5
×

Workflows for developing next gen 3D browser games

7,374 views

Published on

“Hell, it’s about time!” We’ve been waiting for hardware accelerated 3D content in the browser for so long! Using the latest Flash Player 11 Stage3D technology, we can now finally create stunning 3D games and interactive applications we’ve always dreamed of.
In this talk, Michael Plank from Pro 3 Games will upgrade your skills to the third dimension. Starting off with some basics about 3D geometry, shading, lighting and texturing, he will share his knowledge about moving art and development workflows from 2D to 3D and which kind of new tools, libraries and techniques are involved in this process.
Michael will demonstrate the work pipeline, starting with a concept art to finally interacting with the 3D asset in real time, using examples from the Flash 3D action game Delta Strike, he and his team are currently developing.
The pros and cons of other 3D browser technologies like Unity and WebGL are covered at the end of the talk.

1 Comment
11 Likes
Statistics
Notes
No Downloads
Views
Total views
7,374
On SlideShare
0
From Embeds
0
Number of Embeds
338
Actions
Shares
0
Downloads
137
Comments
1
Likes
11
Embeds 0
No embeds

No notes for slide

Workflows for developing next gen 3D browser games

  1. WORKFLOWS FOR DEVELOPINGNEXT-GEN 3D BROWSER GAMES @Michael_Plank
  2. ABOUT MEMichael Plank (28, Austria)Studied computer science (MSc)Software Developer, Product Owner & Evangelist forFDT @ Powerflasher >Co-founded Pro 3 Games developing Delta Strike @Michael_Plank blog.deltastrike.org
  3. AGENDA3D Basics• Terminology (Vertex, Face, Polygon, ...)• Shading, Lighting, TexturingFrom 2D to 3D• Display List vs 3D Scene Graph• 3D Tools and Libraries @Michael_Plank blog.deltastrike.org
  4. AGENDAWorkflow: From Concept Art to 3D In-Game Asset• Modeling, Texturing, ImportingAdvanced 3D Topics• Postprocessing, Animation, ParticlesPros/Cons of 3D Web Technologies @Michael_Plank blog.deltastrike.org
  5. 3D BASICSTerminology, Shading, Lighting, Textures
  6. TERMINOLOGY Face Vertex Edge(pl.: Vertices) x P( y ) z Polygon Mesh @Michael_Plank blog.deltastrike.org
  7. PRIMITIVES Cube SphereTorus Cone Cylinder @Michael_Plank blog.deltastrike.org
  8. PIPELINE Die Pipeline input devices modeler Modeling transformationsprojection clipping visibility Rendering shading rasterization Output device drivers output devices 2 @Michael_Plank blog.deltastrike.org
  9. MotivationMotivation 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. CULLINGCulling Beispiele View frustum Detail Backface ortal Occlusion P 9 @Michael_Plank blog.deltastrike.org
  12. LIGHTING lightsources direct indirectpoint light spot light directional light ambient light @Michael_Plank blog.deltastrike.org
  13. SHADINGFlat 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 3D2D/3D Scence Graph, Tools & Libs
  17. COORDINATE SYSTEM 2D 3D right handed 3D left handed y y x z y x x ztranslate 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 3Dindex 2index 1index 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 Sphere3DVideo 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
  25. WORKFLOWFrom concept art to in-game asset
  26. WORK-PIPELINEPreproduction Production Interaction @Michael_Plank blog.deltastrike.org
  27. WORK-PIPELINEPreproduction Production Interaction•Concept Art•Image Planes @Michael_Plank blog.deltastrike.org
  28. 2 MINUTE SCRIBBLES
  29. SKETCHES
  30. IMAGE PLANES
  31. WORK-PIPELINE export image planesPreproduction Production Interaction•Concept Art •Modeling•Image Planes •Texturing •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
  32. 3D MODELPOLY COUNT!BUFFALO: 5400 POLYS
  33. UV MAP
  34. COLOR MAP
  35. SPECULAR MAP
  36. NORMAL MAP
  37. TEXTURED 3D MODEL
  38. WORK-PIPELINE export image export planes 3D assetPreproduction Production Interaction•Concept Art •Modeling •Load 3D Asset•Image Planes •Texturing •Add functionality •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
  39. WORK-PIPELINE export imageMaterials Geometry export Scene-graph Animation 3DS Yesplanes Yes 3D asset Yes Not in Away3DPreproduction 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
  40. IN-GAME ASSET
  41. ADVANCED 3D STUFFPostprocessing, Animation, Particles
  42. POSTPROCESSING EFFECTS• Blur• Bloom• Depth of Field• ...• implemented using AGAL shaders @Michael_Plank blog.deltastrike.org
  43. 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
  44. POSTPROCESSING EFFECTS• Blur• Bloom• Depth of Field• ...• implemented using AGAL shaders @Michael_Plank blog.deltastrike.org
  45. ANIMATION @Michael_Plank blog.deltastrike.org
  46. PARTICLES• Flint Particles • Away3D renderer GPU • Physics calculated on CPU• Away3D Particles System • Physics calculated on GPU! @Michael_Plank blog.deltastrike.org
  47. Flash Unity (Plugin) WebGL + Compatibility + Tooling + No PluginDesktop - 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
  48. THX@Michael_Plankblog.deltastrike.org

×