SlideShare a Scribd company logo
1 of 28
Download to read offline
presented by
Jean-Michel Irving
March 2015
Justin
What We Do & Who We Are
With Roots In Design, Development,And Film,We Meandered
The Crowded Landscape Of Web And App Creation, Eventually
Casting A Wider Net With More Innovative And Imaginative
Solutions For Our Diverse Clientele.
3 1 50+ ∞
Offices Promise Awards Bad Jokes
March 2015
A Digital Production Company
Equal Parts Craft & Curiosity
March 2015
Development Content Creation Experiential
THIS IS DRESS.CODE
A Community Where Like-Minded Individuals Can Come
TogetherTo LearnTo SubvertTraditional ApproachesTo
Technology In Media. 
March 2015
CREATIVETECHNOLOGY IS OUR FORTE
TOOLS, SOFTWARE & LIBRARIES
PROS & CONS
TIPS &TRICKS
DEMO WITHTHE OCULUS RIFT DK 2
March 2015
WEBGL GAME
DEVELOPMENT
March 2015
WebGL
JavaScript API for rendering interactive 2D and 3D graphics
inside an HTML <canvas> element.
Can I use?
3D Graphics acceleration (direct access to the GPU).
March 2015
What Can You Use It For?
WebGL
Games
3D
Modeling &
Simulations
Data
Visualization
Interactive
Music
Videos
Presenting
Content
March 2015
WebGL
Let’s draw a triangle and a square
Easy?
March 2015
✓ Canvas fallback
✓ Simple API for ex-Flash developers
✓ Fast (yes, on mobile too)
( Example )
๏ Not a game engine
(but you can use Phaser)
Pixi.js (2D)
PROS CONS
March 2015
✓ Can do a bit of everything
✓ Community
✓ Samples and resources
✓ Many plugins
Three.js (3D)
( Example )
๏ Not a game engine
PROS CONS
March 2015
✓ Full game engine
✓TypeScript
BabylonJS (3D)
( Example )
๏ Microsoft devs (j/k)
๏Very basic editor
PROS CONS
March 2015
✓ Full game engine
✓ Designer tool (FBX converter ♥ )
✓ Publish your game
PlayCanvas (3D)
( Example )
๏ Semi open source
PROS CONS
March 2015
✓ Great features (ex: vehicle system)
Ammo.js (Physics)
( Example )
๏ Huge (1.5 Mo)
PROS CONS
March 2015
Jupiter Ascending: Caine's Quest
CASE STUDY
http://cainesquest.jupiterascending.com/
Fully 3D on-rails shooter utilizing WebGL and WebSockets
✓ Multiple levels
✓ Animated characters
✓ Lit environments
March 2015
CASE STUDY: Jupiter Ascending: Caine's Quest
How To Get 3D Content Into Engine?
Sifting through community made tools (Exporters, converters, loaders)
Trial and error (Character animations…)
Documentation (or lack there-of)
Hard to find consistency
March 2015
Final Pipeline
Environment/Animated character created and
exported from 3DS Max/Maya using Open Collada plugins
Open Collada file passed along to devs for implementation
Modified Collada loader forThree.js used to load/test assets
Cumbersome and potentially problematic
+
+
=
CASE STUDY: Jupiter Ascending: Caine's Quest
March 2015
Unity 5
Unity is a popular game engine that has been developed over many years. (Community)
Recently released Unity 5 supports WebGL export.
It is very new, and it does not support the whole Unity functionality, but it still is very powerful.
March 2015
Why use Unity 5?
Unity 5
✓ Efficient workflow
✓ C# and Unity API
✓ Higher quality lighting, shaders, and particles
✓ Great tools for animation, cameras, and sprites
✓ Overall much better quality and much lower development time
✓ Unity is designed for team development
✓You can interactively make changes and see the results
✓You can further implement import functionality
✓ Be careful, source files tend to be larger than its output
March 2015
Workflow Tips
Unity 5
March 2015
Tools
Unity 5
Shader Forge Node Canvas
Mecanim
March 2015
Reasons to not use Unity 5?
Unity 5
✓ Build size will be big - an empty project is about 10 to 16 mb depending on several variables
✓ If you run into WebGL specific problems, you can’t access the low-level code
✓ It only runs on Firefox, Chrome, and Safari
THANK YOU
Jean-Michel Irving
March 2015
Justin
THURSDAY,APRIL 23, 2015
March 2015
NEXT EVENT

