WORKFLOWS FOR DEVELOPING NEXT-GEN 3D BROWSER GAMES

@Michael_Plank

@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

@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

3D BASICSTerminology, Shading, Lighting, Textures

@Michael_Plank blog.deltastrike.org

TERMINOLOGY

Vertex(pl.: Vertices)

Face Edge

Polygon Mesh

P( )xyz

@Michael_Plank blog.deltastrike.org

PRIMITIVESCube Sphere

TorusCylinder

Cone

@Michael_Plank blog.deltastrike.org

PIPELINE

2

Die Pipeline

Modeling

Output

input devices modeler

Rendering

transformationsprojection

visibility

rasterizationshading

device drivers output devices

clipping

@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

@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

@Michael_Plank blog.deltastrike.org

CULLING

9

Culling BeispieleView frustum Detail

Backface

Portal Occlusion

@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

u

v

0 1

1

@Michael_Plank blog.deltastrike.org

TEXTURING

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

@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

@Michael_Plank blog.deltastrike.org

DEPTH SORTING

index 0index 1index 2

2D 3D

Z-Bufferdepth sort each pixeldepth sort each layer

@Michael_Plank blog.deltastrike.org

CONTAINERS

2D 3D (Away3D)

DisplayObject(Bitmap, Shape, Video, ...)

DisplayObjectContainer(Sprite, MovieClip, ...)

Object3D

ObjectContainer3D

@Michael_Plank blog.deltastrike.org

SCENE GRAPH

2D 3D (Away3D)

Sprite

Sprite Bitmap

Video Shape

ObjectContainer3D

ObjectContainer3D Sphere3D

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

2D Game UI3D Game

WORKFLOWFrom concept art to in-game asset

@Michael_Plank blog.deltastrike.org

WORK-PIPELINE

Preproduction Production Interaction

@Michael_Plank blog.deltastrike.org

WORK-PIPELINE

Preproduction Production Interaction

•Concept Art

•Image Planes

2 MINUTE SCRIBBLES

SKETCHES

IMAGE PLANES

@Michael_Plank blog.deltastrike.org

WORK-PIPELINE

Preproduction Production Interaction

•Concept Art

•Image Planes

•Modeling

•Texturing

•Color

•Specular

•Normal

export image planes

3D MODEL

POLY COUNT!BUFFALO: 5400 POLYS

UV MAP

COLOR MAP

SPECULAR MAP

NORMAL MAP

TEXTURED 3D MODEL

@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

@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

IN-GAME ASSET

ADVANCED 3D STUFFPostprocessing, Animation, Particles

@Michael_Plank blog.deltastrike.org

POSTPROCESSING EFFECTS

• Blur

• Bloom

• Depth of Field

• ...

• implemented using AGAL shaders

@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

@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

+ 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

@Michael_Plank

blog.deltastrike.org

THX