## WebGL Textures & Vertices

## Beginner's Guide

### Page Forty Four

# Shader Attributes

Attributes are accessed only within the vertex shader. Attributes represent a subset of data from a buffer, for each execution of the vertex shader. For each drawing operation, the vertex shader runs repeatedly, until every element of data passes through attributes according to specified settings. The developer designates exactly which elements from a buffer must pass through an attribute, for one full drawing operation.

WebGL API method calls upload buffers from
JavaScript arrays, for use with attributes.
The method `vertexAttribPointer()`

describes the layout and limits of data for individual
attributes. Method `vertexAttribPointer()`

instructs the shader how to process a stream of
data, which originates from a JavaScript array.
The section titled Prepare Buffers

explains how to upload JavaScript arrays to
WebGL buffers.
The section titled
WebGL API vertexAttribPointer()

demonstrates how
to prepare shader attributes, to process buffer data.
This section focuses on shader code.

## Shader Variable Types

The book's shaders use types
`vec2`

, `vec4`

,
`mat4`

, and `sampler2D`

.
The next few sections discuss each type.

### Shader Type vec2

`vec2`

indicates
a vector with `2`

floating point numbers.
Vectors contain
sets of floating point numbers.
The number of values in a
vector are specified as `vec<n>`

where `n`

represents
a number between `2`

and `4`

.
The book uses `vec2`

to process texels.

Developers may access entries
in a vector with *swizzles*.
Swizzles include `{x,y,z,w}`

,
`{r,g,b,a}`

, or `{s,t,r,q}`

components.
For example access the `s`

component of a `vec2`

named `a_tex_coord0`

with `a_tex_coord0.s`

.

### Shader Type vec4

A `vec4`

indicates a vector with `4`

floating point numbers.
The book's vertex shader uses
a `vec4`

to process vertices.
The first, second, and third entries in
the `vec4`

process
the X, Y, and Z values uploaded
from one of the book's arrays.
The fourth entry in the `vec4`

receives the default value `1.0`

.

### Shader Type mat4

A `mat4`

represents a 4 x 4
matrix. Visualize matrices as
tables with rows and columns.
A 4 x 4 matrix contains
four rows and four columns, with
a total of 16 entries.
Matrices are useful for
*transforming* vertices.
In other words use matrices
to move, rotate, or scale
a mesh, one vertex at a time.
See the section
titled 4 x 4 Matrices

for more details.

### Shader Type sampler2D

A `sampler2D`

points to
a texture stored within the GPU.
The texture represents pixel colors.
Visualize a `sampler2D`

as an image formed from a
set of pixels. The `sampler2D`

provides a texture surface for the
shader to *sample*,
at specified texture coordinates.
The book's fragment shader
retrieves colors from the texture
based on texels.