WebGL 1.0 Simple Boilerplate

boilerplate-gl.js

let canvas, gl;
let lastTime = 0;

const vShaderSource = `
	precision mediump float;
	attribute vec2 vtxPosition;
	void main()
	{
		gl_Position = vec4(vtxPosition, 0.0, 1.0);
	}
`;
const fShaderSource = `
	precision mediump float;
	uniform vec2 uResolution;
	void main()
	{
		vec2 uv = gl_FragCoord.xy / uResolution;

		if (length(uv - 0.5) > 0.25) discard;

		gl_FragColor = vec4(uv, 0.0, 1.0);	
	}
`;

function step(time)
{
	gl.clear(gl.COLOR_BUFFER_BIT);
	gl.drawArrays(gl.TRIANGLES, 0, 3);
	requestAnimationFrame(step);
}

window.onload = function () 
{ 
	canvas = document.getElementById('canvas');
	gl = canvas.getContext('webgl');

	let program = gl.createProgram();
	let vs = gl.createShader(gl.VERTEX_SHADER);
	let fs = gl.createShader(gl.FRAGMENT_SHADER);

	gl.shaderSource(vs, vShaderSource);
	gl.shaderSource(fs, fShaderSource);
	gl.compileShader(vs);
	gl.compileShader(fs);

	if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
	{
		console.error('Vertex Shader Error:\n', gl.getShaderInfoLog(vs));
		return;
	}

	if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
	{
		console.error('Fragment Shader Error:\n', gl.getShaderInfoLog(fs));
		return;
	}

	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);

	if (!gl.getProgramParameter(program, gl.LINK_STATUS))
	{
		console.error('Program Link Error:\n', gl.getProgramInfoLog(program));
		return;
	}

	gl.useProgram(program);

	let vbo = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER,vbo);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
		-1, +1,
		-1, -7,
		+7, +7
	]), gl.STATIC_DRAW);
	gl.bindAttribLocation(program, 'vtxPosition', 0);
	gl.enableVertexAttribArray(0);
	gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 8, 0);
	gl.uniform2f(gl.getUniformLocation(program, 'uResolution'), canvas.width, canvas.height);
	gl.clearColor(0.0, 0.0, 0.0, 1.0);
	step(0); 
};