Architectural review

The following diagram presents the architecture that has been built throughout the book:

Architectural review

Globals.js: Defines the global variables gl (WebGL context), prg (ESSL program), and the canvas width (c_width) and height (c_height).

Utils.js: Contains auxiliary functions such as getGLContext which tries to create a WebGL context for a given HTML5 canvas.

WebGLApp.js: It provides three function hooks, namely: configureGLHook, loadSceneHook, and drawSceneHook that define the life cycle of a WebGL application.

As the previous diagram shows these hooks are mapped to JavaScript functions in our web page:

  • configure: Here we create cameras, lights, ...

Get WebGL Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.