1.5 - Software Organization For WebGL programs

A WebGL program is made up of a significant amount of software. Without good software organization and abstraction, your ability to maintain and enhance these graphic programs over time will be greatly diminished. Most programmers hate having a prescribed software structure imposed on them. There are many ways to design software and a good design by one programmer might be confusing to a different programmer. But there is no getting around the fact that a well designed software structure is needed.

JavaScript supports object-oriented programming and the software in these tutorials is designed as a collection of objects for the following very important reasons.

A sample of the software structure used in these tutorials is shown in the UML (Unified Modeling Language) diagram below. The arrows indicate relationships. The classes in blue boxes are static Javascript libraries that remain unchanged from one WebGL program to another. The classes in the orange boxes are Javascript code that changes based on the sophistication and type of graphics being produced.


The details of the UML diagram above are not important at this point. What is important is that you understand that object-oriented programming will be critical to the successful implementation of your WebGL programs. For example, a scene is typically composed of multiple models. It makes sense to create an object for each model. This isolates the complexity of each model in a separate JavaScript object and it greatly facilitates code re-use.

The Javascript classes defined in this software design are written with understanding and clarity in mind. They are well documented, broken into separate files, and coded using descriptive names. These classes are open-source and intended for your re-use. If you were to use them as part of a larger “production” program, they would typically be combined into fewer files and minified by removing white space and comments. It is not recommended that you minify your Javascript code until you have a completely debugged implementation of your program. And you are highly encouraged to keep a non-minified version of your program around for future debugging and enhancements.

To learn how to develop WebGL programs, you will start with a simple working example and modify small parts of the system at one time. However, as we introduce advanced graphics concepts many parts of the software will have to change at the same time. This is one reason why we are starting these tutorials with the big picture in mind. You need to learn how small changes in one part of the software propagates through the other parts.

Since you will be studying code examples and modifying existing code, we need to discuss coding standards in the next section.


the programming language supported by web browsers that allows for the modification of web pages. JavaScript runs on the client computer and performs client side processing.
object oriented programming
a style of programming where a class defines a collection of data and a set of methods/functions that manipulates that data. Multiple instances of a class can be created to implement separate objects of the class.
a collection of data and a set of methods/functions that manipulates that data.
an instance of a class that contains unique data. The manipulation of an object does not affect other objects implemented from the same class.
global identifier
a variable or function that can be used anywhere in a program. Global identifiers are bad and should be avoided whenever possible.
Next Section - 1.6 - Software Coding Standards