English

WebGL Tutorial

WebGL Application

WebGL Examples

WebGL: A Beginner's Guide to 3D Graphics in the Browser

Hello there, future 3D graphics 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 tell you that WebGL is like a magic wand for your web browser. It allows you to create stunning 3D graphics and animations right in your web pages. Isn't that cool? Let's dive in!

WebGL - Home

What is WebGL?

WebGL, short for Web Graphics Library, is a JavaScript API that allows you to render interactive 2D and 3D graphics in any compatible web browser without the need for plugins. It's like giving your web browser superpowers to create amazing visual experiences!

A Brief History

WebGL was first introduced in 2011, and since then, it has revolutionized the way we think about graphics on the web. Before WebGL, if you wanted to create 3D graphics in a browser, you'd need to rely on plugins like Flash or Java applets. Now, with WebGL, we can do all of this natively in the browser. It's like we've upgraded from a bicycle to a sports car!

Prerequisites

Before we start our WebGL adventure, let's make sure we have the right tools in our backpack:

  1. A modern web browser (Chrome, Firefox, Safari, or Edge)
  2. A text editor (I recommend Visual Studio Code, but any will do)
  3. Basic knowledge of HTML and JavaScript (Don't worry if you're rusty, we'll review as we go)

Getting Started with WebGL

Let's create our first WebGL program! We'll start with a simple "Hello, WebGL!" example that displays a colored triangle on the screen.

Step 1: Setting up the HTML

First, we need to create an HTML file with a canvas element. This canvas is where our WebGL magic will happen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, WebGL!</title>
    <style>
        canvas { border: 1px solid black; }
    </style>
</head>
<body>
    <canvas id="glCanvas" width="640" height="480"></canvas>
    <script src="webgl-demo.js"></script>
</body>
</html>

In this HTML, we've created a canvas element with an ID of "glCanvas" and set its dimensions to 640x480 pixels. We've also linked to a JavaScript file named "webgl-demo.js" where we'll write our WebGL code.

Step 2: Initializing WebGL

Now, let's create our "webgl-demo.js" file and start writing some JavaScript to initialize WebGL:

function main() {
    const canvas = document.getElementById("glCanvas");
    const gl = canvas.getContext("webgl");

    if (!gl) {
        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
        return;
    }

    // Set clear color to black, fully opaque
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // Clear the color buffer with specified clear color
    gl.clear(gl.COLOR_BUFFER_BIT);
}

window.onload = main;

Let's break this down:

  1. We get a reference to our canvas element.
  2. We try to get a WebGL context from the canvas. If this fails, it means WebGL isn't supported, and we show an error message.
  3. If successful, we set the clear color (the background color) to black and clear the canvas.

Step 3: Creating Shaders

Shaders are special programs that run on the GPU. They're written in a language called GLSL (OpenGL Shading Language). We need two types of shaders: vertex shaders and fragment shaders.

// Vertex shader program
const vsSource = `
    attribute vec4 aVertexPosition;

    void main() {
        gl_Position = aVertexPosition;
    }
`;

// Fragment shader program
const fsSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

The vertex shader positions our vertices, while the fragment shader colors our pixels (in this case, red).

Step 4: Initializing a Shader Program

Now we need to compile and link these shaders into a shader program:

function initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
        return null;
    }

    return shaderProgram;
}

function loadShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }

    return shader;
}

This code compiles our shaders, links them into a program, and checks for any errors.

Step 5: Creating the Triangle

Now, let's create the data for our triangle:

function initBuffers(gl) {
    const positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    const positions = [
        -1.0,  1.0,
         1.0,  1.0,
        -1.0, -1.0,
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    return {
        position: positionBuffer,
    };
}

This creates a buffer and fills it with the positions of our triangle vertices.

Step 6: Drawing the Scene

Finally, let's put it all together and draw our triangle:

function drawScene(gl, programInfo, buffers) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(programInfo.program);

    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
    gl.vertexAttribPointer(
        programInfo.attribLocations.vertexPosition,
        2,        // 2 components per iteration
        gl.FLOAT, // the data is 32bit floats
        false,    // don't normalize
        0,        // stride (0 = auto)
        0         // offset into the buffer
    );

    gl.drawArrays(gl.TRIANGLES, 0, 3);
}

This function clears the canvas, sets up our shader program, connects our buffer data, and finally draws our triangle.

Putting It All Together

Now, let's update our main function to use all these pieces:

function main() {
    const canvas = document.getElementById("glCanvas");
    const gl = canvas.getContext("webgl");

    if (!gl) {
        alert("Unable to initialize WebGL. Your browser or machine may not support it.");
        return;
    }

    const shaderProgram = initShaderProgram(gl, vsSource, fsSource);

    const programInfo = {
        program: shaderProgram,
        attribLocations: {
            vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
        },
    };

    const buffers = initBuffers(gl);

    drawScene(gl, programInfo, buffers);
}

window.onload = main;

And there you have it! Your first WebGL program. When you open your HTML file in a browser, you should see a red triangle on a black background. Congratulations!

Common WebGL Methods

Here's a table of some common WebGL methods we've used and their purposes:

Method Purpose
gl.createBuffer() Creates a new buffer object
gl.bindBuffer() Binds a buffer object to a target
gl.bufferData() Initializes and creates the buffer object's data store
gl.createShader() Creates a shader object
gl.shaderSource() Sets the source code of a shader object
gl.compileShader() Compiles a shader object
gl.createProgram() Creates a program object
gl.attachShader() Attaches a shader object to a program object
gl.linkProgram() Links a program object
gl.useProgram() Sets the specified program as part of the current rendering state
gl.getAttribLocation() Returns the location of an attribute variable
gl.enableVertexAttribArray() Enables a vertex attribute array
gl.vertexAttribPointer() Specifies the layout of vertex attribute data
gl.drawArrays() Renders primitives from array data

Conclusion

Wow, we've covered a lot of ground today! We've learned what WebGL is, set up our development environment, and created our very first WebGL program. Remember, learning WebGL is like learning to ride a bike - it might seem wobbly at first, but with practice, you'll be zooming around in no time!

In future lessons, we'll explore more complex shapes, add interactivity, and even dive into 3D graphics. The world of WebGL is vast and exciting, and I can't wait to explore more of it with you. Until next time, happy coding!

Credits: Image by storyset

 
Next Tutorial:
WebGL - Introduction