<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<div class="moz-cite-prefix">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 class="moz-txt-link-freetext" 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 class="moz-txt-link-freetext" 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>
<br>
</div>
<blockquote type="cite"
cite="mid:02b001d31514$a6fbded0$f4f39c70$@ntlworld.com">
<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.EmailStyle19
{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]-->
<div class="WordSection1">
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">HI
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>
<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.<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">Consider
the following simple example.<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></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?<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">My
partial listing might be:<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><Shape><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">
<Box></Box><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">
<ImageTexture
url=’”myImage.png”’></ImageTexture><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"></Shape><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">Your
proposal suggests that the HTML portion might be:<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><Shape
class=”myBoxClass”><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">
<Box></Box><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"></Shape><o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></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?<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">Shape.myBoxClass
{<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">????<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">}<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">Thanks
in advance,<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="color:windowtext;mso-fareast-language:EN-US">Roy<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 style="color:windowtext"
lang="EN-US">From:</span></b><span
style="color:windowtext" lang="EN-US"> x3d-public
[<a class="moz-txt-link-freetext" 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 class="moz-txt-link-rfc2396E" href="mailto:x3d-public@web3d.org"><x3d-public@web3d.org></a><br>
<b>Subject:</b> [x3d-public] Appearance of Geometry in
HTML<o:p></o:p></span></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>
</div>
</blockquote>
<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>