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)

Architecture Updates

As we progress through chapters, we will encounter common functionality (for example, design patterns, utility functions, helpers, and data structures) that we can build upon. Not only this will serve us in writing DRY code, but it will also provide a useful architecture to support an advanced 3D WebGL application by the end of this book.

DRY

Don't Repeat Yourself (DRY) is a software development principle, the main aim of which is to reduce repetition of code. Write Everything Twice (WET) is a cheeky abbreviation to mean the opposite— code that doesn't adhere to the DRY principle.

Let's cover some changes that we will use in future chapters:

  1. Open common/js/utils.js in your editor to see the following code.
  2. We will use utils to include many of the utility functions to serve us in building our 3D application. The two methods, getCanvas and getGLContent, inside of utils are similar to the code we've implemented earlier in this chapter:
'use strict';

// A set of utility functions for /common operations across our
// application
const utils = {

// Find and return a DOM element given an ID
getCanvas(id) {
const canvas = document.getElementById(id);

if (!canvas) {
console.error(`There is no canvas with id ${id} on this
page.`
);
return null;
}

return canvas;
},

// Given a canvas element, return the WebGL2 context
getGLContext(canvas) {
return canvas.getContext('webgl2') || console.error('WebGL2 is
not available in your browser.'
);
}

};
  1. getCanvas returns the canvas element with the provided id as the argument.
  2. getGLContext returns a WebGL 2 context for a given canvas element.
  3. Open up ch01_05_attributes-final.html in your editor to see the following changes.
  4. We've included <link rel="stylesheet" href="/common/lib/normalize.css"> in the <head> of our document that resets many of the inconsistencies across browsers. This is an external library to help us normalize CSS styling across browsers.
  5. We've included <script type="text/javascript" src="/common/js/utils.js"></script>.
  1. Scroll to the init function where the necessary changes were made to use the utils.getCanvas and utils.getGLContext functions:
function init() {
const canvas = utils.getCanvas('webgl-canvas');
gl = utils.getGLContext(canvas);
window.onkeydown = checkKey;
}
  1. Open up ch01_05_attributes-final.html in a browser to see these changes in action.
Example Code Structure

All example code has been structured so that common functionality is at the root of the directory ( common/), while examples for each chapter are categorized under chapter directories (for example, ch01/, ch02/, and ch03/). That being said, to view these examples in your browser, you will need to start a server at the root of the directory to load all required assets for each example. Please refer to the Preface of this book for more details.