Draw a Diamond

This JavaScript program demonstrates how to draw a diamond in a WebGL program.

DrawADiamond.html

<!DOCTYPE html>
<html>
  <head>
	<title>XoaX.net's WebGL</title>
    <script type="text/javascript">

function CreateShaderProgram(qGL, sVertexShader, sFragmentShader) {
	var qProgram = qGL.createProgram();
	var pfnAddShader = function(iShaderType, sCode) {
		var qShader = qGL.createShader((iShaderType == 'vertex') ? qGL.VERTEX_SHADER : qGL.FRAGMENT_SHADER);
		qGL.shaderSource(qShader, sCode);
		qGL.compileShader(qShader);
		if (!qGL.getShaderParameter(qShader, qGL.COMPILE_STATUS)) {
			throw "Could not compile "+iShaderType+" shader:\n\n"+qGL.getShaderInfoLog(qShader);
		}
		qGL.attachShader(qProgram, qShader);
	};
	pfnAddShader('vertex', sVertexShader);
	pfnAddShader('fragment', sFragmentShader);
	qGL.linkProgram(qProgram);
	if (!qGL.getProgramParameter(qProgram, qGL.LINK_STATUS)) {
		throw "Could not link the shader program!";
	}
	return qProgram;
}

function Draw() {
	try {
		var qGL = document.getElementById("idCanvas").getContext("webgl");
		if (!qGL) { throw "Failed getContext() for WebGL!"; }
	} catch (qError) {
		throw "Your web browser does not support WebGL!";
	}

	qGL.clearColor(0.0, 0.25, 0.5, 1);
	qGL.clear(qGL.COLOR_BUFFER_BIT);

	var qProgram = CreateShaderProgram(qGL,
		"attribute vec4 afVertices;"+
		"void main() {"+
		"	gl_Position = vec4(afVertices);"+
		"}",
		"void main() {"+
		"	gl_FragColor = vec4(1.0, 0.75, 0.5, 1.0);"+
		"}"
	);
	qGL.useProgram(qProgram);

    // Set the attributes to draw a strip with 2 triangles.
	qGL.bindBuffer(qGL.ARRAY_BUFFER, qGL.createBuffer());
	qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array([
		-1,  0,  0,  1.5,
		 0, -1,  0,  1.5,
		 0,  1,  0,  1.5,
		 1,  0,  0,  1.5
	]), qGL.STATIC_DRAW);
	var qAttributes = qGL.getAttribLocation(qProgram, "afVertices");
	qGL.enableVertexAttribArray(qAttributes);
	qGL.vertexAttribPointer(qAttributes, 4, qGL.FLOAT, false, 0, 0);
	qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4);
}

function Initialization() {
	try {
		Draw();
	} catch (qError) {
		alert("Error - "+qError);
	}
}

setTimeout(Initialization, 20);

    </script>
  </head>
  <body>

    <canvas id="idCanvas" width="400" height="400" style="border:1px red solid;"></canvas>
  </body>
</html>

WebGL JavaScript

Draw a Diamond

DrawADiamond.html

Output