E3 X 17 2017 5 5

Journal

The Tech Behind Previz

Jan 04, 2018

Written by Joel Bradbury

Previz is pushing the bounds of what’s possible in browser.

Up until (very) recently, the things we’re doing with 3D rendering have only been possible with heavy (and expensive) dedicated hardware, high end desktop machines, and proprietary software.

We’re doing all that in browser. On a host of device sizes and capabilities. Even on the phone in your pocket.

The tech behind Previz must be something pretty special then?

It’s not. It’s as simply and vanilla as can be. And that is 100% intentional. We’re doing interesting things, with proven, stable, scalable tech.


Like a lopsided three chambered amphibian heart, Previz has 3 parts - the Server side, the API, and the Web App.

Laravel

The Server Side - Laravel 4 Life

The server side is nice, generic, instantly recognisable php based Laravel app (Laravel 5.5 as of January 2018 to be precise).

We use a MySQL database backend, and a Redis based queue for background tasks.

The actual server side only responds to some very limited user facing web requests - the whole of the application is designed to be a single page app, or interacted with from 3rd party plugins, so almost everything goes via the restful API.

Why Laravel?

It’s not sexy by any means. We might get more developer street cred (Is that a thing? Are there street developers?) if we built the app on basically any other language. Who cares? PHP & Laravel work. And it works well. And we’re efficient along with it. We love it. We can make the codebase sing, and that is by far the most important metric.

The API - Restful and be thankful

Every function (beyond some bootstrapped authentication) is handled via the Restful API.

A host of third party plugins (Scene integrations for Blender and Cinema4D, the upcoming asset integrations for the AdobeSDK) all use this API, as does *every part* of the web app front-end.

The API is even fully documented here: Previz API

(You can thank Stephen for writing up the API documentation. He loved doing that, I’m sure he’ll enjoy it if you remind him of it.)

Vue Js

The Web App - A VueJs + three.js love story

The left ventricle of Previz’s beating heart is the VueJs.

VueJs has been a revelation. It’s single handedly responsible for a newly kindled love (and simultaneously re-ignited an old standing burning hatred of) javascript.

I’m not going to proselytise VueJs again for you here. Needless to say - it is that good. You should be using it.

Along side VueJs - at the core of the 3D viewer is three.js. That provides the raw (and we do mean raw) canvas drawing controls.

On top of all that, we’ve built some amazing tech, as part of our fully custom directed acyclic graph, that handles all the messy details of turning a bunch of coordinate fragments and asset urls into a working, fully interactive 3D environment.

Charles is the king of the DAG domain. Some say his vision is just a point cloud of vertices.

That’s a rough overview of the tech stack. Every day it’s changing - how it looks like today is very different from the first (or second, or third) incarnations.

Previz tomorrow? Who knows. The only way to find out is to build it.