Shaders

During a game jam centered around the theme of light, I worked on a project that required a shadow detection system. You can check out the game here. The challenge was to detect when objects were in light or shadow and identify the closest shadow to an object. Initially, I thought render textures would be an elegant solution, but this approach turned out to be a mistake. Here’s why. The Initial Appeal of Render Textures The idea was to use a camera positioned above the scene to capture light and shadow data into a render texture. This texture could then be sampled to determine if an object was in shadow or to find the nearest shadow by analyzing surrounding pixels. It seemed promising because it provided a dynamic map of the environment, avoiding the performance cost of casting multiple rays while also letting us easily find the closest shadow. ...

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. ...

Intuition of 3x3Matrix Transformations Rotations can be achieved by locking the desired axes of rotation and transforming the rest of the axes by \(sin\) and \(cos\). 3x3 matrices can be used to bend the coordinate space in 3 dimensions, effectively allowing any desired transformations to objects in that space. As the coordinate space is being transformed, it’s helpful breaking up the matrix into its unit vectors $$ \vec{a} = x\begin{bmatrix}1\\0\\0\end{bmatrix} + y\begin{bmatrix}0\\1\\0\end{bmatrix} + z\begin{bmatrix}0\\0\\1\end{bmatrix} $$ ...

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. Make pixels within radius away from the center white, otherwise black ...

Shaders are programs used to describe how pixels should be arranged, colored, and transformed on the screen. The simple definition extends to so many applications especially in 3D graphics in movies and games. Every computer generated prop placed in a scene is carefully designed to look a certain way, all with the help of shaders. Shader’s make use of the GPU to constantly run concurrent calculation on every pixel and you can decide what those calculations do through programming with languages such as HLSL and GLSL. You can decide that very pixel should be moved slightly to the left, or that they should be slightly more saturated under certain conditions, or even that they have follow the movement of a sine curve and create waves like an animation. You might start to realize that there is a lot a math involved and there is. Specifically, the way you want to arrange pixels makes heavy use of linear algebra to orient points in space as well as creative calculus to take advantage of functions when wanting to create tailored movements and patterns. ...