Game Development Reference
In-Depth Information
this.gl.texParameteri(this.gl.TEXTURE_2D,
this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR_MIPMAP_NEAREST);
this.gl.bindTexture(this.gl.TEXTURE_2D, null);
Canvas 2D offers a very powerful drawing API, which can be used to generate
dynamic textures in our game. It has numerous utilities such as manipulating images
to drawing 2D text in our 3D game. WebGL does not directly offer us functions to draw
text or manipulate pixel data in an image, hence the canvas 2D API comes in handy.
We will use the canvas 2D API to draw game stats and model labels in our code.
Adding 2D textures as model labels
In this section, we will discuss how we use dynamic textures to add labels to players
in a game. In a multiplayer game environment, you may need to label your players
with their usernames. Also, if you want to add stats overlay to your game, you can
do it using two methods; either we use CSS overlays over our game canvas or use
texture sprites and render it inside the canvas. If we plan to use the second method,
we need a texture with text. Let's take a look at the following screenshot:
