Learning to draw with a pencil made of code.
Index:
- Introduction
- Rasterization
- Raytracing
- Raymarching
- Conclusion
Introduction:
I’ve been an artist for a good chunk of my life and a professional one for most of my professional life. Then I decided to put everything on the line and build my own game with a friend.
You can find a complete breakdown of it here, but the important things in this context are that I made a lot of mistakes, learned many lessons, and changed career.
I write code for a living now, and I’ve spent a lot of time wondering how I find a balance between my old life as an artist and my new one as a technologist.
In search of this, I find myself working on a project with Lara Barbier called Fractus, a VR experience that explores the repetition of history through a powerful audioscape inside a wonderous, infinite fractal universe.
This project requires me to render and manipulate fractals in real time which inevitably lead me down the path of exploring rendering techniques (specifically raymarching) and then swiftly to a mild panic attack when I was confronted with a mountain of esoteric knowledge.
I used to joke how “Coders do the leg work, I just make the pretties” but now I have the legs so I’d better get jogging!
Anything worth doing is seldom easy but fortunately for me a ton of much cleverer people than I have been exploring the topic of rendering techniques for a long time so aside from a few steely windswept gazes into middle-distance I’ve mostly just been reading up on things.
This blog post is an exploration of my findings but I do not present it as an in-depth primer or how-to guide for rendering techniques, tools and algorithms. As far as my understanding of this subject goes, I feel that I am very much at the foot of that great mountain and I’ve only just tied my shoes and decided it’s probably a good idea to pack my waterproofs.
Instead I am writing because I find the process of transferring my thoughts and ideas on a new subject into words helps me retain knowledge and clarify things for myself. So this piece is totally self-serving but being self-serving isn’t always a bad thing. I serve myself ice-cream whenever I get a chance and there could never be anything wrong with that.
Hopefully, if you have come across this article and are as baffled as I was/am by the concepts it discusses, this might help you get a foothold on the same mountain of esoteric knowledge to which I now find myself clung.
If you want a more expert exploration on these topics I highly recommend the following resources:
- Íñigo Quílez
- Ray marching signed distance functions ~ Jamie Wong
- Distance estimated 3D fractals ~ Mikael Hvidtfeldt Christensen
- How to make 3D Fractals ~ CodeParade
- The Art of Code
- Peer Play
- Lewis Lepton
- Coding Adventure: Ray Marching ~ Sebastian Lague
Before we get right into the thick of it, there are a few terms I’d like to define up front:
- Rendering: The process by which shapes are drawn on a screen.
- Real-time rendering: Rendering that happens so quickly that it can feel like it is live and can react to sudden changes, video games are a prime example of this as they must react to player input and change what is drawn on the fly.
- Pre-rendered: Rendering that doesn’t need to react dynamically and so can afford to take a long time to process, normally producing static images or sequences which can be viewed quickly and with little resource overhead. Movies such as Toy Story or the special effects in Marvel films are prime examples of pre-rendering.
- Ray: A straight line drawn between two points in 3D space.
- Shader: A set of instructions a pixel can use to calculate its colour.
And now, on with the show.
Rendering techniques: