WebGL Textures & Vertices

Beginner's Guide

Page Three

Object Oriented Design

This book uses prototyped object oriented design with JavaScript classes, rather than functional programming. JavaScript presented in this book doesn't declare full classes with object oriented programming (OOP). However some might agree JavaScript constructs support object oriented design (OOD). See the article JavaScript Programming Paradigm for one analysis of JavaScript's structure. However ECMAScript 6 has added new features.

The source files GLEntity.js and GLControl.js encapsulate methods and properties to initialize and display the book's examples. The JavaScript in this book applies encapsulation to bundle methods, and properties together. True object oriented encapsulation also hides methods and properties. This book uses the word, encapsulation, loosely. JavaScript doesn't hide methods and properties. JavaScript encapsulation just bundles or packages methods and properties together within a file.

The sections titled Initialization, Controller Details, and Entity Details cover most of the functionality within GLEntity.js and GLControl.js.

The JavaScript for each unique project's contained in a separate file. For example to texture a square plane use GLSquare.js. To tile a graphic use GLSquareTile.js. To generate procedural textures use GLTexProcedure.js. See the Source Code section in the table of contents for full JavaScript listings of each file.

GLEntity Class

The JavaScript file GLEntity.js defines the GLEntity class. GLEntity encapsulates methods and properties to prepare WebGL textures and meshes, for the example projects. See See the Entity Details section, and the full GLEntity source code.

GLControl Class

The JavaScript file GLControl.js defines the GLControl class. GLControl initializes WebGL buffers and shaders for the book's examples. See the Controller Details section and the full GLControl source code.


The source code includes a few features for optimization and efficiency. For example, projects store vertex and texture coordinate data in one buffer. One element array buffer accesses both vertex and texture coordinates indirectly. In other words the source code combines or packs data to use fewer resources. If these terms seem unfamiliar, then read on for details.

The next few books in the series Online 3D Media with WebGL, take advantage of the framework setup here. For example, some books use texture atlases to upload a series of images as one texture.

The Book's Structure

First we provide an overview of vertices, meshes, and textures. Next we cover the Lighthouse Texture Map, Crop a Texture Map, Tile a Texture Map, Display Repeating Graphic, and Procedural Textures projects. Then we focus on initialization with the supporting controller file GLControl.js and entity file GLEntity.js. Last we cover the Animated Rotation project which works closely with the controller.

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.