Aeva
commented
9 years ago So I have the beginnings of something like that to be used for displaying (via html+css) error messages inline, and possibly to also have some kind of "settings" page for configuring the engine (keyboard layout, graphical fidelity, etc). It is basically a div that is always positioned to be above the calculated bounding box of the canvas element itself.
I got a little stuck in trying to decide how best to provide default CSS for this - css defined on an element takes precedent over everything else, and if I provided a default stylesheet, then anything overriding it would have to use the !important keyword, which feels like a bad hack. Best I've come up with for this is to bundle the css like I'm doing now with glsl shaders etc, and then have an option to not apply it by default. The other option is to have the defaults depend on a css class and provide a simple obvious mechanism for changing the element to use a different class. Let me know which interface you think is cleaner.
In either case, this would provide a div or two and some useful rules for centering that one could further attach their own dom objects to to build up a user interface. I didn't have any plans for an API for working with that (as html+css is way more powerful and efficient). Would something for dynamically creating & positioning & removing div elements be useful enough? Like so:
var some_element = please.create_overlay(parameters, for, element, placement, etc);
some_element.innerHTML = "blah blah blah";Also note that CSS3 gives us the ability to do 3d transforms, even as far as allowing you to define the transformation matrix for an element.
As for showing text within the OpenGL side of things, 2D canvas elements can be used as texture sources, and the 2D canvas API has a system for rendering text if I recall correctly. Perhaps there could be a function that you pass in a string, the font rendering parameters, centering, and bounding boxes, and it spits out a GraphNode that you could use. The main downside to this would be that the text would not be selectable by the user, and live editing would be a pain in the ass because every time the text changes something new needs to be uploaded to the GPU (and something old potentially needs to be deleted unless its being shown elsewhere). Currently m.grl doesn't have a mechanism for unloading images from the GPU once they've been uploaded for use.
I could put together an API for the html+css layer pretty easily since most of the ground work is there already. Text textures is a bit more involved and I originally envisioned it being more of a 2.0 feature.
What do you think of the above?
It would be nice if it was possible to add text to the canvas. Or better yet, on top of it, like this. Positioned in 3-D, of course, just like other 2-D objects (although if they are on top, they will never be deformed or obscured, but that's fine IMO; although it is a useful feature to allow that, too).