02 1 / 2013
Qtzweb: A Quartz Composer to WebGL & JavaScript Compiler
Cody Brocious of Accuvant LABS has been working on Qtzweb, a Quartz Composer to WebGL compiler. Quartz Composer, for those who don’t know, is a node-based visual programming environment from Apple included with the Mac developer tools. You connect together various nodes which represent sources and effects and can very quickly design cool visualizations and the like. On the Mac, you can play Quartz compositions directly in Quicktime without installing Quartz Composer, which is just the editor for those files.
Qtzweb is a compiler, written in Python, which converts Quartz Composer files (which are in Apple’s Binary Plist format) to JavaScript and WebGL shaders to run in the browser. Using this tool to build animations and visualizations for the web could be much quicker than writing them from scratch.
The Qtzweb compiler is a Python script that reads in a binary plist file representing the Quartz Composer document, and includes JavaScript and WebGL code for each node in the file. Many Quartz Composer classes/node types have been written already, although not all just yet so there are some Quartz Composer files that don’t work yet. Each node in the file represents a class in JavaScript and these nodes are connected so that the output of one becomes the input of the next.
All of this is done by the compiler, which generates a single HTML file containing all of the generated JavaScript and WebGL shaders needed to run the Quartz Composer animation. It would be even more interesting if this could all be done at runtime by a JavaScript parser rather than ahead of time as a compiler. In any case, Qtzweb will be an interesting project to watch, and could be quite useful for designing web-based visualizations quickly.
It looks like work on a web-based editor for Quartz Composer files is underway already as well, although it doesn’t appear to be working properly yet. This could be even more interesting, and would allow developers on non-mac platforms to edit Quartz Composer documents using just their browser.
There didn’t appear to be any sort of online demo available, so I forked the project, compiled the demos, and pushed a Github Pages build. If the original project adds official demo pages in the future I’ll update these links, but for now here are a few demos of Qtzweb from my fork.
Of course, there is still a lot of work to be done on Qtzweb to support all of the available Quartz Composer features and node types, but this appears to be a good starting point for an interesting project. Be sure to check out the demos above, and the code on Github.
