If you answered ‘fragment shaders’ you’re completely wrong. Why in the world would fragment shaders help? Three.js is really, really simple! Sure – fragment shaders could be used with Three.js, you can write custom shaders for Three.js materials in GLSL, but why would you so daft to think that would be a good starting point? Answering fragment shaders is an absolutely braindead response.
A bit of background: when I start researching how to use a new programming tool, I like to dig into what exactly I’m working with. I like knowing what happens under the hood when I’m executing a function – it makes things more comprehendible. Plus, the process of drilling into a subject, of looking at its component parts and how they work, is a great learning exercise. I’ll Often find little tricks I’ve learnt in one realm of computing can apply to seemingly unrelated fields.
That said, I think I can go a bit too far. When I started learning three.js, I found out that it functions by using WebGl. Only loosely knowing what WebGL was, I did some searching and found “oh it’s a graphics library written in JavaScript and OpenGL”. Then I realised that, I didn’t know how graphics libraries tended to work, nor had I any experience in OpenGL.
A reasonable person would have stopped, maybe read that graphics libraries broadly just make calls to your computer graphics hardware to render things, and then moved on with their life. Unfortunately, I am not that person. I decided to start reading about the whole process, about the distinction between vertex and fragment shaders, about what the graphics pipeline is, what all the terminology Wikipedia kept bandying about was.
I got very carried away. But in doing so, I found out something neat:
I’m about to give a very reductive summary of what shaders are. If you’re a specialist in this field, please close your eyes. A shader, broadly speaking, is just some sort of program used in rendering. A fragment shader specifically is just used to determine the color of each individual pixel, which will be determined by certain conditions.
I can’t really get into it more without explaining how rendering works as a whole and there are far more comprehensive and detailed articles elsewhere online. If you are a curious sort and want search about this stuff a bit more, I’d recommend starting by reading about the graphics pipeline.
To be honest, the thing that I really want to dedicate the rest of this article to is the fragment shaders that I wrote with the help of the Book of Shaders - which, if you’re interested in shaders, is a must read. So, without further ado:
Here's a rhodnea curve, with the term increasing over time.
Look! some animated dots.
I tried to make a misty texture, it turned out like this:
I made this one by creating a different animated voronoi diagram for each color channel.
Its another voronoi, but this time I made the polygons solid:
These were a ton of fun to make, and I'm already looking for excuses to implement GLSL fragment shaders into future projects. At the very least, I'm definitely writing some custom shaders for three.js next time I update the website's visuals. Look forward to that!