4 ms·

I'm ashamed to admit I was like 4 chapters into this before I realized that the code samples were live. I'm also still somewhat confused as to how the live cod

I'm ashamed to admit I was like 4 chapters into this before I realized that the code samples were live. 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.

eggpy 9y ago
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.
coffeeaddicted 9y ago
The compiler is in the graphic card drivers. You pass on shader source-code to it in text-form.
- fulafel 9y ago
  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).
  - coffeeaddicted 9y ago
    Ah yes, you are right, WebGL shaders are translated first to GLSL or HLSL with a lib like ANGLE (https://github.com/google/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 https://github.com/Microsoft/DirectXShaderCompiler).
khedoros1 9y ago
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.

eggpy 9y ago

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.

coffeeaddicted 9y ago

The compiler is in the graphic card drivers. You pass on shader source-code to it in text-form.

fulafel 9y ago
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).
- coffeeaddicted 9y ago
  Ah yes, you are right, WebGL shaders are translated first to GLSL or HLSL with a lib like ANGLE (https://github.com/google/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 https://github.com/Microsoft/DirectXShaderCompiler).

khedoros1 9y ago

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.