Finding the best WebGL tool
What is WebGL?
WebGL is a JavaScript API for rendering 2D and 3D interactive computer graphics inside a web browser. WebGL renders to the computer’s GPU (Graphics Processing Unit) so it can display complex images, animations, and physics simulations all super fast, inside a canvas element. WebGL programs consist of control code written in JavaScript and shader code written in GLSL. It is a web standard, designed and maintained by the non-profit Khronos Group. This free Udacity class will explain it in full detail.
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
Three.js — A JavaScript framework for coding 3D online experiences. Probably the most widely used library for webGL coders.
Do you have to code? Yes; Javascript
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.
Babylon.js — “A JavaScript framework for building 3D games with HTML5, WebGL and Web Audio.” Very similar to Three.js, but I’ve never used it. Key features include collisions engine, physics engine, audio engine and optimization engine at the core. Use the Babylon.js playground to play with it. Check out source code for free at babylon’s github repository.
Do you have to code? Yes; Javascript
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
Do you have to code? Yes, but barely… HTML and Javascript
Who made it? Mozilla VR team (MozVR)
Unity — As of 2015, Unity transpiles to WebGL javascript. I’ve noticed that it takes forever to load a scene, but once it loads it looks great. More games are made with Unity than with any other game technology, so it’s a safe bet that it’s only going to get better.
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.
Do you have to code? Yes, Javascript
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
Do you have to code? No, but you can! Javascript and Goo API
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,
Do you have to code? No, but there is a Javascript section you can code in.
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!
Do you have to code? Yes, javascript. There is visual editor, but no visual programming.
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
My work
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
“How We Go From Virtual Reality to The Matrix” (My first sci-fi story!)
“What Machine Learning will do for Designers”
“Analyzing Color Palettes with Code”
“Vital Features for Future NUI & UX tools”
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.
