SlideShare a Scribd company logo

Workflows for developing next gen 3D browser games

•
•
Michael Plank
Michael Plank

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.

TechnologyEntertainment & Humor
1 of 49
Download to read offline
WORKFLOWS FOR DEVELOPING NEXT-GEN 3D BROWSER GAMES @Michael_Plank
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 @Michael_Plank blog.deltastrike.org
3D BASICS Terminology, Shading, Lighting, Textures
TERMINOLOGY Face Vertex Edge (pl.: Vertices) x P( y ) z Polygon Mesh @Michael_Plank blog.deltastrike.org
PRIMITIVES Cube Sphere Torus Cone Cylinder @Michael_Plank blog.deltastrike.org
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
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
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
CULLING Culling Beispiele View frustum Detail Backface ortal Occlusion P 9 @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 0 1 u 1 v @Michael_Plank blog.deltastrike.org
TEXTURING @Michael_Plank blog.deltastrike.org
FROM 2D TO 3D 2D/3D Scence Graph, Tools & Libs
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
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
CONTAINERS 2D 3D (Away3D) DisplayObject Object3D (Bitmap, Shape, Video, ...) DisplayObjectContainer ObjectContainer3D (Sprite, MovieClip, ...) @Michael_Plank blog.deltastrike.org
SCENE GRAPH 2D 3D (Away3D) Sprite ObjectContainer3D Sprite Bitmap ObjectContainer3D Sphere3D Video Shape 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 3D Game 2D Game UI @Michael_Plank blog.deltastrike.org
WORKFLOW From concept art to in-game asset
WORK-PIPELINE Preproduction Production Interaction @Michael_Plank blog.deltastrike.org
WORK-PIPELINE Preproduction Production Interaction •Concept Art •Image Planes @Michael_Plank blog.deltastrike.org
2 MINUTE SCRIBBLES
SKETCHES
IMAGE PLANES
WORK-PIPELINE export image planes Preproduction Production Interaction •Concept Art •Modeling •Image Planes •Texturing •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
3D MODEL POLY COUNT! BUFFALO: 5400 POLYS
UV MAP
COLOR MAP
SPECULAR MAP
NORMAL MAP
TEXTURED 3D MODEL
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
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
IN-GAME ASSET
ADVANCED 3D STUFF Postprocessing, Animation, Particles
POSTPROCESSING EFFECTS • Blur • Bloom • Depth of Field • ... • implemented using AGAL shaders @Michael_Plank blog.deltastrike.org
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
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 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
THX @Michael_Plank blog.deltastrike.org

Recommended

Plates
PlatesPlates
Platesphysics101
 
Chapter 07 impulse and momentum
Chapter 07 impulse and momentumChapter 07 impulse and momentum
Chapter 07 impulse and momentumDarwin Quinsaat
 
STATICS OF RIGID BODIES.pptx
STATICS OF RIGID BODIES.pptxSTATICS OF RIGID BODIES.pptx
STATICS OF RIGID BODIES.pptxEngrJoeniferJrMonteb
 
Class 9 presentation
Class 9 presentationClass 9 presentation
Class 9 presentationlaura_gerold
 
Newton's 3rd law of motion.pptx
Newton's 3rd law of motion.pptxNewton's 3rd law of motion.pptx
Newton's 3rd law of motion.pptxShanneLouise
 
Unit 5 Friction
Unit 5 FrictionUnit 5 Friction
Unit 5 FrictionTHANGA KASI RAJAN S
 
Geometricalconstruction
GeometricalconstructionGeometricalconstruction
GeometricalconstructionSaidon Aziz
 
MOMENT OF INERTIA
MOMENT OF INERTIAMOMENT OF INERTIA
MOMENT OF INERTIAAzizul Izham
 

Recommended

Plates
PlatesPlates
Platesphysics101
 
Chapter 07 impulse and momentum
Chapter 07 impulse and momentumChapter 07 impulse and momentum
Chapter 07 impulse and momentumDarwin Quinsaat
 
