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