Re: [w3c/webcomponents] Considering Shader Module Types (#853)

I was wondering about this is as well. Maybe it could export a function that compiles the shader for a given context.

Something like:

```js
const type = 'VERTEX_SHADER'; // or 'FRAGMENT_SHADER' accordingly
const source = `<the file contents>`;

/**
  * Compiles the shader.
  * @param {WebGLRenderingContext} context - The WebGL context to create the shader with.
  */  
export default function compile(context) {
  const shader = context.createShader(context[type]);
  context.shaderSource(shader, source);
  context.compileShader(shader);

  if (!context.getShaderParameter(shader, context.COMPILE_STATUS)) {
    const log = context.getShaderInfoLog(shader);
    context.deleteShader(shader);
    throw new Error(`Error compiling shader: ${log}`);
  }

  return shader;
}
```

Then there is the linking boilerplate. I don't know how you would manage this because it can be any combination of fragment and vertex shader. So you would almost need another type to import from (a WebGL Program file, a single file that refers to a fragment and vertex shader). As far as I know there is no convention for this, I could be wrong though. 

That boiler plate usually looks something like this:
```js
function createProgram(context, vShader, fShader) {
  const program = context.createProgram();
  context.attachShader(program, vShader);
  context.attachShader(program, fShader);
  context.linkProgram(program);
  context.validateProgram(program);

  if (!context.getProgramParameter(program, context.LINK_STATUS)) {
    const log = context.getProgramInfoLog(program);
    context.deleteProgram(program);
    throw new Error(`Error linking program: ${log}`);
  }

  return program;
}
```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/853#issuecomment-553404246