Jump to content



Recommended Posts

Hello everyone, 


I been messing with webgl for a while now and i am trying to make a game, but i don't know how to implement a HUD on my game without putting another canvas or a CSS trick, 


Is there a way to make in a single canvas?



Link to comment
Share on other sites

You could render your HUD using elements close to the camera. If they are transparent, draw them after your scene.


If you have to render text, you can either render an image font (see: http://simonschreibt.de/gat/gat-doom-3-hdui/) or use a canvas 2d as a texture for those elements which is OK if you don't update them often and don't target mobile.

Link to comment
Share on other sites

You mean HUD as in UI?


For every UI element, you build a rectangle out of two triangles and you texture that rectangle with the graphic you want to use for it. If you use pixels to position your UI elements instead of the (-1, 1) range, then you'll have to build an orthogonal matrix that will transform your rectangles from screen space to NDC space. Remember to render the UI after the scene, enable blending and disable depth testing. Text rendering works the same way by rendering individual letters, but you can optimize it by using triangle strips for a text area, by pre-rendering a piece of text to a texture, etc. The canvas trick works too, but text rendering on the canvas is ugly and you have no control over interpolation. You can use 3D elements for the UI too, of course, but that just requires you to write a shader that doesn't use the camera matrix, only the projection matrix which you should already have calculated.


What i just said requires basic understanding of how OpenGL works, are you using Three.js or some other framework that's causing you problems with this? I'm asking, because the idea of rendering UI based on the camera position is so ridiculous that you shouldn't have even tried it.

Link to comment
Share on other sites



I am using glmatrix for all the matrix operations, i am writing the rest of the engine (mostly because of learning purposes), i tried to render an orthogonal projection over the perspective one, but it didn't work (although i think that i can make it work now), what i did was to render a 3d plane in front of the camera (which apparently it worked, except of course because of the scale), i am going to return to this project later, now i have moved to a 2D webgl project to try on all this things specially the text render issue.


Link to comment
Share on other sites

  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...