The document provides an introduction to WebGL for novice programmers. It begins with an overview and introduction to key WebGL concepts like shaders, vertices, and fragments. It then demonstrates how to render a colored triangle in WebGL step-by-step, explaining how to set up the rendering context, compile and link shaders, specify attributes and uniforms, and render objects. The document concludes by recommending several resources for learning more about WebGL programming.

1. A Novice’s Guide to WebGL
@Krzychukula

2. Plan
1. Intro
2. How it all works
3. Triangle
4. Multiple colours
5. Matrix
6. Learn

3. ASK QUESTIONS!

5. Data Visualisation

6. What my learning looked
like?

7. But this is just a hobby

8. OpenGL books
Courses
Three.js
Shaders Workshop
WebGL workshop
WebGL Books

9. Disclaimer: mental models
over correctness

10. Who this talk is for?

11. [-1 …. 0 …. 1]

12. NO SHINY DEMOS

15. Dreyfus model of skill
acquisition

16. Masters of DOOM
YOU
me

17. I realised that we are all
Novices!

18. Novice WebGL Programmer!

19. Let’s start

20. 2. How it all works?

21. Back in the old days…

23. Graphic Card

25. Map Reduce?

28. What is WebGL?

29. History

30. Shaders

31. Vertex
Fragment

32. Vertex Shader
Fragment Shader

33. It has to be FAST

34. Vertex Shader
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
}

35. Vertex Shader
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
}

36. Fragment Shader
void main() {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}

38. Fragment Shader
uniform vec4 a_Color;
void main() {
gl_FragColor = a_Color;
}

39. But… What about JS?

40. Context
var gl = canvas.getContext("webgl");

41. Compile Vertex Shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertexShader, `
void main() { … }
`)
gl.compileShader(vertexShader)

42. Compile Fragment Shader
var fragShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragShader, `
void main() { … }
`)
gl.compileShader(fragShader)

43. Program
var program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)

44. u_Color
var u_Color = gl.getUniformLocation(program,
‘u_Color’);
gl.uniform4fv(u_Color, [0.0, 1.0, 0.0, 1.0]);

45. Fragment Shader
uniform vec4 u_Color;
void main() {
gl_FragColor = u_Color;
}

48. 1
-1
1

50. 0, 0.5

51. -0.5, -0.5
0, 0.5

52. -0.5, -0.5
0, 0.5
0.5, -0.5

53. gl_Position = vec4(0.0, 0.5, 0.0, 1.0);
-0.5, -0.5
0, 0.5
-0.5, 0.5

54. gl_Position = vec4(0.0, 0.5, 0.0, 1.0);
gl_Position = vec4(-0.5, -0.5, 0.0, 1.0); gl_Position = vec4(0.5, -0.5, 0.0, 1.0);
-0.5, -0.5
0, 0.5
-0.5, 0.5

55. var positions = new Float32Array([
0.0, 0.5, 0.0, 1.0,
-0.5, -0.5, 0.0, 1.0,
0.5, -0.5, 0.0, 1.0
]);

56. Buffers

57. var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)

58. var positions = new Float32Array([
0.0, 0.5, 0.0, 1.0,
-0.5, -0.5, 0.0, 1.0,
0.5, -0.5, 0.0, 1.0
]);

59. var a_Position = gl.getAttribLocation(program, ‘a_Position')
gl.enableVertexAttribArray(a_Position)
gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)

60. gl.drawArrays(gl.TRIANGLES, 0, 3)

62. Vertex Shader
Fragment Shaders

64. Fragment Shader
attribute vec4 a_Color;
void main() {
gl_FragColor = a_Color;
}

65. varyingVertex Shaders
Fragment Shaders
attributes

66. Vertex Shader
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
v_Color = a_Color;
}

67. Vertex Shader
void main(vec4 a_Position, vec4 a_Color) {
return {
gl_Position: a_Position,
v_Color: a_Color
};
}

68. v_Color = vec4(1.0, 0.0, 0.0, 1.0);
v_Color = vec4(0.0, 1.0, 0.0, 1.0); v_Color = vec4(0.0, 0.0, 1.0, 1.0);

69. What about the middle?

72. Fragment Shader
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}

74. var colors = new Float32Array([
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
]);

75. var buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)

76. var a_Color = gl.getAttribLocation(program, ‘a_Color')
gl.enableVertexAttribArray(a_Color)
gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)

77. gl.drawArrays(gl.TRIANGLES, 0, 3)

79. Almost the end

80. Matrix

81. diffX
diffX
rotateAngle
scaleX
scaleY

82. Matrix

83. Don’t worry about Math
Linear Algebra

84. var modelMatrix = new Matrix4()
modelMatrix.translate(x, 0, 0, 1)
modelMatrix.rotate(angle, 0, 0, 1)
In JavaScript

85. Vertex Shader
attribute vec4 a_Position;
uniform mat4 u_modelMatrix;
void main() {
gl_Position = u_modelMatrix * a_Position;
}

86. What to learn from?

87. WebGL Beginner’s Guide
Diego Cantor & Brandon Jones

88. Interactive 3D Graphics
Eric Haines & Gundega Dekena

89. WebGL Programming
Guide
Kouichi Matsuda & Rodger Lea

90. The End
@Krzychukula

91. https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/
https://www.chromeexperiments.com/globe
https://codepen.io/krzychukula/pen/qmZaMz?editors=0010 Triangle
https://codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors
https://codepen.io/krzychukula/pen/OmXgKe?editors=0010 Triangle 3 colors
in one buffer
https://www.packtpub.com/game-development/webgl-beginners-guide
https://www.udacity.com/course/interactive-3d-graphics--cs291
https://sites.google.com/site/webglbook/

92. QA (ideas)
Libraries?
How shadertoy works?
How to use one buffer for vertex and colors data?
How textures work?
How many lines of code those examples have?