WebGL Game Development

Description

Gain insights into game development by rendering complex 3D objects using WebGLAbout 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. 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. Content: Cover Copyright Credits About the Author About the Reviewers www.PacktPub.com Table of Contents Preface 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 APIInitializing 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 colorsUnderstanding 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 shadingPhong 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 sceneUnderstanding 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 New data type -- sampler Applying a texture to the square The vertex shader The fragment shader Texture wrapping.