Rome: 3 Dreams of Black. The Technology

Take a look behind the curtain

"3 Dreams of Black" is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. In other words, it enables your browser to show some really beautiful visuals. On this page, you'll find a WebGL model viewer featuring several of the "3 Dreams of Black" creatures. You'll also find 8 demos created by our development team, a link to the code base, and some links to resources on the web that will be useful for getting started in WebGL programming.

Model Viewer

WebGL Examples

Hatching Glow Shader
A demo that applies a crosshatching effect to a 3D model in real time using GLSL, or OpenGL Shading Language.

Normal Mapping
Normal mapping can be used to simulate the lighting of finely textured surfaces.

Video Shader
This demo uses GLSL to read frames from WebM videos as textures. The videos are layered to create a parallax effect and can be deformed with mouse movement.

Depth of Field
This shader simulates depth of field, the optical phenomenon that makes some objects appear in focus and others blurry.

Mouse in 3D Space
How do you use a two dimensional peripheral like the mouse to interact with objects in three dimensional space?

Cel Shader
This demo uses GLSL to create a cel or "toon" shader, which allows 3D models to mimic the type of shading used in comic books.

Metaball Playground
Using the Marching Cubes algorithm to create metaballs. You can also customize the material effects and geometry.

Turbulent Point Cloud
This demo uses thousands upon thousands of individual particles to create a complex geometry.

Ready to get the entire code base?

"3 Dreams of Black" is entirely open source, and the project is hosted on Google Code. It's a bit of a mess, so proceed at your own risk, but if you poke around enough, you’ll see how we created the entire project.

Get the code

And if that's not enough, check out…