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).

Cartesian Coordinate Graph

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.

Cartesian Coordinate Cube

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.

Cartesian Coordinate Viewport

Diagram 3: Viewport

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.