Draw a Cross

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

DrawACross.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>XoaX.net's WebGL</title>
</head>
<body>
    <script type="text/javascript" src="DrawACross.js"></script>
    <canvas id="idCanvasGL" width="512" height="512"></canvas>
</body>
</html>

DrawACross.js

function Start() {
	try {
		// Get the WebGL context
		var qGL = document.getElementById("idCanvasGL").getContext("webgl");
		if (!qGL) {
			throw "WebGL is not supported by your web browser.";
		}

		// Create the vertex shader
		var qVS = qGL.createShader(qGL.VERTEX_SHADER);
		// w = 5.0 scales by 1/5
		qGL.shaderSource(qVS,
			"attribute vec2 qVertex;"+
			"void main() {"+
			"	gl_Position = vec4(qVertex, 0.0, 5.0);"+
			"}");
		qGL.compileShader(qVS);
		if (!qGL.getShaderParameter(qVS, qGL.COMPILE_STATUS)) {
			throw "Vertex shader compiler failed: "+qGL.getShaderInfoLog(qVS);
		}

		// Create the fragment shader
		var qFS = qGL.createShader(qGL.FRAGMENT_SHADER);
		qGL.shaderSource(qFS,
			"void main() {"+
			"	gl_FragColor = vec4(0.4, 0.3, 0.0, 1.0);"+
			"}");
		qGL.compileShader(qFS);
		if (!qGL.getShaderParameter(qFS, qGL.COMPILE_STATUS)) {
			throw "Fragment shader compiler failed:"+qGL.getShaderInfoLog(qFS);
		}

		// Create and link the program
		var qProgram = qGL.createProgram();
		qGL.attachShader(qProgram, qVS);
		qGL.attachShader(qProgram, qFS);
		qGL.linkProgram(qProgram);
		if (!qGL.getProgramParameter(qProgram, qGL.LINK_STATUS)) {
			throw "Program linker failed!";
		}
		qGL.useProgram(qProgram);

		// Draw
		qGL.clearColor(.5, 0.8, 0.5, 1);
		qGL.clear(qGL.COLOR_BUFFER_BIT);
		qGL.bindBuffer(qGL.ARRAY_BUFFER, qGL.createBuffer());
		qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array([
				-.5, -4.5,
				.5, -4.5,
				-.5, 2.5,
				.5, 2.5,
				2.5, -.5,
				2.5, .5,
				.5, -.5,
				.5, .5,
				-2.5, .5,
				-2.5, -.5,
				-.5, .5,
				-.5, -.5,
			]), qGL.STATIC_DRAW);
		var qAttr = qGL.getAttribLocation(qProgram, "qVertex");
		qGL.enableVertexAttribArray(qAttr);
		qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 0);
		qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4);
		qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 32);
		qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4);
		qGL.vertexAttribPointer(qAttr, 2, qGL.FLOAT, false, 0, 64);
		qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, 4);
	} catch (qEx) {
		alert("Error: " + qEx);
	}
}

window.onload = Start;

WebGL JavaScript

Draw a Cross

DrawACross.html

DrawACross.js

Output