Table of Contents
I’ll be talking about what I learned in the past few days about shaders and fractals.
This is the first time I actually use OpenGL and shaders, so I’m not sure if I’m doing things right.
All of my previous knowledge about graphics and rendering comes from writing software rendered homebrew for my Sony PSP XD
My goal here was only to learn how to use shaders and OpenGL, and whatching The Code Poet’s videos on YouTube made me absolutely love all of his work with these super cool fractals!
While the entire code is available at the GitHub repository.
So I’m hosting the documentation for the project Here.
And here’s a live demo of the code running in the browser using WebGL:
WebGL Live Demo
Works best on desktop 🙃
- Drag to pan
- Use the Arrow
Downkeys to change the render depth
- And scroll to zoom in and out.
I’m not going to go into the theory of fractals, but I’ll try to explain what I’ve learned about them.
Fractals are a mathematical concept that can be used to describe a shape that is self-similar at different scales.
The most common fractal is the Mandelbrot Set,
Condsider this function,
The Mandelbrot set is the set of complex numbers for which the function does not diverge when iterated from .
The Julia set is the set of complex numbers for which the function does not diverge when iterated from .
But enough with the theory, let’s get to the code!
So, developing everything cross-platform is what I’m aiming for, so I’m using CMake to generate the build files for the project.
And of course, the ol’ faithful SDL2 handling and managing the window events.
I’m using the Emscripten toochain to compile the code to WebAssembly which you played with in the live demo above.
I know you already have heard about OpenGL, but I’ll try to explain what I’ve learned about it.
OpenGL is a pain-in-the-ass cross-platform API for rendering 2D and 3D graphics.
It abstracts the graphics in a rendering pipeline which looks a little something like:
Now, I didn’t need to use textures for this project but it’ll be fun to try them out in the future.
The docs summarize how the whole project is structured and how the rendring is handled, I’ll quickly mention the most essential part that makes this possible.
To talk about shaders, they are a way to run code on the GPU. The shaders can be compiled from the OpenGL Shading Language (GLSL). They look very similar to C but are even more fun to write.
To be honest I don’t fully understand much of the theory behind them, but I’ll briefly explain the common parts of the shaders.
A typical Vertex Shader looks like this:
Which is pretty simple, it just passes the position of the vertex to the fragment shader:
And the fragment shader just outputs the color of the pixel.
I’ll leave the rest of the code for you to explore in the GitHub repository.
Graphics programming is a lot of fun, I’ll try to write more about it in the future and possibly add more fractals to this project.
I’ll leave you with a few links to resources that may be helpful to you if you’re interested exploring more about this topic.