WebGl-Library

<script type="text/javascript" src="https://AntVil.github.io/WebGl-Library/src/WebGl-Library.js"></script>

precision mediump float;

//attributes

//varyings

//uniforms

//always needed with exact same name!!!
uniform mat4 projectionMatrix;

void main(){
    //setting varyings

    //setting vertexPosition
    gl_Position = projectionMatrix * ...;
}

precision mediump float;

//varyings (same!)

//uniforms

void main(){
    //setting fragmentColor
    gl_FragColor = ...;
}

//get canvas to render to
var can = document.getElementById("canvas");
//create context
var c = new WebGlContext(can);

//setting the background color
c.clearColor(0.0, 0.0, 0.0, 1.0);

//creating an element
var element = c.createElement();

//declaring attributes (of vertexShader)
element.attributes = [
    c.createAttribute([name], [size]),
];

//declaring uniforms (of vertexShader & fragmentShader)
element.uniforms = [
    c.createUniform([name], [type])
];
//setting values of uniforms

//setting the value of vertices (in the order of attributes array)
element.vertices = [
    ...
];

//declaring which vertices make up a triangle
element.indicies = [
    ...
];

//adding shaders to element and adding element to the internal list of elements
var vertexShaderSrc = document.getElementById("vertexShader").innerHTML;
var fragmentShaderSrc = document.getElementById("fragmentShader").innerHTML;
c.addShaders(element, vertexShaderSrc, fragmentShaderSrc);
c.addElement(element);

//clear screen
c.clear();

//render to screen
c.renderFrame();