STATICS OF RIGID BODIES.pptx
STATICS OF RIGID BODIES.pptxSTATICS OF RIGID BODIES.pptx
STATICS OF RIGID BODIES.pptxEngrJoeniferJrMonteb
 
Class 9 presentation
Class 9 presentationClass 9 presentation
Class 9 presentationlaura_gerold
 
Newton's 3rd law of motion.pptx
Newton's 3rd law of motion.pptxNewton's 3rd law of motion.pptx
Newton's 3rd law of motion.pptxShanneLouise
 
Unit 5 Friction
Unit 5 FrictionUnit 5 Friction
Unit 5 FrictionTHANGA KASI RAJAN S
 
Geometricalconstruction
GeometricalconstructionGeometricalconstruction
GeometricalconstructionSaidon Aziz
 
MOMENT OF INERTIA
MOMENT OF INERTIAMOMENT OF INERTIA
MOMENT OF INERTIAAzizul Izham
 
Pictorial projection
Pictorial projectionPictorial projection
Pictorial projectionmusadoto
 
Dynamics ppt
Dynamics pptDynamics ppt
Dynamics pptMalathiNagarajan20
 
Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.Talha Mughal
 
Orthographic projection by madhur
Orthographic projection by madhurOrthographic projection by madhur
Orthographic projection by madhurMadhur Mahajan
 
Chapter 3 sectioning
Chapter 3 sectioningChapter 3 sectioning
Chapter 3 sectioninghokiemac
 
Rotational Motion and Equilibrium
Rotational Motion and EquilibriumRotational Motion and Equilibrium
Rotational Motion and EquilibriumAJAL A J
 
Newton’s laws of motion
Newton’s laws of motionNewton’s laws of motion
Newton’s laws of motionJimnaira Abanto
 
Projectile motion
Projectile motionProjectile motion
Projectile motionnlahoud
 
MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2S. Sathishkumar
 
Torque
TorqueTorque
Torquerizalyndelacruz3
 
equilibrium-of-rigid-body
equilibrium-of-rigid-bodyequilibrium-of-rigid-body
equilibrium-of-rigid-bodyRudi Wicaksana
 
Draw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawingDraw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawingzamboanga city state polytechnic college
 
leliso hobicho
leliso hobicholeliso hobicho
leliso hobichoLelisoHobicho
 
Getting vector resultant using polygon method
Getting vector resultant using polygon methodGetting vector resultant using polygon method
Getting vector resultant using polygon methodsalvie alvaro
 
Types of triangles
Types of trianglesTypes of triangles
Types of trianglesmakemyslide
 
CIRCULAR MOTION
CIRCULAR MOTIONCIRCULAR MOTION
CIRCULAR MOTIONNurul Fadhilah
 
Geometric construction
Geometric constructionGeometric construction
Geometric constructionShelly Wilke
 
Introduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10thIntroduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10thAakankshaYaduvanshi
 
BASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.pptBASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.pptJMAK2
 
Basic geometrical constructions
Basic geometrical constructionsBasic geometrical constructions
Basic geometrical constructionsSMPK Penabur Gading Serpong
 
Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interactionGilbert Guerrero
 
CS 354 Acceleration Structures
CS 354 Acceleration StructuresCS 354 Acceleration Structures
CS 354 Acceleration StructuresMark Kilgard
 

More Related Content

What's hot

Pictorial projection
Pictorial projectionPictorial projection
Pictorial projectionmusadoto
 
Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.Talha Mughal
 
Orthographic projection by madhur
Orthographic projection by madhurOrthographic projection by madhur
Orthographic projection by madhurMadhur Mahajan
 
Chapter 3 sectioning
Chapter 3 sectioningChapter 3 sectioning
Chapter 3 sectioninghokiemac
 
Rotational Motion and Equilibrium
Rotational Motion and EquilibriumRotational Motion and Equilibrium
Rotational Motion and EquilibriumAJAL A J
 
Newton’s laws of motion
Newton’s laws of motionNewton’s laws of motion
Newton’s laws of motionJimnaira Abanto
 
Projectile motion
Projectile motionProjectile motion
Projectile motionnlahoud
 
MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2S. Sathishkumar
 
equilibrium-of-rigid-body
equilibrium-of-rigid-bodyequilibrium-of-rigid-body
equilibrium-of-rigid-bodyRudi Wicaksana
 
Getting vector resultant using polygon method
Getting vector resultant using polygon methodGetting vector resultant using polygon method
Getting vector resultant using polygon methodsalvie alvaro
 
Types of triangles
Types of trianglesTypes of triangles
Types of trianglesmakemyslide
 
Geometric construction
Geometric constructionGeometric construction
Geometric constructionShelly Wilke
 
Introduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10thIntroduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10thAakankshaYaduvanshi
 
BASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.pptBASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.pptJMAK2
 

What's hot (20)

Pictorial projection
Pictorial projectionPictorial projection
Pictorial projection
 
Dynamics ppt
Dynamics pptDynamics ppt
Dynamics ppt
 
Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.Engineering drawing chapter 03 orthographic projection.
Engineering drawing chapter 03 orthographic projection.
 
Orthographic projection by madhur
Orthographic projection by madhurOrthographic projection by madhur
Orthographic projection by madhur
 
Chapter 3 sectioning
Chapter 3 sectioningChapter 3 sectioning
Chapter 3 sectioning
 
Rotational Motion and Equilibrium
Rotational Motion and EquilibriumRotational Motion and Equilibrium
Rotational Motion and Equilibrium
 
Newton’s laws of motion
Newton’s laws of motionNewton’s laws of motion
Newton’s laws of motion
 
Projectile motion
Projectile motionProjectile motion
Projectile motion
 
MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2MANUFACTURING TECHNOLOGY-II UNIT-2
MANUFACTURING TECHNOLOGY-II UNIT-2
 
Torque
TorqueTorque
Torque
 
equilibrium-of-rigid-body
equilibrium-of-rigid-bodyequilibrium-of-rigid-body
equilibrium-of-rigid-body
 
Draw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawingDraw 111- mechanical drawing and orthographic drawing
Draw 111- mechanical drawing and orthographic drawing
 
leliso hobicho
leliso hobicholeliso hobicho
leliso hobicho
 
Getting vector resultant using polygon method
Getting vector resultant using polygon methodGetting vector resultant using polygon method
Getting vector resultant using polygon method
 
Types of triangles
Types of trianglesTypes of triangles
Types of triangles
 
CIRCULAR MOTION
CIRCULAR MOTIONCIRCULAR MOTION
CIRCULAR MOTION
 
Geometric construction
Geometric constructionGeometric construction
Geometric construction
 
Introduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10thIntroduction of triangle for class 8th 10th
Introduction of triangle for class 8th 10th
 
BASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.pptBASIC ENGINEERING DRAWING.ppt
BASIC ENGINEERING DRAWING.ppt
 
Basic geometrical constructions
Basic geometrical constructionsBasic geometrical constructions
Basic geometrical constructions
 

Similar to Workflows for developing next gen 3D browser games

Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interactionGilbert Guerrero
 
CS 354 Acceleration Structures
CS 354 Acceleration StructuresCS 354 Acceleration Structures
CS 354 Acceleration StructuresMark Kilgard
 
Designing an Objective-C Framework about 3D
Designing an Objective-C Framework about 3DDesigning an Objective-C Framework about 3D
Designing an Objective-C Framework about 3Drsebbe
 
Steam presentation deux 3 d prints from photographs
Steam presentation deux 3 d prints from photographsSteam presentation deux 3 d prints from photographs
Steam presentation deux 3 d prints from photographsScott Eastellerson
 
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ... Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...Tatsuya Shirakawa
 
ASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECTASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECTKim Flintoff
 
CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL Shadows + Light + Texture -course 10CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL Shadows + Light + Texture -course 10fungfung Chen
 
IWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal TechniquesIWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal TechniquesDarren Kuropatwa
 
