WebGL Textures & Vertices

Beginner's Guide

Page Five

WebGL Texture Overview

The following sections demonstrate how to apply JPG image files as textures on a mesh. However the same process applies to GIF and PNG image files.

This book covers WebGL 1.0, which allows a maximum of 8 textures per example. WebGL 2.0 allows up to 32 textures per example. WebGL enabled browsers include WebGL 1.0 capabilities. However not all WebGL enabled browsers have updated to WebGL 2.0, at this time.

Powers of Two

Image files for most WebGL projects must have pixel dimensions in powers of two. In other words both the width and height must equal a number generated from 2n. For example some acceptable dimensions equal 64, 256, and 512, because 64 = 26, 256 = 28 and 512 = 29.

The width and the height aren't required to match. For example a JPG file with width of 512 pixels and height of 256 pixels works fine with WebGL. Yet a JPG file with width of 300 pixels and height of 200 pixels, causes WebGL to throw an exception, for most texture processing operations. However, some WebGL image processing features allow non power of two images (NPOT).

Cross Domain Rules

The book's examples load image files to display as textures. However some browsers employ cross-origin resource sharing (CORS) rules. That means you must load image files from the same Web domain as the WebGL application. In other words if an image file resides on domain www.test1.com, and the Web page which loads the image resides on domain www.test2.com, the image file won't load.

Additionally some browsers such as Google Chrome and Opera for Windows, disable loading an image file from a Web page on the same computer. In other words if the Web page and image file reside on your computer, the file won't load. However the Firefox browser and Internet Explorer on Windows 8.1, load image files from the local computer. Therefore we tested on the local PC. Later we uploaded the files to our website SevenThunderSoftware.com to test with iPhone 6, Android phones, Windows phone, Google Chrome and Opera browsers.

A work around exists to load image files and test Web pages with various browsers. For example some browsers allow command line options for testing.


WebGL textures apply with mapping coordinates called texels. Texels include two coordinates labeled S and T. The S coordinate represents the horizontal position within a texture. The T coordinate represents the vertical position within a texture. The book's examples use normalized texels which range from 0 to 1. Each value represents a floating point number. In other words, you may include values after a decimal point for texels.

Consider texels as percentages of a texture divided by 100. For example the texel at [0.5,0.5] represents the exact middle of an image 50% along the X axis and 50% along the Y axis.

The following graphic demonstrates texels mapping a graphic full size across a square plane. Vertex coordinates range from -1.0 to +1.0. However texel coordinates range from 0.0 to +1.0. The book's examples surround texel coordinates with square brackets [] and vertex coordinates with parenthesis (). The book's next project demonstrates how to correlate vertices with texels. In other words we demonstrate how to assign one texel for each vertex.


Diagram 4: Texels

The first project titled Lighthouse Texture Map: Display a Photograph on a Square Plane explains how to display a photograph with WebGL vertices and texels.

Lighthouse Texture Map


Display a Photograph on a Square Mesh

This project explains how to initialize a square plane mapped with a photograph of a lighthouse. We show how to prepare vertices, texels, and indices for use as drawing buffers. You'll learn to create WebGL arrays of type Float32Array and Uint16Array. This project demonstrates how to get started with WebGL texture mapping.

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