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

1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)Hafiz Ammar Siddiqui
 
2-Game Design (Game Design and Development)
2-Game Design (Game Design and Development)2-Game Design (Game Design and Development)
2-Game Design (Game Design and Development)Hafiz Ammar Siddiqui
 
What Is A Game Engine
What Is A Game EngineWhat Is A Game Engine
What Is A Game EngineSeth Sivak
 
Unreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesUnreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesMerlin Cheng
 
2 lecture (gdd, responsibilites, level of game) 18 1-2021
2 lecture (gdd, responsibilites, level of game) 18 1-20212 lecture (gdd, responsibilites, level of game) 18 1-2021
2 lecture (gdd, responsibilites, level of game) 18 1-2021Durgesh Pandey
 
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B..." Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...SeriousGamesAssoc
 
Graphic design principles
Graphic design principlesGraphic design principles
Graphic design principlesArena Animation Annanagar
 
5. colour order system
5. colour order system5. colour order system
5. colour order systemGhent University
 

Recommended

1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)1-Introduction (Game Design and Development)
1-Introduction (Game Design and Development)Hafiz Ammar Siddiqui
 
2-Game Design (Game Design and Development)
2-Game Design (Game Design and Development)2-Game Design (Game Design and Development)
2-Game Design (Game Design and Development)Hafiz Ammar Siddiqui
 
What Is A Game Engine
What Is A Game EngineWhat Is A Game Engine
What Is A Game EngineSeth Sivak
 
Unreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesUnreal Engine Beginner Workshop Slides
Unreal Engine Beginner Workshop SlidesMerlin Cheng
 
2 lecture (gdd, responsibilites, level of game) 18 1-2021
2 lecture (gdd, responsibilites, level of game) 18 1-20212 lecture (gdd, responsibilites, level of game) 18 1-2021
2 lecture (gdd, responsibilites, level of game) 18 1-2021Durgesh Pandey
 
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B..." Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...
" Optimizing Motivation, Learning and Behavior Change in your Serious Game" B...SeriousGamesAssoc
 
Graphic design principles
Graphic design principlesGraphic design principles
Graphic design principlesArena Animation Annanagar
 
5. colour order system
5. colour order system5. colour order system
5. colour order systemGhent University
 
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
 
Clipping
ClippingClipping
Clippingjohanna20
 
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
 
Sa2012 2x3d-for web
Sa2012 2x3d-for webSa2012 2x3d-for web
Sa2012 2x3d-for webAkihiko Shirai
 
CS 354 Shadows
CS 354 ShadowsCS 354 Shadows
CS 354 ShadowsMark Kilgard
 
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
 
Away3d workshop slides
Away3d workshop slidesAway3d workshop slides
Away3d workshop slidesJens Brynildsen
 
IWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal TechniquesIWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal TechniquesDarren Kuropatwa
 
Svr Raskar
Svr RaskarSvr Raskar
Svr RaskarCamera Culture Group, MIT Media Lab
 
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
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 

More Related Content

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

Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
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
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 

Recently uploaded (20)

Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
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
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
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...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 

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