JavaScript
let canvas = document.getElementById('canvas');
let gl = canvas.getContext('webgl');
// Setup the data to draw an "X"
let vertices = [
58.12109375, 18.71875, 63.986328125, 29.50390625, 69.8515625, 18.71875, 77.263671875, 18.71875, 68.154296875, 34.23046875, 77.5, 50, 70.001953125,50, 63.986328125, 39.04296875, 57.970703125, 50, 50.47265625, 50, 59.818359375, 34.23046875, 50.708984375, 18.71875, 58.12109375, 18.71875
];
let indices = [11, 0, 1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 1, 1, 3, 4, 4, 6, 7, 7, 9, 10, 10, 1, 4, 4, 7, 10];
// Vertex buffer
let vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Unbind
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Index bufer
let indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
// Unbind the buffer
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
// Vertex shader source code
let vertCode = `attribute vec2 a_position;
uniform vec2 u_resolution;
void main(void) {
vec2 zToOne = a_position / u_resolution;
vec2 zToTwo = zToOne * 2.0;
vec2 clipSpace = zToTwo - 1.0;
// 0,0 is bottom left. Flip the Y so 0,0 is top left...
gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1.0);
}`;
// Fragment shader source code
let fragCode = `void main(void) {gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);}`;
// Create a vertex shader object
let vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
// Create fragment shader object
let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
// Create the gl program
let shaderProgram = gl.createProgram();
// Attach the sahders to the program
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram,...