Hacker News new | past | comments | ask | show | jobs | submit login

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.




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.


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).


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: