All original concepts, designs andcopy the exclusive property of Jam3

Open Sourcing

THE SECRET SAUCE

WHERE

325 Adelaide Street W.Toronto, ON, Canada M5V 1P8

Greetings,

CONTACT

Telephone: (416) 531-5263

ONLINE

Web: jam3.comEmail: info@jam3.com

All original concepts, designs andcopy the exclusive property of Jam3

MATTLead Developer

HELLO

MIKKODirector of Creative

Technology

INTRODUCTION

All original concepts, designs andcopy the exclusive property of Jam3

All original concepts, designs andcopy the exclusive property of Jam3

JAM3 IN A NUTSHELL

Highly experiential workSites, Installations, AR + VR

A lot of awards

A LOT OF OPEN SOURCE

All original concepts, designs andcopy the exclusive property of Jam3

OPEN SOURCE AT JAM3

All original concepts, designs andcopy the exclusive property of Jam3

280 public repos263 owned

17 forks - Three JS, PIXI, Mapbox etc.

7021 stars across all repos345 forks across all repos

We got SERIOUS in June 2014∼2 public repos before that

npm + modules + LOTS of small modules

+ Bolts vs Engines

INGREDIENTS TO THE SECRET SAUCE

All original concepts, designs andcopy the exclusive property of Jam3

AE-TO-JSONhttps://github.com/jam3/ae-to-json

All original concepts, designs andcopy the exclusive property of Jam3

History of building tools for projects.

INTERACTIVE DOC

WATERLIFE

INTERACTIVE DOC

BEAR 71

INTERACTIVE PORTFOLIO

JAM3 WEBSITE

HTML5 DATA VISUALIZATION

BJÖRK

ANIMATED EXPEDITION GAME

HEART OF THE ARCTIC

INTERACTIVE DIGITAL EXPERIENCE

ORANGE FUTURESELF

THE FUTURE OF CAR CUSTOMIZERS

MUSTANG CUSTOMIZER

Using another app to expedite building tools is the best way to go.

Designers are familiar with it.

After Effects is the Holy Grail.Heart Of The Arctic – Tendril created many of the animations.

AE Exporter

npm i ae-to-json-cli -g

Just JSON

+ No renderer

+ Unit tests to check when Adobe changes things (make video/gif animations of unit tests

After I put it up.

MATH-AS-CODEhttps://github.com/Jam3/math-as-code

All original concepts, designs andcopy the exclusive property of Jam3

Explains math notation using JavaScript code samples

REACTION

All original concepts, designs andcopy the exclusive property of Jam3

GitHub: 2300+ starsTwitter: 490+ retweets

Lots of Open Source contributions

Chinese Translation (via Open Source contributors)

MATRIX BUILDERhttps://github.com/Jam3/MatrixBuilder

All original concepts, designs andcopy the exclusive property of Jam3

Writing tech specs is really hard.

There are million browsers and browser versions.

How many of you use

CanIUse.com?

Two modes (simple and advanced)Designed to be used by everyone not just devs

Built on top of the caniuse's dataset

Matrix Builder was built by Benson Wong and Aaron Morris

Benson was a student at the time - Aaron is a technical director and uses it often

JAM3 LESSONShttps://github.com/Jam3/jam3-lesson

All original concepts, designs andcopy the exclusive property of Jam3

All original concepts, designs andcopy the exclusive property of Jam3

All original concepts, designs andcopy the exclusive property of Jam3

LICENSE SERVERhttps://github.com/Jam3/license-server

All original concepts, designs andcopy the exclusive property of Jam3

Clients and Open Source

sometimes is a bit weird...

Clients want to know up front what open source "libraries"

we will be using on projects.

~20-80 moduleson each project

How we handle this+ Tell them up front ~5-10 modules we'll be using

+ Update them as the projects progresses

Before we had a vicious email / legal loop

Now we use License Server

License server

+ Lists all modules used on a project, what version, and license

+ Updates from pull requests and pushes to server

+ Highlights which modules are our own

+ One button deploy to Heroku

DEVTOOLhttps://github.com/Jam3/devtool

All original concepts, designs andcopy the exclusive property of Jam3

Run Node.js programsthrough Chrome DevTools

REACTION

All original concepts, designs andcopy the exclusive property of Jam3

2500+ stars280+ likes

Debugging in the wild

Remy Sharp

Profiling

Paul Irish

Mixing Node.js and Browser APIs

Stream <canvas> to high resolution PNG files

OTHER GEMS

All original concepts, designs andcopy the exclusive property of Jam3

web-audio-playerCross-platform, low level, modular, WebAudio-focused

F1A stateful ui library that uses path finding

three-bmfont-textHigh quality and scalable WebGL text rendering

bigwheelA minimal framework for animation heavy sites

glsl-fast-gaussian-blurShader components on npm

orbit-controlsGeneric 3D camera and orbit controls

All original concepts, designs andcopy the exclusive property of Jam3

- https://github.com/jam3/ae-to-json

- https://github.com/jam3/ae-to-json-cli

- https://github.com/Jam3/math-as-code

- http://matrixbuilder.jam3.net

- https://github.com/Jam3/MatrixBuilder

- http://jam3.school

- https://github.com/Jam3/license-server

- https://github.com/Jam3/devtool

- https://github.com/Jam3/web-audio-player

- https://github.com/jam3/f1

- https://github.com/jam3/react-f1

- https://github.com/Jam3/three-bmfont-text

- https://github.com/bigwheel-framework/bigwheel

- https://github.com/Jam3/glsl-fast-gaussian-blur

- https://github.com/Jam3/orbit-controls

- https://github.com/fyrd/caniuse