<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:black;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.msonormal0, li.msonormal0, div.msonormal0
{mso-style-name:msonormal;
mso-margin-top-alt:auto;
margin-right:0cm;
mso-margin-bottom-alt:auto;
margin-left:0cm;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
color:black;}
span.EmailStyle18
{mso-style-type:personal;
font-family:"Calibri",sans-serif;
color:windowtext;}
span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
{page:WordSection1;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]--></head><body bgcolor=white lang=EN-GB link="#0563C1" vlink="#954F72"><div class=WordSection1><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Thanks, Leonard.<o:p></o:p></span></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'><o:p> </o:p></span></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-US style='color:windowtext'>From:</span></b><span lang=EN-US style='color:windowtext'> Leonard Daly [mailto:Leonard.Daly@realism.com] <br><b>Sent:</b> 14 August 2017 18:09<br><b>To:</b> Roy Walmsley <roy.walmsley@ntlworld.com><br><b>Cc:</b> 'X3D Public' <x3d-public@web3d.org><br><b>Subject:</b> Re: [x3d-public] Appearance of Geometry in HTML<o:p></o:p></span></p></div></div><p class=MsoNormal><o:p> </o:p></p><div><p class=MsoNormal style='margin-bottom:12.0pt'>Roy,<br><br>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.<br><br>The problem (as stated) is how would one texture a Box using just CSS.<br><br>At this time there is no implementation that handles this, so these answers are potential at this time.<br><br>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 <a href="https://www.w3schools.com/css/css3_images.asp">https://www.w3schools.com/css/css3_images.asp</a>.<br><br>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 <a href="https://www.w3schools.com/css/css_background.asp">https://www.w3schools.com/css/css_background.asp</a> for more details).<br><br>background-color could be used as the equivalent to diffuseColor. There is no current equivalent to specularColor or emissiveColor.<br><br><br>Leonard Daly<br><br><br>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.<br><br><br><br><br><br><br><o:p></o:p></p></div><blockquote style='margin-top:5.0pt;margin-bottom:5.0pt'><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>HI Leonard,</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>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.</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Consider the following simple example.</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>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?</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>My partial listing might be:</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'><Shape></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> <Box></Box></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> <ImageTexture url=’”myImage.png”’></ImageTexture></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'></Shape></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Your proposal suggests that the HTML portion might be:</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'><Shape class=”myBoxClass”></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> <Box></Box></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'></Shape></span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>What would go into the CSS portion to call up the image?</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Shape.myBoxClass {</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>????</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>}</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Thanks in advance,</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'>Roy</span><o:p></o:p></p><p class=MsoNormal><span style='color:windowtext;mso-fareast-language:EN-US'> </span><o:p></o:p></p><div><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0cm 0cm 0cm'><p class=MsoNormal><b><span lang=EN-US style='color:windowtext'>From:</span></b><span lang=EN-US style='color:windowtext'> x3d-public [<a href="mailto:x3d-public-bounces@web3d.org">mailto:x3d-public-bounces@web3d.org</a>] <b>On Behalf Of </b>Leonard Daly<br><b>Sent:</b> 14 August 2017 16:21<br><b>To:</b> X3D Public <a href="mailto:x3d-public@web3d.org"><x3d-public@web3d.org></a><br><b>Subject:</b> [x3d-public] Appearance of Geometry in HTML</span><o:p></o:p></p></div></div><p class=MsoNormal> <o:p></o:p></p><p>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.). <o:p></o:p></p><p>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?<o:p></o:p></p><p>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.<o:p></o:p></p><p>The disadvantage is that some geometries may be require an extremely complex vertex (or face) assignment for this to be practical.<o:p></o:p></p><p>This method does align nicely with HTML and allows HTML tools and concepts to be carried over to 3D/VR/AR/xR.<o:p></o:p></p><p> <o:p></o:p></p><div><p class=MsoNormal>-- <br><b><span style='font-size:13.5pt;color:#333366'>Leonard Daly</span></b><span style='color:#333366'><br>3D Systems & Cloud Consultant<br>LA ACM SIGGRAPH Chair<br>President, Daly Realism - <i>Creating the Future</i> </span><o:p></o:p></p></div></blockquote><p><o:p> </o:p></p><div><p class=MsoNormal>-- <br><b><span style='font-size:13.5pt;color:#333366'>Leonard Daly</span></b><span style='color:#333366'><br>3D Systems & Cloud Consultant<br>LA ACM SIGGRAPH Chair<br>President, Daly Realism - <i>Creating the Future</i> </span><o:p></o:p></p></div></div></body></html>