Blogs Eye

Note: About 1,000 people read this article in less than an hour, and it seems that they all thought it was about graphics. What I am talking about is markup and css to arrange html tags in a 3d space. I also discuss making some html objects such as tables into 3d objects.

Someone will market an affordable consumer based three dimensional video card and display. This will happen soon. Shortly afterward there will be three dimensional video format which will give rise to three dimensional websites and demand for three dimensional content.

There are high end flat screen TVs that can display 3D movies. Although there are very few 3D movies available, the sets are selling.

Current development in HTML 5 is all concerned with things like round corners, embedded media and drawing. These seem like more of the same rather than anything revolutionary. It is time to start thinking about 3D HTML.

The coordinate elements in HTML are simple X-Y Cartesian coordinates. Size is based on width and height, where location uses distances to top, left, right and bottom. Orientation is handled in some browsers with a transform css element that will do things like scale, rotate and translate values.

We have lots of built in 2D references where the dimensionality is hard coded by the syntax. If we have height and width do we really want to add depth? I would think not. As long as a designer is going to make a 3D web page using HTML I don’t think anyone wants to use clunky nomenclature to describe positions in a 3D space.

In CSS there would probably be an array of dimensions. For example, instead of using:

#box { width:200px;height;320px;depth:400px; left:0;top:10px;deep:20px }

We could say:

#box { size(200px,320px,400px);position(0,10px,20px); }

In JavaScript we could access these by using an array:

elementID.style.position[2]=”13px”; (changes z dim);

Orientation could be three coordinates that translate into a vector. If the default vector is (0,0,1) then

#box {orientation(1,0,0);}

Would rotate the box to face right (I think).

Transformation in 3D could use similar methods:

#box {transform(1.2em,2em,.5em);}

This could be used to do simple resizing of shapes. You could use em or % or an absolute measurement to resize the shape.

You could use a deg, ˚, or rad to indicate degrees or radians of rotation. This would nicely distort the shape. The plus or the minus sign could indicate translation in the space.

Using a 3X3 matrix, CSS could use orthogonal projection for transformation, although this might make hand coding html difficult without a good calculator. Although this is the most flexible, I would not even begin to try it.

A 4X4 matrix could be used for transforming an object with perspective.

Three dimensional tables might make life interesting for HTML coders. I doubt if anyone wants a <TF> (table file) tag to indicate where a file will be located. That would make the structure of tables look like this:

<table>
<tr>
<tf>
<td>data</td>><td>data</td>><td>data</td>
</tf>
<tf>
<td>data</td>><td>data</td>><td>data</td>
</tf>
</tr>
<tr>
<tf>
<td>data</td>><td>data</td>><td>data</td>
</tf>
<tf>
<td>data</td>><td>data</td>><td>data</td>
</tf>
</tr>
</table>

It is a simple enough concept, but tables are out of style unless the data is actually tabular and CSS snobs eschew them.

The CSS for a three dimensional table using divs might look like this:

.table {display: table;}
.tablerow {display:table-row;}
.tablefile {display:table-file;}
.tablecell {display:table-cell;}

It might be more interesting a generic style and let the container determine the placement

<div style=” display:table;dimensions:3”> – table
<div style=” display:table-element” >  a row
<div style=” display:table-element” >  a file
<div style=” display:table-element” >  a cell

A table-element determines how it is displayed by how its container is displayed. Rows are inside tables. Files are inside rows. Cells are inside files. You could set the dimensions to 5 on the table and have a 5D table, but it would require special rules to display it.

The orientation and transformation of the entire 3D page could be controlled by styling the BODY tag. Zindex would be based on a virtual observer and so the display could be rotated to show the back of objects. The IE style Zoom would have more meaning when a coder could use it to scale a 3D page.

Using 3D it would be interesting to view the 3D tank from different perspectives. Browser scroll bars (three of them) would be used for moving around the box and another control could be used to change the viewpoint and possibly the zoom. The advances in 3D display architectures might also lead to 3D pointers or inputs that could read gestures in the same way the iPhone can sense more than one finger for scaling or rotating.

Javascript events would have to be expanded. Things like mouse-move and resize would have be expanded to return three dimensional units for orientation. Javascript should know when the user is zoomed in on an upside down 3D image.

I could go on.

I am now wondering if there is a 3D HTML and CSS committee meeting somewhere. Google has not yielded up anything so I am guessing that it meets in secret for the time being.

This entry was posted on Wednesday, April 21st, 2010 at 3:33 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.