More Related Content

Similar to Dress.code #1 - WebGL Game Development

PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENTPLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
MaryRochelMegar
 
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
DataScienceConferenc1
 
Agencies Developer Products
Agencies Developer ProductsAgencies Developer Products
Agencies Developer Products
Jeff Eddings
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
Axway Appcelerator
 
OpenNTF Updates 03/05/13
OpenNTF Updates 03/05/13OpenNTF Updates 03/05/13
OpenNTF Updates 03/05/13
Niklas Heidloff
 

Similar to Dress.code #1 - WebGL Game Development (20)

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationAmsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentation
 
VRSafety NETCO 2017
VRSafety NETCO 2017VRSafety NETCO 2017
VRSafety NETCO 2017
 
PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENTPLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
PLATFORMS THAT WE CAN USE IN CREATING THE FOLLOWING I.C.T CONTENT
 
Adobe xd- The Empire strikes back
Adobe xd- The Empire strikes backAdobe xd- The Empire strikes back
Adobe xd- The Empire strikes back
 
Liti Solutions Portfolio - July 2015
Liti Solutions Portfolio - July 2015Liti Solutions Portfolio - July 2015
Liti Solutions Portfolio - July 2015
 
Public Training Calendar
Public Training CalendarPublic Training Calendar
Public Training Calendar
 
[SiriusCon 2018] Closing session - Live Community Survey
[SiriusCon 2018] Closing session - Live Community Survey[SiriusCon 2018] Closing session - Live Community Survey
[SiriusCon 2018] Closing session - Live Community Survey
 
Building a Great AEM Team: Time Warner Cable's Journey
Building a Great AEM Team: Time Warner Cable's JourneyBuilding a Great AEM Team: Time Warner Cable's Journey
Building a Great AEM Team: Time Warner Cable's Journey
 
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
[DSC Europe 23] Dennis van Rooijen - Leading an all remote data team.pptx
 
Collaboration tools and digital precense
Collaboration tools and digital precenseCollaboration tools and digital precense
Collaboration tools and digital precense
 
Agencies Developer Products
Agencies Developer ProductsAgencies Developer Products
Agencies Developer Products
 
Social media Hub
Social media HubSocial media Hub
Social media Hub
 
Social Media App for Magnolia 5
Social Media App for Magnolia 5Social Media App for Magnolia 5
Social Media App for Magnolia 5
 
iPhone/iPad Development with Titanium
iPhone/iPad Development with TitaniumiPhone/iPad Development with Titanium
iPhone/iPad Development with Titanium
 
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CAAppcelerator iPhone/iPad Dev Con 2010 San Diego, CA
Appcelerator iPhone/iPad Dev Con 2010 San Diego, CA
 
OpenNTF Updates 03/05/13
OpenNTF Updates 03/05/13OpenNTF Updates 03/05/13
OpenNTF Updates 03/05/13
 
INTERFACE, by apidays - The Evolution of Data Movement.pdf
INTERFACE, by apidays - The Evolution of Data Movement.pdfINTERFACE, by apidays - The Evolution of Data Movement.pdf
INTERFACE, by apidays - The Evolution of Data Movement.pdf
 
GDSC MRU 2023 Solution Challenge_ Info Session Presentation.pptx
GDSC MRU 2023 Solution Challenge_ Info Session Presentation.pptxGDSC MRU 2023 Solution Challenge_ Info Session Presentation.pptx
GDSC MRU 2023 Solution Challenge_ Info Session Presentation.pptx
 
Orientation session
Orientation sessionOrientation session
Orientation session
 
AtlasCamp 2015 Keynote
AtlasCamp 2015 KeynoteAtlasCamp 2015 Keynote
AtlasCamp 2015 Keynote
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
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
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 

