SlideShare a Scribd company logo
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

More Related Content

What's hot

Symmetry Presentation By Sharanya
Symmetry Presentation By SharanyaSymmetry Presentation By Sharanya
Symmetry Presentation By SharanyaDisha Shahani
 
Hoag Ordered Pairs Lesson
Hoag Ordered Pairs LessonHoag Ordered Pairs Lesson
Hoag Ordered Pairs LessonAdrianaHoag
 
area related to circle
area related to circlearea related to circle
area related to circlelashika madaan
 
lecture engnering drawing
lecture engnering drawing lecture engnering drawing
lecture engnering drawing Engr umar
 
14773 chapter 07
14773 chapter 0714773 chapter 07
14773 chapter 07nayakq
 
GHRCEM_Amravati_Slider Crank Chain Mechanism
GHRCEM_Amravati_Slider Crank Chain MechanismGHRCEM_Amravati_Slider Crank Chain Mechanism
GHRCEM_Amravati_Slider Crank Chain MechanismPravinkumar Wankhade
 
10.1 tangents to circles
10.1 tangents to circles10.1 tangents to circles
10.1 tangents to circlesamriawalludin2
 
Mathematics- Circle Presentation
Mathematics- Circle PresentationMathematics- Circle Presentation
Mathematics- Circle PresentationMonnie Bao Jia
 
Areas related to Circles - class 10 maths
Areas related to Circles - class 10 maths Areas related to Circles - class 10 maths
Areas related to Circles - class 10 maths Amit Choube
 
Lesson 12 Isometric Projection - Part II
Lesson 12 Isometric Projection - Part IILesson 12 Isometric Projection - Part II
Lesson 12 Isometric Projection - Part IIJeyapoovan Thangasamy
 
Engineering Drawing: Chapter 13 roles of engineering drawing
Engineering Drawing: Chapter 13  roles of engineering drawingEngineering Drawing: Chapter 13  roles of engineering drawing
Engineering Drawing: Chapter 13 roles of engineering drawingmokhtar
 
The Coordinate Plane (Geometry 2_4)
The Coordinate Plane (Geometry 2_4)The Coordinate Plane (Geometry 2_4)
The Coordinate Plane (Geometry 2_4)rfant
 

What's hot (20)

Symmetry Presentation By Sharanya
Symmetry Presentation By SharanyaSymmetry Presentation By Sharanya
Symmetry Presentation By Sharanya
 
Hoag Ordered Pairs Lesson
Hoag Ordered Pairs LessonHoag Ordered Pairs Lesson
Hoag Ordered Pairs Lesson
 
Curve1
Curve1Curve1
Curve1
 
area related to circle
area related to circlearea related to circle
area related to circle
 
Permutation and combination
Permutation and combinationPermutation and combination
Permutation and combination
 
Auxiliary views
Auxiliary viewsAuxiliary views
Auxiliary views
 
Presentation reflection
Presentation reflectionPresentation reflection
Presentation reflection
 
lecture engnering drawing
lecture engnering drawing lecture engnering drawing
lecture engnering drawing
 
Circles class 9
Circles class 9Circles class 9
Circles class 9
 
14773 chapter 07
14773 chapter 0714773 chapter 07
14773 chapter 07
 
GHRCEM_Amravati_Slider Crank Chain Mechanism
GHRCEM_Amravati_Slider Crank Chain MechanismGHRCEM_Amravati_Slider Crank Chain Mechanism
GHRCEM_Amravati_Slider Crank Chain Mechanism
 
Symmetry
SymmetrySymmetry
Symmetry
 
10.1 tangents to circles
10.1 tangents to circles10.1 tangents to circles
10.1 tangents to circles
 
Scales
ScalesScales
Scales
 
Mathematics- Circle Presentation
Mathematics- Circle PresentationMathematics- Circle Presentation
Mathematics- Circle Presentation
 
Areas related to Circles - class 10 maths
Areas related to Circles - class 10 maths Areas related to Circles - class 10 maths
Areas related to Circles - class 10 maths
 
Lesson 12 Isometric Projection - Part II
Lesson 12 Isometric Projection - Part IILesson 12 Isometric Projection - Part II
Lesson 12 Isometric Projection - Part II
 
Engineering Drawing: Chapter 13 roles of engineering drawing
Engineering Drawing: Chapter 13  roles of engineering drawingEngineering Drawing: Chapter 13  roles of engineering drawing
Engineering Drawing: Chapter 13 roles of engineering drawing
 
Integers
IntegersIntegers
Integers
 
The Coordinate Plane (Geometry 2_4)
The Coordinate Plane (Geometry 2_4)The Coordinate Plane (Geometry 2_4)
The Coordinate Plane (Geometry 2_4)
 

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

Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceSamy Fodil
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireExakis Nelite
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...FIDO Alliance
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPTiSEO AI
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...FIDO Alliance
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfUK Journal
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyUXDXConf
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastUXDXConf
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 

Recently uploaded (20)

Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
1111 ChatGPT Prompts PDF Free Download - Prompts for ChatGPT
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdfBreaking Down the Flutterwave Scandal What You Need to Know.pdf
Breaking Down the Flutterwave Scandal What You Need to Know.pdf
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 

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