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)

Time for Action: Blending Workbench

Let's cover an example of these various blending functions in action:

  1. Open the ch06_09_blending.html file in your browser. You will see an interface like the one in the following screenshot:
  1. This interface has most of the parameters that allow you to configure alpha blending. The default settings are source gl.SRC_ALPHA and destination gl.ONE_MINUS_SRC_ALPHA. These are parameters for interpolative blending. Which slider do you need to use to change the scaling factor for interpolative blending? Why?
  1. Change the sphere alpha slider to 0.5. You will see some shadow-like artifacts on the surface of the sphere. This occurs because the sphere back face is now visible. To get rid of the back face, click on Back Face Culling.
  2. Click on the Reset button.
  3. Disable the Lambert Term and Floor buttons.
  4. Enable the Back Face Culling button.
  5. Let&apos...