WebGL Game Development

WebGL Game Development
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Load and render complex 3D objects in WebGL using JavaScript
  • Apply textures and lighting to game scenarios
  • Load rigged 3D models and Skeletal Animations
  • Add Physics Engines to WebGL games

Book Details

Language : English
Paperback : 418 pages [ 235mm x 191mm ]
Release Date : April 2014
ISBN : 1849699798
ISBN 13 : 9781849699792
Author(s) : Sumeet Arora
Topics and Technologies : All Books, Game Development, Other

Table of Contents

Chapter 1: Getting Started with WebGL Game Development
Chapter 2: Colors and Shading Languages
Chapter 3: Loading the Game Scene
Chapter 4: Applying Textures
Chapter 5: Camera and User Interaction
Chapter 6: Applying Textures and Simple Animations to Our Scene
Chapter 7: Physics and Terrains
Chapter 8: Skinning and Animations
Chapter 9: Ray Casting and Filters
Chapter 10: 2D Canvas and Multiplayer Games
  • Chapter 1: Getting Started with WebGL Game Development
    • Understanding WebGL
    • Differentiating WebGL from the game engine
    • Understanding basic 3D mathematics
      • Vectors
      • Matrices
      • Understanding transformations
        • Classifying into linear and affine transformations
        • Understanding transformations required to render 3D objects
    • Learning the basics of 3D graphics
      • Understanding mesh, polygon, and vertices
      • Using indices to save memory
    • Understanding WebGL's rendering pipeline
      • Framebuffers
    • A walkthrough of the WebGL API
      • Initializing the WebGL context
        • Vertex buffer objects – uploading data to GPU
        • Index buffer objects
      • Shaders
        • The vertex shader
        • The fragment shader
      • Shader variable qualifiers
        • Attributes
        • Uniforms
        • The varying qualifier
        • Compiling and linking shaders
      • Associating buffer objects with shader attributes
      • Drawing our primitive
    • Drawing using vertex buffer objects
    • Drawing using index buffer objects
    • Debugging a WebGL application
    • Summary
  • Chapter 2: Colors and Shading Languages
    • Understanding colors
      • Coloring our square
        • Coloring using the vertex color
      • Learning more about colors
        • Understanding surface normals for lighting calculations
        • Different types of lights used in games
        • Understanding object materials
    • Rendering 3D objects
      • Exporting a 3D object from Blender
      • Understanding and loading the Wavefront (OBJ) format
        • Understanding the material file format (MTL)
        • Converting the OBJ file to the JSON file format
        • Loading the JSON model
        • Rendering without light
    • Understanding the illumination/reflection model
      • Lambertian reflectance/diffuse reflection
      • The Blinn-Phong model
    • Understanding shading/interpolation models
      • Flat shading
      • Gouraud shading
      • Phong shading
      • Differentiating the shading models
        • Implementing Gouraud shading on a Lambertian reflection model
        • Implementing Gouraud shading – Blinn-Phong reflection
        • Implementing Phong shading – Blinn-Phong reflection
    • Summary
  • Chapter 3: Loading the Game Scene
    • Supporting multiple objects
      • Implementing Face.js
      • Implementing Geometry.js
      • Implementing parseJSON.js
      • Implementing StageObject.js
      • Implementing Stage.js
      • Using the architectural updates
        • Understanding the main code
    • Understanding WebGL – a state machine
      • Using mvMatrix states
    • Understanding request animation frames
    • Loading the scene
    • Understanding positional lights
      • Lighting up the scene with lamps
        • The vertex shader
        • The fragment shader
        • Understanding the main code
    • Multiple lights and shaders
      • Adding multiple lamps
        • The vertex shader
        • The fragment shader
        • Implementing Light.js
        • Applying Lights.js
        • Understanding the main code
    • Summary
  • Chapter 4: Applying Textures
    • Texturing basics
      • Understanding 2D textures and texture mapping
      • Comprehending texture filtering
    • Loading textures
      • A new data type – sampler
      • Applying a texture to the square
        • The vertex shader
        • The fragment shader
    • Texture wrapping
      • Testing the texture wrapping mode
        • The HTML
        • The event handlers
        • The redrawWithClampingMode function
    • Exporting models from Blender
      • Converting Box.obj to Box.json
      • Understanding the JSON file with UV coordinates
    • Parsing UV coordinates from the JSON file
      • The challenge and the algorithm
        • Revisiting vertices, normals, and the indices array
    • Rendering objects exported from Blender
      • Changes in our JSON parser
      • Changes in our Geometry object
      • Loading a textured object
    • Understanding mipmapping
      • Implementing mipmapping
      • Understanding the filtering methods
        • Nearest-neighbor interpolation
        • Linear interpolation
        • Nearest-neighbor with mipmapping
        • Bilinear filtering with mipmapping
        • Trilinear filtering
    • Applying filtering modes
    • Understanding cubemaps and multi-texturing
      • Cubemap coordinates
      • Multi-texturing
      • Loading cubemaps
        • Understanding the shader code
    • Summary
  • Chapter 5: Camera and User Interaction
    • Understanding ModelView transformations
      • Applying the model transformation
      • Understanding the view transformation
      • Understanding the camera matrix
        • Comprehending the components of a camera matrix
      • Converting between the camera matrix and view matrix
      • Using the lookAt function
      • Understanding the camera rotation
      • Using quaternions
    • Understanding perspective transformations
      • Understanding the viewing frustum
        • Defining the view frustum
    • Using the basic camera
      • Implementing the basic camera
    • Understanding the free camera
      • Implementing the free camera
        • Using our free camera
    • Adding keyboard and mouse interactions
      • Handling mouse events
    • Comprehending the orbit camera
      • Implementing the orbit camera
        • Understanding the pitch function for the orbit camera
        • Understanding the yaw function for the orbit camera
      • Using an orbit camera
    • Summary
  • Chapter 6: Applying Textures and Simple Animations to Our Scene
    • Applying textures to our scene
      • Applying a texture to the scene
        • Implementing the vertex shader code
        • Implementing the fragment shader code
        • Working with the control code
    • Understanding the animation types in 3D games
      • Understanding time-based animation
        • Understanding frame-based animation
        • Implementing time-based animation
      • Comprehending interpolation
        • Linear interpolation
        • Polynomial interpolation
        • Spline interpolation
      • A briefing on skinned animation
    • Using first-person camera
      • Adding the first-person camera
        • Improving the first-person camera code
    • Simple bullet action – linear animation
      • Reusing objects in multiple bullets
    • Using B-spline interpolation for grenade action
      • Using linear interpolation for left-hand rotation
    • Using texture animation for an explosion effect
    • Summary
  • Chapter 7: Physics and Terrains
    • Understanding a simple terrain – plane geometry
      • Rendering our plane geometry
    • Comparing JavaScript 3D physics engines
      • Ammo.js
      • Box2dweb
      • JigLibJS
      • Comprehending the physics engine concepts
      • Updating the simulation loop
      • Learning about objects in the physics system
        • Particles
        • Rigid bodies
        • Soft bodies
      • Understanding the physics shapes
    • Adding gravity and a rigid body to the game scene
    • Implementing forces, impulse, and collision detection
      • Diving deep into collision detection
      • Revisiting the grenade and bullet actions
      • Cheating in the bullet action
    • Extending our terrain with physics
      • Implementing height maps
    • Summary
  • Chapter 8: Skinning and Animations
    • Understanding the basics of a character's skeleton
      • Comprehending the joint hierarchy
      • Understanding forward kinematics
    • Understanding the basics of skinning
      • Simple skinning
      • Smooth skinning
        • The binding matrix
        • The final vertex transformation
        • The final normal transformation
    • Loading a rigged JSON model
      • Understanding JSON file encoding
      • Loading the rigged model
        • Enhancing the StageObject class
        • Implementing the bone class
        • Implementing the RiggedMesh class
        • Loading the skinned model
    • Animating a rigged JSON model
      • JSON model – animation data
      • Loading the animation data
    • Exporting models from 3D software in JSON
      • Exporting from Blender
      • Converting FBX/Collada/3DS files to JSON
      • Loading MD5Mesh and MD5Anim files
    • Summary
  • Chapter 9: Ray Casting and Filters
    • Understanding the basic ray casting concepts
    • Learning the basics of picking
      • Picking based on an object's color
      • Picking using ray casting
    • Implementing picking using ray casting
      • Using a rigid body (collider) for each scene object
      • Calculating the screen coordinates of a click
      • Unproject the vector
      • Creating a ray segment
      • Checking for an intersection
      • Changing the color of the selected object
    • Offscreen rendering using framebuffers
      • Creating a texture object to store color information
      • Creating a renderbuffer for depth information
      • Associating a texture and a renderbuffer to framebuffers
      • Rendering to framebuffers
    • Applying filters using framebuffers
      • The vertex shader
      • The fragment shader
      • Loading and linking shaders
    • Understanding the square geometry code
    • Implementing the filter
  • Summary
  • Chapter 10: 2D Canvas and Multiplayer Games
    • Understanding canvas 2D basics and the drawing API
      • Using canvas 2D for textures
    • Adding 2D textures as model labels
      • Using the sprite texture
      • Using a square geometry
    • Implementing the Sprite class
    • Implementing the ModelSprite class
      • Understanding the main flow code
    • Communicating in real time
      • Understanding Ajax long polling
      • Understanding WebSockets
        • Understanding the WebSocket API
        • Understanding the WebSockets server
    • Using Node.js and Socket.IO for multiplayer games
      • Implementing the HTTP server using Node.js
      • Understanding Socket.IO
        • Learning the Socket.IO API
        • Understanding Socket.IO rooms
        • Storing user data on the server side
    • Implementing a multiplayer game
      • Understanding events and the code flow
      • The code walkthrough
        • The server code
        • The client code
    • Summary

