## WebGL Textures & Vertices

## Beginner's Guide

### Page Forty Seven

# Attribute Processing

Attributes process data which
originate with JavaScript arrays.
Each time the vertex
shader runs, the attribute
processes *one subset* from the array.
The vertex shader executes
for every subset in the array.
When every entry has processed
through the vertex shader, one
draw operation has completed.

For example the drawing method
used in this book, calls the WebGL
method `drawElements()`

.
The Lighthouse Texture Map

project uploads an element array
with six entries.
Therefore the vertex shader
runs six times before
`drawElements()`

terminates.

Line 3 `varying vec2 v_tex_coord0;`

declares a varying of type `vec2`

named `v_tex_coord0`

.
Vertex shaders output
data through varying variables.
When the vertex shader finishes one
execution,
`v_tex_coord0`

contains
texel coordinates for output to the fragment
shader.

Line 4 `uniform mat4 um4_matrix;`

declares a uniform of type `mat4`

named `um4_matrix`

.
This matrix applies
rotation or translation to every vertex.
The book's projects rotate
or move the mesh with this matrix.

Uniforms don't change during drawing
operations.
Uniforms can change *between*
drawing operations.
The vertex shader
runs six times for every drawing operation
applied to the Lighthouse Texture Map

project.
Yet the value assigned to
`um4_matrix`

remains
*the same* during those six calls.
When the location of *each vertex changes*,
the *entire mesh*
displays the result.

Line 5
`uniform mat4 um4_pmatrix;`

declares a uniform `mat4`

named `um4_pmatrix`

.
This matrix also
modifies the location of
each vertex in a mesh.
However `um4_pmatrix`

provides
a sense of depth with
*perspective projection*.
The section titled
Perspective Projection

provides details.

Line 6
` void main(void) {`

represents the entry point for
the vertex shader. In other
words, the function named `main()`

executes when the vertex shader runs.

Line 7
`gl_Position = um4_pmatrix * um4_matrix * a_position;`

multiplies our perspective projection matrix,
by our rotation matrix, and the current vertex coordinates.

Multiply a vertex by a matrix to modify the
vertex's location. In this case
the shader multiplies each vertex by two matrices.
`um4_pmatrix`

provides depth or perspective.
`um4_matrix`

moves or rotates.
The built in variable `gl_Position`

,
receives the product of both multiplications.
`gl_Position`

represents the original
X, Y, Z coordinates modified for rotation, translation,
and perspective.

Internal processing
uses `gl_Position`

to
determine which values to pass
to the fragment shader.
`gl_Position`

is of type `vec4`

containing values for X, Y, Z, and W coordinates.

Line 8
`v_tex_coord0 = a_tex_coord0;`

assigns values for one texel
to the varying `v_tex_coord0`

.
The texel coordinates within attribute `a_tex_coord0`

originate from our
JavaScript array.
The assignment to a varying
provides output for the fragment shader.

Line 9
`}`

The closing curly brace ends the
function `main()`

,
which terminates one run of the vertex shader.

## Vertex Shader Summary

The vertex shader processes one
vertex and one texel at a time.
Outputs from the vertex shader
include `gl_Position`

and `v_tex_coord0`

.
When the vertex shader
completes processing,
the built in variable
`gl_Position`

,
represents one vertex modified
to display
rotation, translation, and perspective projection.
Additionally, the varying `v_tex_coord0`

represents one texel. The value for
each texel originates with a JavaScript array.

The vertex shader section presents many new concepts to readers unfamiliar with shaders. However subsequent sections bring the information together, that's provided here. We demonstrate how to upload uniform and attribute values from JavaScript to the vertex shader.