A BRIEF INTRODUCTION TO

Selected topics with 3D

focus on Flash, Unity and
WebGL

MATH & ALGEBRA

VECTOR

Length

Pythagorean Formula
|V| = sqrt(x2+ y2)

Addition

A = (1, 2)
B = (4, 0)
A + B = (1+4, 2+0) = (5, 2)

Subtraction

A
B
A
A

= (1,
= (4,
-B=
-B=

2)
0)
A + (-B)
(1-4, 2-0) = (-3, 2)

Scalar Multiplication

A*3 = (3*1, 3*2) = (3, 6)

(unitvector = divide the vector by it's
length)

Dot Product

A = (Ax, Ay, Az)

B = (Bx, By, Bz)
AB = AxBx+ AyBy+ AzBz
AB = |A||B|cos

Cross Product

AxB = (AyBz- AzBy, AzBx- AxBz, AxByAyBx)

Real world examples

In whichdirectionshouldthe
missilebe firedto hit thetarget?
Is the enemy visible in the field of
view?
How far is the bullet from the
window?

Solutions
Solutions have been done by many
before.
Know the basics to find them quicker.
Use utils and classes like:
Vector3D
Vector3DUtils
Plane3D, Ray
Vector3

(4.0)

SPACES

Spaces
Euclidean space using Cartesian
coordinates. (X, Y and Z)
Local/Model Space
World Space
View/Camera Space (Point-of-view)
Screen space (2D)

Left- and right-handed

systems

ENTER
THE
MATRIX
MATRICES AND SPACES

Matrices
Matrix = Transformation placeholder
So again:
Local/Model matrix
World matrix
View/Camera matrix

WVP = world * view * projection

Classes/Utils
Matrix3D
Matrix3DUtils
Matrix4x4

TRANSFORMATIONS

Linear transformation

Translation

Linear transformation

Scale

Linear transformation

Skew

Linear transformation

Rotation
Eulers
Quaternions
Avoids gimbal lock
Slerp (Smooth interpolated rotation)

Matrix memory intensive

Multi linear transformation

Stack of matrices
Apply all at once to an object
The order is importent
Identity matrix

Nonlinear transformations

Sin curve displacement

Warp

PROJECTIONS

Converting a three-dimensional graphics object

or scene into two dimensions

Most common projections

Perspective

Objects is smaller further away

Projection lines meet at center of
projections (the vanish-point).
Frustum

Ortographic

No vanish-point.
Parallell lines never meet
Isometric , Architechtual
blueprints

GRAPHICS PIPELINE

Programmable pipeline

Illustration from

Stages overview
Transformation

Vertex processing
Viewing
transformation
Primitive
generation
Projection
transformation
Clipping/Culling
Viewport
transformation

Fragment
shader
Post-processing
Texturing
Display on screen
From
From
Camera
Space
toeach
Clip
Primitive
Calculate
Assembling.
lighting
Convert
From
Don't
world
Clip
render
geometry
space
Space
what
to
toon
into
camera
Window
we
Transformations
Fog
or readback: Render to
space
If
vertex.
geometry
shader
fragments
Space.
can't
Provide
see
andis
Space
Series
ofvertices
tests
with
buffer
and
retrieve
values.
indicies
Orthographic
orprimitives
Perspective
available,
Emissive
+
new
ambient
+
(r,g,b,a),
e.g.
Clipping:
[-1,1]
as
(x,y,z,w),
[0,640]
arrays
and
(tx,ty)
increasing
complexity:
Really
slow!
Remove
Use be
frustum
box for
variables/constants
can
generated.
+retained
specular
to
output
Interpolate
Z-value
primitives
vertex
outside
testing.
diffuse
Forward / Deferred rendering
vertex
color
ofpipeline
colors/texture
the camera's
input.
view
coordinates
Alph
Ste
Dep
Blen
Scissor
a
ncil
th
d
frustum
Vertex
shader
over the
fragment.
Each
Back-face
fragment
culling:
has RGB
Remove
color and
triangles
depth facing
value (zaway
buffer)
from camera

Rasterization
Fragment
processing

Display

SHADERS
The method to
render an
object.

