The document is a transcript from a presentation on WebGL and shaders. It introduces WebGL and explains that it uses shaders written in GLSL to render 3D graphics in the browser. It discusses the core WebGL concepts of vertices, buffers to store vertex data on the GPU, and vertex and fragment shaders. It explains that vertices are processed by vertex shaders and fragments are processed by fragment shaders. The presenter then demonstrates how to write simple shaders and defines the different types of variables that can be used in shaders.

1. @g33konaut
Creative experiments
With WebGL

2. @g33konaut
Our plan for today...
1. What is WebGL?

3. @g33konaut
Our plan for today...
1. What is WebGL?
2. Shaders ftw

4. @g33konaut
Our plan for today...
1. What is WebGL?
2. Shaders ftw
3. Let’s write some shaders!

5. @g33konaut
What is WebGL?

6. @g33konaut
Why do we need a GPU?
CPU GPU

7. @g33konaut
Why do we need a GPU?
CPU GPU
for(var i=0; i<10; i++) {
if(data[i] == MAGIC_VALUE) {
data[i+offset] = data[i] / data[i+1]
}
}

8. @g33konaut
Why do we need a GPU?
CPU GPU

9. @g33konaut
This is what WebGL can do...

10. @g33konaut
What do we need for our WebGL laboratory?
1. A <canvas>

11. @g33konaut
What do we need for our WebGL laboratory?
1. A <canvas>
2. A WebGL context
canvas.getContext(‘webgl’);

12. @g33konaut
What do we need for our WebGL laboratory?
1. A <canvas>
2. A WebGL context
canvas.getContext(‘webgl’);
3. Vertices, Shaders, ...

13. @g33konaut

14. @g33konaut
This is how WebGL works
Vertices GLBuffers
Vertex
Shader
Fragment
Shader
Pixels
GLSL code

15. @g33konaut
Vertices? Buffers? Shaders? GLSL? WAT?!

16. @g33konaut
Breathe. It will be fine. I promise.

17. @g33konaut
Breathe. It will be fine. I promise.

18. @g33konaut
Breathe. It will be fine. I promise.

19. @g33konaut
Okay, let’s talk about vertices

20. @g33konaut
Vertices are points in 3D space.

21. @g33konaut
We can also use 2D coordinates.
(1,1)
(-1,1)
(-1,-1) (1,-1)

22. @g33konaut
(1,1)
(-1,1)
(-1,-1) (1,-1)
We put them into a TypedArray
const vertices = new Float32Array([
-1.0, 1.0,
1.0, 1.0,
1.0, -1.0,
-1.0, -1.0
]);

23. @g33konaut
A buffer moves the data to the GPU memory
// create an empty buffer
const vBuf = gl.createBuffer();

24. @g33konaut
A buffer moves the data to the GPU memory
// create an empty buffer
const vBuf = gl.createBuffer();
// select vBuf as the current ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, vBuf);

25. @g33konaut
A buffer moves the data to the GPU memory
// create an empty buffer
const vBuf = gl.createBuffer();
// select vBuf as the current ARRAY_BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, vBuf);
// copy the TypedArray into the buffer
gl.bufferData(gl.ARRAY_BUFFER, vrtx, gl.STATIC_DRAW);

26. @g33konaut
So what happens here?
A.x
A.y
B.x
B.y
...
...
...
GL
Buffer
(Vertices)

27. @g33konaut
So what happens here?
A.x
A.y
B.x
B.y
...
...
...
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader

28. @g33konaut
So what happens here?
A.x
A.y
B.x
B.y
...
...
...
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Fragment
shader
Fragment
shader
Fragment
shader
Fragment
shader

29. @g33konaut
So what happens here?
A.x
A.y
B.x
B.y
...
...
...
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Vertex
shader
Fragment
shader
Fragment
shader
Fragment
shader
Fragment
shader

30. @g33konaut
Let’s make some shaders!

31. @g33konaut
A shader is a function, run on the GPU
function (x, y, p1, p2, ...) {
}

32. @g33konaut
A vertex shader returns coordinates to draw at
function (x, y, p1, p2, ...) {
// do stuff
return [x, y];
}

33. @g33konaut
A fragment shader returns the colour to draw
function (x, y, p1, p2, ...) {
// do stuff
return [red, green, blue, alpha];
}

34. @g33konaut
The 4 types of inputs for shaders
● const A constant

35. @g33konaut
The 4 types of inputs for shaders
● const A constant
● uniform A “global” variable

36. @g33konaut
The 4 types of inputs for shaders
● const A constant
● uniform A “global” variable
● attribute A per-vertex variable

37. @g33konaut
The 4 types of inputs for shaders
● const A constant
● uniform A “global” variable
● attribute A per-vertex variable
● varying Interpolated variable
(vertex write, fragment read)

38. @g33konaut
Enough talking, time to code!
avgp.github.io/shaderpad

39. @g33konaut
Go and play with shaders!