Drawing text

[Arsakes]

What would be the best way to draw text that gets transformed the same way the rest elements of xml3d scene (have some specific position within the scene and reacts to camera changes)?

More general question: is there an easy way for regular dom elements to behave as elements of the scene? I need to put subtitle on m , I've considered following options:

• Render it on an overaly and manually apply the transform to the html element each time user changes camera (good quality can use css styles, have to write a lot of code).
• Render some additional model with transparent texture with text (poor quality)

Are there any tools to help me with either?

[csvurt]

A colleague of mine has done text rendering you can find it in the text folder in this repository:

https://github.com/stlemme/xml3d-experimental

I'm not sure if it was working 100% but that would be a great place to start, @stlemme maybe you could chime in?

The transform approach is probably the best way to do it. You can pull the view matrix right out of the camera with viewElement.getViewMatrix() and then use it to generate a CSS3 matrix to apply to the overlaid element.

I'm actually working on integrating web components right now in the webcomponents branch, part of that is to treat any non-XML3D element in the scene like a <group> element. It wouldn't automatically get the transform applied to it through CSS but you could do something like this:

<xml3d>
   <view id="camera"></view>
   <group style="transform: translate3d(10px, 0, 0)">
      <div id="someOverlay"></div>
   </group>
</xml3d>

function onCameraChange() {
   var divTransform = document.querySelector("#someOverlay").getWorldMatrix();
   var viewMat = document.querySelector("#camera").getViewMatrix();
   var projMat = document.querySelector("#camera").getProjectionMatrix();
   // Create new CSS transform matrix for the div
   document.querySelector("#someOverlay").setAttribute("style", newCSSTransformString);
}

So you'd still have to manually position the element through CSS but the nice thing is it's a part of the scene graph, so changes to transforms above it (like the <group> element in the above example) will automatically be applied to its own world matrix just like any other xml3d scene element.

The release of this won't be for another 2 weeks probably, but support for non-xml3d elements inside the scene graph should be in the webcomponents branch tomorrow or Friday.

[stlemme]

A proof of concept demo is running at http://stlemme.github.io/xml3d-experimental/text/bitmap-font-test.html showing labels in xml3d. It uses a dynamically created bitmap font utilizing a hidden canvas, that is displayed in this demo below the xml3d scene.

[Arsakes]

Hmm, they seem to have poor quality I think won't use canvas for rendering them. Thanks for the demo.

[zhaoming029]

@stlemme Thanks for the cool demo!! Btw, what if the text string contains a newline (such as \n), can it handle that?
<string name="text">Saarbrücken, Germany</string>

[zhaoming029]

@stlemme the text texture looks like lay on the XY plane, what if it is laid on a different planes?

[stlemme]

@zhaoming029 Indeed, the quadrilateral strip is created in XY plane. Feel free to apply any rotation in order to transform the label into the desired plane.

@zhaoming029 Never tested special characters. But I'm pretty sure that they don't apply as expected. In particular newline is probably just handled as whitespace.

[zhaoming029]

@stlemme I am using the "matrix3d" and "rotate" can perfectly make the text texture lay on any work planes. Thank you.

[zhaoming029]

@stlemme @csvurt
Hi, do you know how can I draw a circle using xml 3d?
for example: (edge:ellipse (position 12.7941 64.3536 110.5) (gvector 0 1 0) 0.237822)
Thank you