About shaders
Small programs that runs on the GPU.
Most shader languages are the same.
Vertex and Fragment shaders work in
pairs.
The pair is compiled into a Program
Uniforms, Attributes, Varyings, Built in
attributes

Low level shading language

Assembly language
ARB (GPU)
!!ARBfp1.0
TEMP color;
MUL color, fragment.texcoord[0].y, 2.0;
ADD color, 1.0, -color;
ABS color, color;
ADD result.color, 1.0, -color;
MOV result.color.a, 1.0;

AGAL

(Adobe Graphics Assembly Language)

High level shading

languages
HLSL DirectX API
Cg NVIDIA
GLSL OpenGL
ShaderLab Unity3D
PixelBender3D Molehill
HxSL haXe Shader

Vertex shader
VS or VSH
Executed at each vertex
Transform between coordinate
systems
Lighting
Defines the final position of that
vertex
Outputs some variables to the
Fragment shader.

Geometry Shader

Dynamic creation of geometry on the GPU

Only Shader Model 4.0
Direct3D 10, OpenGL 3.2
Not available in OpenGL ES 2.0 (Molehill, webGL)

Fragment Shader
FSH
Processed at each visible fragment
Fragment != Pixel
Handles bump effects, shadows and
lights, reflections, refractions,
textures, ray casting and other
effects.
Output is a pixel color in the format
RGBA

Texture objects
Texels
Power of Two (POT) 2, 4,512, 1024
pixels
Flipped pixel order (OpenGL)
Integer/Floating-point

Texture Filtering
Fixing artifacts
Texture magnification/minification
Mipmapping
Different techniques:
Nearest-neighbor
interpolation

Nearestneighbor
with
mipmapping

Bilinear
filtering

Trilinear
filtering

Anisotropic
filtering

Lets have a look at the WegGL

implementation (click on image)
three.js

Cubemap texture
3D texture
Skybox
Reflections
Environment map

Shader tool examples

Shader Toy WebGL
MeShade WebGL
PixelBender3D Molehill
Node Based Shader Editor Unity3D

EM

DEM
O

Interior mapping

Animations, Skin and Bones

Tweens
Animation controllers
Blending
Mixing/Additive
Vertex animations in shader
Procedurally animating

EM

DEM
O

Animations in
Away3D Broomstick

Materials
Material is the collection of properties
applied to an object.
Shaders is the implemention. The
code
In Unity, think that materials is a
collection of exposed properties of the
shader.

Some ingredients:
Color
Diffuse: base color
Ambient: color of ambient light (shadowed
parts). Mostly the same as diffuse.
Specular: Highlight color
Emissive: Glow. Overrides shadows.
Alpha: Transparency

Texture (2D,Cubemap)
Shininess: size of specular highlights
(gloss)
Reflection/Refraction

Example

Unitys Normal Shader

Family

VertexLit

Diffuse

Normal Mapped
Specular

Normal mapped

Parallax Normal
mapped

Specular

Parallax Normal
Mapped
Specular

Lighting
Uses normals
Directional/point-lights
Material settings to decide final color.
Lighting is computed at each vertex.
Light mapping (beast)
Deferred shading

Lambert shading

Gourau
d

Phong

Real-time shadows

PLANE PROJECTION
SHADOWS

Flattened objects/imposters on
planar surfaces
Fast but unrealistic
No self-shadows

SHADOW VOLUMES

Computationally heavy
High detail
Self-shadowing
Using stencil buffer or texture

VERTEX PROJECTION

Like plane projection but with

calculated silluette.

DEPTH SHADOW MAPPING

Hardware
Self shadowing
Hard shadows: nearest map
pixel
Soft shadows: average map
pixels

Quality and performance

Non realtime-shadows fastest!
Shadow map resolution
Number of lights

EM

DEM
O

Example in Unity

Special effects
Effects
Color correction
Postprocessing stage / GPU
LDR/HDR, Tone mapping

Bloom

Depth of
field

Sun Shafts

SSAO

Blur

Noise

Physics

EM

DEM
O

Very simple physics demo

Frameworks

Goal: Games, experimental, Vizualisation?

Reach: Plugin? Multiple platforms/screens?
Cost: Open source? Licenced?
Support: Large community?

