u01

src/index.html

@@ -4,7 +4,8 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>CG1 MDI</title>
-	<script src="script.js" defer></script>
+	<script src="shader.js"></script>
+	<script src="script.js"></script>
 	<style>
 		body {
 			display: flex;

src/script.js

@@ -0,0 +1,90 @@
+"use strict";
+
+let cv, gl;
+
+let program;
+
+let vertexBuffer;
+
+async function init() {
+	cv = document.getElementById("cv");
+	gl = cv.getContext("webgl");
+
+	if (!gl) {
+		window.alert("WebGL not supported");
+	}
+
+	console.log("compiling shaders...");
+
+	console.log("compiling vertex shader...");
+	let vertexShader = await fetchAndCompileShader(gl, gl.VERTEX_SHADER, "shaders/vertex.glsl");
+
+	console.log("compiling fragment shader...");
+	let fragmentShader = await fetchAndCompileShader(gl, gl.FRAGMENT_SHADER, "shaders/fragment.glsl");
+
+	console.log("linking shader program...");
+	program = linkShaderProgram(gl, vertexShader, fragmentShader);
+
+
+	let triangleVertices = [
+		 // X  // Y  // R // G // B
+		 0.0,  0.5,  0.0, 1.0, 1.0,
+		-0.5, -0.5,  1.0, 0.0, 1.0,
+		 0.5, -0.5,  1.0, 1.0, 0.0
+	];
+
+	console.log("creating vertex buffer");
+
+	vertexBuffer = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
+
+	// get location of vertPosition attribute
+	let positionAttribLocation = gl.getAttribLocation(program, "vertPosition");
+
+	gl.vertexAttribPointer(
+		positionAttribLocation, // which attribute is read
+		2, // number of values to read
+		gl.FLOAT, // type of values
+		gl.FALSE, // whether to normalize
+		5 * Float32Array.BYTES_PER_ELEMENT, // size of individual vertex / distance between values to read
+		0 // offset where to start reading
+	);
+	
+	// enable attribute
+	gl.enableVertexAttribArray(positionAttribLocation);
+
+	let colorAttribLocation = gl.getAttribLocation(program, "vertColor");
+	gl.vertexAttribPointer(
+		colorAttribLocation,
+		3,
+		gl.FLOAT,
+		gl.FALSE,
+		5 * Float32Array.BYTES_PER_ELEMENT,
+		2 * Float32Array.BYTES_PER_ELEMENT
+	);
+	gl.enableVertexAttribArray(colorAttribLocation);
+
+	// unbind buffer
+	gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+	// set clear colour
+	gl.clearColor(0.1, 0.1, 0.1, 1.0);
+
+	// start drawing
+	requestAnimationFrame(draw);
+}
+
+async function draw() {
+	gl.clear(gl.COLOR_BUFFER_BIT);
+
+	gl.useProgram(program);
+
+	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+
+	gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+	requestAnimationFrame(draw);
+}
+
+window.addEventListener("DOMContentLoaded", init);

src/shader.js

@@ -0,0 +1,48 @@
+"use strict";
+
+async function fetchShaderSource(path) {
+	const response = await fetch(path);
+	const text = await response.text();
+	return text;
+}
+
+function compileShader(gl, type, source) {
+	const shader = gl.createShader(type);
+	gl.shaderSource(shader, source);
+	gl.compileShader(shader);
+
+	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+		const info = gl.getShaderInfoLog(shader);
+		throw new Error(`Could not compile shader: ${info}`);
+	}
+
+	return shader;
+}
+
+async function fetchAndCompileShader(gl, type, path) {
+	const source = await fetchShaderSource(path);
+	return compileShader(gl, type, source);
+}
+
+function linkShaderProgram(gl, vertexShader, fragmentShader) {
+	const program = gl.createProgram();
+	gl.attachShader(program, vertexShader);
+	gl.attachShader(program, fragmentShader);
+	gl.linkProgram(program);
+
+	// check link status
+	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+		const info = gl.getProgramInfoLog(program);
+		throw new Error(`Could not link shader program: ${info}`);
+	}
+
+	gl.validateProgram(program);
+
+	// check validation status
+	if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
+		const info = gl.getProgramInfoLog(program);
+		throw new Error(`Could not validate shader program: ${info}`);
+	}
+
+	return program;
+}

src/shaders/fragment.glsl

@@ -0,0 +1,6 @@
+precision mediump float;
+varying vec3 fragColor;
+
+void main() {
+	gl_FragColor = vec4(fragColor, 1.0);
+}

src/shaders/vertex.glsl

@@ -0,0 +1,10 @@
+precision mediump float;
+
+attribute vec2 vertPosition;
+attribute vec3 vertColor;
+varying vec3 fragColor;
+
+void main() {
+	fragColor = vertColor;
+	gl_Position = vec4(vertPosition, 0.0, 1.0);
+}