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:

Open common/js/utils.js in your editor to see the following code.
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.');
  }

};

getCanvas returns the canvas element with the provided id as the argument.
getGLContext returns a WebGL 2 context for a given canvas element.
Open up ch01_05_attributes-final.html in your editor to see the following changes.
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.
We've included <script type="text/javascript" src="/common/js/utils.js"></script>.

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;
}

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.