Applying a Single Image Texture

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

SingleTexture.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>XoaX.net's WebGL</title>
</head>
<body>
    <script type="text/javascript" src="SingleTexture.js"></script>
    <canvas id="CanvasGL" width="442" height="640" style="border:1px red solid;"></canvas>
</body>
</html>

SingleTexture.js

function Render() {
	try {
		// Get the WebGL context
		var qGL = document.getElementById("CanvasGL").getContext("webgl");
		if (!qGL) {
			throw "WebGL is not supported by your web browser.";
		}
		qGL.clearColor(0.85, 0.85, 0.85, 1.0);
        qGL.clear(qGL.COLOR_BUFFER_BIT);

		// Create the vertex shader
		var qVS = qGL.createShader(qGL.VERTEX_SHADER);
		qGL.shaderSource(qVS,
			"attribute vec2 aVertexPosition;"+
			"varying vec2 vTexCoord;"+
			"void main() {"+
			"   /* Map [-1 ,1] to [0, 1] for textures for both x and y*/"+
			"	vTexCoord = aVertexPosition*.5 + .5;"+
			"	gl_Position = vec4(aVertexPosition, 0, 1);"+
			"}");
		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,
			"precision mediump float;"+
			"varying vec2 vTexCoord;"+
			"uniform sampler2D uSampler;"+
			"void main() {"+
			"	gl_FragColor = texture2D(uSampler, vTexCoord);"+
			"}");
		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);

		var qVertexBuffer = qGL.createBuffer();
		qGL.bindBuffer(qGL.ARRAY_BUFFER, qVertexBuffer);
		qGL.bufferData(qGL.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), qGL.STATIC_DRAW);
		qVertexBuffer.itemSize = 2;
		qVertexBuffer.numItems = 4;
		qProgram.vertexPosAttrib = qGL.getAttribLocation(qProgram, 'aVertexPosition');
		qProgram.samplerUniform = qGL.getUniformLocation(qProgram, 'uSampler');
		qGL.enableVertexAttribArray(qProgram.vertexPosArray);
		qGL.vertexAttribPointer(qProgram.vertexPosAttrib, qVertexBuffer.itemSize, qGL.FLOAT, false, 0, 0);

		var img = new Image();
		img.onload = function() {
			qGL.activeTexture(qGL.TEXTURE0);
			qGL.bindTexture(qGL.TEXTURE_2D, qGL.createTexture());
			qGL.pixelStorei(qGL.UNPACK_FLIP_Y_WEBGL, true);
			qGL.texImage2D(qGL.TEXTURE_2D, 0, qGL.RGBA, qGL.RGBA, qGL.UNSIGNED_BYTE, img);
			qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MAG_FILTER, qGL.LINEAR);
			qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MIN_FILTER, qGL.LINEAR);
			qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_WRAP_S, qGL.CLAMP_TO_EDGE);
			qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_WRAP_T, qGL.CLAMP_TO_EDGE);
			qGL.uniform1i(qProgram.samplerUniform, 0);
			qGL.drawArrays(qGL.TRIANGLE_STRIP, 0, qVertexBuffer.numItems);
		}
		img.src = 'TheAnnunciation_PetrusVanSchendel.png';

	} catch (qEx) {
		alert("Error: " + qEx);
	}
}

window.onload = Render;

WebGL JavaScript

Applying a Single Image Texture

SingleTexture.html

SingleTexture.js

Output