Dress.code #1 - WebGL Game Development

  • 1.
  • 4. What We Do & Who We Are With Roots In Design, Development,And Film,We Meandered The Crowded Landscape Of Web And App Creation, Eventually Casting A Wider Net With More Innovative And Imaginative Solutions For Our Diverse Clientele. 3 1 50+ ∞ Offices Promise Awards Bad Jokes March 2015
  • 5. A Digital Production Company Equal Parts Craft & Curiosity March 2015 Development Content Creation Experiential
  • 6.
  • 7.
  • 8. THIS IS DRESS.CODE A Community Where Like-Minded Individuals Can Come TogetherTo LearnTo SubvertTraditional ApproachesTo Technology In Media.  March 2015 CREATIVETECHNOLOGY IS OUR FORTE
  • 9. TOOLS, SOFTWARE & LIBRARIES PROS & CONS TIPS &TRICKS DEMO WITHTHE OCULUS RIFT DK 2 March 2015 WEBGL GAME DEVELOPMENT
  • 10. March 2015 WebGL JavaScript API for rendering interactive 2D and 3D graphics inside an HTML <canvas> element. Can I use? 3D Graphics acceleration (direct access to the GPU).
  • 11. March 2015 What Can You Use It For? WebGL Games 3D Modeling & Simulations Data Visualization Interactive Music Videos Presenting Content
  • 12. March 2015 WebGL Let’s draw a triangle and a square Easy?
  • 13. March 2015 ✓ Canvas fallback ✓ Simple API for ex-Flash developers ✓ Fast (yes, on mobile too) ( Example ) ๏ Not a game engine (but you can use Phaser) Pixi.js (2D) PROS CONS
  • 14. March 2015 ✓ Can do a bit of everything ✓ Community ✓ Samples and resources ✓ Many plugins Three.js (3D) ( Example ) ๏ Not a game engine PROS CONS
  • 15. March 2015 ✓ Full game engine ✓TypeScript BabylonJS (3D) ( Example ) ๏ Microsoft devs (j/k) ๏Very basic editor PROS CONS
  • 16. March 2015 ✓ Full game engine ✓ Designer tool (FBX converter ♥ ) ✓ Publish your game PlayCanvas (3D) ( Example ) ๏ Semi open source PROS CONS
  • 17. March 2015 ✓ Great features (ex: vehicle system) Ammo.js (Physics) ( Example ) ๏ Huge (1.5 Mo) PROS CONS
  • 18. March 2015 Jupiter Ascending: Caine's Quest CASE STUDY http://cainesquest.jupiterascending.com/ Fully 3D on-rails shooter utilizing WebGL and WebSockets ✓ Multiple levels ✓ Animated characters ✓ Lit environments
  • 19. March 2015 CASE STUDY: Jupiter Ascending: Caine's Quest How To Get 3D Content Into Engine? Sifting through community made tools (Exporters, converters, loaders) Trial and error (Character animations…) Documentation (or lack there-of) Hard to find consistency
  • 20. March 2015 Final Pipeline Environment/Animated character created and exported from 3DS Max/Maya using Open Collada plugins Open Collada file passed along to devs for implementation Modified Collada loader forThree.js used to load/test assets Cumbersome and potentially problematic + + = CASE STUDY: Jupiter Ascending: Caine's Quest
  • 21. March 2015 Unity 5 Unity is a popular game engine that has been developed over many years. (Community) Recently released Unity 5 supports WebGL export. It is very new, and it does not support the whole Unity functionality, but it still is very powerful.
  • 22. March 2015 Why use Unity 5? Unity 5 ✓ Efficient workflow ✓ C# and Unity API ✓ Higher quality lighting, shaders, and particles ✓ Great tools for animation, cameras, and sprites ✓ Overall much better quality and much lower development time
  • 23. ✓ Unity is designed for team development ✓You can interactively make changes and see the results ✓You can further implement import functionality ✓ Be careful, source files tend to be larger than its output March 2015 Workflow Tips Unity 5
  • 24. March 2015 Tools Unity 5 Shader Forge Node Canvas Mecanim
  • 25. March 2015 Reasons to not use Unity 5? Unity 5 ✓ Build size will be big - an empty project is about 10 to 16 mb depending on several variables ✓ If you run into WebGL specific problems, you can’t access the low-level code ✓ It only runs on Firefox, Chrome, and Safari
  • 28. THURSDAY,APRIL 23, 2015 March 2015 NEXT EVENT