After Hours: A Brave Adventure Into WebGL and the Neon Banner Reward

I honestly never expected myself to be this into WebGL. Yes, the biggest appeal to me with OpenGL is shader support, but there are some fun merits to looking into OpenGL's low-level side of things. I really enjoy grasping a deeper understanding of how the hardware thinks. But WebGL is an interesting case. Sure, it interfaces with the GPU, just like you would with OpenGL, but I always dislike using Javascript. Mainly because to me, it's showing its age. It's very clunky, old, and slowing down. I feel we need something faster.

That being said, I looked into it, as I was getting into shaders and wanted a way to show some of them on my website. I started diving into WebGL's API documentation and tons of written and video tutorials to find the absolute quirkiest thing I've ever seen.

It's actually really cute.

This shader was displayed using 8 lines of HTML. I'm not kidding. I straight up embedded this into the page, here's the code:

<canvas id="default-shader" width="720px" height="405px" style="width:100%;max-width:720px;"></canvas>
<script async type="module">
    import {
        SimpleShader as Shader
    } from 'https://sudospective.net/assets/js/simple-shader.js';
    const def = new Shader('default-shader');
    def.play();
</script>

Now, what the heck is this code doing? Well, first off, we're creating a canvas element. A canvas element is special, because you can actually draw graphics on it. Pretty neat! Next, we make an asynchronous script element with type "module". Within that module, we import a script I wrote called SimpleShader. This lets you fill a canvas with a vertex and fragment shader, allowing you to display shader demos or artwork without having to dick around with the backend of it.

Then we just create a new SimpleShader object and optionally play it, giving it an incrementing uniform float time. Simple as that.

But just to really drive the point home, here's a WebGL shader showing Kirby in all of his squishy, fluffy glory.

...And the code for it.

<canvas id="kirby-shader" max-width="720px" height="405px" style="width:100%;max-width:720px;"></canvas>
<script async type="module">
    import {
        SimpleShader as Shader
    } from '/assets/js/simple-shader.js';
    import * as glsl_kirby from '/content/media/kirby.glsl.js';
    const kirby = new Shader('kirby-shader', {
        frag: glsl_kirby.frag,
    });
    kirby.play();
</script>

While working on this module, I noticed that a lot of knowledge from OpenGL actually transfers quite nicely over to WebGL, and I even found some things about the module system that are pretty decent!

I'm still not a fan of Javascript. I'm still not even fully interested in WebGL, being that my OpenGL needs to kinda take priority due to university. I did have fun making this all work, though.

Anyway, feel free to grab that module! It's available here. Stay hydrated, it's hot out today. Don't walk your dog on the asphalt, it's very bad for their paws. Tootles~

EDIT: By the way, you may have noticed that neon sign looking banner come up sometimes on the homepage. Wait until 9pm and it'll (somewhat) always be there.

EDIT 2: I got the shaders to run on all mobile devices. It's not the workaround we need, but it's the workaround we deserve.

EDIT 3: I made some updates to SimpleShader, and also the links were outdated. This should be fixed now.