Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Verold Studio: A Realtime WebGL-based Collaborative 3D Editor in the Browser

January 31st 2013

Ross McKegney, CTO of Verold, a Toronto based startup working on brining 3D experiences to the web submitted their browser-based collaborative 3D editor and it looks pretty awesome.  It allows 3D artists to import 3D object files (specifically OBJ, Collada, or FBX files) into their web interface and then collaboratively edit scenes and finally share or embed them.

The editor works in real time, much like Google Docs but for much more advanced 3D resources instead of just documents.  You can edit materials, lighting and other effects all in the browser, and all collaboratively in real time so your changes immediately show up for everyone else editing the project at the same time.  This is really powerful, and I think we’re going to see lots more collaborative apps in the future especially with the rise of Node.js.

You can try out the editor yourself, and as you can see it feels very smooth.  You can look at some of the public projects available from the main screen to see what is possible.  If you create your own project, you first upload a model file exported from another tool, and then adjust the materials, textures, lighting, fog, and several other parameters.  Finally, you can create an embed code for your project and put it on a website.  The user just clicks the “Go 3D” button and it turns the static image into a user manipulatable scene.

One example given in their introduction blog post would be for a car company’s website, where the user could get a better feel for the car by manipulating it in 3D rather than just looking at pictures or relying on a plugin like Flash.  You can try out the car demo on that blog post, and check out a video of the editor in action.

I’m told the editor is built using a combination of great JavaScript projects, including Three.js, Node.js, Backbone.js, Socket.io and more.  It’s pretty interesting, although not opensource, but you should check it out your yourself.  Oh, and pester Microsoft until they add WebGL support to Internet Explorer as well.  I think it’s going to be a big deal.