From 981586ceb9f7466a15792ca0df78d042b94b4703 Mon Sep 17 00:00:00 2001 From: fromtheeast710 Date: Tue, 19 Mar 2024 23:07:42 +1100 Subject: [PATCH] 2D Matrix rotation --- src/lib/layout/3DFractal.svelte | 156 ++++++++++++++++++++------------ 1 file changed, 100 insertions(+), 56 deletions(-) diff --git a/src/lib/layout/3DFractal.svelte b/src/lib/layout/3DFractal.svelte index 17eb2df..d023da1 100644 --- a/src/lib/layout/3DFractal.svelte +++ b/src/lib/layout/3DFractal.svelte @@ -2,75 +2,119 @@ import { onMount } from "svelte"; let canvasEl: HTMLCanvasElement; + let angle = 0; + const shaderPos = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]); + const shaderCol = new Uint8Array([255, 0, 0, 0, 255, 0, 0, 0, 255]); + + function handleWheel(event) { + if(event.deltaY < 0) { + angle += 0.1; + draw(); + } else if(event.deltaY > 0) { + angle -= 0.1; + draw(); + } + } + + function compileShader(gl, type, src) { + const shader = gl.createShader(type)!; + gl.shaderSource(shader, src); + gl.compileShader(shader); + + if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) + console.error("Shader failed to compile: " + gl.getShaderInfoLog(shader)); + + return shader; + } + + function createProgram(gl, vertexShader, fragmentShader) { + let program = gl.createProgram(); + + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + + if(!gl.getProgramParameter(program, gl.LINK_STATUS)) + console.error("Program failed to link: " + gl.getProgramInfoLog(program)); + + return program; + } + + let m3 = { + rotation: function(angleInRad) { + let c = Math.cos(angleInRad); + let s = Math.sin(angleInRad); + return [c, -s, 0, s, c, 0, 0, 0, 1]; + }, + }; function draw() { const gl = canvasEl.getContext("webgl2")!; - const triangleVerts = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]); - const triangleCols = new Uint8Array([255, 0, 0, 0, 255, 0, 0, 0, 255]); - const triangleGeoBfr = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, triangleGeoBfr); - gl.bufferData(gl.ARRAY_BUFFER, triangleVerts, gl.STATIC_DRAW); - const triangleColBfr = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, triangleColBfr); - gl.bufferData(gl.ARRAY_BUFFER, triangleCols, gl.STATIC_DRAW); - - function compileShader(type, src) { - const shader = gl.createShader(type)!; - gl.shaderSource(shader, src); - gl.compileShader(shader); - - if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) - console.error(gl.getShaderInfoLog(shader)); - - return shader; - } - const vertShader = compileShader(gl.VERTEX_SHADER, `#version 300 es - precision mediump float; - in vec2 vertPos; - in vec3 vertCol; - out vec3 fragCol; - - void main() { - fragCol = vertCol; - gl_Position = vec4(vertPos, 0.0, 1.0); - }`); - const fragShader = compileShader(gl.FRAGMENT_SHADER, `#version 300 es - #pragma vscode_glsllint_stage: frag - precision mediump float; - in vec3 fragCol; - out vec4 outCol; - - void main() { - outCol = vec4(fragCol, 1.0); - }`); - - const triangleShader = gl.createProgram()!; - gl.attachShader(triangleShader, vertShader); - gl.attachShader(triangleShader, fragShader); - gl.linkProgram(triangleShader); - const vertPosAttrLoc = gl.getAttribLocation(triangleShader, "vertPos"); - const vertColAttrLoc = gl.getAttribLocation(triangleShader, "vertCol"); + const progGeoBfr = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, progGeoBfr); + gl.bufferData(gl.ARRAY_BUFFER, shaderPos, gl.STATIC_DRAW); + const progColBfr = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, progColBfr); + gl.bufferData(gl.ARRAY_BUFFER, shaderCol, gl.STATIC_DRAW); + + const vertShader = compileShader(gl, gl.VERTEX_SHADER, `#version 300 es + #pragma vscode_glsllint_stage: vert + precision mediump float; + + in vec3 vertCol; + in vec2 vertPos; + out vec3 fragCol; + uniform mat3 uMat; + + void main() { + fragCol = vertCol; + gl_Position = vec4((uMat * vec3(vertPos, 1.)).xy, 0., 1.); + }`); + const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, `#version 300 es + #pragma vscode_glsllint_stage: frag + precision mediump float; + + in vec3 fragCol; + out vec4 outCol; + + void main() { + outCol = vec4(fragCol, 1.); + }`); + + const prog = createProgram(gl, vertShader, fragShader); + const posAttrLoc = gl.getAttribLocation(prog, "vertPos"); + const colAttrLoc = gl.getAttribLocation(prog, "vertCol"); + const matLoc = gl.getUniformLocation(prog, "uMat"); + + let mat = m3.rotation(angle); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.viewport(0, 0, canvasEl.width, canvasEl.height); - gl.useProgram(triangleShader); - gl.enableVertexAttribArray(vertPosAttrLoc); - gl.bindBuffer(gl.ARRAY_BUFFER, triangleGeoBfr); - gl.vertexAttribPointer(vertPosAttrLoc, 2, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(vertColAttrLoc); - gl.bindBuffer(gl.ARRAY_BUFFER, triangleColBfr); - gl.vertexAttribPointer(vertColAttrLoc, 3, gl.UNSIGNED_BYTE, true, 0, 0); + gl.useProgram(prog); + + gl.enableVertexAttribArray(posAttrLoc); + gl.bindBuffer(gl.ARRAY_BUFFER, progGeoBfr); + gl.vertexAttribPointer(posAttrLoc, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(colAttrLoc); + gl.bindBuffer(gl.ARRAY_BUFFER, progColBfr); + gl.vertexAttribPointer(colAttrLoc, 3, gl.UNSIGNED_BYTE, true, 0, 0); + + gl.uniformMatrix3fv(matLoc, false, mat); gl.drawArrays(gl.TRIANGLES, 0, 3); } - onMount(() => { - try { draw(); } finally {} - }); + onMount(() => draw()); - \ No newline at end of file + handleWheel(e)} +/> \ No newline at end of file