WebGL Game Development -- Table of Contents -- WebGL Game Development -- Credits -- About the Author -- About the Reviewers -- www.PacktPub.com -- Support files, eBooks, discount offers, and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 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 -- ModelView transformation -- Projection transformation -- 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 -- Vertex transformation with a basic 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 -- 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 -- Calculating normals from vertices and indices.

Understanding normal transformation -- Different types of lights used in games -- Directional lights -- Point lights -- Spotlights -- Ambient lighting -- Diffuse reflection (Lambertian reflection) -- Specular reflection -- 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 -- The JSON file -- Parsing the JSON faces array -- 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 -- 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 -- 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 -- Restructuring for texture coordinates -- Algorithm one to create new arrays -- Algorithm two to create new arrays -- Understanding the algorithm using a dry run -- 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 -- 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.

Implementing the control code -- 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 -- 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 -- 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 -- 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 -- 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 -- 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.