A Novice's Guide to WebGL

Introduction to 3D, shaders and WebGL.

Transcript

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 YOUme
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. varying Vertex 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?