WebGL2

Shaders

Varför ska jag alltid göra allt jobb? Det är din tur att skriva kod nu.

Tar en liten paus i drönarna medan jag fixar NEAT😎

Dags att utnyttja 📈ℹ️k💳et

Koden skrivs i GLSL, ett språk för beräkningar på grafikkortet med inbyggd linjär algebra. Syntaxen är baserad på C och viktigt att veta är att man alltid måste använda doubles. (ex: x/2.0 och y*4.0)

Här är inputs (uniforms) du kan använda:

Uniform	Värde
vec2 vPos	Normaliserade 2D koordinater för pixeln
float fTime	Tid sedan start (funkar bra med sin & cos för periodiska animationer)
vec2 vResolution	Upplösningen på canvasen (w, h) = (480, 480)
vec3 vMouse	2D koordinater för musen (x, y) och click (z = 0.0, 1.0), normaliseras lätt med vResolution: vec2 mouse = (vMouse.xy/vResolution - vec2(0.5)) * vec2(2.0, -2.0);

Uniform

Värde

vec2 vPos

Normaliserade 2D koordinater för pixeln

float fTime

Tid sedan start (funkar bra med sin & cos för periodiska animationer)

vec2 vResolution

Upplösningen på canvasen (w, h) = (480, 480)

vec3 vMouse

2D koordinater för musen (x, y) och click (z = 0.0, 1.0), normaliseras lätt med vResolution:

vec2 mouse = (vMouse.xy/vResolution - vec2(0.5)) * vec2(2.0, -2.0);

Alla uniforms skickas via vertex-shadern och har därför 'varying' istället för 'uniform'. Det gå att använda highp/mediump men behövs inte. Om du fattar så fattar du, kolla exemplen annars och lista ut det.

koordinatsystem

Röd: screenspace (vResolution & vMouse)
Blå: clipspace (vPos)

Säg till om jag ska fixa fler uniforms.

Gör nåt coolt! (Om du kan...)

Ex (copy-paste):

Basics	vMouse och vResolution (tryck någonstans på bilden)	Mandelbrot
varying highp vec2 vPos; varying float fTime; void main() { vec3 color = vec3(0.0); if(vPos.x > 0.0) color += vec3(1.0, 0.0, 0.0); if(vPos.y > 0.0) color += vec3(0.0, 1.0, 0.0); /** * Här kan vi se att vPos ger oss * normaliserade koordinater x, y ∈ [-1, 1] */ gl_FragColor = vec4(color, 1.0); }	varying highp vec2 vPos; varying float fTime; varying vec2 vResolution; varying vec3 vMouse; vec3 demo1(vec2 mouse) { vec3 rv = vec3(0.0); if(vMouse.z > 0.5){ float dist = length(vPos-mouse); rv = vec3(1.0)-vec3(dist); } return rv; } vec3 demo2() { vec3 rv = vec3(0.0); rv = vMouse/vec3(vResolution, 1.0); return rv; } void main() { vec2 mouse = (vMouse.xy/vResolution - vec2(0.5)) * vec2(2.0, -2.0); vec3 color = demo1(mouse); color *= demo2(); gl_FragColor = vec4(color, 1.0); }	varying highp vec2 vPos; varying float fTime; void main() { vec2 z = 0.0/vPos.xy; vec2 c = 0.37001+10.0exp(-0.5fTime)vPos.xy; vec3 j; for(float i = 0.0; i <= 256.0; i++){ z = mat2(z, -z.y, z.x) z + c; if(dot(z,z) > 16.0) break; j = vec3(i)/(256.0); } gl_FragColor = vec4(j, 1.0); }

Basics

vMouse och vResolution (tryck någonstans på bilden)

Mandelbrot

varying highp vec2 vPos;
varying float fTime;

void main() {
    vec3 color = vec3(0.0);
    
    if(vPos.x > 0.0) color += vec3(1.0, 0.0, 0.0);
    if(vPos.y > 0.0) color += vec3(0.0, 1.0, 0.0);    
    
    /**
    *    Här kan vi se att vPos ger oss
    *    normaliserade koordinater x, y ∈ [-1, 1]
    */
    
    gl_FragColor = vec4(color, 1.0);
}

varying highp vec2 vPos;
varying float fTime;
varying vec2 vResolution;
varying vec3 vMouse;

vec3 demo1(vec2 mouse) {
    vec3 rv = vec3(0.0);    
    if(vMouse.z > 0.5){
        float dist = length(vPos-mouse);
        rv = vec3(1.0)-vec3(dist);
    }
    return rv;
}

vec3 demo2() {
    vec3 rv = vec3(0.0);
    rv = vMouse/vec3(vResolution, 1.0);
    return rv;
}

void main() {
    vec2 mouse = (vMouse.xy/vResolution - vec2(0.5)) * vec2(2.0, -2.0);
    vec3 color = demo1(mouse);
    color *= demo2();

    gl_FragColor = vec4(color, 1.0);
}

varying highp vec2 vPos;
varying float fTime;
  
void main() {
    vec2 z = 0.0/vPos.xy;
    vec2 c = 0.37001+10.0*exp(-0.5*fTime)*vPos.xy;
    vec3 j;
    for(float i = 0.0; i <= 256.0; i++){
        z = mat2(z, -z.y, z.x) * z + c; 
        if(dot(z,z) > 16.0) break;
        j = vec3(i)/(256.0);
    }
    gl_FragColor = vec4(j, 1.0);
}