[x3d-public] XSeen: 3D in the Browser

[Leonard Daly]

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.

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 
http://realism.com/XSEEN/test/styleAdvanced.html. (Note that this 
example shows more than just CSS-3D handling.)

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.

The relevant definitions are:

             <x-class3d id='box'>
                 <x-style3d attribute='color' value='red'></x-style3d>
             </x-class3d>
             <x-class3d id='cone'>
                 <x-style3d attribute='color' value='green'></x-style3d>
             </x-class3d>
             <x-class3d id='sphere'>
                 <x-style3d attribute='color' value='blue'></x-style3d>
             </x-class3d>
             <x-class3d id='cylinder'>
                 <x-style3d attribute='color' value='teal'></x-style3d>
             </x-class3d>

The CSS-3D feature works with the definition of two tags:

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.

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.

For example the box is define in this example as

<x-box class3d='shape box'></x-box>

Where the CSS-3D 'shape' class defines the size of the box.

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.


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.

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:

x-box {color:red; }
.box {color:orange; }
x-group#door1 .box {color:green; }


I would be interested in hearing from people about any ideas they have 
as to how to improve or expand CSS-3D.


-- 
*Leonard Daly*
3D Systems & Cloud Consultant
LA ACM SIGGRAPH Chair
President, Daly Realism - /Creating the Future/
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://web3d.org/pipermail/x3d-public_web3d.org/attachments/20170921/d2d63fdd/attachment-0001.html>