WebGL - Sample Application: A Beginner's Guide

Hello there, future WebGL wizards! I'm thrilled to be your guide on this exciting journey into the world of WebGL. As a computer science teacher with years of experience, I've seen countless students light up when they create their first 3D graphics on the web. Today, we're going to embark on that same adventure together. So, buckle up and let's dive in!

WebGL - Sample Application

What is WebGL?

Before we start coding, let's understand what WebGL is. WebGL (Web Graphics Library) is a JavaScript API that allows us to render interactive 3D and 2D graphics in web browsers without using plugins. It's like giving your web pages superpowers to create stunning visuals!

Structure of WebGL Application

A WebGL application typically consists of several key components. Let's break them down:

1. HTML Canvas

The canvas is our drawing board. It's where all the magic happens!

<canvas id="myCanvas" width="640" height="480">
    Your browser does not support the HTML5 canvas tag.
</canvas>

This creates a 640x480 pixel canvas on your webpage. Think of it as your artist's easel, ready for your masterpiece!

2. JavaScript Code

This is where we write our WebGL commands. It's like giving instructions to our virtual artist.

3. Vertex Shader and Fragment Shader

These are special programs that run on the GPU. They're like the paintbrushes and color palettes for our 3D graphics.

4. Buffers

Buffers store the data for our 3D objects. Imagine them as the raw materials for our 3D sculptures.

Now that we know the ingredients, let's cook up a delicious WebGL application!

Sample Application

Let's create a simple WebGL application that draws a colorful triangle. We'll go through each step in detail.

Step 1: Set up the HTML

First, we need to create an HTML file with a canvas element:

<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="640" height="480">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script src="webgl-demo.js"></script>
</body>
</html>

This creates our canvas and links to a JavaScript file we'll create next.

Step 2: Initialize WebGL

Now, let's create our webgl-demo.js file and set up WebGL:

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

    if (!gl) {
        alert("WebGL is not supported by your browser!");
        return;
    }

    // WebGL is ready to use!
}

window.onload = main;

This function gets our canvas, initializes WebGL, and checks if it's supported. It's like checking if we have all our art supplies before starting.

Step 3: Create Shaders

Now, let's create our vertex and fragment shaders:

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

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

    return shader;
}

const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
    }
`;

const fragmentShaderSource = `
    precision mediump float;
    void main() {
        gl_FragColor = vec4(1, 0, 0.5, 1);
    }
`;

const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

These shaders define how our triangle will be positioned and colored. The vertex shader positions our triangle, while the fragment shader gives it a nice pink color.

Step 4: Create a Program

Now, let's link our shaders into a program:

function createProgram(gl, vertexShader, fragmentShader) {
    const program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);

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

    return program;
}

const program = createProgram(gl, vertexShader, fragmentShader);

This is like assembling our art tools and getting ready to paint!

Step 5: Create a Buffer

Now, let's create a buffer to store our triangle's vertices:

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

const positions = [
    0, 0,
    0, 0.5,
    0.7, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

This defines the shape of our triangle. It's like sketching out the basic shape before we start painting.

Step 6: Render the Triangle

Finally, let's draw our triangle:

gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.useProgram(program);

const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

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

This is where the magic happens! We clear the canvas, set up our program and buffer, and finally draw our triangle.

Conclusion

Congratulations! You've just created your first WebGL application. You've taken your first step into a larger world of 3D graphics on the web. Remember, like any art form, mastering WebGL takes practice and patience. But with each line of code, you're painting a more vibrant and interactive web. Keep exploring, keep creating, and most importantly, have fun!

Here's a table summarizing the main methods we used:

Method	Description
`getContext("webgl")`	Initializes WebGL
`createShader()`	Creates a shader
`shaderSource()`	Defines shader source code
`compileShader()`	Compiles a shader
`createProgram()`	Creates a program
`attachShader()`	Attaches a shader to a program
`linkProgram()`	Links a program
`createBuffer()`	Creates a buffer
`bindBuffer()`	Binds a buffer
`bufferData()`	Fills a buffer with data
`viewport()`	Sets the viewport
`clearColor()`	Sets the clear color
`clear()`	Clears the canvas
`useProgram()`	Uses a program
`getAttribLocation()`	Gets the location of an attribute
`enableVertexAttribArray()`	Enables a vertex attribute array
`vertexAttribPointer()`	Specifies the layout of vertex data
`drawArrays()`	Renders primitives

Keep this table handy as you continue your WebGL journey. Happy coding!

Credits: Image by storyset

Previous Tutorial:

WebGL - Graphics Pipeline

Next Tutorial:

WebGL - Context