WebGL Textures & Vertices
Tile a Texture Map
The following section demonstrates how
to tile graphics on a square plane
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
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
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
Each corner of the fish graphic
maps to the center vertex.
Additionally the midpoint of
each edge references two texels.