WebGL - Square

gistfile1.js

/*
* computer graphics
*
* Licensed under the MIT:
* http://www.opensource.org/licenses/mit-license.php
*
*
* Authors:
*
*     Valentina Rotkin <[email protected]>
*     Lukas Magedanz <[email protected]>
*     André König <[email protected]>
*
* Copyright (c) University of Applied Sciences Bremen
*
*/
(function () {

	var canvas = document.querySelector('#project-one-a');
	var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

	if (!gl) {
		throw new Error('Oh no your browser does not support WebGL.');
	}

	gl.viewport(0, 0, canvas.width, canvas.height);
	gl.clearColor(0, 0.5, 0, 1);
	gl.clear(gl.COLOR_BUFFER_BIT);

	// Shader initialisation
	var colorShaderSource = document.querySelector('#fragment-colorer').innerHTML;
	var colorShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(colorShader, colorShaderSource);
	gl.compileShader(colorShader);

	var vertexShaderSource = document.querySelector('#vertex').innerHTML;
	var vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, vertexShaderSource);
	gl.compileShader(vertexShader);

	var program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, colorShader);
	gl.linkProgram(program);

	var vertices = new Float32Array([
		0.0, 0.0, 1.0, 1.0, 1.0, 0.0,
		0.0, 0.0, 0.0, 1.0, 1.0, 1.0,
		0.0, 0.0, -1.0, 0.0, 0.0, 1.0 // Triangle FTW!
	]);

	var buffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
	gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

	gl.useProgram(program);

	program.uColor = gl.getUniformLocation(program, 'uCooolor');
	gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]);

	program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
	gl.enableVertexAttribArray(program.aVertexPosition);
	gl.vertexAttribPointer(program.aVertexPosition, 2, gl.FLOAT, false, 0, 0);

	gl.drawArrays(gl.TRIANGLES, 0, vertices.length / 2);
}());