WebGL - Scaling: A Beginner's Guide

Hello, aspiring WebGL developers! Today, we're going to dive into the fascinating world of scaling in WebGL. Don't worry if you're new to programming – I'll guide you through each step with the same care and patience I've used in my classroom for years. Let's embark on this exciting journey together!

What is Scaling in WebGL?

Before we jump into the code, let's understand what scaling means in the context of computer graphics. Imagine you have a favorite toy figure. Scaling is like having a magic wand that can make this figure larger or smaller while keeping its shape intact. In WebGL, we can do this magic with our 3D objects!

The Importance of Scaling

Scaling is crucial in creating realistic and dynamic 3D scenes. It allows us to:

1. Adjust object sizes to fit our scene
2. Create animations where objects grow or shrink
3. Maintain proper proportions in complex models

Required Steps for Scaling in WebGL

To scale objects in WebGL, we need to follow a series of steps. Let's break them down:

Step	Description
1. Create Scale Matrix	We start by creating a special matrix that tells WebGL how to scale our object
2. Multiply with Model Matrix	We combine our scale matrix with the object's existing model matrix
3. Pass to Shader	We send this new matrix to our shader program
4. Apply in Vertex Shader	The shader uses this matrix to adjust the position of each vertex

Don't worry if these steps sound complex – we'll explore each one in detail with our example!

Example – Scale a Triangle

Let's put our learning into practice by scaling a simple triangle. We'll start with a basic WebGL setup and then add scaling functionality.

Step 1: Setting Up the WebGL Context

First, we need to set up our WebGL context. Here's how we do it:

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
    console.error('WebGL not supported');
    return;
}

This code finds our canvas element and creates a WebGL context. It's like preparing our canvas and paintbrushes before we start our artwork!

Step 2: Define Vertex Shader

Now, let's create our vertex shader. This is where the scaling magic happens:

const vertexShaderSource = `
    attribute vec2 a_position;
    uniform mat3 u_matrix;

    void main() {
        vec3 position = u_matrix * vec3(a_position, 1);
        gl_Position = vec4(position.xy, 0, 1);
    }
`;

This shader takes each vertex position and multiplies it by our matrix (which will include our scaling). It's like giving instructions to each point of our triangle on how to move.

Step 3: Define Fragment Shader

The fragment shader determines the color of our triangle:

const fragmentShaderSource = `
    precision mediump float;

    void main() {
        gl_FragColor = vec4(1, 0, 0, 1);  // Red color
    }
`;

We're keeping it simple here – our triangle will be red. Feel free to experiment with different colors!

Step 4: Create and Link Shader Program

Now, let's compile and link our shaders:

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

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

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

This process is like assembling the parts of a machine – each shader is a component, and we're putting them together to create our program.

Step 5: Create Triangle Data

Let's define our triangle:

const positions = new Float32Array([
    0, 0.5,
    -0.5, -0.5,
    0.5, -0.5
]);

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

These coordinates define a simple triangle. Think of it as plotting points on a graph to draw our shape.

Step 6: Implement Scaling

Now for the exciting part – scaling our triangle! We'll use a function to create our scaling matrix:

function createScaleMatrix(scaleX, scaleY) {
    return new Float32Array([
        scaleX, 0, 0,
        0, scaleY, 0,
        0, 0, 1
    ]);
}

// Example: Scale the triangle to twice its size
const scaleMatrix = createScaleMatrix(2, 2);

This matrix is like a set of instructions telling WebGL how much to stretch or shrink our triangle in each direction.

Step 7: Render the Scaled Triangle

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

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);

const matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
gl.uniformMatrix3fv(matrixUniformLocation, false, scaleMatrix);

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

This code applies our scaling matrix and draws the triangle. It's like finally revealing our artwork after all the preparation!

Conclusion

Congratulations! You've just scaled your first WebGL triangle. Remember, scaling is just one of the many transformations you can apply in WebGL. As you continue your journey, you'll discover how to combine scaling with rotation, translation, and more to create complex and dynamic 3D scenes.

Practice makes perfect, so don't be afraid to experiment with different scaling values and shapes. Who knows? The next big video game or 3D web application might start right here, with your scaled triangle!

Happy coding, and may your WebGL objects always scale to new heights!

Credits: Image by storyset