Download as PDF, PPTX
![@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)
![@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/75/Graphical-fun-With-WebGL-shaders-Martin-Splitt-7-2048.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/75/Graphical-fun-With-WebGL-shaders-Martin-Splitt-22-2048.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/75/Graphical-fun-With-WebGL-shaders-Martin-Splitt-32-2048.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/75/Graphical-fun-With-WebGL-shaders-Martin-Splitt-33-2048.jpg)
Uploaded byFwdays
"Graphical fun With WebGL shaders", Martin Splitt
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.
More Related Content
Similar to "Graphical fun With WebGL shaders", Martin Splitt
"Graphical fun With WebGL shaders", Martin Splitt
- 1.
- 2. @g33konaut Our plan fortoday... 1. What is WebGL?
- 3. @g33konaut Our plan fortoday... 1. What is WebGL? 2. Shaders ftw
- 4. @g33konaut Our plan fortoday... 1. What is WebGL? 2. Shaders ftw 3. Let’s write some shaders!
- 5.
- 6. @g33konaut Why do weneed a GPU? CPU GPU
- 7. @g33konaut Why do weneed 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 weneed a GPU? CPU GPU
- 9. @g33konaut This is whatWebGL can do...
- 10. @g33konaut What do weneed for our WebGL laboratory? 1. A <canvas>
- 11. @g33konaut What do weneed for our WebGL laboratory? 1. A <canvas> 2. A WebGL context canvas.getContext(‘webgl’);
- 12. @g33konaut What do weneed for our WebGL laboratory? 1. A <canvas> 2. A WebGL context canvas.getContext(‘webgl’); 3. Vertices, Shaders, ...
- 13.
- 14. @g33konaut This is howWebGL works Vertices GLBuffers Vertex Shader Fragment Shader Pixels GLSL code
- 15. @g33konaut Vertices? Buffers? Shaders?GLSL? WAT?!
- 16. @g33konaut Breathe. It willbe fine. I promise.
- 17. @g33konaut Breathe. It willbe fine. I promise.
- 18. @g33konaut Breathe. It willbe fine. I promise.
- 19. @g33konaut Okay, let’s talkabout vertices
- 20. @g33konaut Vertices are pointsin 3D space.
- 21. @g33konaut We can alsouse 2D coordinates. (1,1) (-1,1) (-1,-1) (1,-1)
- 22. @g33konaut (1,1) (-1,1) (-1,-1) (1,-1) We putthem 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 movesthe data to the GPU memory // create an empty buffer const vBuf = gl.createBuffer();
- 24. @g33konaut A buffer movesthe 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 movesthe 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 happenshere? A.x A.y B.x B.y ... ... ... GL Buffer (Vertices)
- 27. @g33konaut So what happenshere? 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 happenshere? 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 happenshere? 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 someshaders!
- 31. @g33konaut A shader isa function, run on the GPU function (x, y, p1, p2, ...) { }
- 32. @g33konaut A vertex shaderreturns coordinates to draw at function (x, y, p1, p2, ...) { // do stuff return [x, y]; }
- 33. @g33konaut A fragment shaderreturns the colour to draw function (x, y, p1, p2, ...) { // do stuff return [red, green, blue, alpha]; }
- 34. @g33konaut The 4 typesof inputs for shaders ● const A constant
- 35. @g33konaut The 4 typesof inputs for shaders ● const A constant ● uniform A “global” variable
- 36. @g33konaut The 4 typesof inputs for shaders ● const A constant ● uniform A “global” variable ● attribute A per-vertex variable
- 37. @g33konaut The 4 typesof 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, timeto code! avgp.github.io/shaderpad
- 39. @g33konaut Go and playwith shaders!