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 CompanyEqual Parts Craft & Curiosity

March 2015

Development Content Creation Experiential

THIS IS DRESS.CODEA Community Where Like-Minded Individuals Can Come Together To Learn To Subvert Traditional Approaches To

Technology In Media. 

March 2015

CREATIVE TECHNOLOGY IS OUR FORTE

TOOLS, SOFTWARE & LIBRARIESPROS & CONSTIPS & TRICKSDEMO WITH THE OCULUS RIFT DK 2

March 2015

WEBGL GAMEDEVELOPMENT

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

Games3D

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 QuestCASE 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 for Three.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

ToolsUnity 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