Doing some GLSL, again (2)

GLSL2, multiple editable shaders

04/07/2023

frontend
webdev
svelte
webgl
glsl

In previous post, we did some GLSL with WebGL1, and we used a single shader. I very quickly made an editable shader component for the fragment shader.

See previous post: Doing some GLSL, again

Now, let’s use webGL2 and multiple shaders

Now, let’s try with WebGL2/GLSL2 ! and also with multiple shaders !

See some reference here: https://webgl2fundamentals.org/

GLSL code (editable)

Vertex Shaders

Fragment Shaders

#version 300 es
precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_xscrollPerc;
uniform float u_yscrollPerc;

out vec4 outColor;

float dot2(in vec2 v) {
  return dot(v, v);
}

float truchetPattern(in vec2 p, in float size) {
  return fract(sin(dot(p, vec2(12.9898f, 78.233f))) * 43758.5453f) * size;
}

// star
float sdStar5(in vec2 p, in float r, in float rf) {
  const vec2 k1 = vec2(0.809016994375f, - 0.587785252292f);
  const vec2 k2 = vec2(- k1.x, k1.y);
  p.x = abs(p.x);
  p -= 2.0f * max(dot(k1, p), 0.0f) * k1;
  p -= 2.0f * max(dot(k2, p), 0.0f) * k2;
  p.x = abs(p.x);
  p.y -= r;
  vec2 ba = rf * vec2(- k1.y, k1.x) - vec2(0, 1);
  float h = clamp(dot(p, ba) / dot(ba, ba), 0.0f, r);
  return length(p - ba * h) * sign(p.y * ba.x - p.x * ba.y);
}

// Isosceles Trapezoid 
float fig(in vec2 p, in float r1, float r2, float he) {
  vec2 k1 = vec2(r2, he);
  vec2 k2 = vec2(r2 - r1, 2.0f * he);
  p.x = abs(p.x);
  vec2 ca = vec2(p.x - min(p.x, (p.y < 0.0f) ? r1 : r2), abs(p.y) - he);
  vec2 cb = p - k1 + k2 * clamp(dot(k1 - p, k2) / dot2(k2), 0.0f, 1.0f);
  float s = (cb.x < 0.0f && ca.y < 0.0f) ? - 1.0f : 1.0f;
  return s * sqrt(min(dot2(ca), dot2(cb)));
}

vec3 palette(in float t) {
  vec3 a = vec3(0.821f, 0.328f, 0.242f);
  vec3 b = vec3(0.769f, 0.110f, 0.932f);
  vec3 c = vec3(1.071f, 1.434f, 0.828f);
  vec3 d = vec3(4.668f, 3.893f, 0.996f);

return a + b * cos(6.28318f * (c * t + d));
}

const highp float NOISE_GRANULARITY = 0.5f / 255.0f;

highp float random(highp vec2 coords) {
  return fract(sin(dot(coords.xy, vec2(12.9898f, 78.233f))) * 43758.5453f);
}

highp float col(float val) {
  highp float ret = mix(0.05f, 0.35f, 1.0f - val);
  ret += mix(- NOISE_GRANULARITY, NOISE_GRANULARITY, random(vec2(val, val)));
  return ret;
}

void main() {
  // coordinates normalization + aspect ratio 
  vec2 uv = (gl_FragCoord.xy * 2.f - u_resolution.xy) / u_resolution.y;
  // keep original coordinates
  vec2 uv0 = uv;

vec3 finalColor = vec3(0.0f);

for(float i = 0.f; i < 3.f; i ++) {

// repeat pattern
    float fact = mix(0.1f, 0.3f, 1.f - (i / 3.f));
    float fact2 = mix(1.f, 2.f, 1.f - (i / 3.f));
    //uv = fract(uv * 1.7f) - 0.5f;
    uv = fract(uv * 1.5f) - 0.5f;

//float d = fig(uv, 0.1f, 0.1f, 0.1f) * exp(-length(uv0));
    //float d = sdRhombus(uv, vec2(fact, fact)) * exp(-length(uv0));
    //float d = sdStar5(uv, .1, fact) * exp(- length(uv0));
    float d = truchetPattern(uv, fact2) * exp(- length(uv0));
    vec3 col = palette(fig(uv, 0.f, 0.1f, 0.1f) + i * .4f + u_time * 0.4f);

d = sin(d * 8.0f + u_time * .9f) / 8.f;
    d = abs(d);
    //d = 1.0f - d;
    //d = smoothstep(0.0f, 0.1f, d);
    d = pow(0.01f / d, 1.1f);
    finalColor += d;

}

outColor = vec4(col(finalColor.x), col(finalColor.y), col(finalColor.z), 1.0f);
}

