"Graphical fun With WebGL shaders", Martin Splitt
0 likes120 views
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.
![@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]
}
}](https://image.slidesharecdn.com/creativeexperiments-221111123604-dac3de74/85/Graphical-fun-With-WebGL-shaders-Martin-Splitt-7-320.jpg)
![@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
]);](https://image.slidesharecdn.com/creativeexperiments-221111123604-dac3de74/85/Graphical-fun-With-WebGL-shaders-Martin-Splitt-22-320.jpg)
![@g33konaut
A vertex shader returns coordinates to draw at
function (x, y, p1, p2, ...) {
// do stuff
return [x, y];
}](https://image.slidesharecdn.com/creativeexperiments-221111123604-dac3de74/85/Graphical-fun-With-WebGL-shaders-Martin-Splitt-32-320.jpg)
![@g33konaut
A fragment shader returns the colour to draw
function (x, y, p1, p2, ...) {
// do stuff
return [red, green, blue, alpha];
}](https://image.slidesharecdn.com/creativeexperiments-221111123604-dac3de74/85/Graphical-fun-With-WebGL-shaders-Martin-Splitt-33-320.jpg)
"Graphical fun With WebGL shaders", Martin Splitt
- 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!
- 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!