KaoShader library

($ => {

  $.fn.KaoShader = function(options) {
    return this
      .filter('canvas:not(.KaoShader)')
      .each((i,elem) => {
        var default_options = {
          shaderV : `
            attribute vec3 aVertexPosition;
            varying vec2 c_pos;
            varying vec2 a_pos;

            void main(void) {
                gl_Position = vec4(aVertexPosition, 1.0);
                c_pos = vec2(gl_Position.xy);
                a_pos = vec2(gl_Position.xy) / 2. + vec2(.5,.5);
            }
          `,
          shaderF : `

          `,
          vertices : [
            -1.0, -1.0,  0.0,
             1.0, -1.0,  0.0,
             1.0,  1.0,  0.0,
            -1.0,  1.0,  0.0,
            -1.0, -1.0,  0.0,
          ],
          resolution : [],
          clear_color : [0.0, 0.0, 0.0, 1.0],
          uniforms : {},
        };
        var data = $.extend(true,{},default_options,options);

        data.canvas = elem;
        data.gl = data.canvas.getContext('webgl');

        var vertexShader = data.gl.createShader(data.gl.VERTEX_SHADER);
        data.gl.shaderSource(vertexShader,data.shaderV);
        data.gl.compileShader(vertexShader);
        if (!data.gl.getShaderParameter(vertexShader, data.gl.COMPILE_STATUS)) {
            throw new Error(`Error initializing vertex shader\n${data.gl.getShaderInfoLog(vertexShader)}`);
        }

        var fragmentShader = data.gl.createShader(data.gl.FRAGMENT_SHADER);
        data.gl.shaderSource(fragmentShader,data.shaderF);
        data.gl.compileShader(fragmentShader);
        if (!data.gl.getShaderParameter(fragmentShader, data.gl.COMPILE_STATUS)) {
            throw new Error(`Error initializing fragment shader\n${data.gl.getShaderInfoLog(fragmentShader)}`);
        }

        data.program = data.gl.createProgram();
        data.gl.attachShader(data.program, vertexShader);
        data.gl.attachShader(data.program, fragmentShader);
        data.gl.linkProgram(data.program);

        if (!data.gl.getProgramParameter(data.program, data.gl.LINK_STATUS)) {
            throw new Error("Could not initialise shaders");
        }

        data.gl.useProgram(data.program);
        data.gl.clearColor(...data.clear_color);
        data.gl.enable(data.gl.DEPTH_TEST);

        var vertexPositionAttribute = data.gl.getAttribLocation(data.program, "aVertexPosition");
        data.gl.enableVertexAttribArray(vertexPositionAttribute);
        buffer = data.gl.createBuffer();
        data.gl.bindBuffer(data.gl.ARRAY_BUFFER, buffer);

        data.gl.bufferData(data.gl.ARRAY_BUFFER, new Float32Array(data.vertices), data.gl.STATIC_DRAW);
        data.gl.vertexAttribPointer(vertexPositionAttribute, 3, data.gl.FLOAT, false, 0, 0);

        data.init_uniform = name => data.uniform_locations[name] = data.gl.getUniformLocation(data.program,name);
        data.uniform_locations = {};
        Object.keys(data.uniforms).forEach(data.init_uniform);

        $(data.canvas).addClass('KaoShader')
                      .data('KaoShader',data)
                      .KaoShader_input(data.uniforms)
                      .KaoShader_resize()
                      .KaoShader_draw();
      });
  };

  $.fn.KaoShader_input = function(uniforms = {}) {
    return this
      .filter('canvas.KaoShader')
      .each((i,elem) => {
        var data = $(elem).data('KaoShader');

        data.uniforms = uniforms;
        Object.keys(data.uniforms).forEach(name => {
          data.gl[$.isArray(data.uniforms[name]) ? 'uniform1fv' : 'uniform1f'](data.uniform_locations[name],data.uniforms[name]);
        });
      });
  };

  $.fn.KaoShader_resize = function() {
    return this
      .filter('canvas.KaoShader')
      .each((i,elem) => {
        var data = $(elem).data('KaoShader');

        data.canvas.width = data.resolution[0] || $(data.canvas).outerWidth();
        data.canvas.height = data.resolution[1] || $(data.canvas).outerHeight();

        data.gl.viewport(0,0,data.canvas.width,data.canvas.height);
      });
  };

  $.fn.KaoShader_draw = function() {
    return this
      .filter('canvas.KaoShader')
      .each((i,elem) => {
        var data = $(elem).data('KaoShader');

        data.gl.clear(data.gl.COLOR_BUFFER_BIT | data.gl.DEPTH_BUFFER_BIT);
        data.gl.drawArrays(data.gl.TRIANGLE_STRIP, 0, data.vertices.length  / 3);
      });
  };

  $(window).on('resize',() => {
    $('canvas.KaoShader').KaoShader_resize().KaoShader_draw();
  });
})(jQuery);