WebGL HUD

[jucarave]

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?

 

Thanks

[captainherisson]

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.

[jucarave]

Well that actually worked (haven't tried the text one yet) not the way i would like but it works...

 

Thanks for your help.

[dreta]

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.

[jucarave]

Hello, 

 

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.

 

Greetings.

[b0xincognito]

Also, remember that with WebGL you could just use HTML elements (like <div>s) on top of the Canvas and update them with Javascript.

[HappyPandaFace]

using div tags is a great choice, it's simple and fits in with the rest of your website, but you take performance hits in certain areas if you rely on them too much. Especially if you're using jquery effects.