From 75c52718c00d8f6fb00156803282d7b05e85356e Mon Sep 17 00:00:00 2001
From: Luca Conte <main@lugico.de>
Date: Thu, 6 Mar 2025 15:31:18 +0100
Subject: [PATCH] u01

---
 src/index.html            |  3 +-
 src/script.js             | 90 +++++++++++++++++++++++++++++++++++++++
 src/shader.js             | 48 +++++++++++++++++++++
 src/shaders/fragment.glsl |  6 +++
 src/shaders/vertex.glsl   | 10 +++++
 5 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 src/shader.js
 create mode 100644 src/shaders/fragment.glsl
 create mode 100644 src/shaders/vertex.glsl

diff --git a/src/index.html b/src/index.html
index acce3e0..441e5a3 100644
--- a/src/index.html
+++ b/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;
diff --git a/src/script.js b/src/script.js
index e69de29..ba81828 100644
--- a/src/script.js
+++ b/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);
\ No newline at end of file
diff --git a/src/shader.js b/src/shader.js
new file mode 100644
index 0000000..fa38e6b
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/shaders/fragment.glsl b/src/shaders/fragment.glsl
new file mode 100644
index 0000000..9822a52
--- /dev/null
+++ b/src/shaders/fragment.glsl
@@ -0,0 +1,6 @@
+precision mediump float;
+varying vec3 fragColor;
+
+void main() {
+	gl_FragColor = vec4(fragColor, 1.0);
+}
\ No newline at end of file
diff --git a/src/shaders/vertex.glsl b/src/shaders/vertex.glsl
new file mode 100644
index 0000000..581b404
--- /dev/null
+++ b/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);
+}
\ No newline at end of file