WebGL - Basics: A Friendly Introduction for Beginners

Hello there, future WebGL wizards! I'm thrilled to be your guide on this exciting journey into the world of WebGL. As someone who's been teaching computer graphics for years, I can't wait to share the magic of WebGL with you. Don't worry if you're new to programming – we'll start from scratch and build our knowledge step by step. So, grab a cup of coffee (or tea, if that's your thing), and let's dive in!

What is WebGL?

Before we jump into the nitty-gritty, let's understand what WebGL is all about. WebGL (Web Graphics Library) is a powerful JavaScript API that allows us to create stunning 3D graphics right in our web browsers. It's like having a mini-movie studio at your fingertips!

Think of WebGL as a bridge between your web browser and your computer's graphics hardware. It lets us harness the power of your GPU (Graphics Processing Unit) to render complex 3D scenes with smooth performance. Cool, right?

WebGL - Coordinate System

Now, let's talk about the WebGL coordinate system. Imagine you're standing in the middle of a huge, invisible 3D cube. That's essentially what the WebGL coordinate system is like!

The Cartesian Coordinate System

WebGL uses a 3D Cartesian coordinate system. It's similar to the 2D system you might have learned in math class, but with an extra dimension:

• X-axis: Horizontal (left to right)
• Y-axis: Vertical (bottom to top)
• Z-axis: Depth (back to front)

Here's a simple example to help you visualize it:

// Define a vertex (point in 3D space)
var vertex = [
    0.5,  // X coordinate
    0.7,  // Y coordinate
    0.0   // Z coordinate
];

In this example, we're defining a point that's slightly to the right (0.5) and up (0.7) from the center, and right on the screen's surface (0.0).

The Clip Space

One quirk of WebGL is that it uses a special coordinate range called "clip space". All coordinates must fall between -1.0 and 1.0 on each axis. Anything outside this range gets "clipped" (not drawn).

// A point at the top-right corner of the clip space
var cornerPoint = [1.0, 1.0, 0.0];

// A point that will be clipped (not visible)
var clippedPoint = [1.5, 0.5, 0.0];

WebGL Graphics

Now that we understand the coordinate system, let's talk about how WebGL actually draws things.

Primitives

WebGL draws everything using simple shapes called primitives. The three main types are:

1. Points
2. Lines
3. Triangles

Here's a table summarizing these primitives:

Primitive	Description	Use Case
Points	Single pixels	Particle effects, stars
Lines	Straight lines between points	Wireframes, graphs
Triangles	Three-point shapes	Most 3D models, terrain

Let's see how we might define a simple triangle:

var triangleVertices = [
    0.0,  0.5,  0.0,  // Top point
   -0.5, -0.5,  0.0,  // Bottom-left point
    0.5, -0.5,  0.0   // Bottom-right point
];

This code defines the three points of a triangle. Each point is represented by three numbers (x, y, z).

Buffers

To actually get our triangle onto the screen, we need to use something called a buffer. Think of a buffer like a container that holds our vertex data and sends it to the GPU.

Here's how we might create and fill a buffer:

// Create a buffer
var buffer = gl.createBuffer();

// Bind the buffer (make it the active one)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

// Fill the buffer with our triangle data
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Don't worry if this looks a bit confusing right now. We'll break it down more as we go along!

Shader Programs

Now we're getting to the really exciting part: shaders! Shaders are special programs that run on your GPU. They're like tiny factories that process each vertex and pixel of your 3D scene.

Types of Shaders

There are two main types of shaders in WebGL:

1. Vertex Shaders: Process each vertex (point) in your 3D scene
2. Fragment Shaders: Determine the color of each pixel

Here's a simple example of each:

// Vertex Shader
attribute vec4 a_position;

void main() {
    gl_Position = a_position;
}

// Fragment Shader
precision mediump float;

void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Bright red color
}

The vertex shader takes each point (vertex) and decides where it should be on the screen. The fragment shader then colors in all the pixels between these points.

Compiling and Linking Shaders

To use our shaders, we need to compile them and link them into a program:

// Create shader program
var program = gl.createProgram();

// Attach and compile shaders
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// Link the program
gl.linkProgram(program);

This process is like compiling and linking a regular program, but it happens on the GPU!

OpenGL ES SL Variables

Finally, let's talk about some special variables used in OpenGL ES Shading Language (the language our shaders are written in).

Attributes

Attributes are input variables used in vertex shaders. They typically contain data about each vertex, like position or color.

attribute vec4 a_position;

Uniforms

Uniforms are global variables that stay the same for all vertices and fragments. They're great for things like transformation matrices or lighting information.

uniform mat4 u_modelViewMatrix;

Varyings

Varyings are variables that pass data from the vertex shader to the fragment shader. They're interpolated between vertices.

varying vec4 v_color;

Here's a table summarizing these variable types:

Variable Type	Used In	Purpose
Attribute	Vertex Shader	Per-vertex input data
Uniform	Both	Global data
Varying	Both	Data passed from vertex to fragment shader

And there you have it! We've covered the basics of WebGL, from coordinates to shaders. Remember, learning WebGL is like learning to paint – it takes practice and patience. Don't be discouraged if it doesn't all click right away. Keep experimenting, and soon you'll be creating amazing 3D graphics in your browser!

Happy coding, future WebGL masters!

Credits: Image by storyset