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

Multiple lights and shaders


The provided solution in the previous section to add lights to our scene is not a scalable solution because if we wanted to add four or more lights, we would have had to add more uniforms to our shader. WebGL limits the amount of storage for uniforms. If we exceed the limit, we would get a compile-time or a runtime error. You can query the number of allowed uniforms using the following functions:

gl.getParameter(gl.MAX_VERTEX_UNIFORM_VECTORS);
gl.getParameter(gl. MAX_FRAGMENT_UNIFORM_VECTORS);

Also, the ambient color from all lights need not be calculated in the shaders as the ambient component is independent of distance and orientation of the object. We can sum the ambient color from all lights and pass the sum to the shader. Even if we use a single ambient color uniform in our shader for all lights, we would need two to three uniforms (position/direction, diffuseColor, specularColor) per light.

Adding multiple lamps

Open the 03-Loading-Scene-With-Lamps-Arrays.html...