Sumeet Arora

Sumeet Arora is a tech entrepreneur. He founded Evon Technologies, a consultancy for mobile and web development, and Logic Simplified, a game development company. He holds the position of CTO at Evon and works as a consultant for Logic Simplified. He has worked as an architect consultant for scalable web portals for clients across the globe. His core expertise lies in 3D rendering technologies and collaboration tools. For the past four years, he has been working with various clients/companies on multiplatform content delivery. His own passion towards gaming technologies has helped him help his clients in launching games on various platforms on both web and mobile. Currently his company, Logic Simplified, helps new gaming ideas to launch in the market.

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 1 submitted: last submission 30 Jun 2014

Page No: 9 | Errata type: Code 

Under the Vectors section

In the code snippet, the last line:

var v5= vec4(v2, w)

Should be:

var v5 = vec4.clone(v2); // Convert a vector3 to a vector4
v5[3] = w; // Set the w component on the vector4


Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

WebGL Game Development +    Building Machine Learning Systems with Python =
50% Off
the second eBook
Price for both: $39.00

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Load 3D objects exported from Blender using WebGL
  • Understand texture mapping and apply textures to 3D objects
  • Add lights and a camera to a WebGL scene
  • Create simple object animations utilizing matrix transformations
  • Fiddle with complex object animations such as skeletal animations
  • Get to grips with user interaction and picking
  • Build multiplayer games in WebGL
  • Handle difficult concepts such as animating skinned models using matrix transformations, quaternion mathematics, and linear interpolation
  • Apply physics engine to your WebGL game

In Detail

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.

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.


This book is set-by-step, example-based tutorial that provides details on gaming logic using Web GL.

Who this book is for

If you are a programmer who wants to transform the skill of blending imagination and throughput in games, this is the book for you. You need to have a good understanding of object-oriented programming, JavaScript, and vector and matrix operations.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software