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>

Related Content you might be interested in

Current Title:

Small book image
WebGL Game Development
Sumeet Arora
Apr, 2014 | 418 pages
No titles found
Table of Contents (17 chapters)
WebGL Game Development
WebGL Game Development
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Getting Started with WebGL Game Development
Getting Started with WebGL Game Development
Understanding WebGL
Differentiating WebGL from the game engine
Understanding basic 3D mathematics
Learning the basics of 3D graphics
Understanding WebGL's rendering pipeline
A walkthrough of the WebGL API
Drawing using vertex buffer objects
Drawing using index buffer objects
Debugging a WebGL application
Summary
2
Colors and Shading Languages
Colors and Shading Languages
Understanding colors
Rendering 3D objects
Understanding the illumination/reflection model
Understanding shading/interpolation models
Summary
3
Loading the Game Scene
Loading the Game Scene
Supporting multiple objects
Understanding WebGL – a state machine
Understanding request animation frames
Loading the scene
Understanding positional lights
Multiple lights and shaders
Summary
4
Applying Textures
Applying Textures
Texturing basics
Loading textures
Texture wrapping
Exporting models from Blender
Parsing UV coordinates from the JSON file
Rendering objects exported from Blender
Understanding mipmapping
Applying filtering modes
Understanding cubemaps and multi-texturing
Summary
5
Camera and User Interaction
Camera and User Interaction
Understanding ModelView transformations
Understanding perspective transformations
Using the basic camera
Understanding the free camera
Adding keyboard and mouse interactions
Comprehending the orbit camera
Summary
6
Applying Textures and Simple Animations to Our Scene
Applying Textures and Simple Animations to Our Scene
Applying textures to our scene
Understanding the animation types in 3D games
Using first-person camera
Simple bullet action – linear animation
Using B-spline interpolation for grenade action
Using texture animation for an explosion effect
Summary
7
Physics and Terrains
Physics and Terrains
Understanding a simple terrain – plane geometry
Comparing JavaScript 3D physics engines
Adding gravity and a rigid body to the game scene
Implementing forces, impulse, and collision detection
Extending our terrain with physics
Summary
8
Skinning and Animations
Skinning and Animations
Understanding the basics of a character's skeleton
Understanding the basics of skinning
Loading a rigged JSON model
Animating a rigged JSON model
Exporting models from 3D software in JSON
Summary
9
Ray Casting and Filters
Ray Casting and Filters
Understanding the basic ray casting concepts
Learning the basics of picking
Implementing picking using ray casting
Offscreen rendering using framebuffers
Applying filters using framebuffers
Summary
10
2D Canvas and Multiplayer Games
2D Canvas and Multiplayer Games
Understanding canvas 2D basics and the drawing API
Adding 2D textures as model labels
Implementing the Sprite class
Implementing the ModelSprite class
Communicating in real time
Using Node.js and Socket.IO for multiplayer games
Implementing a multiplayer game
Summary
Index
Index

Understanding ModelView transformations

In all our previous chapters, we used model transformations. We used glMatrix (http://glmatrix.net/) functions to calculate translation and rotation. Let's look at what we are talking about here:

// Create an identity matrix
var mvMatrix=mat4.create();

// Translate the matrix by objects location and replace the matrix with the result(mat4.translate(out,in,vec3))
  mat4.translate(mvMatrix, mvMatrix, stage.stageObjects[i].location);
// Rotate the matrix by objects rotation X and replace the matrix with the result(mat4.rotateX(out,in,vec3))
  mat4.rotateX(mvMatrix, mvMatrix, stage.stageObjects[i].rotationX);
  mat4.rotateY(mvMatrix, mvMatrix, stage.stageObjects[i].rotationY);
  mat4.rotateZ(mvMatrix, mvMatrix, stage.stageObjects[i].rotationZ);

In the preceding code, we created a ModelView matrix, mvMatrix, which stores the translation and rotation of the object. We passed this matrix to our fragment shader using our own function, setMatrixUniforms. When...

Previous Section
End of Section 2
Next Section