WebGL Textures & Vertices

Beginner's Guide

Page Sixty Five

Load Image For WebGL

If this particular GLEntity's sSrc property contains a valid String, then getImageVariables() prepares to load an image file. The sSrc property either equals null, or includes the path and file name for an image to use for texture data. The method getImageVariables(GLControl data) assigns a new JavaScript Image element to this GLEntity's img property, with the following line.

this.img = new Image();

Passing Values Through Event Listeners

Create properties on the Image to save references to this entity and the controller. Then assign an onload event listener for the Image. The Image properties become part of the onload event object's currentTarget properties.

We need the onload event listener to have access to the controller and this entity. After the image file loads, we need references to the GLEntity and GLControl classes in order to continue initialization.

The following listing demonstrates creating properties and assigning references to the controller and the current entity, this. controller is a reference to GLControl. this is a reference to the current GLEntity.

this.img.controller = controller;
this.img.entity = this;

Listing 66: Assign GLControl and GLEntity to Image

The following listing assigns the GLEntity method named setImage(EventObject ev), as the onload event listener for the current Image element. Assign the image file's source path, stored in the String named sSrc, to the Image element's src property. Now the Image has a source file and the download process may begin.

this.img.onload = this.setImage;
this.img.src =  this.sSrc;

Listing 67: Assign Image onload Event Listener

getImageVariables(GLControl controller) Summary

Method getImageVariables(GLControl) prepares shader variables to process one texture for a GLEntity.

If an associated uniform sampler2D exists in the shader, then the entity maintains the uniform's location. If an associated attribute exists in the shader, then the entity maintains the attribute's location. Entities use the idx property to access shader variables.

getImageVariables(GLControl) saves shader variables, and calls vertexAttribPointer() to process texels through a vertex shader attribute. For entities with an image source file path, getImageVariables(GLControl) prepares to download the image. The image's onload event named setImage() completes initializing a texture. See the source code for method getImageVariables().

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