Book Image

WebGL Game Development

By : Sumeet Arora
Book Image

WebGL Game Development

By: Sumeet Arora

Overview of this book

<p>WebGL, the web implementation of Open GL, is a JavaScript API used to render interactive 3D graphics within any compatible web browser, without the need for plugins. It helps you create detailed, high-quality graphical 3D objects easily. WebGL elements can be mixed with other HTML elements and composites to create high-quality, interactive, creative, innovative graphical 3D objects.</p> <p>This book begins with collecting coins in Super Mario, killing soldiers in Contra, and then quickly evolves to working out strategies in World of Warcraft. You will be guided through creating animated characters, image processing, and adding effects as part of the web page canvas to the 2D/3D graphics. Pour life into your gaming characters and learn how to create special effects seen in the most powerful 3D games. Each chapter begins by showing you the underlying mathematics and its programmatic implementation, ending with the creation of a complete game scene to build a wonderful virtual world.</p>
Table of Contents (17 chapters)
WebGL Game Development
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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:

In the preceding screenshot, we have a label Mr. Red placed on top of our model and a red bar denoting the remaining power in the model (game stats). Now, the sprite that displays this information is a quad/square geometry with a dynamic texture. Also, the sprite faces the camera after it has been rotated. Hence, the sprite class should have the following features:

  • It should be placed at a defined delta distance from the model and should move with the model.

  • It should rotate...