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

Extending our terrain with physics


In our existing code packets, we have a terrain which is a simple plain, with no bumps or plateaus or dips. Hence, we use an object of the jigLib.Plain class to represent it in our physics world. This section intends to end what we started with a true physics terrain. The following screenshot shows you the terrain that we will be targeting to initialize in the physics world. It has a bump that starts from the center of the terrain:

We can easily add this bump to the geometry, but it will take some effort to simulate it in our physics world. So, first we add this bump to our geometry. Open PlaneGeometry.js from the primitive folder in your text editor. In our previous code, we set the z axis value to 0 as shown in the following code:

this.vertices.push(x);
this.vertices.push(- y);
this.vertices.push(0);

The preceding code simply denoted that the geometry had no bumps, and all segments had a height of 0. However, now we simply add some logic to calculate the...