# WebGLÂ / TutorialsÂ / Concepts

Weâ€™ll start coding soon in Tutorial #1: Triangle. Feel free to jump ahead. This info is here if you are feeling completely lost.

## Basic WebGL Concepts

A WebGL program is setup and initiated from JavaScript code.
Its input is a list of 3D coordinates called **vertices** (plural of vertex).
Vertices can be drawn as individual points, lines between pairs of vertices, or **triangles** between groups of three vertices.
Multiple triangles are connected to produce 3D surfaces.

These input vertices are processed in a series of steps called a graphics pipeline that draws pixels on a 2D screen:

WebGL has two places in the graphics pipeline where we can insert a custom algorithm called
a shader. The first one is a **vertex shader**.
It takes the input
vertices and transforms them. It can move, rotate, or deform objects.

The transformed vertices are then sent to the **rasterizer**. The vertices are interpreted as triangles (or lines or points) and
projected onto a 2D grid via a process called rasterization.
This process converts mathematical representations of shapes (like SVG) to a grid of pixels (like PNG).
In WebGL it converts vertices to pixel coordinates.
This step of the pipeline is automatic and canâ€™t be customized.

Next, the second shader runs.
Itâ€™s called a **fragment shader**. A fragment is effectively a pixel, so itâ€™s also called a pixel shader.
The shader runs on every pixel of a *visible* triangle (or line or point) as determined during rasterization.
It converts 2D pixel coordinates to colors in RGBA format.
Your computer draws these colors on the screen.

## Shading Language

WebGL 2 shaders are written in the **OpenGL ES Shading Language version 3**, or â€śGLSL ES 3â€ť for short. Itâ€™s an open standard for cross-platform 3D graphics managed by the non-profit Khronos Group. GL stands for â€śGraphics Libraryâ€ť.
ES stands for Embedded Systems, like mobile devices, but itâ€™s supported by desktop/laptop too for maximum compatibility.

Shading language programs run on the GPU.
Compared to CPUs, GPUs have a smaller, more specialized set of operations available, like matrix multiplication.
The GPU runs *many* more operations in parallel compared
to a CPU. This is well suited for graphics-oriented tasks like calculating millions of pixelsâ€™ colors
at 60 frames per second.

To run in parallel, shading language programs process each vertex or pixel coordinate in complete isolation. Vertex shader algorithms take a single vertex and output a single vertex. Fragment shader algorithms take a single pixel coordinate and output a single color. The algorithm doesnâ€™t know what any of the other input values are and it canâ€™t remember its previous output. These fundamental constraints make graphics algorithms significantly different from traditional programming languages.

In order to learn shading language, letâ€™s use it! Start with Tutorial #1: Triangle.