Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

By : Farhad Ghayour, Diego Cantor
5 (1)
Book Image

Real-Time 3D Graphics with WebGL 2 - Second Edition

5 (1)
By: Farhad Ghayour, Diego Cantor

Overview of this book

As highly interactive applications have become an increasingly important part of the user experience, WebGL is a unique and cutting-edge technology that brings hardware-accelerated 3D graphics to the web. Packed with 80+ examples, this book guides readers through the landscape of real-time computer graphics using WebGL 2. Each chapter covers foundational concepts in 3D graphics programming with various implementations. Topics are always associated with exercises for a hands-on approach to learning. This book presents a clear roadmap to learning real-time 3D computer graphics with WebGL 2. Each chapter starts with a summary of the learning goals for the chapter, followed by a detailed description of each topic. The book offers example-rich, up-to-date introductions to a wide range of essential 3D computer graphics topics, including rendering, colors, textures, transformations, framebuffers, lights, surfaces, blending, geometry construction, advanced techniques, and more. With each chapter, you will "level up" your 3D graphics programming skills. This book will become your trustworthy companion in developing highly interactive 3D web applications with WebGL and JavaScript.
Table of Contents (14 chapters)

What This Book Covers

Chapter 1, Getting Started, introduces the HTML5 canvas element and describes how to obtain a WebGL 2 context for it. After that, it discusses the basic structure of a WebGL application. The virtual car showroom application is presented as a demo of the capabilities of WebGL. This application also showcases the different components of a WebGL application.

Chapter 2, Rendering, presents the WebGL API to define, process, and render objects. This chapter also demonstrates how to perform asynchronous geometry loading using AJAX and JSON.

Chapter 3, Lights, introduces ESSL, the shading language for WebGL. This chapter shows how to implement a lighting strategy for the WebGL scene using ESSL shaders. The theory behind shading and reflective lighting models is covered and put into practice through a variety of examples.

Chapter 4, Cameras, illustrates the use of matrix algebra to create and operate cameras in WebGL. The Perspective and Normal matrices that are used in a WebGL scene are also described here. The chapter also shows how to pass these matrices to ESSL shaders so that they can be applied to every vertex. The chapter contains several examples that show how to set up a camera in WebGL.

Chapter 5, Animations, extends the use of matrices to perform geometrical transformations (move, rotate, scale) on scene elements. In this chapter, the concept of matrix stacks is discussed. It is shown how to maintain isolated transformations for every object in the scene using matrix stacks. Also, the chapter describes several animation techniques using matrix stacks and JavaScript timers. A practical demonstration is provided of each technique.

Chapter 6, Colors, Depth Testing, and Alpha Blending, goes into detail about the use of colors in ESSL shaders. This chapter shows how to define and operate with more than one light source in a WebGL scene. It also explains the concepts of depth testing and alpha blending, and shows how these features can be used to create translucent objects. The chapter contains several practical exercises that put these concepts into practice.

Chapter 7, Textures, shows how to create, manage, and map textures in a WebGL scene. The concepts of texture coordinates and texture mapping are presented here. This chapter discusses different mapping techniques that are presented through practical examples. The chapter also shows how to use multiple textures and cube maps.

Chapter 8, Picking, describes a simple implementation of picking, which is the technical term that describes the selection and interaction of the user with objects in the scene. The method described in this chapter calculates mouse-click coordinates and determines whether the user is clicking on any of the objects being rendered in the canvas. The architecture of the solution is presented with several callback hooks that can be used to implement logic-specific application. A couple of examples of picking are given.

Chapter 9, Putting It All Together, ties in the concepts discussed throughout the book. In this chapter, the architecture of the demos is reviewed and the virtual car showroom application outlined in Chapter 1, Getting Started, is revisited and expanded. Using the virtual car showroom as the case study, this chapter shows how to import Blender models into WebGL scenes and how to create ESSL shaders that support the materials used in Blender.

Chapter 10, Advanced Techniques, provides a sample of a number of advanced techniques, including post-processing effects, point sprites, normal mapping, and ray tracing. Each technique is provided with a practical example. After reading this chapter, you will be able to take on more advanced techniques on your own.

Chapter 11, WebGL 2 Highlights, outlines some of the major features and updates to the WebGL 2 specification. This chapter also provides a migration strategy for converting applications based on WebGL1 to WebGL 2.

Chapter 12, Journey Ahead, concludes Real-Time 3D Graphics with WebGL 2 with recommendations regarding techniques, concepts, tools, and communities that readers can leverage on their journey in mastering real-time 3D graphics.