Shaders of Doom
(a gentle intro)
1
the canvas of despair
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089158/context-0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089159/context-1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089160/context-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089161/context-3.png)
2
2D context of sorrow
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089627/canvas-2d-0.png)
how to draw a pink rectangle
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089630/canvas-2d-3.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089631/canvas-2d-4.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089632/canvas-2d-5.png)
3
WebGL context of agony
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089637/webgl-0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089638/webgl-1.png)
GPU != CPU
-
no objects, just buffers.
-
attributes / uniforms / varying
-
compilation & marshalling
-
but mostly
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/3300275/shaders.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089633/shader-0.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089635/shader-2.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089636/shader-3.png)
(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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9089974/shaders.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9090109/catapult.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9090502/primitive.png)
Primitive Assembly of anguish
gl_Positions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091185/batch-points.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091184/batch-lines.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091182/batch-fan.png)
Rasterization of loneliness
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091183/batch.png)
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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091186/grey-fragment.png)
// 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)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/60807/images/9091305/varying.png)
// 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
shaders of doom
By nicolas barradeau
shaders of doom
- 639