Add support for WebGL2

[vorg]

To make this transition manageable i propose following steps

• [x] update this repo to ESM
• [x] port VAO (#85) from 85-vao-temp branch
• [ ] decide on UBO support class/object
• [ ] decouple shader stage parameters from source so we can generate GLSL100 and GLSL300 source code depending on WebGL version

//pex-context@2 for webgl1
ctx.pipeline({
  frag: `....`
})

//pex-context@3 for webgl1/2
ctx.pipeline({
  extensions: [],
  uniforms: [],
  vert: {
    ins: [],
    outs: [],
    src: []
  },
  frag: {    
     outs: []
     src: ``
  }
})

//or more webgl-y
ctx.pipeline({
  extensions: [],
  uniforms: [],
  attributes: [],
  varyings: [],
  outs: [],
  vert: src,
  frag: src
})

The questions is why would we need that?

• to run on iOS < 15 devices with no WebGL 2 (apparently still about 40% as of 2022-Q1)
• to ease pain of porting every single PBR/MRT shader as they use extension that is built-in in WebGL2 (draw buffers, derivatives etc)

[vorg]

Another use case for more structured shader code is similarity to shader graph nodes

module.exports = (node, graph) => {
  const vec3In = node.in("vec3", [1, 1, 1, 1]);
  const xOut = node.out("x", 1);
  const yOut = node.out("y", 1);
  const zOut = node.out("z", 1);

  node.sg = {
    ins: {
      vec3: { type: "vec3", port: vec3In },
    },
    outs: {
      x: { type: "float", port: xOut },
      y: { type: "float", port: yOut },
      z: { type: "float", port: zOut },
    },
    code: (sg) => `
      ${sg.outs.x.type} ${sg.outs.x.var} = ${sg.ins.vec3.var}.x;
      ${sg.outs.y.type} ${sg.outs.y.var} = ${sg.ins.vec3.var}.y;
      ${sg.outs.z.type} ${sg.outs.z.var} = ${sg.ins.vec3.var}.z;
    `,
  };
};

[vorg]

It looks like BabylonJS doesn't care about this kind of issues and have most shaders still in GLSL100 with some in GLSL300.

[vorg]

Another thing to consider is not only how you create the source code but also how you provide all those attributes and uniforms (buffers).

In WebGL you have attributes and uniforms In WebGL2 you have attributes, uniforms and uniform buffers In WebGPU you have bindings (to uniform buffers, textures and vertex buffers)