GLSL Study Log #3 — My WebGL Pipeline

This is a very simple implementation of a WebGL pipeline to get your fragment shaders going. If you’re used to running pages on your localhost like me, you can grab the code inside the directory simple-renderer from the repository below.

A brief summary of my code

My code is comprised of:

  • index.html
  • renderer.js
  • 2 text files holding GLSL

I async load glsl files from renderer.js and this gives me two advantages over just writing them in the same file as strings or non-js scripts:

  1. You can highlight GLSL in your editor after installing extensions — extremely helpful to beginners like me.
  2. Modularize each shader so you can better archive your different shader sketches. I do this by keeping all fragment shaders under the directory /fragmentShaders/ and naming each of them as numbers (e.g. 01.glsl, 02.glsl…).

index.html

The HTML is as simple as this:

There is a canvas element that fills the window. And a script named renderer.js is run.

renderer.js

The WebGL functions are a bit hard to explain, and so are the concept of buffer, attribute, and uniforms if you’re completely new to them. My code is basically a modification of stuff on this amazing website:

If you’re interested in learning WebGL, take a couple hours to read that first chapter of WebGL Fundamentals. I bet it’s the best WebGL tutorial you can currently find on the web.

If you want to just go ahead and launch a local host where you can write and run various fragment shaders, just use the code from my repository. Below is the copy of renderer.js. I tried to describe some functions throughout the code to help someone like me who’s totally new to WebGL but still want to play with shaders gain a general sense of what’s going on.

Vertex Shader

My vertex shader is, again, super simple. This is pretty much serving the most basic function, perhaps that of a placeholder. Our primary interest is in the fragment shader.

Fragment Shader

Here, you can see the fragment shader making use of 3 different uniforms provided from the WebGL pipeline. By using u_mouse and u_time to vary your results, you can create interactive time-based sketches.

Result

If you cloned my repository and run it on localhost, you would get this (it’s one of the first shaders I wrote):

Now that you have your own editor and a separate directory of shaders, and even had a taste of WebGL in the process, you are off to a good start. You can grab some shaders from glslsandbox (make sure to the change uniform names though — in the case of glslsandbox, add “u_” in front of the uniform names), or go on the Book of Shaders to start a step by step tutorial on fragment shaders. It will now be easier to keep track of your learning progress with some file record of your past sketches that you can always return to.

Thanks for reading. And have fun!