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)

WebGL Rendering Pipeline

Although WebGL is often thought of as a comprehensive 3D API, it is, in reality, just a rasterization engine. It draws points, lines, and triangles based on the code you supply. Getting WebGL to do anything else requires you to provide code to use points, lines, and triangles to accomplish your task.

WebGL runs on the GPU on your computer. As such, you need to provide code that runs on that GPU. The code should be provided in the form of pairs of functions. Those two functions are known as the vertex shader and fragment shader, and they are each written in a very strictly-typed C/C++-like language called GLSL (GL Shader Language). Together, they are called a program.

GLSL

GLSL is an acronym for the official OpenGL Shading Language. GLSL is a C/C++-like, high-level programming language for several parts of the graphic card. With GLSL, you can code short...