Prepared for 21122023

Uebung_21122023/Quad/common/initShaders copy.js

@@ -0,0 +1,56 @@
+//
+//  initShaders.js
+//
+async function readFile(file) {
+    let result_base64 = await new Promise((resolve) => {
+        var xhr = new XMLHttpRequest();
+        xhr.addEventListener("load", (data) => resolve(data.target.response));
+        xhr.open("GET", file);
+        xhr.send();
+    });
+
+    return result_base64;
+}
+
+async function initShaders( gl, vertexShaderFilename, fragmentShaderFilename )
+{
+    const compileShader = ( gl, gl_shaderType, shaderSource ) => {
+        // Create the shader
+        shader = gl.createShader( gl_shaderType );
+
+        // Set the shader source code
+        gl.shaderSource( shader, shaderSource );
+
+        // Compile the shader to make it readable for the GPU
+        gl.compileShader( shader );
+        var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+        
+        if (!success) {
+            // Something went wrong during compilation; get the error
+            throw "could not compile shader:" + gl.getShaderInfoLog(shader);
+        }
+        else {
+            return shader;
+        }
+    }
+    
+    /* 
+     * Setup shader program
+     */
+    vShaderSource = await readFile(vertexShaderFilename);
+    fShaderSource = await readFile(fragmentShaderFilename);
+
+    vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
+    fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource );
+
+    // Build the program
+    const program = gl.createProgram();
+
+    // Attach shaders to it
+    gl.attachShader( program, vertexShader );
+    gl.attachShader( program, fragmentShader );
+
+    gl.linkProgram( program );
+
+    return program;
+}

Uebung_21122023/Quad/common/initShaders.js

@@ -0,0 +1,56 @@
+//
+//  initShaders.js
+//
+async function readFile(file) {
+    let result_base64 = await new Promise((resolve) => {
+        var xhr = new XMLHttpRequest();
+        xhr.addEventListener("load", (data) => resolve(data.target.response));
+        xhr.open("GET", file);
+        xhr.send();
+    });
+
+    return result_base64;
+}
+
+async function initShaders( gl, vertexShaderFilename, fragmentShaderFilename )
+{
+    const compileShader = ( gl, gl_shaderType, shaderSource ) => {
+        // Create the shader
+        shader = gl.createShader( gl_shaderType );
+
+        // Set the shader source code
+        gl.shaderSource( shader, shaderSource );
+
+        // Compile the shader to make it readable for the GPU
+        gl.compileShader( shader );
+        var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+        
+        if (!success) {
+            // Something went wrong during compilation; get the error
+            throw "could not compile shader:" + gl.getShaderInfoLog(shader);
+        }
+        else {
+            return shader;
+        }
+    }
+    
+    /* 
+     * Setup shader program
+     */
+    vShaderSource = await readFile(vertexShaderFilename);
+    fShaderSource = await readFile(fragmentShaderFilename);
+
+    vertexShader = compileShader( gl, gl.VERTEX_SHADER, vShaderSource );
+    fragmentShader = compileShader( gl, gl.FRAGMENT_SHADER, fShaderSource );
+
+    // Build the program
+    const program = gl.createProgram();
+
+    // Attach shaders to it
+    gl.attachShader( program, vertexShader );
+    gl.attachShader( program, fragmentShader );
+
+    gl.linkProgram( program );
+
+    return program;
+}

Uebung_21122023/Quad/common/readMesh.js

@@ -0,0 +1,69 @@
+async function readMeshAsync(filename, callback) {
+    let filenames = [filename];
+    let result = await new Promise((resolve) => {
+        assimpjs().then(
+            function(ajs) {
+                Promise.all (filenames.map ((file) => fetch (file))).then ((responses) => {
+                    return Promise.all (responses.map ((res) => res.arrayBuffer ()));
+                }).then ((arrayBuffers) => {
+                    // create new file list object, and add the filename
+                    let fileList = new ajs.FileList ();
+                    fileList.AddFile (filename, new Uint8Array (arrayBuffers[0]));
+
+                    let result = ajs.ConvertFileList (fileList, 'assjson');
+                    if (!result.IsSuccess () || result.FileCount () == 0) {
+                        console.log("Could not load mesh: " + filename);
+                        return null;
+                    }
+
+                    // get the result file, and convert to string
+                    let resultFile = result.GetFile (0);
+                    let jsonContent = new TextDecoder ().decode (resultFile.GetContent ());
+                    let resultJson = JSON.parse (jsonContent);
+
+                    // parse the result json
+                    resolve(callback(resultJson));
+                })
+            }
+        );
+    });
+
+    return result;
+}
+
+function readMesh(filename, callback) {
+    assimpjs().then(
+        function(ajs) {
+            Promise.all (filename.map ((file) => fetch (file))).then ((responses) => {
+                return Promise.all (responses.map ((res) => res.arrayBuffer ()));
+            }).then ((arrayBuffers) => {
+                // create new file list object, and add the filename
+                let mesh_buffers = []
+                for (let k = 0; k < filename.length; ++k) {
+                    let fileList = new ajs.FileList ();
+                    console.log(filename[k])
+                    fileList.AddFile (filename[k], new Uint8Array (arrayBuffers[k]));
+
+                    let result = ajs.ConvertFileList (fileList, 'assjson');
+                    if (!result.IsSuccess () || result.FileCount () == 0) {
+                        console.log("Could not load mesh: " + filename[k])
+                        continue;
+                    }
+                    mesh_buffers.push(result);
+                }
+
+                // get the result file, and convert to string
+                let output = []
+                for (let i = 0; i < mesh_buffers.length; ++i) {
+                    let resultFile = mesh_buffers[i].GetFile (0);
+                    let jsonContent = new TextDecoder ().decode (resultFile.GetContent ());
+                    let resultJson = JSON.parse (jsonContent);
+                    output.push(resultJson);
+                }
+
+                // parse the result json
+                callback(output);
+            })
+        }
+    );
+}

