97

Micro Raymarch

Inspired by #つぶやきGLSL, this is an ultra-compact raymarching fragment shader rendering an infinite twisted lattice.

60 FPS WebGL Shader

GLSL Fragment Shader

#version 300 es
precision highp float;
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
out vec4 fragColor;

#define R u_resolution.xy

mat2 rot(float a) { float s=sin(a),c=cos(a); return mat2(c,-s,s,c); }

void main() {
    vec2 uv = (gl_FragCoord.xy - .5*R) / R.y;
    vec2 m = u_mouse * 2.0 - 1.0;
    vec3 ro = vec3(0, 0, -3);
    vec3 rd = normalize(vec3(uv, 1.0));
    
    rd.yz *= rot(m.y * 3.14);
    rd.xz *= rot(m.x * 3.14);
    ro.yz *= rot(m.y * 3.14);
    ro.xz *= rot(m.x * 3.14);
    
    float t = 0., d = 0.;
    for(int i=0; i<80; i++) {
        vec3 p = ro + rd * t;
        p.z += u_time;
        p = mod(p, 2.0) - 1.0;
        p.xy *= rot(p.z + u_time * 0.5);
        d = length(p.xy) - 0.2;
        if(d < 0.001 || t > 20.) break;
        t += d;
    }
    
    vec3 col = vec3(0);
    if (t < 20.) {
        float fog = 1.0 / (1.0 + t*t*0.1);
        col = vec3(0.5, 0.2, 0.8) * fog + vec3(0.2, 0.5, 0.9) * (t*0.05);
    }
    
    fragColor = vec4(col, 1.0);
}

Properties

#shaders#raymarching#tweetable#glsl
Author: Math Art Core Target: 60 FPS
ESC
↑↓ Navigate Select
101 Mathematical Artworks

Support the Project

Keep mathematical creative coding alive & open source

Or via Direct Payoneer ($0 Fee)
Payoneer Customer ID: $0 Fee Direct
24076084

💡 Payoneer app: Go to Pay → Pay to recipient → Enter ID 24076084.

Thank you for supporting generative mathematical animations! ✨