## WebGL Textures & Vertices

## Beginner's Guide

### Page Sixteen

# Tile a Texture Map

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.