[x3d-public] Appearance of Geometry in HTML

[Leonard Daly]

Roy,

Note that CSS is generally not rich enough at this time to handle of 
kinds of 3D appearance. However, I think it may be sufficiently robust 
to handle this one.

The problem (as stated) is how would one texture a Box using just CSS.

At this time there is no implementation that handles this, so these 
answers are potential at this time.

The background-image property is the first one that comes to mind. It is 
the most comment CSS image property. It could be defined to correctly 
texture-wrap a 3D shape. Using a background-image, HTML text or other 
HTML objects could be added to the cube. CSS also supports limited image 
filtering that may be useful. W3Schools has a page that discusses images 
interaction with CSS for HTML at 
https://www.w3schools.com/css/css3_images.asp.

It gets harder if you need to map specific image coordinates to specific 
vertices. There is nothing in CSS (as currently defined) that will do 
this well. There is some beginnings of this with background-position and 
background-attachment (see 
https://www.w3schools.com/css/css_background.asp for more details).

background-color could be used as the equivalent to diffuseColor. There 
is no current equivalent to specularColor or emissiveColor.


Leonard Daly


P.S. I should add that when I brought this idea up before, but phrased 
as having a Shape node contain all geometry and appearance properties; 
it was discussed that putting everything into a single node gave up the 
flexibility of reuse. This time I am asking about putting all of the 
appearance into CSS, which is designed for reuse.







> HI Leonard,
>
> I’m having trouble understanding (due to my inexperience) why you 
> wouldn’t need an ImageTexture node. I’m hoping you can help me here.
>
> Consider the following simple example.
>
> I have a cube, and want to use an image as a texture. I’m doing this 
> in an X3D scene graph incorporated into an HTML listing. I can easily 
> specify the Box node for the shape. How would I specify the texture 
> image as CSS?
>
> My partial listing might be:
>
> <Shape>
>
> <Box></Box>
>
> <ImageTexture url=’”myImage.png”’></ImageTexture>
>
> </Shape>
>
> Your proposal suggests that the HTML portion might be:
>
> <Shape class=”myBoxClass”>
>
> <Box></Box>
>
> </Shape>
>
> What would go into the CSS portion to call up the image?
>
> Shape.myBoxClass {
>
> ????
>
> }
>
> Thanks in advance,
>
> Roy
>
> *From:*x3d-public [mailto:x3d-public-bounces at web3d.org] *On Behalf Of 
> *Leonard Daly
> *Sent:* 14 August 2017 16:21
> *To:* X3D Public <x3d-public at web3d.org>
> *Subject:* [x3d-public] Appearance of Geometry in HTML
>
> If HTML/CSS world, the appearance of an element is (ideally) set in 
> the appropriate style definitions for the element using a combinations 
> of classes, ids, tags, and hierarchy. This includes it's edge effects 
> (border style, corner rounding, padding) and internal appearance 
> (color, background color, gradients, fonts, etc.).
>
> Using the same environment (HTML/CSS) and adding the 3D dimension (and 
> maybe second cameras, markers, etc.) should the appearance of objects 
> (geometry) be controlled by the appropriate style definitions? Why or 
> why not?
>
> If CSS+1D style definitions are used, then there is no need to any 
> appearance nodes (Material, ImageTxture, etc.). It might be done as 
> <Shape class='sign speedLimit'><IndexedFaceSet ...></Shape>. The 
> classes would add the black border, yellow background, text color, etc.
>
> The disadvantage is that some geometries may be require an extremely 
> complex vertex (or face) assignment for this to be practical.
>
> This method does align nicely with HTML and allows HTML tools and 
> concepts to be carried over to 3D/VR/AR/xR.
>
> -- 
> *Leonard Daly*
> 3D Systems & Cloud Consultant
> LA ACM SIGGRAPH Chair
> President, Daly Realism - /Creating the Future/
>

-- 
*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/20170814/d6b3b088/attachment.html>