First implementation

A lot has happened in the past few days, and interesting progress has been done with Tilt, both from a developer point of view, and from the community side. But first thing’s first: Tilt is an extension, there’s working code on (currently there are 19 followers and counting! lots for such a short period of time), so let’s see what it’s made of.

Project structureThe project structure is quite standard and follows the lines of any Firefox extension, with an install.rdf file containing description about the project (id, name, description, homepage url etc.) and also the target application, which is currently set to a Firefox minimum version of 4.0 and maximum version 7.0a1. I will probably change these as Firefox 7 ships in about five weeks, and it’s a pretty good idea to support even Aurora and Minefield releases. Currently, Tilt is not bootstrapped (it needs a Firefox restart when installed), but I don’t see it as a problem right now. As the project advances, I will most likely use Mozilla’s Addons SDK to achieve this.

The chrome.manifest is composed of three sections: content, locale and skin. MDN defines chrome as: “the set of user interface elements of the application window that are outside of a window’s content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.” These files are all packaged in a JAR archive.


From the top, the content contains mostly .xul and .js files. The XUL holds the user interface and (view) and Javascript is responsible for the logic (controller) of the extension. For example, this extension will create an iframe overlaying the current browser parent node (and adding it to the stack), while this is done by accessing a menu under “Tools” -> “Tilt” -> “Initialize Tilt”.

Here is how the XUL currently looks like, also: what happens when initializing Tilt. These two files (browserOverlay.js and browserOverlay.xul) are at the highest level of the extension content. Most of the other files represent the engine to render everything (I called it jTilt for now), some helper draw functions built on top of this engine, and the visualization logic. Other helpful libraries like glMatrix are used, providing great performance, so that everything is efficient to achieve smooth rendering.

An important requirement of any Firefox extension is making it “localizable, basically the locale .dtd and .properties files containing all of the strings, messages and titles or captions of any view component. Thus, it’s easy to translate this extension in many different languages and making it scalable from this point of view.

The third and final part is the skin, with .css files defining the look and other assets (.png, .jpg, images in general) used by the extension.

I’m currently using a TextMate development environment, but there’s also a Komodo Edit project file if you prefer it instead. There’s no “right” IDE for developing Firefox extensions, and any text editor you’re most comfortable with will do. Read this for more information.

Currently, you can find the latest .xpi file in the bin folder. Drag and drop it in your Firefox window to install it. Start it by accessing “Tools” -> “Tilt” -> “Initialize Tilt”, and you should see a rotating quad, tinted with a green color and a texture loaded from chrome:

Tilt screenshot

Tilt screenshot (6 Jun, 2011)

The Bugzilla page for this project is Implement Tilt: a WebGL-based 3D visualization of a Webpage, I’ve received some quite useful feedback already. You might want to cc yourself there to receive updates on the development as soon as they appear. Of course, this blog has RSS, and I encourage you to subscribe to it.

A few other things worth mentioning are some bug pages on Bugzilla:

Tags: , , , , , , , , ,

Comments are closed.