O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required