WebGL Textures & Vertices

Beginner's Guide

Page Thirty Two

WebGL Entity Overview

The next few paragraphs provide an overview of the GLEntity class. The section titled Entity Details provides a wealth of WebGL instruction regarding each feature. Sections following Entity Details, illuminate the concepts introduced in this brief overview.

An entity represents a sprite or game character. Each entity includes a matrix enabling developers to move, rotate, and scale the sprite individually. Entities can share a texture or each entity can maintain it's own texture. Textures simply wrap the sprite in color. The color can include many details, transparency, or simply cover an entity entirely with one hue.

GLEntity Constructor

The constructor for GLEntity initializes everything needed for a WebGLTexture and a matrix. The matrix allows display of each entity with transformation, such as position or rotation.

Constructor parameters in order include s and i. The s parameter represents either a String path to an image file or null. Not every entity needs an image file. The i parameter is an integer. The constructor assigns the i parameter to the idx property. The constructor assigns the s parameter to the sSrc property. During initialization, method getImageVariables() loads an image file from the sSrc file path. The idx property represents the texture unit for an entity.

GLEntity Structure

The GLEntity class includes properties sSrc, img, texture, uSampler, aTexCoord, idx, and matrix.

The String variable named sSrc, contains the path to an image file if one exists. GLEntity applies data from an image file to a texture. However GLEntity may apply procedurally generated color data to a texture, as well. The img variable maintains either an Image object, Uint8Array of color data, or null. The texture variable maintains a WebGLTexture generated from data in the img variable, when available. Additional entities with null textures may process matrices or other data.

Every entity in the controller's list does not need a valid texture property. The list might contain one GLEntity with a texture and many GLEntity without a texture. The list might contain many GLEntity each with a unique texture.

The idx variable is an integer which uniquely represents one entity in the array of entities. The idx property has three uses. Associate GLEntity properties with a shader attribute, shader uniform, and a texture unit.

Use the idx property to associate a uniform with the GLEntity property uSampler, and an attribute with the property aTexCoord. The uSampler property is the location of a uniform sampler2D from the fragment shader. The aTexCoord property is the location of an attribute for processing texture coordinates, within the vertex shader. The idx property of a GLEntity reference works with the two shader variables. For example the GLEntity with an idx value of 0, references a sampler named u_sampler0 and an attribute named a_tex_coord0. The GLEntity with an idx value of 1, references a sampler named u_sampler1 and an attribute named a_tex_coord1. However, if shader variables beyond idx value 0 aren't available, then examples work fine without them. Example projects operate successfully if the list contains more than one entity, even if shaders declare just one u_sampler0 and one a_tex_coord0.

The GLEntity idx property also refers to the associated texture unit. For example when idx equals 1, and the entity maintains a texture, then the texture unit equals TEXTURE1. The following listing activates a texture unit, based on the entity's idx value.

gl.activeTexture
(
 gl.TEXTURE0 + entity.idx
);

Activate GLEntity Texture Unit

Use the idx property to associate the uSampler property with the entity's texture unit. The following listing assigns the entity's sampler to a texture unit with the WebGL method uniformi(). Once assigned the entity's texture processes with the shader's sampler2D.

gl.uniform1i
(
 entity.uSampler, 
 entity.idx
);

Listing 26: Assign GLEntity Sampler to Texture Unit

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