Categories
graphics shaders

WebGL for noobs: The Shadey Student

In the last post, I wrote about getting wowed by WebGL fragment shader hacks. They are simultaneously fascinating and baffling, how can something seeming so simple give rise to such magic?

… an uninformed public tends to confuse scholarship with magicianry…

Foundation and Empire – Isaac Asimov (1952)

It seems then that I am the uninformed public. Again.

Over the years I’ve come to realise that trying to explain something to others is the way to really understand something. It’s an approach that has been broadly given the name: ‘The Feynman Technique’. Which is to say, I think, it’s something Feynman did in his teachings at CalTech. Rather than a bite sized self-help method developed by him to sell stocking filler books. But all props to the Feynman legend, the system works and so I’m going to aim to gain understanding by trying to explain what’s going on under the hood here on this blog. Note that I’m not a mathematician and so there are probably better explanations of how some of this works than mine, most likely what you need, if you want the good stuff is here.

Armed with all the heavy-hitting celebrity ‘thinking’ quotes that I need to motivate, me I’ve set out on this endeavour. The first step of which is creating tools for the job. Whilst shadertoy.com is the bomb and my inspiration, there are two reasons I’ve decided not to use it for this:

  1. I would need to publish my shaders on shadertoy.com in order to embed them here. What I intend to do in explaining is a little too trivial for what I think shadertoy.com should be used for;
  2. Shadertoy.com seems a bit slow, probably because it’s really popular! Better that I don’t add to that burden (although three page views a week isn’t going to hurt them!) but also better to have control over the content. IMHO.

Therefore I’ve created a little WebGL Javascript embedding tool. Based upon Mozilla’s great WebGL tutorials and inspired by shadertoy.com. It’s stripped down to simplify what needs to be done but the shaders I create with it should be compatible with shadertoy.com when, and if, I do want to publish something.

Finally the last part of the stack is having a graphing tool that I can use to embed custom plots into these pages to explain the functions that are used in the shaders – because this is where the magic is. For that I’m using Python 3.8 with Matplotlib. It’s not the prettiest but it’s definitely more than good enough.

Let the fun begin.