WebGL Textures & Vertices
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
64 = 26,
256 = 28 and
512 = 29.
The width and the height aren't
required to match.
For example a JPG file with
and height of
works fine with WebGL.
Yet a JPG file with
and height of
pixels, causes WebGL to throw an
for most texture processing
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
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
and the Web page which loads
the image resides on domain
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 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
Each value represents a floating point number.
In other words,
you may include values after a decimal point
Consider texels as percentages of a texture divided by 100.
For example the texel at
the exact middle of an image
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
However texel coordinates range from
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
This project demonstrates
how to get started with WebGL texture mapping.