CS 354 Shadows (cont'd) and Scene Graphs
CS 354 Shadows (cont'd) and Scene GraphsCS 354 Shadows (cont'd) and Scene Graphs
CS 354 Shadows (cont'd) and Scene GraphsMark Kilgard
 
The Nature of Code via Cinder - Modeling the Natural World in C++
The Nature of Code via Cinder - Modeling the Natural World in C++The Nature of Code via Cinder - Modeling the Natural World in C++
The Nature of Code via Cinder - Modeling the Natural World in C++Nathan Koch
 
Machine Learning in Computer Vision
Machine Learning in Computer VisionMachine Learning in Computer Vision
Machine Learning in Computer Visionbutest
 
Machine Learning in Computer Vision
Machine Learning in Computer VisionMachine Learning in Computer Vision
Machine Learning in Computer Visionbutest
 
Generative adversarial networks
Generative adversarial networksGenerative adversarial networks
Generative adversarial networksYunjey Choi
 
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기NAVER Engineering
 
Embarrassingly Parallel Computation for Occlusion Culling
Embarrassingly Parallel Computation for Occlusion CullingEmbarrassingly Parallel Computation for Occlusion Culling
Embarrassingly Parallel Computation for Occlusion Cullingjasinb
 

Similar to Workflows for developing next gen 3D browser games (20)

Artdm170 week12 user_interaction
Artdm170 week12 user_interactionArtdm170 week12 user_interaction
Artdm170 week12 user_interaction
 
CS 354 Acceleration Structures
CS 354 Acceleration StructuresCS 354 Acceleration Structures
CS 354 Acceleration Structures
 
Clipping
ClippingClipping
Clipping
 
Designing an Objective-C Framework about 3D
Designing an Objective-C Framework about 3DDesigning an Objective-C Framework about 3D
Designing an Objective-C Framework about 3D
 
Steam presentation deux 3 d prints from photographs
Steam presentation deux 3 d prints from photographsSteam presentation deux 3 d prints from photographs
Steam presentation deux 3 d prints from photographs
 
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ... Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...
Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...
 
ASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECTASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECT
 
Sa2012 2x3d-for web
Sa2012 2x3d-for webSa2012 2x3d-for web
Sa2012 2x3d-for web
 
CS 354 Shadows
CS 354 ShadowsCS 354 Shadows
CS 354 Shadows
 
CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL Shadows + Light + Texture -course 10CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL Shadows + Light + Texture -course 10
 
Away3d workshop slides
Away3d workshop slidesAway3d workshop slides
Away3d workshop slides
 
IWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal TechniquesIWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal Techniques
 
Svr Raskar
Svr RaskarSvr Raskar
Svr Raskar
 
CS 354 Shadows (cont'd) and Scene Graphs
CS 354 Shadows (cont'd) and Scene GraphsCS 354 Shadows (cont'd) and Scene Graphs
CS 354 Shadows (cont'd) and Scene Graphs
 
The Nature of Code via Cinder - Modeling the Natural World in C++
The Nature of Code via Cinder - Modeling the Natural World in C++The Nature of Code via Cinder - Modeling the Natural World in C++
The Nature of Code via Cinder - Modeling the Natural World in C++
 
Machine Learning in Computer Vision
Machine Learning in Computer VisionMachine Learning in Computer Vision
Machine Learning in Computer Vision
 
Machine Learning in Computer Vision
Machine Learning in Computer VisionMachine Learning in Computer Vision
Machine Learning in Computer Vision
 
Generative adversarial networks
Generative adversarial networksGenerative adversarial networks
Generative adversarial networks
 
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
 
Embarrassingly Parallel Computation for Occlusion Culling
Embarrassingly Parallel Computation for Occlusion CullingEmbarrassingly Parallel Computation for Occlusion Culling
Embarrassingly Parallel Computation for Occlusion Culling
 

Recently uploaded

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbuapidays
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfsudhanshuwaghmare1
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesrafiqahmad00786416
 

Recently uploaded (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 

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
  • 25.
  • 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
  • 32. WORK-PIPELINE export image planes Preproduction Production Interaction •Concept Art •Modeling •Image Planes •Texturing •Color •Specular •Normal @Michael_Plank blog.deltastrike.org
  • 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
  • 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