## WebGL Textures & Vertices

## Beginner's Guide

### Page Four

# Vertices and Meshes Overview

A vertex represents a point in 3D or 2D space.
A mesh represents a set of *ordered* vertices.
The simplest mesh is a triangle composed of three
vertices.
Combine triangles to display meshes representing
almost any form imaginable.
For example prepare a few triangles,
to display geometric volumes such as cubes
and pyramids.
Display complex meshes representing people,
architecture, and landscapes.
This book explains how to order vertices
to display a mesh representing a square.

For readers who've studied algebra
the following Cartesian coordinate graph
should look familiar.
The illustration demonstrates a
Cartesian coordinate graph with
axes labeled X

and Y

. The book's
examples use
values for numbers within the range `-1`

to `+1`

.
The center of the 2 dimensional graph is at point `(0,0)`

.
The upper left corner is at point `(-1,+1)`

.
The lower right corner is at point `(+1,-1)`

.

### Diagram 1: 2D Cartesian Coordinate Graph

## Third Dimension

The book's examples include values for the *third*
coordinate named Z

.
For example `(0,0,0)`

represents one
vertex at the center or origin, of the graph.
Point `(1,-1,-1)`

represents one vertex
in the lower right back corner of a 2 x 2 unit cube.
The following graphic demonstrates the third dimension with a cube.
The axis labeled Z

provides depth to a scene.

### Diagram 2: Cube on with Three Axes

WebGL includes a conceptual viewport. You might think of the
viewport as the monitor or a device's display screen.
As the value of the Z coordinate *decreases*,
a point *recedes* off into the distance.
As the value of a the Z coordinate *increases*,
a point *moves toward* the view screen.