Finding the best WebGL tool
What is WebGL?
How to choose a tool:
Before choosing a tool, ask yourself these questions:
1) What type of experience am I creating and on what platform? Is it an animation or an architectural walkthrough? Is it web, mobile, or VR?
2) Am I willing to spend money? If it’s client based, can I spring for the platform with the best customer support?
3) Do I prefer node-based editing, coding, or a full GUI system?
To code or not to code, that is the question…
Frameworks where coding is required
Is publishing to VR easy? Getting easier by the month! Mozilla made this boilerplate, although make sure you keep your code light!
Who made it? Mr. Dooooooooob; Open source with over 600 contributors on github.
Who made it? Seemingly, this guy and this guy, although I’ve been told it’s under Microsoft.
A-frame — A-Frame wraps three.js and WebGL in HTML custom elements. It lets you create VR experiences that work across desktop, iOS, Android, and the Oculus Rift.
Is publishing to VR easy? Yes
Who made it? Mozilla VR team (MozVR)
Do you have to code? Yes, C sharp
Who made it? Unity Technology, founded in 2004, and is now the largest game-making community in the world.
Does it cost money? It’s free as long as you don’t make more that $100K/year off of your projects.
Pixi.js — a 2D gaming framework. Pixi’s strength is speed. When it comes to 2D rendering, Pixi is the fastest there is.
Downside? Only 2D
No code required (node based / drag’n’drop GUI)
Vizor- an online node based editor.
Who made it? Pixelface Ltd, a distributed team with main offices in Helsinki, Finland, and team members in England and Australia
Do you have to code? No
Downside? I’ve not found any good tutorials on how to get started and the few I have seen make it seem like it’s just a GUI wrapper for Three.js which can make a node-based system really messy really fast. I have yet to explore Vizor myself and I’m not sure of anyone is using it.
Goo — For designers, developers and artists, built on our Open Source Game Engine and VR ready
Who made it? Goo Technologies is based in Stockholm, Sweden. The Goo brand was born in early 2012, and is backed by Moor & Moor, the private investment arm of Kaj Hed, Chairman and main owner of Rovio, creators of Angry Birds.
Does it cost money? Free to use, unless you want to self-host. $9/mo and up, to something called ‘enterprise’. They also offer premium support plans.
Upside? Such good onboarding! Makes me want to use it more than Vizor.
Autodesk Play — I’m lucky enough to be working at Autodesk on a project called Play, which is an online node-based WebGL editor and animation engine. I’m so stoked about it’s capabilities! Its in an early ‘Technology Preview’ phase, which you can sign up for here. (hint: be sure to be super clear about what type of project you want to make with it, it’s a very exclusive preview)
Do you have to code? No. It’s entirely node-based, drag’n’drop
Who made it? Autodesk has been working on this tool for over a year, under the Reality Capture department.
Downside? It’s really early days for Play so it’s not ready for client-based work. However, the paradigms of node-based editing are very thoughtful.
Cl3ver — A super robust online engine that lets engineers, architects and design professionals create interactive 3D presentations. Very client and professionally focused. Publishes to desktop, mobile, and VR. It has a beautiful professional aesthetic for the end presentation. It seems compatible with all solid-modeling 3D applications (Revit, AutoCAD, SolidWorks,
Who made it? a Barcelona startup founded in 2011.
Does it cost money? They start you on a free version but not sure how their payment structure works or the limitations of the free version.
Clara.io — A browser-based 3D modeling, animation and rendering software tool, allowing you to make complex 3D models, create beautiful photorealistic renderings, and share them. They also say that ‘this is the perfect Three.JS or Babylon.JS editor for creating and tweaking your Web game content.’
Does it cost money? 3 payment options: Free 5GB cloud storage, $10/mo, $25/mo
Play Canvas — A free and open source platform. I have to do the demo of this before writing more, but it seems really rad!
Does it cost money? Starts as free but you can pay for more storage and private projects
Other related resources:
Sphere — a zero code solution for 360 VR interactive photo/video/3D. In beta.
WhitestormJS — a framework for 3D web apps built with Three.js for rendering your scene and objects, and Physi.js for simulating physics.
Sketchfab — Sketchfab is only a viewer. People often think they are more than that.
Who made it? Offices in France and NYC. VC backed, 3 rounds raised $9.5 MM
Khronos’s wiki — a massing list of all WebGL tools. Ever.
WebGL chrome experiments — some rad stuff to get inspired by.
Buildbox — A 2D game engine. I was attracted to the gorgeous example content and how quickly one can execute a project.
Downsides? Only 2D and costs money
So far, I have the most experience with using Three.js. My largest project to date is www.AnxietyBrain.net, in addition to many smaller coding experiments here: http://eve3dcode.tumblr.com/
My commercial animation direction work can be seen here: http://www.neveroddoreven.tv/
My other stories
A List Apart (ISSN: 1534–0295) explores the design, development, and meaning of web content, with a special focus on web standards and best practices.