WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 elements.
You write WebGL directly to the GPU. This means it affects two things: the performance and capabilities of animations and the way you write your code. The GPU is really good in mathematical operations. Since animations are just a bunch of mathematical operations, they run very smooth. But you also have to write you code accordingly. Part of your WebGL code consists of OpenGL Shading Language. With OpenGL Shading Language (GLSL) you can write shaders. Shaders come in two forms vertex and fragment. A vertex shader calculates where each point of a shape(vertex) will be drawn. The Fragment shader then decides on what happens in between the shape.
WebGL is pretty well supported by most browsers. Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+, and Microsoft Edge build 10240+; however, the user's device must also have hardware that supports these features.
It works like this, you pass in data, to a vertex shader, then a fragment shader and out come graphics.
Laplace Edge
dither godrays
contour lines
