100 Days of Graphics: Days 1 – 7 22 July 2017

Favorite Result

Water Wobbles

This shader came about from a Shader contest that started on Shader toy is a unique site where you can easily play with fragment shaders. It’s unfortunately limited in some aspects: you can only use their textures, no fragment shaders, and no uploading meshes, but this restriction forces you to be creative with the few tools at your disposal. And some people make stunning programs with just a fragment shader!

Check out the source for this shader directly from the site:

Here’s an early version of what the shader looked like, still really cool!

Cubemap Experiments

See the code for this shader here

The next part of the Shader Toy competition is to make an interactive shader. A tough challenge since we only have access to a fragment shader. My solution was to create a MYST themed effect where you can click on moving picture panels to be taken to that world.  Unfortunately, I wasn’t able to figure out how to save state in the shader (I thought it was impossible, but some other people’s results have somehow included state!) so I’m abandoning this particular shader.

The best thing I got out of it was an understanding of how to sample cubemap textuers! Cubemaps are so cool and I need to figure the math behind how they work a bit better.

The gist of it is that you sample the cubemap texture by providing a 3D vector indicating where the camera is currently looking. The really tricky part is that a single 3D vector only samples a single color. We need to create 4 vectors, each representing one corner of our 2D plane we’re drawing on! Then, interpolate between these vectors as we render a scene. How much the vectors vary from the center looking point determines the “Field of View” in a sense, and we also have to keep track of preserving aspect ratio as we sample. Really tough stuff! But totally doable.

Anyhoo, I’m dropping this project (and probably Shader Toy as a whole) because I can also make 3D models. I feel like there’s so much more that can be done with shaders if given access to the full pipeline. A lot of the amazing demos on ShaderToy use hacky solutions to simulate a 3D environment, so why not just use the full pipeline and use a real 3D mesh? That’s the kind of work I want to do anyway, so look forward to that over the next week!

Post Metadata


100 Days of Graphics