I wanted to conduct a little experiment, and it turned into a few experiments in one. I was watching a youtube video about creating 3D scenes purely in CSS. At first, it seems pretty ridiculous. Surely this has to be too much effort, but then as it came together, it wasn’t that difficult. CSS has more potential as a lightweight 3D rendering language than I may have suspected.

So I figured what we need is a side by side comparison. I could just watch more videos, or look at some demos, but it’s helpful to retype things and change them around a little bit for more understanding.

This post is pretty long and boring if you aren’t interested in scrolling past lots of code. Here’s a link right to the finale and assessment.

As an additional meta experiment, I wanted as much of the live demo to come from the posted code snippets. And I did succeed, at least in one direction. Every code listing figure is actually used. The style and script tags are made visible with CSS magic. It’s not quite a live codepen, but at the very least I only have to update one source. The listings aren’t manually copied from some other project. The main struggle was ordering them properly and controlling side effects.

two squares

We're going to draw a cube. Two cubes, even. Eventually. But first, how about just a square? Or two squares. Let's get something on the screen, and then we'll manipulate it into a cube.

We'll do this whole process side by side. On the left, the CSS way. On the right, the webgl way.

For CSS, we'll start with one face, and give it a size, position, and color. For GL, we need a vertex shader and a fragment shader to start.

But that's only half of it. That's how to draw a face, but we still need to create the square, and have a place to put it.

For CSS, we toss a few divs onto the page. For GL, well, it's a bit complicated. We need some vertices, but man, getting those eight numbers into the shader is quite some work. (Plus a canvas element, but that's not very interesting.)

There's still more to it, especially on the GL side. The functions to compile a shader, link the program, etc. I don't think there's a lot to learn by seeing them, so let's move on.

Now let's take a look at our handiwork. If everything has gone right, we shoud have two blue squares.

They don't quite look the same for a number of reasons, but this is a reasonable start. We could make either square look like the other by adjusting a few values. For GL, I forgot to enable blending, so there's no alpha. The CSS square is much darker because it's only half there. They have different sizes and origins. That's okay, I kinda left it underspecified exactly how it should look.

enter the matrix

We've got a simple start, so now it's time to add a new dimension and gain some perspective. For CSS, we do this by specifying approximately where we want the camera to be. For GL, I leave the derivation of the viewing frustum as an exercise for the reader, but yeah, here comes some matrix math.

I have elided the code for the barebones matrix math library for GL, or we'd be here all day, but it's somewhere in the page source. Moving on, we need to specify how our vertices are positioned in space. For CSS, we introduce a cube class which will allow us to apply some transforms and positioning. For GL, we update the vertex shader. GL has finally scored a win, with the shorter code listing here.

A cube consists of six faces, oriented in different directions. We'll stick with the same rendering technique for both approaches here, as opposed to creating more vertices for GL. This isn't how you'd normally do things for just one cube, but it's closer to how you might assemble a larger scene of multiple objects.

For each face, we need to turn it so it's facing the right direction, and then translate it to the correct position. Order of operations matters here.

Hopefully we've managed to get all the faces pointed out. If some of the faces point in, there will be mischief later.

All that's left is to specify the HTML for the cube. We've already handled the vertex points for the cube faces when setting up the matrices and shaders, and mixed the draw calls in with the transforms on the GL side.

Let's take a look.

Again, I haven't tried very hard to render identical scenes, but we can see that we're approaching the same image given some artistic license. It's more or less obviously a blue cube.

shadow realm

But it's kinda flat. Let's add some shadows, or shadow like edges. If you're triggered by SSAO, look away. For CSS, this is really simple. Just literally use the shadow property. For GL, it's something, I guess.