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

Solid state chemistry
Solid state chemistrySolid state chemistry
Solid state chemistryKumar
 
AtomicTheory 05-31-07
AtomicTheory 05-31-07AtomicTheory 05-31-07
AtomicTheory 05-31-07Gary Stilwell
 
MILLER INDICES FOR CRYSTALLOGRAPHY PLANES
MILLER INDICES FOR CRYSTALLOGRAPHY PLANESMILLER INDICES FOR CRYSTALLOGRAPHY PLANES
MILLER INDICES FOR CRYSTALLOGRAPHY PLANESManipal Academy of Higher Education (MAHE)
 
Directions, planes and miller indices
Directions, planes and miller indicesDirections, planes and miller indices
Directions, planes and miller indicesSrilakshmi B
 
Matrix optics
Matrix opticsMatrix optics
Matrix opticsQahtan Al-zaidi
 
Crystal structure
Crystal structureCrystal structure
Crystal structurePraveen Koushley
 
Crystal structure of metal
Crystal structure of metalCrystal structure of metal
Crystal structure of metalinnocent Ejaz
 
Newton rings
Newton ringsNewton rings
Newton ringsGraphic Era Hill University,Bhimtal
 

Recommended

Solid state chemistry
Solid state chemistrySolid state chemistry
Solid state chemistryKumar
 
AtomicTheory 05-31-07
AtomicTheory 05-31-07AtomicTheory 05-31-07
AtomicTheory 05-31-07Gary Stilwell
 
MILLER INDICES FOR CRYSTALLOGRAPHY PLANES
MILLER INDICES FOR CRYSTALLOGRAPHY PLANESMILLER INDICES FOR CRYSTALLOGRAPHY PLANES
MILLER INDICES FOR CRYSTALLOGRAPHY PLANESManipal Academy of Higher Education (MAHE)
 
Directions, planes and miller indices
Directions, planes and miller indicesDirections, planes and miller indices
Directions, planes and miller indicesSrilakshmi B
 
Matrix optics
Matrix opticsMatrix optics
Matrix opticsQahtan Al-zaidi
 
Crystal structure
Crystal structureCrystal structure
Crystal structurePraveen Koushley
 
Crystal structure of metal
Crystal structure of metalCrystal structure of metal
Crystal structure of metalinnocent Ejaz
 
Newton rings
Newton ringsNewton rings
Newton ringsGraphic Era Hill University,Bhimtal
 
Magnetic materials
Magnetic materialsMagnetic materials
Magnetic materialsPratik Devmurari
 
B.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-raysB.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-raysRai University
 
Particle physics - Standard Model
Particle physics - Standard ModelParticle physics - Standard Model
Particle physics - Standard ModelDavid Young
 
Vector atom model
Vector atom modelVector atom model
Vector atom modelDrShemeenaBasheer
 
Chapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptxChapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptxupender3
 
Symmetry
SymmetrySymmetry
Symmetrynaveenbioinformatics
 
Dual nature of matter and radiations
Dual nature of matter and radiationsDual nature of matter and radiations
Dual nature of matter and radiationsSelf-employed
 
Nuclear reactions
Nuclear reactionsNuclear reactions
Nuclear reactionsAbhay Pratap Singh
 
99995069.ppt
99995069.ppt99995069.ppt
99995069.pptAbitiEthiopia
 
Miller indices
Miller indicesMiller indices
Miller indicesSiva Gowtham
 
Phys 4710 lec 3
Phys 4710 lec 3Phys 4710 lec 3
Phys 4710 lec 3Dr. Abeer Kamal
 
Defects
DefectsDefects
DefectsMayur Bagale
 
Polarization
PolarizationPolarization
PolarizationSAI SUBHASH PAVAN VARMA
 
3.magnetic materials 1dkr
3.magnetic materials 1dkr3.magnetic materials 1dkr
3.magnetic materials 1dkrDevyani Gera
 
6563.nuclear models
6563.nuclear models6563.nuclear models
6563.nuclear modelsakshay garg
 
4-3-光的折射
4-3-光的折射4-3-光的折射
4-3-光的折射阿Samn的物理課本
 
De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...Manmohan Dash
 
Feynman diagrams
Feynman diagramsFeynman diagrams
Feynman diagramsAlessio Bernardelli
 
Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007Rupendra Choudhary
 
3 energy levels and quanta
3 energy levels and quanta3 energy levels and quanta
3 energy levels and quantaMissingWaldo
 
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

B.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-raysB.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-raysRai University
 
Particle physics - Standard Model
Particle physics - Standard ModelParticle physics - Standard Model
Particle physics - Standard ModelDavid Young
 
Chapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptxChapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptxupender3
 
Dual nature of matter and radiations
Dual nature of matter and radiationsDual nature of matter and radiations
Dual nature of matter and radiationsSelf-employed
 
3.magnetic materials 1dkr
3.magnetic materials 1dkr3.magnetic materials 1dkr
3.magnetic materials 1dkrDevyani Gera
 
6563.nuclear models
6563.nuclear models6563.nuclear models
6563.nuclear modelsakshay garg
 
De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...Manmohan Dash
 
Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007Rupendra Choudhary
 
3 energy levels and quanta
3 energy levels and quanta3 energy levels and quanta
3 energy levels and quantaMissingWaldo
 

What's hot (20)

Magnetic materials
Magnetic materialsMagnetic materials
Magnetic materials
 
B.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-raysB.tech sem i engineering physics u iv chapter 2-x-rays
B.tech sem i engineering physics u iv chapter 2-x-rays
 
Particle physics - Standard Model
Particle physics - Standard ModelParticle physics - Standard Model
Particle physics - Standard Model
 
Vector atom model
Vector atom modelVector atom model
Vector atom model
 
Chapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptxChapter 2 Crystal defects.pptx
Chapter 2 Crystal defects.pptx
 
Symmetry
SymmetrySymmetry
Symmetry
 
Dual nature of matter and radiations
Dual nature of matter and radiationsDual nature of matter and radiations
Dual nature of matter and radiations
 
Nuclear reactions
Nuclear reactionsNuclear reactions
Nuclear reactions
 
99995069.ppt
99995069.ppt99995069.ppt
99995069.ppt
 
Miller indices
Miller indicesMiller indices
Miller indices
 
Phys 4710 lec 3
Phys 4710 lec 3Phys 4710 lec 3
Phys 4710 lec 3
 
Defects
DefectsDefects
Defects
 
Polarization
PolarizationPolarization
Polarization
 
3.magnetic materials 1dkr
3.magnetic materials 1dkr3.magnetic materials 1dkr
3.magnetic materials 1dkr
 
6563.nuclear models
6563.nuclear models6563.nuclear models
6563.nuclear models
 
4-3-光的折射
4-3-光的折射4-3-光的折射
4-3-光的折射
 
De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...De Alembert’s Principle and Generalized Force, a technical discourse on Class...
De Alembert’s Principle and Generalized Force, a technical discourse on Class...
 
Feynman diagrams
Feynman diagramsFeynman diagrams
Feynman diagrams
 
Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007Rupendra polarization ppt (7 jan2010)2007
Rupendra polarization ppt (7 jan2010)2007
 
3 energy levels and quanta
3 energy levels and quanta3 energy levels and quanta
3 energy levels and quanta
 

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
 
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기NAVER Engineering
 
Generative adversarial networks
Generative adversarial networksGenerative adversarial networks
Generative adversarial networksYunjey Choi
 
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
 
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
 
Generative adversarial networks
Generative adversarial networksGenerative adversarial networks
Generative adversarial networks
 
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

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 

Recently uploaded (20)

DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 

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