Shaders of Doom

(a gentle intro)

1

the canvas of despair

2

2D context of sorrow

how to draw a pink rectangle

3

WebGL context of agony

GPU  !=  CPU

  • no objects, just buffers.  
     

  • attributes / uniforms / varying
     

  • compilation & marshalling
     

  • but mostly

(demystification) 

setting up attributes with PixiJS

 

    const geometry = new PIXI.Geometry();

    geometry.addAttribute("position", [0, 0, 1, 0, 1, 1, 0, 1], 2);

    geometry.addIndex([0, 1, 2, 0, 2, 3]);

 

reads:
1 - create a Vertex Buffer Object that contains 4, 2D points ( a unit square with top left corner at 0,0 ) as a flat array.


2 - create an Index Buffer Object that describes 2 faces.
face 1 links vertices 0=>1=>2 and face 2 links vertices 0=>2=>3

4

Vertex of Torment

 

 

precision highp float; // magic, don't touch

// the attribute values passed from the CPU

attribute vec2 position;

 

// the program itself

void main() {

        //transform or project the coordinates onto a bi-unit square

        gl_Position = vec4( position, 0.0, 1.0);

 

        // when using gl.POINTS we should set the point size:

        gl_PointSize = 3.;

}

(demystification)

Primitive Assembly of anguish

gl_Positions

Rasterization of loneliness

5

Fragment of Vexation

precision highp float; // magic, don't touch
void main() {

 

        // paint each pixel grey

        gl_FragColor = vec4(0.5, 0.5, 0.5, 1.);

       

}

(demystification)

// VERTEX
attribute vec2 position;

// a color attribute, associated with each vertex

attribute vec3 color;

// a varying to pass the color to the fragment shader

varying vec3 vColor;

void main() {

        // this is a color value associated to each vertex

        // it will be interpolated in the fragment shader

        vColor = color;

        gl_Position = vec4( position, 0.0, 1.0);

}

 

// FRAGMENT

varying vec3 vColor; //our varying color

void main() {

        // paint each pixel with the varying color

        gl_FragColor = vec4( vColor, 1.);

}

(varyings)

// VERTEX

attribute vec2 position;

attribute vec3 color;

varying vec3 vColor;

// the third variable type: uniform is passed to both shaders

uniform float time;

void main() {

        //use the time uniform to move the vertices around

        vec2 pos = position + vec2( cos( time ), sin( time ) );

        vColor = color;

        gl_Position = vec4( pos, 0.0, 1.0);

}

 

// FRAGMENT

uniform float time;

varying vec3 vColor;

void main() {

        //use the time uniform to change the opacity

        gl_FragColor = vec4(  vColor, abs( sin( time ) ) );

}

(uniforms)

wrap up of desolation

  • 2D canvas is slow but flexible
     
  • WebGL work is shader work
     
  • portable and future proof

further reading of dismay

<=== you are here