O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

WebGL Game Development

Book Description

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.

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.

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

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

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