WebGL - Geometry: A Beginner's Guide

Hello there, future WebGL maestros! I'm thrilled to be your guide on this exciting journey into the world of WebGL geometry. As someone who's been teaching computer graphics for over a decade, I can tell you that understanding geometry in WebGL is like learning to paint with code. It's challenging, but oh so rewarding! So, let's roll up our sleeves and dive in!

Defining the Required Geometry

Before we start creating stunning 3D graphics, we need to understand what geometry means in WebGL. In essence, geometry is the backbone of everything we see on screen. It's made up of points, lines, and shapes that form the structure of our 3D objects.

Imagine you're building a house with LEGO bricks. Each brick represents a point in 3D space, and when you connect these points, you create edges and faces. That's exactly what we do in WebGL, but with code instead of plastic bricks!

Let's start with a simple example - creating a triangle:

const triangleVertices = [
    0.0,  1.0,  0.0,
   -1.0, -1.0,  0.0,
    1.0, -1.0,  0.0
];

Here, we've defined three points in 3D space. Each point is represented by three numbers (x, y, z). This array of numbers is what we'll use to tell WebGL where to draw our triangle.

Buffer Objects

Now that we have our geometry defined, we need a way to send this data to the GPU. This is where buffer objects come in. Think of buffer objects as special containers that hold our geometry data and make it easily accessible to the GPU.

Creating a Buffer

Creating a buffer is our first step in preparing our geometry for the GPU. Here's how we do it:

const buffer = gl.createBuffer();

This line creates an empty buffer object. It's like getting an empty box ready to be filled with our LEGO bricks.

Bind the Buffer

After creating the buffer, we need to tell WebGL that this is the buffer we want to work with. We do this by binding the buffer:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

This is like picking up our LEGO box and saying, "Hey WebGL, I'm going to put some bricks in this box now!"

Passing Data into the Buffer

Now comes the exciting part - filling our buffer with our geometry data:

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

Let's break this down:

• gl.bufferData() is the method we use to fill the buffer.
• gl.ARRAY_BUFFER tells WebGL we're working with our currently bound buffer.
• new Float32Array(triangleVertices) converts our JavaScript array into a typed array (more on this in a moment).
• gl.STATIC_DRAW is a hint to WebGL about how we plan to use this data.

Typed Arrays

You might be wondering why we used Float32Array in the previous step. Well, WebGL is very picky about its data types. It prefers to work with typed arrays for efficiency. Typed arrays ensure that each piece of data is of a consistent size and type.

Here's a table of commonly used typed arrays in WebGL:

Typed Array	Description	Use Case
Float32Array	32-bit floating point numbers	Vertex positions, texture coordinates
Int8Array	8-bit signed integers	Small whole numbers
Uint8Array	8-bit unsigned integers	Color components
Int16Array	16-bit signed integers	Larger whole numbers
Uint16Array	16-bit unsigned integers	Vertex indices
Int32Array	32-bit signed integers	Very large whole numbers
Uint32Array	32-bit unsigned integers	Very large positive whole numbers

In our case, we used Float32Array because our vertex positions are floating-point numbers.

Unbind the Buffers

After we're done working with a buffer, it's good practice to unbind it:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

This is like putting the LEGO box back on the shelf. It prevents accidental changes to our buffer and keeps our WebGL state clean.

And there you have it, folks! We've successfully defined our geometry, created a buffer, filled it with data, and learned about typed arrays. This is the foundation of creating any 3D object in WebGL.

Remember, learning WebGL is a journey. Don't worry if some concepts seem tricky at first. With practice, you'll be creating amazing 3D graphics in no time! In my years of teaching, I've seen countless students go from confused beginners to WebGL wizards. You're well on your way to joining their ranks!

In our next lesson, we'll explore how to use these buffers to actually draw our geometry on screen. Get ready to see your first WebGL triangle come to life! Until then, happy coding, and don't forget to take breaks and stretch those coding fingers!

Credits: Image by storyset