workflows for developing next gen 3d browser games
DESCRIPTION
“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.TRANSCRIPT
![Page 1: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/1.jpg)
WORKFLOWS FOR DEVELOPING NEXT-GEN 3D BROWSER GAMES
@Michael_Plank
![Page 2: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/2.jpg)
@Michael_Plank blog.deltastrike.org
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
![Page 3: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/3.jpg)
@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
![Page 4: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/4.jpg)
@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
![Page 5: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/5.jpg)
3D BASICSTerminology, Shading, Lighting, Textures
![Page 6: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/6.jpg)
@Michael_Plank blog.deltastrike.org
TERMINOLOGY
Vertex(pl.: Vertices)
Face Edge
Polygon Mesh
P( )xyz
![Page 7: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/7.jpg)
@Michael_Plank blog.deltastrike.org
PRIMITIVESCube Sphere
TorusCylinder
Cone
![Page 8: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/8.jpg)
@Michael_Plank blog.deltastrike.org
PIPELINE
2
Die Pipeline
Modeling
Output
input devices modeler
Rendering
transformationsprojection
visibility
rasterizationshading
device drivers output devices
clipping
![Page 9: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/9.jpg)
@Michael_Plank blog.deltastrike.org
TRANSFORMATION
4
Motivation
4
Motivation
position object in object space
add object to world space
transform in object space
transform in world space
project to screen space (2D)
Screen
Eye
Object2
World
Object1Object
![Page 10: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/10.jpg)
@Michael_Plank blog.deltastrike.org
PROJECTION
19
P(x y z)P'(x' y' z')
E(0 0 –d)
x
y
zP
P'd z
xx'
x' = x·dz+d
y·dz+dy' = z' = 0
x' : x = d : (d + z)
Perspektivische Projektion
• Isometric
• Dimetric
• Trimetric
• Perspective
![Page 11: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/11.jpg)
@Michael_Plank blog.deltastrike.org
CULLING
9
Culling BeispieleView frustum Detail
Backface
Portal Occlusion
![Page 12: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/12.jpg)
@Michael_Plank blog.deltastrike.org
LIGHTING
lightsources
direct indirect
point light spot light directional light ambient light
![Page 13: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/13.jpg)
@Michael_Plank blog.deltastrike.org
SHADING
Flat Gouraud Phong
![Page 14: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/14.jpg)
@Michael_Plank blog.deltastrike.org
TEXTURING
u
v
0 1
1
![Page 15: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/15.jpg)
@Michael_Plank blog.deltastrike.org
TEXTURING
![Page 16: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/16.jpg)
FROM 2D TO 3D2D/3D Scence Graph, Tools & Libs
![Page 17: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/17.jpg)
@Michael_Plank blog.deltastrike.org
COORDINATE SYSTEM
translate x, yscale x, yrotate
translate x, y, zscale x, y, zrotate x, y, z
2D 3D right handed 3D left handed
x
yx x
y y
z
z
![Page 18: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/18.jpg)
@Michael_Plank blog.deltastrike.org
DEPTH SORTING
index 0index 1index 2
2D 3D
Z-Bufferdepth sort each pixeldepth sort each layer
![Page 19: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/19.jpg)
@Michael_Plank blog.deltastrike.org
CONTAINERS
2D 3D (Away3D)
DisplayObject(Bitmap, Shape, Video, ...)
DisplayObjectContainer(Sprite, MovieClip, ...)
Object3D
ObjectContainer3D
![Page 20: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/20.jpg)
@Michael_Plank blog.deltastrike.org
SCENE GRAPH
2D 3D (Away3D)
Sprite
Sprite Bitmap
Video Shape
ObjectContainer3D
ObjectContainer3D Sphere3D
Cube3D Plane3D
![Page 21: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/21.jpg)
@Michael_Plank blog.deltastrike.org
GETTING STARTED WITH AWAY3D
• Primitives
• Materials
• Lights
• Containers
![Page 22: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/22.jpg)
@Michael_Plank blog.deltastrike.org
CREATING 3D ASSETS
• 3D Packages
• Blender (Open Source)
• Maya
• 3ds max
• ...
![Page 23: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/23.jpg)
@Michael_Plank blog.deltastrike.org
STAGE 3D LIBRARIES
• Away3D (Open Source & no restrictions)
• Alternativa (Open Source)
• Minko (Open Source)
• Flare3D
• ...
![Page 24: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/24.jpg)
@Michael_Plank blog.deltastrike.org
FLASH STAGES
2D Game UI3D Game
![Page 25: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/25.jpg)
![Page 26: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/26.jpg)
WORKFLOWFrom concept art to in-game asset
![Page 27: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/27.jpg)
@Michael_Plank blog.deltastrike.org
WORK-PIPELINE
Preproduction Production Interaction
![Page 28: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/28.jpg)
@Michael_Plank blog.deltastrike.org
WORK-PIPELINE
Preproduction Production Interaction
•Concept Art
•Image Planes
![Page 29: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/29.jpg)
2 MINUTE SCRIBBLES
![Page 30: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/30.jpg)
SKETCHES
![Page 31: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/31.jpg)
IMAGE PLANES
![Page 32: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/32.jpg)
@Michael_Plank blog.deltastrike.org
WORK-PIPELINE
Preproduction Production Interaction
•Concept Art
•Image Planes
•Modeling
•Texturing
•Color
•Specular
•Normal
export image planes
![Page 33: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/33.jpg)
3D MODEL
POLY COUNT!BUFFALO: 5400 POLYS
![Page 34: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/34.jpg)
UV MAP
![Page 35: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/35.jpg)
COLOR MAP
![Page 36: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/36.jpg)
SPECULAR MAP
![Page 37: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/37.jpg)
NORMAL MAP
![Page 38: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/38.jpg)
TEXTURED 3D MODEL
![Page 39: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/39.jpg)
@Michael_Plank blog.deltastrike.org
WORK-PIPELINE
Preproduction Production Interaction
•Concept Art
•Image Planes
•Modeling
•Texturing
•Color
•Specular
•Normal
•Load 3D Asset
•Add functionality
export image planes
export 3D asset
![Page 40: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/40.jpg)
@Michael_Plank blog.deltastrike.org
WORK-PIPELINE
Preproduction Production Interaction
•Concept Art
•Image Planes
•Modeling
•Texturing
•Color
•Specular
•Normal
•Load 3D Asset
•Add functionality
export image planes
export 3D asset
Geometry Materials Scene-graph Animation
3DS Yes Yes Yes Not in Away3D
AC3D Yes Yes Yes Not in Away3D
AWD1 Yes Yes Yes No support
AWD2 Yes Yes Yes Yes, skeletal
DAE (pending) Yes Yes Yes Yes, skeletal
MD2 Yes Yes No support Yes, vertex
MD5 Yes No support No support Yes, skeletal
OBJ Yes Yes Inconsistent* No support
Prefab 2 is coming
![Page 41: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/41.jpg)
IN-GAME ASSET
![Page 42: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/42.jpg)
ADVANCED 3D STUFFPostprocessing, Animation, Particles
![Page 43: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/43.jpg)
@Michael_Plank blog.deltastrike.org
POSTPROCESSING EFFECTS
• Blur
• Bloom
• Depth of Field
• ...
• implemented using AGAL shaders
![Page 44: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/44.jpg)
@Michael_Plank blog.deltastrike.org
POSTPROCESSING EFFECTS
• Blur
• Bloom
• Depth of Field
• ...
• implemented using AGAL shaders
2
Die Pipeline
Modeling
Output
input devices modeler
Rendering
transformationsprojection
visibility
rasterizationshading
device drivers output devices
clipping
![Page 45: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/45.jpg)
@Michael_Plank blog.deltastrike.org
POSTPROCESSING EFFECTS
• Blur
• Bloom
• Depth of Field
• ...
• implemented using AGAL shaders
![Page 46: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/46.jpg)
@Michael_Plank blog.deltastrike.org
ANIMATION
![Page 47: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/47.jpg)
@Michael_Plank blog.deltastrike.org
PARTICLES
• Flint Particles
• Away3D renderer GPU
• Physics calculated on CPU
• Away3D Particles System
• Physics calculated on GPU!
![Page 48: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/48.jpg)
@Michael_Plank blog.deltastrike.org
Flash
+ Compatibility- Tooling- AS3 performance
Unity (Plugin)
+ Tooling+ C# performance- Compatibility
WebGL
+ No Plugin- Compatibility- JS
Unity SWF export
Unreal SWF export
+ Tooling- Licensing (Unity / Unreal + 9% Adobe)
De
skto
pM
ob
ile AIR iOS + Android
Unity mobileiOS + Android
![Page 49: Workflows for developing next gen 3D browser games](https://reader034.vdocuments.net/reader034/viewer/2022042614/55644313d8b42ace308b5874/html5/thumbnails/49.jpg)
@Michael_Plank
blog.deltastrike.org
THX