Doing some GLSL, again

trying some low-level webGL "fun", after a long time

01/07/2023

*25/07/2023

frontend
webdev
svelte
webgl
glsl

Something like 5 years ago, I dabbled a little with glsl on the gl-transitions project of @greweb. It was really fun (the “I don’t really know what I’m doing” kind of fun :-D), and I learned a lot. Since, I didn’t had the time to do some low-level webGL stuff.

This week-end, I wanted to do some low-level 2D shaders again (I’m not very good at this, but it’s fun :-D ).

It was also a pretext to:

port to typescript the WebGL utility methods from Gregg Tavares: https://webglfundamentals.org/webgl/resources/webgl-utils.js.
wrapping it in a Svelte component, with editable GLSL code, to be able to easily use it in my Svelte projects.

Next things on the topic, I’ll probably try WebGL2/GLSL #version 300 es.

Examples

(please note: the examples below are in webGL/GLSL 1.0, not 2.0)

It’s always fun to poke around in shaders code, and see what happens when you change a value, a function here and there and see the result. Be sure to try editing the code !

A simple example, with a gradient, and lot of sin/cos functions:
(move your mouse over the drawing!).

GLSL code (editable)

A more complex example, with a Voronoi (from Inigo Quilez)

GLSL code (editable)

#version 100
precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Adapted from https://www.shadertoy.com/view/ldl3W8

// The MIT License
// Copyright © 2013 Inigo Quilez
// https://www.youtube.com/c/InigoQuilez
// https://iquilezles.org/
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

// I've not seen anybody out there computing correct cell interior distances for Voronoi
// patterns yet. That's why they cannot shade the cell interior correctly, and why you've
// never seen cell boundaries rendered correctly. 
//
// However, here's how you do mathematically correct distances (note the equidistant and non
// degenerated grey isolines inside the cells) and hence edges (in yellow):
//
// https://iquilezles.org/articles/voronoilines
//
// More Voronoi shaders:
//
// Exact edges:  https://www.shadertoy.com/view/ldl3W8
// Hierarchical: https://www.shadertoy.com/view/Xll3zX
// Smooth:       https://www.shadertoy.com/view/ldB3zc
// Voronoise:    https://www.shadertoy.com/view/Xd23Dh

#define ANIMATE

vec2 hash2( vec2 p )
{
	// texture based white noise
	//return textureLod( iChannel0, (p+0.5)/256.0, 0.0 ).xy;
	
    // procedural white noise	
	return fract(sin(vec2(dot(p,vec2(127.1,311.7)),dot(p,vec2(269.5,183.3))))*43758.5453);
}

vec3 voronoi( in vec2 x )
{
    vec2 n = floor(x);
    vec2 f = fract(x);

//----------------------------------
    // first pass: regular voronoi
    //----------------------------------
	vec2 mg, mr;

float md = 8.0;
    for( int j=-1; j<=1; j++ )
    for( int i=-1; i<=1; i++ )
    {
        vec2 g = vec2(float(i),float(j));
		vec2 o = hash2( n + g );
		#ifdef ANIMATE
        o = 0.5 + 0.5*sin( u_time + 6.2831*o );
        #endif	
        vec2 r = g + o - f;
        float d = dot(r,r);

if( d<md )
        {
            md = d;
            mr = r;
            mg = g;
        }
    }

//----------------------------------
    // second pass: distance to borders
    //----------------------------------
    md = 8.0;
    for( int j=-2; j<=2; j++ )
    for( int i=-2; i<=2; i++ )
    {
        vec2 g = mg + vec2(float(i),float(j));
		vec2 o = hash2( n + g );
		#ifdef ANIMATE
        o = 0.5 + 0.5*sin( u_time + 6.2831*o );
        #endif	
        vec2 r = g + o - f;

if( dot(mr-r,mr-r)>0.00001 )
        md = min( md, dot( 0.5*(mr+r), normalize(r-mr) ) );
    }

return vec3( md, mr );
}

void main()
{
    vec2 p = gl_FragCoord.xy/u_resolution.xx;

vec3 c = voronoi( 8.0*p );

// isolines
    vec3 col = c.x*(0.5 + 0.5*sin(64.0*c.x))*vec3(1.0);
    // borders	
    col = mix( vec3(1.0,0.6,0.0), col, smoothstep( 0.04, 0.07, c.x ) );
    // feature points
	float dd = length( c.yz );
	col = mix( vec3(1.0,0.6,0.1), col, smoothstep( 0.0, 0.12, dd) );
	col += vec3(1.0,0.6,0.1)*(1.0-smoothstep( 0.0, 0.04, dd));

gl_FragColor = vec4(col,1.0);
}

References

https://thebookofshaders.com/, all the theory and the basics about WebGL and shaders, explained in a very clear and accessible way.
https://webgl2fundamentals.org/, (and its v2: https://webgl2fundamentals.org/) , a very good reference on WebGL(2), with a lot of examples. A perfect complement to the book of shaders.
https://shadertoyunofficial.wordpress.com/ Lot of examples and tips and ticks, usable also in other contexts than shadertoy.
https://iquilezles.org/ , the blog/website of Inigo Quilez. Tons of algorithms and techniques to learn from. Applicable to any programming language, not only GLSL.