1 of 49

## What's hot

Symmetry Presentation By Sharanya

Hoag Ordered Pairs Lesson

area related to circle

lecture engnering drawing
lecture engnering drawing Engr umar

14773 chapter 07
14773 chapter 07nayakq

GHRCEM_Amravati_Slider Crank Chain Mechanism

10.1 tangents to circles
10.1 tangents to circlesamriawalludin2

Mathematics- Circle Presentation
Mathematics- Circle PresentationMonnie Bao Jia

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 IIJeyapoovan Thangasamy

Engineering 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)rfant

### What's hot(20)

Symmetry Presentation By Sharanya
Symmetry Presentation By Sharanya

Hoag Ordered Pairs Lesson
Hoag Ordered Pairs Lesson

Curve1
Curve1

area related to circle
area related to circle

Permutation and combination
Permutation and combination

Auxiliary views
Auxiliary views

Presentation reflection
Presentation reflection

lecture engnering drawing
lecture engnering drawing

Circles class 9
Circles class 9

14773 chapter 07
14773 chapter 07

GHRCEM_Amravati_Slider Crank Chain Mechanism
GHRCEM_Amravati_Slider Crank Chain Mechanism

Symmetry
Symmetry

10.1 tangents to circles
10.1 tangents to circles

Scales
Scales

Mathematics- Circle Presentation
Mathematics- Circle Presentation

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 II

Engineering Drawing: Chapter 13 roles of engineering drawing
Engineering Drawing: Chapter 13 roles of engineering drawing

Integers
Integers

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_interactionGilbert Guerrero

CS 354 Acceleration Structures
CS 354 Acceleration StructuresMark Kilgard

Designing 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 photographsScott Eastellerson

Taskonomy: Disentangling Task Transfer Learning -- Scouty Meetup 2018 Feb., ...Tatsuya Shirakawa

ASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECTKim Flintoff

CG 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 TechniquesDarren Kuropatwa

CS 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++Nathan Koch

Machine Learning in Computer Vision
Machine Learning in Computer Visionbutest

Machine Learning in Computer Vision
Machine Learning in Computer Visionbutest

1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기NAVER Engineering

Embarrassingly 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_interaction

CS 354 Acceleration Structures
CS 354 Acceleration Structures

Clipping
Clipping

Designing 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 photographs

ASTROFEST: MARS HOME PLANET PROJECT
ASTROFEST: MARS HOME PLANET PROJECT

Sa2012 2x3d-for web
Sa2012 2x3d-for web

CG OpenGL Shadows + Light + Texture -course 10
CG OpenGL Shadows + Light + Texture -course 10

Away3d workshop slides
Away3d workshop slides

IWB Workshop Part 1: Reveal Techniques
IWB Workshop Part 1: Reveal Techniques

CS 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++

Machine Learning in Computer Vision
Machine Learning in Computer Vision

Machine Learning in Computer Vision
Machine Learning in Computer Vision

1시간만에 GAN(Generative Adversarial Network) 완전 정복하기
1시간만에 GAN(Generative Adversarial Network) 완전 정복하기

Embarrassingly Parallel Computation for Occlusion Culling
Embarrassingly Parallel Computation for Occlusion Culling

Portal 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.pptxDavid Michel

WebAssembly 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 - QuestionnaireExakis Nelite

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...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.pdfFIDO Alliance

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfFIDO Alliance

Demystifying 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 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...FIDO Alliance

Breaking 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 KomCzechDreamin

A 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 DiehlPeter Udo Diehl

Designing 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 2024Stephanie Beckett

ECS 2024 Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome

Portal 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.pptx

WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance

Microsoft 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...

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.pdf

Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf

Overview of Hyperledger Foundation
Overview of Hyperledger Foundation

Demystifying 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 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...

Breaking 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 Kom

A 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 Diehl

Designing 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 2024

ECS 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 @ Powerﬂasher > 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 Workﬂow: 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
Current LanguageEnglish
Español
Portugues
Français
Deutsche