# What Is WebGL?

## Basic Purpose and Features of WebGL

## Introduction

This short tutorial describes the basic purpose and features of WebGL. Topics include an overview of WebGL, vertices, shaders, 2D, and 3D Cartesian coordinate graphs. Two sample shaders work together with a set of vertices. This article explains how points on a graph relate to vertices which run through the shaders, then display on a Web page!

WebGL includes many advantages, with new and unique features for Web developers, designers, marketers, and businesses.

## Advantages

WebGL provides the ability to display 2D and 3D graphics on the Web. Games, animation, scientific visualization, interactive presentations, and other graphic intensive Web pages can run quickly with WebGL.

WebGL accesses device *hardware* to speed rendering.
Many other graphical Web features use *software* rendering
for display. Properly implemented hardware rendering runs
*many times faster* than software rendering.

In the recent past Web browsers only displayed graphical applications with software rendering. Therefore rendering was limited to two dimensions. Three dimensional content required too much processing power. Now with WebGL, developers can prepare a wide range of three dimensional content for display on the Web.

WebGL offers the leading edge of online rich interactive content,
including 3D games, virtual products, data visualization and much more.
*Current* Windows PCs, Macintosh computers,
Androids,
iPhones, Windows Phones,
and some Blackberry devices, run WebGL.
As of
fall 2014 Apple iPhones and iPads with iOS 8 or higher, and proper hardware, began displaying
online WebGL content.

That's big news for Web developers and designers. Now all major
mobile devices and operating systems have the ability to display
WebGL 3D games and media *online*.
WebGL appears ready to change the Web significantly.

## Features of WebGL

Developers and designers who understand JavaScript have a head start with WebGL. WebGL functionality begins with JavaScript. However WebGL also includes a number of new features including shaders, and methods which resemble OpenGL ES. WebGL hooks into hardware with OpenGL ES functionality and shaders. Shaders run directly within the device hardware's Graphics Processing Unit (GPU). However OpenGL ES offers a very different approach to programming compared to JavaScript. Often OpenGL ES functionality involves setting states and uploading data.

Each WebGL program uses one *vertex shader* and
one *fragment shader* at a time. Shaders are written in C yet
include a number of unique built in functions.

## OpenGL ES

OpenGL ES stands for *O*pen *G*raphics *L*ibrary for
*E*mbedded *S*ystems.
OpenGL ES is an application programming interface (API)
for hardware accelerated rendering on
devices with limited processing power.

The `WebGLRenderingContext`

includes a set of
methods which resemble OpenGL ES methods.
To access WebGL methods, obtain a reference to a `WebGLRenderingContext`

from a canvas declared on an HTML Web page.
The follow listing
usually assigns a `WebGLRenderingContext`

to the variable `glContext`

.
Variable `canvas`

refers to an HTML5 canvas.

glContext = canvas.getContext( 'webgl' );

## WebGLRenderingContext

The `WebGLRenderingContext`

includes methods
such as `activeTexture()`

,
`bindAttribLocation()`

,
and `attachShader()`

.
Method `attachShader()`

attaches vertex and fragment shaders
to a WebGL program.
Once attached, drawing operations pass
every specified vertex through the vertex shader
very quickly.

## Vertices

Vertices represent points in space. A set of vertices properly arranged represent a model. Models might look like cubes, buildings, cats, or even people. The Cartesian coordinate graph perhaps explains the concept of vertices best.

## Coordinate Systems

The following diagram includes a two dimensional cartesian coordinate
graph which illustrates the concept of vertices.
The graph should look familiar to readers who've studied algebra.
`(0,0)`

specifies X and Y coordinates at
the origin of the graph.
Vertices are located at points
`(-1,+1), (+1,+1), (-1,-1)`

and `(+1,-1)`

.
The shape which overlays the graph might represent
a square.

The following diagram includes a *three* dimensional cartesian coordinate
graph which illustrates the concept of vertices in 3D systems.
The axes are labeled X+, Y+, Z+, and Z-.
All three axes cross at coordinate
`(0,0,0)`

which is the origin of the graph.
The shape which overlays the
graph might represent a cube.
Imagine vertices at each corner of the following cube illustration.

## Vertex Shader

Vertex shaders process a set of vertices
for each drawing operation.
Vertex shaders are written in C with
OpenGL ES built in functions.
Each run of the vertex
shader processes *one vertex*
with specified attributes.
If a model contains three vertices
then the vertex shader runs three times.
The example vertex shader's
attribute named `a_position`

contains values for X, Y, and Z coordinates.

The final position of
a vertex is assigned to
the built in variable
`gl_Position`

.
The sample vertex shader
multiplies three values before
assigning the output to `gl_Position`

.
The series of multiplications
preceding `gl_Position`

modify the location of the vertex.
If *a set* of vertices
representing a 3D model run
through the vertex shader,
and *every* vertex position
is modified, then the appearance
of the entire model changes.
The model might rotate, scale, or move.

The attribute named `a_tex_coord0`

represents texture coordinates to apply
for the particular vertex in process.
The fragment shader receives
`v_tex_coord0`

after the GPU interpolates data.
The following listing demonstrates
a simple vertex shader.

attribute vec4 a_position; attribute vec2 a_tex_coord0; varying vec2 v_tex_coord0; uniform mat4 um4_matrix; uniform mat4 um4_pmatrix; void main(void) { gl_Position = um4_pmatrix * um4_matrix * a_position; v_tex_coord0 = a_tex_coord0; }

## Fragment Shader

The fragment shader processes just one
fragment

for display to the canvas.
The fragment shader prepares color for
rendering.

In this tutorial's example shaders,
both the
vertex and fragment shader declare varying `v_tex_coord0`

.
The vertex shader assigns a value to `v_tex_coord0`

.
The GPU interpolates or modifies `v_tex_coord0`

before sending it on to the fragment shader.

The varying represents a texture coordinate.
The fragment shader samples

a texture
at the location specified by
`v_tex_coord0`

. The method
`texture2D()`

returns a portion of the texture specified by
`u_sampler0`

at the coordinates specified by varying `v_tex_coord0`

.
The following listing demonstrates assigning a sampled texture to the
built in variable `gl_FragColor`

.
The color represented by vector `gl_FragColor`

eventually displays to the Web page's canvas.

gl_FragColor = texture2D( u_sampler0, v_tex_coord0 );

The value assigned to
`gl_FragColor`

displays on the canvas.
The following listing
includes the entire fragment shader.

precision mediump float; uniform sampler2D u_sampler0; varying vec2 v_tex_coord0; void main(void) { gl_FragColor = texture2D( u_sampler0, v_tex_coord0 ); }

## Summary

This short tutorial described the basic purpose and features of WebGL. Topics included an overview of WebGL, vertices, shaders, 2D, and 3D Cartesian coordinate graphs. Two sample shaders work together with a set of vertices. This article explained how points on a graph relate to vertices which run through the shaders, then display on a Web page!

WebGL includes many advantages, with new and unique features for Web developers, designers, marketers, and businesses.