Uebung_21122023/Quad/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<title>WebGL Example</title>
+
+		<script type="text/javascript" src="common/assimpjs.js"></script>
+		<script type="text/javascript" src="common/readMesh.js"></script>
+		<script type="text/javascript" src="common/gl-matrix.js"></script>
+		<script type="text/javascript" src="common/initShaders.js"></script>
+	</head>
+	<body>
+		<canvas width="512" height="512" id="gl-canvas"> If you see this, your browser doesn't support WebGL. </canvas>
+
+		<script src="main.js" type="text/javascript"></script>
+	</body>
+</html>

Uebung_21122023/Quad/main.js

@@ -0,0 +1,89 @@
+let gl;
+let program;
+let positions, colors;
+let posVBO, colorVBO;
+let lastTimestamp;
+
+async function main() {
+	// 1. Get canvas and setup WebGL context
+	const canvas = document.getElementById("gl-canvas");
+	gl = canvas.getContext("webgl2");
+
+	// 2. Configure viewport
+	gl.viewport(0, 0, canvas.width, canvas.height);
+	gl.clearColor(1.0, 1.0, 1.0, 1.0);
+
+	// 4. Init shader program via additional function and bind it
+	program = await initShaders(gl, "shaders/simple.vert.glsl", "shaders/simple.frag.glsl");
+	gl.useProgram(program);
+
+	initTriangle();
+	window.requestAnimationFrame(render);
+}
+
+function initTriangle() {
+	//prettier-ignore
+	// 3. Specify geometry
+	positions = [ -1.0, -1.0,
+								-1.0,  1.0,
+								 1.0, -1.0,
+								 1.0,  1.0,
+								-1.0,  1.0,
+								 1.0, -1.0];
+	//prettier-ignore
+	colors = [ 0, 1, 0, 1,
+						 0, 0, 1, 1,
+						 1, 1, 0, 1,
+						 1, 0, 0, 1,
+						 0, 0, 1, 1,
+						 1, 1, 0, 1];
+
+	initTriangleBuffers();
+}
+
+function initTriangleBuffers() {
+	// 5.1 Create VBO for positions and activate it
+	posVBO = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, posVBO);
+
+	// 6.1 Fill VBO with positions
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+	// 5.2 Create VBO for colors and activate it
+	colorVBO = gl.createBuffer();
+	gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO);
+
+	// 6.2 Fill VBO with colors
+	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+function renderTriangle() {
+	// 7.1 Link data in VBO to shader variables
+	gl.bindBuffer(gl.ARRAY_BUFFER, posVBO);
+	const posLoc = gl.getAttribLocation(program, "vPosition");
+	gl.enableVertexAttribArray(posLoc);
+	gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+	// 7.2 Link data in VBO to shader variables
+	gl.bindBuffer(gl.ARRAY_BUFFER, colorVBO);
+	const colorLoc = gl.getAttribLocation(program, "vColor");
+	gl.enableVertexAttribArray(colorLoc);
+	gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
+
+	// 8. Render
+	gl.clear(gl.COLOR_BUFFER_BIT);
+	gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+
+function render(timestamp) {
+	const elapsed = timestamp - lastTimestamp;
+
+	renderTriangle();
+
+	lastTimestamp = timestamp;
+	window.requestAnimationFrame(render);
+}
+
+window.onload = async function () {
+	main();
+};

Uebung_21122023/Quad/shaders/simple.frag.glsl

@@ -0,0 +1,10 @@
+#version 300 es
+precision mediump float;
+
+in vec4 vfColor;
+out vec4 fColor;
+
+void main()
+{
+	fColor = vfColor;
+}

Uebung_21122023/Quad/shaders/simple.vert.glsl

@@ -0,0 +1,10 @@
+#version 300 es
+in vec4 vPosition;
+in vec4 vColor;
+out vec4 vfColor;
+
+void main()
+{
+	vfColor = vColor;
+	gl_Position = vPosition;
+}

index.html

@@ -1,16 +1,15 @@
 <!DOCTYPE html>
 <html>
-<head>
-<title>Hello world</title>
-</head>
-<body>
+	<head>
+		<title>Hello world</title>
+	</head>
+	<body>
+		<a href="/Übung_23112023/">Übung_23112023/</a><br />
+		<a href="/Übung_30112023/">Übung_30112023/</a><br />
+		<a href="/Uebung_06122023/">Uebung_06122023/</a><br />
+		<a href="/Uebung_21122023/">Uebung_21122023</a><br />
 
-<a href="/Übung_23112023/">Übung_23112023/</a><br>
-<a href="/Übung_30112023/">Übung_30112023/</a><br>
-<a href="/Uebung_06122023/">Uebung_06122023/</a><br>
-<a href="/Abgabe_3/">Abgabe_3/</a><br>
-
-<a href="/Abgabe_4/">Abgabe_4/</a><br>
-
-</body>
+		<a href="/Abgabe_3/">Abgabe_3/</a><br />
+		<a href="/Abgabe_4/">Abgabe_4/</a><br />
+	</body>
 </html>