This document contains information about a digital production company that provides services such as web and app development, design, content creation, and experiential work. It discusses various tools and technologies used for creative technology projects including WebGL, Unity 5, Pixi.js, Three.js, BabylonJS, PlayCanvas, and Ammo.js. It also provides a case study on a 3D WebGL game created for a movie promotion and discusses challenges of importing 3D content and pipelines as well as tips for using Unity 5.

2. presented by

3. Jean-Michel Irving
March 2015
Justin

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

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

26. THANK YOU

27. Jean-Michel Irving
March 2015
Justin

28. THURSDAY,APRIL 23, 2015
March 2015
NEXT EVENT