-
Notifications
You must be signed in to change notification settings - Fork 25
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Drawing text #183
Comments
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 I'm actually working on integrating web components right now in the <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 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. |
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. |
Hmm, they seem to have poor quality I think won't use canvas for rendering them. Thanks for the demo. |
@stlemme Thanks for the cool demo!! Btw, what if the text string contains a newline (such as \n), can it handle that? |
@stlemme the text texture looks like lay on the XY plane, what if it is laid on a different planes? |
@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. |
@stlemme I am using the "matrix3d" and "rotate" can perfectly make the text texture lay on any work planes. Thank you. |
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:
Are there any tools to help me with either?
The text was updated successfully, but these errors were encountered: