c3dl text API
Andrew Smith | 6 September, 2008 | 15:20
Andor already mentioned we have text. The implementation is rather hacky, but it works. What we do is create a 2D canvas, render the text into it using its text API and then use that 2D canvas as the texture for the 3D canvas.
The textre can be applied to any model, including a rectangle. Here’s the current c3d API for drawing text:
I’ve done a lot of cleanup this week so there isn’t much hard-coded in there (for example the text colour and style, the background colour all come from parameters now), but there are still problems:
- this.addFloatingText = function(text, fontStyle, fontColour, backgroundColour)
- this.addTextToModel = function(model, text, fontStyle, fontColour, backgroundColour)
I’ve done a lot of cleanup this week so there isn’t much hard-coded in there (for example the text colour and style, the background colour all come from parameters now), but there are still problems:
- The text must be of a size where both the width and height are powers of two. So I end up making a bigger 2D canvas than needed. Right now I’m centering the text in that canvas (thanks to Jeremy Giberson for explaining the coordinate system to me), but that will cause problems when someone tries to allign a string with something when the background is transparent, since the size of the padding is unpredictable from the user’s point of view (it actually depends on the size of the rendered text). If I expand the rendered string to fill the whole 2D canvas it will end up stretched either horisontally or vertically.
- Neither of the functions takes a parameter to control the alpha of the text or the background. I’ll leave this to Andor as he’s been looking at that stuff.
- The rendered text is upside down or something on the teapot. At the meeting we’ve decided this is because of the teapot model. I think Cathy will put a fxed one into subversion and that will solve that problem.
- addFloatingText() doesn’t take a ‘location’ parameter to tell it where to place the floating text I don’t have any ideas about how to tell it where to go (I really don’t want to use Vectors, but that’s a problem, not a solution).
- By defalt the plane is rotated so that it’s not visible at all. I’ve just been setting angular velocity on it to be able to see if it works. For the user by default it should be facing the user. But that’s probably much harder than it sounds, since the camera can move all over the place.
- Even without location and transparency the functions already take too many paramenters. These have default values but still, they are too complicated. I tink after we see some use of these functions (in Chris’s coming demo, for example) we’ll have a better idea of what can be done to make the existing functions simpler.
- These two fnctions plus the create2Dcanvas() helper are in Scene. This may be a good idea for floating text, but probably not so good for a specific model. Would be nice if one of these could be moved to Model, but there are some mechanical problems with that and it’s not a big deal so I left it alone for now.
- To get the size of the text I need to create a <SPAN>, set the style on it, add some text to it, add it to <BODY>, measure it, and delete it from <BODY>. If I skip any of those steps I can’t get the proper size. Right now I don’t see the rendered <SPAN> in the webpage, not even a flicker, but with a lot more text it start being a visible problem. Also if there is already a style on <SPAN> it could cause a miscalculated size for the 2D canvas. This is another thing we should keep in mind.
the upside down issue is a problem with the unwrap
Cathy Leung | 8 September, 2008 | 18:17the upside down issue is a problem with the unwrap (the uv coordinates). I’m working on fixing up the models and posting them so that should be fixed soon. I think that the best way to handle the text positioning is to simply centre it on the 2D canvas. Any texture that you apply to a 3D model will be stretched funny if the unwrap is not properly done and it really can be fixed when figuring out the UV’s.