As stated, the driver contains a shader compiler. Personally, I like to see examples, so here's a snippet of code that would compile a WebGL shader:
var gl = canvas.getContext('webgl');
var vShaderSource = document.getElementById('vShader');
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vShaderSource);
gl.compileShader(vShaderSource);
"vShader" is the id of a <script> tag of type "x-shader/x-vertex". Get a WebGL context, get the shader source, create a shader object, bind the source to the shader, then compile the source.
Re:The Book of Shaders
by coffeeaddicted on Wednesday November 01, 2017 @07:04PM
(#15606294)
The compiler is in the graphic card drivers. You pass on shader source-code to it in text-form.
Kind of. The browser WebGL implementation compiles them, producing shaders suitable the native driver shader compiler (conversion from OpenGL to D3D, rewrite texture/buffer access for bounds checking as necessary, etc).
Re:The Book of Shaders
by coffeeaddicted on Thursday November 02, 2017 @06:55AM
(#15609260)
Ah yes, you are right, WebGL shaders are translated first to GLSL or HLSL with a lib like ANGLE (https://github.com/google/angle). And that source is then send on to the drivers which compile it again to assembler for the graphic card. And there again are some differences between GLSL/HLSL it seems. If I remember right in GLSL the drivers do the work while in HLSL some DLL from MS produces another intermediate format (which I just found out seems to be even open source: https://github.com/Microsoft/DirectXShaderCompiler).
No need for shame, we are all learning things! From MDN,
>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.
I'm also still somewhat confused as to how the live code samples are achieved. Are they being compiled client side somehow? I don't know very much about WebGL.