Fast track to WebGL
Andrey Monkin
JavaScript developer
About WebGL
WebGL vs Canvas vs SVG
WebGL
SVG
Canvas
Triangles
Dots
Lines
Text
Gradients
Shapes
Canvas
+
DOM API
Why WebGL?
if it only can draw triangles...
Triangle
Vertex
Fragment
JS
(attributes, uniforms)
Vertex shader
(varyings, uniforms)
Fragment shader
(color)
Data flow
Varyings
Vertex shader
attribute vec3 a_point;
attribute vec3 a_color;
varying vec3 v_color;
void main() {
v_color = a_color;
gl_Position = vec4(a_point, 1);
}
Fragment shader
varying vec3 v_color;
void main() {
gl_FragColor = vec4(v_color, 1);
}Do we need varyings?
Sphere #1
Sphere #2
Sphere #3
Spheres
Exciting sample
https://www.shadertoy.com/view/4dSBDt
Thank you!
Questions? :)
Feel free to contact me for any questions:
monkin.andrey@gmail.com
Examples source:
https://github.com/TallinnJS/TallinnJS-WebGL