There is a canvas with a model that is drawn using WebGL. I need to display text on this canvas with the model. On the Internet, this method is common:

  • Create an invisible canvas with the usual 2D context
  • Print the text of the desired font and color using fillText, setFont, setFillStyle
  • Create a texture with an image of an invisible canvas.
  • We display it on the main (visible) canvas (with WebGL context)

Here is a detailed description of this method: WebGL text using a Canvas Texture .

Is there a way to display characters without using an invisible canvas? Maybe somehow you can get an image of the characters of a given font or something else?

  • Maybe this is exactly what you were looking for. Tyts , tyts PS: let me ask if you are writing under the wrapper, or did you change your mind? - Zowie
  • The first article describes the library (dll). How can I access it from javascript code? I use a wrapper. It turned out to be quite simple, like JOGL (a wrapper without additional logic). But sometimes I add my native-methods. - angry
  • So far I have no idea what to do and how (with canvas 3d I played at the level of cubes, etc.), but using 2d canas to render something like text, small panels, etc. - satisfied expatriate practice ... - Zowie

1 answer 1

You can draw all 3D in the context of GL, and display text over HTML5 / CSS.