Free Sample
+ Collection

WebGL Game Development

Sumeet Arora

WebGL is the standard for rendering 3D graphics in a browser using JavaScript. This book will teach you to exploit the full potential of WebGL in game development by rendering complex 3D objects. The essential tutorial.
RRP $26.99
RRP $44.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849699792
Paperback418 pages

About This Book

  • 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

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.

Table of Contents

Chapter 1: 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
Chapter 2: Colors and Shading Languages
Understanding colors
Rendering 3D objects
Understanding the illumination/reflection model
Understanding shading/interpolation models
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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

What You Will Learn

  • 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.


Read More