Introduction to WebGL

Basics of WebGL extended with Shadertoy new project description.

Transcript

1. Introduction to WebGL @Krzychukula
2. Plan 1. Intro 2. How it all works 3. Triangle in WebGL 4. Multiple colours 5. Our own Shadertoy 6. Learn
3. Disclaimer: mental models over correctness
4. NO SHINY DEMOS
5. ASK QUESTIONS!
7. Data Visualisation
8. Shadertoy
12. 2. How it all works?
13. Back in the old days…
15. Graphic Card
17. Map Reduce?
20. What is WebGL?
21. History
22. Shaders
23. Vertex Fragment
24. Vertex Shader Fragment Shader
25. It has to be FAST
26. Vertex Shader void main() { gl_Position = vec4(0.0, 0.0, 0.0, 1.0); }
27. Vertex Shader attribute vec4 a_Position; void main() { gl_Position = a_Position; }
28. Fragment Shader void main() { gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0); }
30. Fragment Shader uniform vec4 u_Color; void main() { gl_FragColor = u_Color; }
31. But… What about JS?
32. Context var gl = canvas.getContext("webgl");
33. Compile Vertex Shader var vertexShader = gl.createShader(gl.VERTEX_SHADER) gl.shaderSource(vertexShader, ` void main() { … } `) gl.compileShader(vertexShader)
34. Compile Fragment Shader var fragShader = gl.createShader(gl.FRAGMENT_SHADER) gl.shaderSource(fragShader, ` void main() { … } `) gl.compileShader(fragShader)
35. Program var program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program)
36. u_Color var u_Color = gl.getUniformLocation(program, ‘u_Color’); gl.uniform4fv(u_Color, [0.0, 1.0, 0.0, 1.0]);
37. Fragment Shader uniform vec4 u_Color; void main() { gl_FragColor = u_Color; }
40. 1 -1 1
42. -0.5, -0.5
43. -0.5, -0.5 0.5, -0.5
44. -0.5, -0.5 0, 0.5 0.5, -0.5
45. gl_Position = vec4(0.0, 0.5, 0.0, 1.0); -0.5, -0.5 0, 0.5 -0.5, 0.5
46. 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
48. var positions = new Float32Array([ -0.5, -0.5, 0.0, 1.0, 0.5, -0.5, 0.0, 1.0, 0.0, 0.5, 0.0, 1.0 ]);
49. Buffers
50. var buffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW)
51. 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 ]);
52. var a_Position = gl.getAttribLocation(program, ‘a_Position') gl.enableVertexAttribArray(a_Position) gl.vertexAttribPointer(a_Position, 4, gl.FLOAT, false, 0, 0)
53. gl.drawArrays(gl.TRIANGLES, 0, 3)
56. Fragment Shader attribute vec4 a_Color; void main() { gl_FragColor = a_Color; }
57. varying Vertex Shaders Fragment Shaders attributes
58. Vertex Shader attribute vec4 a_Position; attribute vec4 a_Color; varying vec4 v_Color; void main() { gl_Position = a_Position; v_Color = a_Color; }
59. Vertex Shader void main(vec4 a_Position, vec4 a_Color) { return { gl_Position: a_Position, v_Color: a_Color }; }
60. 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);
61. What about the middle?
64. Fragment Shader varying vec4 v_Color; void main() { gl_FragColor = v_Color; }
66. 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 ]);
67. var buffer = gl.createBuffer() gl.bindBuffer(gl.ARRAY_BUFFER, buffer) gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW)
68. var a_Color = gl.getAttribLocation(program, ‘a_Color') gl.enableVertexAttribArray(a_Color) gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 0, 0)
69. gl.drawArrays(gl.TRIANGLES, 0, 3)
71. Shadertoy
74. -1, -1 -1, 1 1, 1
75. -1, -1 1, -1 1, 1
76. var vertices = new Float32Array([ // X, Y, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, ]) In JavaScript
77. -1, -1 1, -1 1, 1
78. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { fragColor = vec4(0.0,0.0,1.0,1.0); }
80. out vec4 fragColor
81. in vec2 fragCoord
82. in vec2 iResolution
83. in float iTime
84. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.xy; fragColor = vec4(uv,0.5+0.5*sin(iTime),1.0); }
85. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.xy; fragColor = vec4(uv, 0.5+0.5*sin(iTime),1.0); }
86. fragColor = vec4(uv.r, uv.g, 1.0, 1.0);
87. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = fragCoord.xy / iResolution.xy; fragColor = vec4(uv, 0.5+0.5*sin(iTime), 1.0); }
89. Demo?
90. What to learn from?
91. WebGL Beginner’s Guide Diego Cantor & Brandon Jones
92. Interactive 3D Graphics Eric Haines & Gundega Dekena
93. WebGL Programming Guide Kouichi Matsuda & Rodger Lea
94. The End @Krzychukula
95. https:/ /hacks.mozilla.org/2017 /01/webgl-2-lands-in-firefox/ https:/ /www.chromeexperiments.com/globe https:/ /handmadehero.org/ 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:/ /codepen.io/krzychukula/pen/qVrLww Similar to new Shadertoy in WebGL https:/ /www.shadertoy.com/new https:/ /www.packtpub.com/game-development/webgl-beginners-guide https:/ /www.udacity.com/course/interactive-3d-graphics--cs291 https:/ /sites.google.com/site/webglbook/