<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<p>There was a BOG at SIGGRAPH 2017 that discussed the various
features needed in a 3D/VR/xR language that runs in a HTML5
browser. Besides the obvious ones of DOM/HTML/JS compatible,
several other requirements were discussed including having the
language look-like and/or behave-like SVG + 1D and work with CSS.
<br>
</p>
<p>I took these and several other comments and incorporated them
into XSeen. This work is still in progress, but I have reached a
significant point where I can process CSS-like definitions and
have changes to those styles be incorporated into the scene. This
is illustrated at
<a class="moz-txt-link-freetext" href="http://realism.com/XSEEN/test/styleAdvanced.html">http://realism.com/XSEEN/test/styleAdvanced.html</a>. (Note that this
example shows more than just CSS-3D handling.)</p>
<p>Using Firefox's or Chrome's built-in debugger/inspector, you can
change the colors (entered as color names, hex values, or decimal
values) and the change shows up in the display for the appropriate
shape. At this time CSS-3D definitions apply to all tags, but
changes only are only for the basic solid shapes.</p>
<p>The relevant definitions are:</p>
<p><tt> <x-class3d id='box'></tt><tt><br>
</tt><tt> <x-style3d attribute='color'
value='red'></x-style3d></tt><tt><br>
</tt><tt> </x-class3d></tt><tt><br>
</tt><tt> <x-class3d id='cone'></tt><tt><br>
</tt><tt> <x-style3d attribute='color'
value='green'></x-style3d></tt><tt><br>
</tt><tt> </x-class3d></tt><tt><br>
</tt><tt> <x-class3d id='sphere'></tt><tt><br>
</tt><tt> <x-style3d attribute='color'
value='blue'></x-style3d></tt><tt><br>
</tt><tt> </x-class3d></tt><tt><br>
</tt><tt> <x-class3d id='cylinder'></tt><tt><br>
</tt><tt> <x-style3d attribute='color'
value='teal'></x-style3d></tt><tt><br>
</tt><tt> </x-class3d></tt><tt><br>
</tt><br>
</p>
<p>The CSS-3D feature works with the definition of two tags:</p>
<p>x-class3d defines a style (named using 'id'). CSS-3D classes are
used by including the 'id' as a space-separated value of the
'class3d' attribute of an object declaration tag.<br>
</p>
<p>x-style3d (only relevant when a child of x-class3d) contains a
style attribute - one attribute per tag. The attribute names in
x-style3d are the same as the attribute names in a tag that uses
this class.</p>
<p>For example the box is define in this example as</p>
<p><tt><x-box class3d='shape box'></x-box></tt></p>
<p>Where the CSS-3D 'shape' class defines the size of the box. <br>
</p>
<p>It is allowed to define styles that are not used in a particular
declarative object tag. In the example the CSS-3D shape class also
includes sizes for the three other objects arranged around the
torus.</p>
<p><br>
</p>
<p>This differs from regular CSS by not being able to define a full
or partial path for any definition. If any object specifies
multiple ids for class3d, then the last defined attributes (not
class) is used. It is possible to do animation on style
attributes; however, it is not efficient and there are better ways
to do that.</p>
<p>I would like to get CSS path capabilities into XSeen, but I am
not sure how to accomplish that. This would be something like the
CSS-3D version of:</p>
<p><tt>x-box {color:red; }<br>
.box {color:orange; }<br>
x-group#door1 .box {color:green; }</tt></p>
<p><br>
</p>
<p>I would be interested in hearing from people about any ideas they
have as to how to improve or expand CSS-3D.<br>
</p>
<p><br>
</p>
<div class="moz-signature">-- <br>
<font class="tahoma,arial,helvetica san serif" color="#333366">
<font size="+1"><b>Leonard Daly</b></font><br>
3D Systems & Cloud Consultant<br>
LA ACM SIGGRAPH Chair<br>
President, Daly Realism - <i>Creating the Future</i>
</font></div>
</body>
</html>