WebGL, CSG.js and three.js

This is an experiment with a Constructive Solid Geometry (CSG) toolkit built for JavaScript and WebGL. It’s roughly reproducing the box parts that are necessary for housifier. It seems easy to make dynamic objects with CSG and I find that promising! To use it, type in new values for the thickness and tooth count. Click-drag on the panel to move the view around.

Number of teeth:


I like making interactive things that people can use without any special plugins or downloads. I also like to push the boundary of what’s possible with input-output systems and complex graphics. Those two things can be difficult to reconcile on the web – because computers have been designed to run programs that are installed on them, most of these capabilities are locked away to be used on the local system rather than inside a browser. That’s where Flash has been useful over the years. Although it requires a plugin, a lot of people have that plugin and it enables a lot of interesting features.

Both sides of that bargain are changing now, though. On one side, Flash is adding new features like the full microphone input that came in version 10.1 and the accelerated 3D in version 11. That’s great because it increases the breadth of possibility on the web. On the other, the ubiquity of the platform is in decline, though, since Apple have said that Flash will absolutely not be permitted to run in the web browser for iPhone and iPad. To reach a wider audience it’ll be necessary to learn the technologies that are supported on the devices that audience is using.

Toward that end I have been looking in to WebGL. All of the up-to-date browsers except IE9 support it, and it looks like it will be the preferred way to deliver browser-based 3D to Android and iOS devices. I looked into WebGL in 2009 for a project and concluded at the time that it wasn’t ready for widespread use. It was awesome to see on a more recent survey of these technologies that not only is it ready for some applications, but there are some fantastic demos already showing off what it can do. The CSG.js library used above could be used to produce complex objects like buildings or furniture according to parameters. Once these objects are made, you could modify some of the more graphically impressive demos from three.js to display the resulting objects. It’s an exciting time to be developing for the web, and I’m looking forward to playing with more of it.