WebGL Vertex Buffer Capability Test

by Subhasish2015

HTML

<input type="number" id="numOfGrids"/>
	<canvas id="canvas"></canvas>
<script type="vertexShader" id="vertexShader">
	#version 300 es
	in vec3 position;
	in vec4 color;
	out vec4 fcolor;
	void main () {
		gl_Position = vec4(position, 1.0);
		fcolor = color;
	}
</script>

<script type="fragmentShader" id="fragmentShader">
	#version 300 es
	precision mediump float;
	in vec4 fcolor;
	out vec4 finalColor;
	void main () {
		finalColor = vec4(fcolor);
	}
</script>

JavaScript

var gl, canvas;
	//resize canvas
	

const FLOAT_SIZE = 4;

var handleWebGLError = function (type, obj) {
	if (type === 'shader') {
		if (!gl.getShaderParameter(obj, gl.COMPILE_STATUS)) {
			console.error(gl.getShaderInfoLog(obj));
			return null;
		}
	} else if (type === 'program') {
		if (!gl.getProgramParameter(obj, gl.LINK_STATUS)) {
			console.error(gl.getProgramInfoLog(obj));
			return null;
		}
	}
	
};

var getAndCompileShaders = function (id, type) {
	var shader = gl.createShader(type);
	var shaderText = (document.getElementById(id).text.trim());
	gl.shaderSource(shader, shaderText);
	gl.compileShader(shader);
	handleWebGLError('shader', shader);
	return shader;
};

var getProgram = function (vsId, fsId, use) {
	var vs = getAndCompileShaders(vsId, gl.VERTEX_SHADER);
	var fs = getAndCompileShaders(fsId, gl.FRAGMENT_SHADER);
	var program = gl.createProgram();
	gl.attachShader(program, vs);
	gl.attachShader(program, fs);
	gl.linkProgram(program);
	handleWebGLError('program', program);
	if (use) {
		gl.useProgram(program);
	}
	return program;
};

var createBuffer = function (gl, coords, isStatic) {
	var b = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, b);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), isStatic ? gl.STATIC_DRAW : gl.DYNAMIC_DRAW);
	return b;
};

var createBuffers = function (gl, coordsArr, isStatic) {
	var bufferArr = [];
	coordsArr.forEach (function (coords) {
		var b = gl.createBuffer();
		gl.bindBuffer(gl.ARRAY_BUFFER, b);
		gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(coords), isStatic ? gl.STATIC_DRAW : gl.DYNAMIC_DRAW);
		bufferArr.push(b);
	});
	return bufferArr;
};

var initWebGLCanvas = function (canvasId) {
	var canvas = document.getElementById(canvasId);
	canvas.width = window.innerWidth * 0.90;
	canvas.height = window.innerHeight * 0.90;
	//get Context
	var gl = canvas.getContext('webgl2');
	//assign a default color 
	gl.clearColor(0.002, 0.12, 0.3, 1.0);
	gl.clear(gl.COLOR_BUFFER_BIT);
	return gl;
};

var...