3D HTML?

It's 2010 CE and 3D is the big gimmick of the year: IMAX and realD in cinemas, nVidia's 3D Vision kit, fascinating prototypes for true-3D displays and even 3D posters! It may be a passing fad, or it may be a rumble foreshadowing the avalanche to come ( albeit years from now ).

I have dreamt since childhood of the kind of immersive 3D technology that I saw in Star Trek's holodeck. Of course I don't believe any such thing is around the corner, but I can not deny the power of today's three-dimensional technology: I sat in the IMAX theatre at London's science museum and placed my hand in a spacesuit glove, felt fleetingly as though I were really there. Since then I have believed that 3D displays must become the norm, perhaps in my lifetime.

It's 2010 CE and HTML5 — although not yet finalised — is on the minds of web developers around the globe. I count myself among their number, the actual state of my career notwithstanding, and have been studying the current documentation with gusto.
Inevitably the changeability of the web is prominent in my thoughts at this time. There are conflicts between supporters of Flash and of the HTML5 proposals; meanwhile GPU hardware acceleration is coming to web browsers!

The innovations in these areas — 3D displays and improved web technologies — seem to have little or no crossover. But I feel ( and a brief Google reveals that I'm not entirely alone in this ) that there is room for synergy here.

Since its creation HTML has been designed for and rendered on two-dimensional displays, the only practical technology of the time, but part of this looks set to change. As 3D displays become available and, eventually, commonplace these 2D rendered documents will be thrown onto a virtual surface by display managers of the era. That's fine as far as it goes, but if no alternative is made available then I believe there will be much frustration not only for developers but users ( or consumers ) as well.

I'm going to discuss briefly where web design has been and where it might be going. Then I'll cover a little of the possible technical detail of what I'd like to see.

In the beginning HTML was a simple beast, a mechanism to tag ( or "mark up" ) parts of text on the internet ( "hypertext" ). This HyperText Markup Language included elements such as headings, paragraphs, tables and, most significantly, hyper-links. This was a pivotal moment in the history of IT, the creation of a clear way for users to navigate the internet through what would come to be known as the World Wide Web.

Time passed, use and expectations from users grew, so HTML and related standards changed and grew. We're now well accustomed to richly formatted web pages using complex styling ( through Cascading Style Sheets ), which improved designers' control over font sizes and element positions. Many people now regularly view video online, which would scarcely have been conceivable when HTML began.

HTML5 promises closer integration of multimedia content, greater flexibility of display and even integration with low-level keyboard input. These are all nice embellishments to an established technology, but are the standards developers missing a trick?

All of these impressive developments have been, as I mentioned earlier, two-dimensional. We have greater control than ever over the layout of our documents, but almost all of that control is exercised on the X and Y axes. There is also the z-index property accessible through CSS, but this is no more than a layering facility to ensure that various objects don't obscure each other.

As well as relative position we can, of course, specify the height and width of various display elements. But what we can not, yet, define is a depth. Of course this is only natural, as objects in HTML have never had a depth any more than images printed on a piece of paper.

Now imagine that you have a simple layout in HTML4 and CSS2, with two content boxes. The first box, 300px square, is positioned at 0px,0px. The second box, 150px square, is positioned at 250px,250px. One box overlaps the other; if we give the first box a z-index of 1 and the second a z-index of 2, then the smaller box is displayed in front of the larger.

div #box1 {
width: 300px;
height: 300px;
z-index: 1;
}

div #box2 {
position: absolute;
width: 150px;
height: 150px;
left: 250px;
top: 250px;
z-index: 2;
}

...
<div id="box1">Some content here.</div>
<div id="box2">Some more content.</div>
...

Imagine that this basic layout is displayed on one of the upcoming 3D monitors, in a 3D window manager not unlike KWin4 or Compiz. We may see a browser window standing proud of the desktop, with a completely flat page displayed therein. Now let's take a step forward in this imaginary interface.

Keeping things simple, the first z-index will still be 1 and the second z-index will now be 20. Assume that the web browser is no longer a simple 2D display, but has its own 3D display capabilities. Now we have two completely 2D boxes, but one hangs slightly in front of the other; as the user looks from one box to the other, his eyes focus slightly differently and he gains a sense of depth. In this implementation we have the cardboard-cut out style of 3D familiar to anyone who has used the red-and-green spectacles of old.

What I've outlined so far is perfectly achievable with current standards, but it's not very interesting. But by now I think you can see where I'm going with this.

Imagine that our display elements have instead the proportional properties of width, height and depth. Now z-index has a whole new meaning, because our display elements can have an actual presence on the Z axis. 3D solids, positioned in 3D space. Let's go back to our CSS example, with some new properties:

div #box1 {
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
}

div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
}

Here a minimal change to existing standards, with the addition of two properties and the alteration of another, allows two solid boxes to hover before the user's eyes on their fancy 3D display, intersecting each other in an interesting way. This simple implementation has the additional benefit of being more or less backwards compatible, as it would still work on a 2D display. If z-index were assumed to be in the same unit as the last specified coordinate it would make backwards compatibility even smoother ( z-index: 250; instead of z-index: 250px; because the unit would be implicit ).

Nice, yes? But ultimately unsatisfying, perhaps. I see two solutions: add more minor improvements, or create a whole new approach. First, a possible minor addition to what we have here.

...
<div id="box1">Some content here.
<p id="para1">This goes on the upper face of the first box.</p>
</div>
<div id="box2">Some more content.
<p id="para2">This goes on the right face of the second, smaller box.</p>
</div>
...

div #box1 {
width: 300px;
height: 300px;
depth: 300px;
z-index: 1;
top-face: #para1;
}

div #box2 {
position: absolute;
width: 150px;
height: 150px;
depth: 150px;
left: 250px;
top: 250px;
z-index: 250px;
right-face: #para2;
}

Here I'm suggesting that the new box models include extra parameters, so that content from elsewhere ( here, a pair of paragraphs ) can be placed by compliant browsers onto the appropriate faces of the 3D objects. They have no independent existence in a 3D context, but could still be separately displayed in a 2D context. What's more, user agents not supporting 3D can safely drop the new declarations.

I feel that this provides a good intermediate state between what we have today and what we might achieve in a future where 3D displays and user interfaces are commonplace and well understood. I'm tempted to discuss ideas I've had for a more comprehensive 3D adaptation of HTML, but perhaps that should wait for another post.

Coming back to the present then, I know that what I've outlined here is not likely to see implementation. Perhaps ( almost certainly ) we shall see something conceptually similar in years to come, but unless we start discussing the options now we'll have a lot to figure out when the time comes.

HTML5 isn't expected to be finalised for a few years yet and it's still fairly malleable. I don't expect to see wholesale change at this point, or particularly sweeping additions, but the process of adding, removing and reworking various elements is still ongoing. This is true not just of HTML5's elements and properties, but also of CSS3. The truth is that coming standards are much in flux at this time.

Even if the new standard doesn't end up including much in the way of 3D capabilities, I hope that we will at least gain a 3D context for the canvas element. It would be a useful start and show that the web is as forward looking today as it was at its inception.