Multiple editable shaders, with a vertex shader and a fragment shader:

GLSL code (editable)

Vertex Shaders

Fragment Shaders

Impressive examples - some remixed

Here, I adapted some examples I found on the web. “Adapted”= some syntax and variables/uniforms names changed.

Yohei Nishitsuji

Original: https://twitter.com/YoheiNishitsuji/status/1677258656461787136

GLSL code (editable)

#version 300 es

// THIS SHADER IS NOT MINE!!!
// It's an awesome work of art by Yohei Nishitsuji
// https://twitter.com/YoheiNishitsuji/status/1677258656461787136
// https://twitter.com/YoheiNishitsuji

// fragment shaders don't have a default precision so we need
// to pick one. highp is a good default. It means "high precision"
precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_xscrollPerc;
uniform float u_yscrollPerc;

// we need to declare an output for the fragment shader
out vec4 outColor;

// utility function 
// source - 
mat3 rotate3D(float angle, vec3 axis) {
  vec3 a = normalize(axis);
  float s = sin(angle);
  float c = cos(angle);
  float r = 1.0f - c;
  return mat3(a.x * a.x * r + c, a.y * a.x * r + a.z * s, a.z * a.x * r - a.y * s, a.x * a.y * r - a.z * s, a.y * a.y * r + c, a.z * a.y * r + a.x * s, a.x * a.z * r + a.y * s, a.y * a.z * r - a.x * s, a.z * a.z * r + c);
}

void main() {

vec2 uv = gl_FragCoord.xy / u_resolution.xy;

vec2 pos = (uv.xy / 0.5f);

vec2 r = u_resolution;

float i, e, R, s;
  vec3 q, p, d = vec3(gl_FragCoord.yx / r.x, 1);
  d *= rotate3D(1.f, vec3(cos(u_time), 0, 3));
  for(q.zx--; i++ < 50.f; i > 28.f ? d /= -d : d) {
    e += i / 1e5f;
    outColor += e * e / vec4(20);
    s = 1.f;
    p = q += d * e * R * .2f;
    p = vec3(log(R = length(p)) - u_time, -p.z / R, atan(p.x, p.y));
    for(e = --p.y; s < 6e3f; s += s) e += cos(dot(cos(p.zyx * s), cos(p.xzy * s))) / s;
  }

}

kishimisu

GLSL code (editable)

#version 300 es

precision highp float;

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform float u_xscrollPerc;
uniform float u_yscrollPerc;
out vec4 outColor;
vec3 palette(float t) {
  vec3 a = vec3(0.5f, 0.5f, 0.5f);
  vec3 b = vec3(0.5f, 0.5f, 0.5f);
  vec3 c = vec3(1.0f, 1.0f, 1.0f);
  vec3 d = vec3(0.263f, 0.416f, 0.557f);

return a + b * cos(6.28318f * (c * t + d));
}
vec2 rotate(vec2 uv, float th) {
  return mat2(cos(th), sin(th), - sin(th), cos(th)) * uv;
}

float sdfSquare(vec2 uv, float size, vec2 offset) {
  float x = uv.x - offset.x;
  float y = uv.y - offset.y;
  vec2 rotated = rotate(vec2(x, y), u_time);
  float d = max(abs(rotated.x), abs(rotated.y)) - size;

return d;

}

//https://www.shadertoy.com/view/mtyGWy
void main() {
  vec2 uv = (gl_FragCoord.xy * 2.0f - u_resolution.xy) / u_resolution.y;
  //vec2 uv = gl_FragCoord.xy / u_resolution.xy;
  vec2 uv0 = uv;
  vec3 finalColor = vec3(0.0f);
  for(float i = 0.0f; i < 4.0f; i ++) {
    uv = fract(uv * 1.5f) - 0.5f;

//float d = length(uv) * exp(- length(uv0));
    float d = sdfSquare(uv, 0.5f, vec2(0.0f, 0.0f));
    vec3 col = palette(length(uv0) + i * 4.f + u_time * .01f);

d = sin(d * 8.f + u_time) / 8.f;
    d = abs(d);

d = pow(0.01f / d, 1.2f);

finalColor += col * d;
  }
  outColor = vec4(finalColor, 1.0f);
}

0gust1

Doing some GLSL, again (2)

Now, let’s use webGL2 and multiple shaders

Vertex Shaders

Fragment Shaders

Vertex Shaders

Fragment Shaders

Impressive examples - some remixed

Yohei Nishitsuji

kishimisu

Links

References

Impressive people / works