WebGL Textures & Vertices

Beginner's Guide

Page Sixteen

Tile a Texture Map

Tiled Fish
Tiled Butterfly Fish
Tiled Lighthouse
Tiled Lighthouse

The tiled projects display either the tiled Butterfly fish graphic or the tiled lighthouse photograph. However the information in this section applies to any WebGL acceptable graphic.

The following section demonstrates how to tile graphics on a square plane manually. We add vertices and texels, dividing the plane into quadrants, or four sections. We added center vertices to each edge of the plane. The exact center of the plane includes a vertex at coordinate (0,0,0), as well.

The new vertices receive more than one mapping coordinate. Extend the array of vertices with interleaved texels. Repeat every vertex which maps to multiple texels. For example if one vertex maps to two texels, then repeat the vertex twice in the Float32Array. Fortunately the original corner vertices continue to use one set of texel coordinates.

The following diagram illustrates the new vertices and texels. Vertex coordinates appear in parenthesis. Texel coordinates appear in brackets. Small blue dots symbolize vertices. For those with black and white displays, small medium gray dots symbolize vertices.

The center vertex references four texels [1,0],[0,0],[1,1],[0,1]. Each corner of the fish graphic maps to the center vertex. Additionally the midpoint of each edge references two texels.

Fish Tiled Coordinates
WebGL Beginner's Guide Introduction WebGL Beginner's Guide Page Seventeen
Copyright © 2015 Seven Thunder Software. All Rights Reserved.