Procedural Snail on Point

by Gregg Tavares

HTML

<canvas></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>

JavaScript

const gl = document.querySelector('canvas').getContext('webgl2');

const vs = `#version 300 es
in vec4 position;
void main() {
  gl_Position = position;
  gl_PointSize = 128.0;
}
`;

const fs = `#version 300 es
precision highp float;

uniform float iTime;
uniform int iFrame;
const vec2 iResolution = vec2(1, 1);
uniform sampler2D iChannel1;
uniform sampler2D iChannel2;
uniform sampler2D iChannel3;

// Created by inigo quilez - 2015
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0

// You can buy a metal print of this shader here:
// https://www.redbubble.com/i/metal-print/Snail-by-InigoQuilez/39845499.0JXQP


// antialiasing - make AA 2, meaning 4x AA, if you have a fast machine
#define AA 1


// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdSphere( in vec3 p, in vec4 s )
{
    return length(p-s.xyz) - s.w;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdEllipsoid( in vec3 p, in vec3 c, in vec3 r )
{
    return (length( (p-c)/r ) - 1.0) * min(min(r.x,r.y),r.z);
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdCircle( in vec2 p, in vec2 c, in float r )
{
    return length(p-c) - r;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdTorus( vec3 p, vec2 t )
{
    return length( vec2(length(p.xz)-t.x,p.y) )-t.y;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
float sdCapsule( vec3 p, vec3 a, vec3 b, float r )
{
	vec3 pa = p-a, ba = b-a;
	float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
	return length( pa - ba*h ) - r;
}

// http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm
vec2 udSegment( vec3 p, vec3 a, vec3 b )
{
	vec3 pa = p-a, ba = b-a;
	float h = clamp( dot(pa,ba)/dot(ba,ba), 0.0, 1.0 );
	return vec2( length( pa - ba*h ), h );
}

// http://research.microsoft.com/en-us/um/people/hoppe/ravg.pdf
float det( vec2 a, vec2 b ) { return a.x*b.y-b.x*a.y; }
vec3...