Shader Layering

I’ve been working on putting together a layered parallax scene as per https://www.youtube.com/watch?v=XaiYKkxvrFM. I’m a good ways there writing most of the code on my own. I’ve made series of repeating trees across a sloping hill and it’s time for me to start layering them on top with a for loop. In the tutorial, he wrote all of the shape functions to return vec4 so they include the alpha channel in addition to the colours....

August 26, 2023

Which Way Does the UV Go?

While I was working on writing simple shape patterns in GLSL, I ended up with an interesting conundrum. I fell into the pattern of creating shapes by closing in each side of the shape with a smoothstep in the following form. smoothstep(-blur, +blur, uv.x); In this case, this creates a vertical edge where the left side is 0 and the right side is 1. I then do the same thing for the rest of the side of the shape, until I enclose it so that all values inside the shape are 1 and everywhere else remains 0....

August 25, 2023

Some More GLSL

Vertex Shaders So far, I’ve been primarily writing 2D shaders to create patterns on a flat canvas. In practice, shaders can also be applied to 3D objects to manipulate not only their textures but also their shape. To start, let’s take a look at a simple 2D shader placed on a 3D cube. Notice that the texture remains flat but is effectively cropped onto the projection of the cube. Ideally, we’d like the texture to wrap over the cube instead....

July 19, 2023

Basics of Shader Fractals

Fractals are built off of a single pattern or formula, repeated constantly with smaller and smaller transformations. In glsl, this idea translates nicely into iterative coding with for loops. How to Make a Fractal I’ll be following kishimisu’s guide on shaders. Create a Shape First off, we can start by creating some base patterns that we want to design our fractal off of. In this case, we can start with a simple circle....

July 13, 2023

Playing With GLSL

From what I’ve read, one of the classic shader introductions people reference is this online module-of-sorts known as TheBookOfShaders. On there, it covers topics of how math can generates different shapes and textures within shaders along with plenty of examples and tip from basic to more advanced creations. Drawing Circles A Circle Using step To start, this is what it looks like using the step() function where for a circle of a radius, if the pixel is outside of this radius, give a value of 1, if not, return a 0....

May 11, 2023