Workflows for developing next gen 3D browser games
•
13 likes•5,243 views
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.
Recommended
More Related Content
Similar to Workflows for developing next gen 3D browser games
Similar to Workflows for developing next gen 3D browser games (20)
Recently uploaded
Recently uploaded (20)
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
- 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
- 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