Unity3D
Boo, C# and JavaScript
Plugin
Great and simple IDE
Competent and mature framework
Pro version to get all goodies
Multiple screens/targets
Future: Export to flash/molehill

Flash/Molehill
Actionscript
Plugin
3D content always under the
DisplayList
All the other stuff in the flash player.
Molehill currently in alpha

Flash 3D Engines
Engine

Licence/Price

Away3D 4.0

Open source, free

Flare3D 2.0

Licence, price unknown

Aerys Minko

No licence, just consulting

Sophie 3D

Licence, 329 (3000 kr)

CopperCube 2.5

Licence, 99, professional 300

Zest3D

Open source, free

Alternativa 8

Licence, price unknown

ND2D Molehill 2D Engine

Free

Mandreel

3000 (26000 kr)

link

Optimizing
Profiling memory usage,
cleanup/destroy
Object Pooling!
Take control of rendering pipeline
Compression/Model to ByteArray
AWD, Away3Ds own format (Prefab)
Trends of resource-load in online 3D?
Optimize opcodes in swf:

WebGL
Javascript
No plugin
Open / Royalty-free
Not available in all browsers yet
Frameworks in early states
Probably available on iOS soon

WebGL Frameworks

GLGE

O3D

Canvas 3D
JS Library

SpiderGL

CopperLicht

Three.js

EnergizeGL

OSG.JS

EM

DEM
O

Jellyfish

EM

DEM
O

Particles

EM

DEM
O

Hello Racer

HelloEnjoy

EM

DEM
O

Clouds

Mr Doob

WebGL vs. Molehill APIs

HTML5 vs. Plugin.
WebGL will probably run in iOS
browser.
Easy to port between them.
Once it running on the GPU,
performance is hardware related
regardless of API.
It is the high level frameworks that
makes the difference.

Debugging
Profiling CPU
FlashPreloadProfiler

Profiling GPU
Pix for windows
Intel Graphics Performance Analyzers
(GPA)

3D Model filetypes
Format

Ext

Away3D

Unity3D

Dynamic

Actionscript

.AS

Autodesk
FBX

.FBX
(MAX)

Wavefront

.OBJ

Collada

.DAE

Quake 2

.MD2

Quake 3

.MD5

3ds Max object .3DS

Away 3D

.AWD

x
x

Learning tips
Try some tutorials
with Molehill API or
WebGL to get an
understanding of
the pipeline
Get familiar with
existing work. Well
get there
eventually.

Read, follow, blog,

get interested!

Pay attention to
techniques outside
your own field.
SIGGRAPH, GPU
gems, Nvidia.

Port code
fromanother
language.

Tech is one thing,

art is another.
Good artwork is
what makes it
successful in the
end.

Stand on the
shoulders of
giants.

Random interesting topics

Random interesting topics

Level of detail

Random interesting topics

Octree, BSP Tree, Portals and

Sectors

Random interesting topics

Global illumination / Ambient

occlusion

Random interesting topics

Raytracing/Raycasting/Raymarchin
g

Some useful resources

COMPUTER GRAPHICS

SIGGRAPH papers:
GEEKS3D:
Miles Macklins Blog:
GAMEDEV:
Teaching machines:

OpenGL / WebGL

OpenGL resources:
Game programming community:
OpenGl tutorial:
ShaderToy WebGL
Fractal Lab:
CG tutorial:
ModelViewMatrix explained:

MOLEHILL

TOOLS

Pix GPU profiling:

UNITY

FLASH

3d vs. flash tips:

Molehill getting started:
Digging into Molehill API:
Molehill resources:
Molehill demos:
Demystifying molehill:
Slides about Zombie Tycoon:

Away3D 3.6 Tutorials:

Creative coding podcast:

Video tutorials:

Books and papers

Away3D 3.6 essentials
Mathematics for Game Developer by Christopher
Tremblay
Mathematics for 3D Game Programming and
Computer Graphics by Eric Lengyel
Game Graphics Programming by Allen Sherrod
Realtime shadows
Raycasting in GPU shaders by Joost van Dongen

Thanks!
Wow! You made it all the way here! I
hope you got inspired to continue your
journey into the third dimension.
Thanks for listening!
www.inear.se
twitter.com/inear