[whatwg] <model/>: A 3D Equivalent to <img/>
Brian Blakely
anewpage.media at gmail.com
Mon Nov 2 11:16:37 PST 2009
David,
Excellent perspectives, and there are certainly format decisions that have
to be made as a matter of course, just as there have been for <video/>.
I do not agree with two of your points:
* A static 3D rendering is equal to a 2D bitmap
* JavaScript is necessary to display 3D content
My brief counter-points:
* 2D bitmaps are only partially compatible with 3D CSS - they are still
always flat
* This includes <canvas/>, which is still a 2D bitmap, not actually a 3D
object
A JavaScript-Only Approach is Inferior Because:
* <canvas/> is being purposed as a viewport into 3D content, a function the
browser itself should serve
* 3D HTML/CSS is more facilitative to 3D design work than 3D JavaScript
alone
* Using only 3D JavaScript, the code required in order to serve rich user
interfaces is bandwidth intensive, working against one of the key benefits
of using web standards
Explanation and Supporting Examples
----------------------------------------------------
These assumptions are partially the fault of my primordial example, as that
example's purpose was to illustrate these concepts clearly, not demonstrate
an application of the technology. The goal of <model/> is not merely to
serve 3D content, but to allow designers and developers to *lay out web
content and applications in 3D*. Let's think of this concept as "3D HTML".
<canvas/> is not a solution. It is rendering 3D content inside a viewport,
when the browser itself should be a viewport to 3D content. One
alternative, creating a giant <canvas/> and filling it with fallback
content, is coding twice - not good.
The foundations of 3D CSS (a la Webkit -
http://webkit.org/blog/386/3d-transforms/) and 3D JavaScript (WebGL/O3D) are
being laid out, but there is no HTML equivalent to cement a truly 3D design
platform on the web.
If we draw 3D design to its logical conclusion, rich user interfaces, then
the usefulness and necessity of 3D HTML becomes more apparent. I will
support this statement with an advanced example, which will demonstrate the
inadequacies of 2D design, and the gaps in currently-existing potential
standards.
DISPLAYING THE SOLAR SYSTEM IN A 3/4 VIEW
----------------------------------------------------------------------
The below snippets will illustrate how a page would lay out such an
interface in three ways: 1) A 2D implementation you will see today; 2) a
combination of fictional 3D HTML and 3D CSS; 3) only 3D CSS, 3D JavaScript
and <canvas/>.
On hover, each planet will rotate about its own axis.
2D HTML & CSS
-----------------------
<style>
ul {
* Background image of space
}
li {
* Absolutely positioned to correlate perspective
}
a {
* Block
* Negative indentation, hiding text
}
a.(planet name) {
* Background image of each planet
* Height/Width of each background image (alternatively a large
height/width in the anchor definition above, centering each image on X,Y
axes)
}
</style>
<h1>The Solar System in 3/4</h1>
<ul>
<li>
<a class="sun" href="sun.html">The Sun</a>
</li>
<li>
<a class="mercury" href="mercury.html">Mercury</a>
</li>
<li>
<a class="venus" href="venus.html">Venus</a>
</li>
...
</ul>
<script>
* Slideshow background script attached to each anchor, listening for
mouseover and mouseout
</script>
3D HTML & CSS (notes in parentheses)
-----------------------
<style>
div {
* Background image of space
}
ul {
* Rotate to 3/4 view (We can no longer display a background on this
element, because it will become wafer-like when rotated; a <model/> will
maintain its desired shape, as it is really 3D.)
}
model {
(some of the work will already be done for you by the ul rotation)
* Rotate to proper perspective
* Translate to desired depth/position
(in the syntax of -webkit-transition and -webkit-rotate, currently in
use today)
* transition: rotate 3s ease-out;
}
model:hover {
* rotateY(360deg);
}
</style>
<h1>The Solar System in 3/4<h1>
<div>
<ul>
<li>
<a href="sun.html">
<model src="sun.xml" alt="The Sun" />
</a>
</li>
<li>
<a href="mercury.html">
<model src="mercury.xml" alt="Mercury" />
</a>
</li>
<li>
<a href="venus.html">
<model src="venus.xml" alt="Venus" />
</a>
</li>
...
</ul>
</div>
3D JAVASCRIPT, 2D HTML & CSS
-----------------------------------------------
<style>
canvas {
* Height/Width of viewport
}
</style>
<h1>The Solar System in 3/4</h1>
<canvas id="solar-system">
<!-- ALT CONTENT FOR BROWSERS NOT SUPPORTING <canvas/> -->
(Herein: Code from Example 1)
</canvas>
<script>
(the following is a non-custom snippet from O3D's "simple" example --
webGL's implementation is slightly cleaner)
function loadFile(context, path) {
function callback(pack, parent, exception) {
enableInput(true);
if (exception) {
alert("Could not load: " + path + "\n" + exception);
g_loadingElement.innerHTML = "loading failed.";
} else {
g_loadingElement.innerHTML = "loading finished.";
// Generate draw elements and setup material draw lists.
o3djs.pack.preparePack(pack, g_viewInfo);
var bbox = o3djs.util.getBoundingBoxOfTree(g_client.root);
g_camera.target = g_math.lerpVector(bbox.minExtent, bbox.maxExtent,
0.5);
var diag = g_math.length(g_math.subVector(bbox.maxExtent,
bbox.minExtent));
g_camera.eye = g_math.addVector(g_camera.target, [0, 0, 1.5 * diag]);
g_camera.nearPlane = diag / 1000;
g_camera.farPlane = diag * 10;
setClientSize();
updateCamera();
updateProjection();
// Manually connect all the materials' lightWorldPos params to the
context
var materials = pack.getObjectsByClassName('o3d.Material');
for (var m = 0; m < materials.length; ++m) {
var material = materials[m];
var param = material.getParam('lightWorldPos');
if (param) {
param.bind(g_lightPosParam);
}
}
g_finished = true; // for selenium
// Comment out the next line to dump lots of info.
if (false) {
o3djs.dump.dump('---dumping context---\n');
o3djs.dump.dumpParamObject(context);
o3djs.dump.dump('---dumping root---\n');
o3djs.dump.dumpTransformTree(g_client.root);
o3djs.dump.dump('---dumping render root---\n');
o3djs.dump.dumpRenderNodeTree(g_client.renderGraphRoot);
o3djs.dump.dump('---dump g_pack shapes---\n');
var shapes = pack.getObjectsByClassName('o3d.Shape');
for (var t = 0; t < shapes.length; t++) {
o3djs.dump.dumpShape(shapes[t]);
}
o3djs.dump.dump('---dump g_pack materials---\n');
var materials = pack.getObjectsByClassName('o3d.Material');
for (var t = 0; t < materials.length; t++) {
o3djs.dump.dump (
' ' + t + ' : ' + materials[t].className +
' : "' + materials[t].name + '"\n');
o3djs.dump.dumpParams(materials[t], ' ');
}
o3djs.dump.dump('---dump g_pack textures---\n');
var textures = pack.getObjectsByClassName('o3d.Texture');
for (var t = 0; t < textures.length; t++) {
o3djs.dump.dumpTexture(textures[t]);
}
o3djs.dump.dump('---dump g_pack effects---\n');
var effects = pack.getObjectsByClassName('o3d.Effect');
for (var t = 0; t < effects.length; t++) {
o3djs.dump.dump (' ' + t + ' : ' + effects[t].className +
' : "' + effects[t].name + '"\n');
o3djs.dump.dumpParams(effects[t], ' ');
}
}
}
}
...
(and on, literally, for pages)
</script>
While the paradigms of HTML are inherently dimensionless, media types are
not. CSS and JavaScript are embracing 3D in their own ways, HTML is
obviously not giving its due diligence. Tons of JS just to open a 3D
viewport in HTML is far from what I would consider a complete spec. The
wafer-boxes that 3D CSS produce are an ill of HTML, not of CSS.
-Brian MB
On Mon, Nov 2, 2009 at 4:46 AM, David Workman <workmad3 at gmail.com> wrote:
> I'm in perfect agreement regarding the rational behind having a model tag
> as I agree with having more semantic tags in HTML. However, I don't think a
> model tag would work as described as it would provide no real extra benefits
> and would just confuse document authors.
>
> The reason I feel this is basically down to the fact that 3d models don't
> have a visual representation in the same way that images do. A 3d model file
> is just a list of data that needs rendering into a 2d image for display.
> There isn't really a standardised way to do this (not in the same way as
> with images, with standardised png, jpg, bmp, etc. as well known and
> commonplace formats with commonplace methods of display), and on top of that
> it isn't a 3d model you a displaying, but a 2d representation (i.e. an
> <img>). If the representation is static, it isn't really a 3d model as it's
> just a 2d image, and if it isn't static then you need scripting support,
> drawing support, rendering and the whole host of items that require
> javascript hooks and would logically make such a model more suited to a 3d
> canvas (which I believe is to be supported eventually under a normal
> <canvas> tag). As such, I don't see a place for a <model> tag in the current
> environment as a merely semantic element, and adding more than just
> semantics to the tag would be overlapping it with other efforts.
>
> David W.
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/whatwg-whatwg.org/attachments/20091102/9b040571/attachment-0002.htm>
More information about the whatwg
mailing list