Saving progress

src/lib/layout/3DFractal.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import { compileShader, createProgram} from "$lib/scripts/webgl";
 
   let canvasEl: HTMLCanvasElement;
   let isDragging = false;
   let rotate = [0, 0];
   let oldPos = { x: 0, y: 0 };
+  let frac = 1;
 
-  const shaderPos = new Float32Array([
+  let shaderPos = new Float32Array([
     1, 0, -1/Math.sqrt(2),
     -1, 0, -1/Math.sqrt(2),
     0, 1, 1/Math.sqrt(2),
@@ -23,7 +25,7 @@
     0, 1, 1/Math.sqrt(2),
     0, -1, 1/Math.sqrt(2),
   ]);
-  const shaderCol = new Uint8Array([
+  let shaderCol = new Uint8Array([
     255, 0, 0,
     0, 255, 0,
     0, 0, 255,
@@ -41,30 +43,6 @@
     0, 0, 255,
   ]);
 
-  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) {
-    const 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 m4 = {
     multiply: function(a: any, b: any) {
       let a00 = a[0 * 4 + 0];
@@ -145,6 +123,28 @@
     },
   };
 
+  function handleWheel(event: any) {
+    function calcMidPoint(a: any, b: any, c: any) {
+      return [(a + b)/2, (b + c)/2, (c + a)/2];
+    }
+
+    if(event.deltaY < 0) {
+      frac >= 9 ? frac = 9 : frac += 1;
+
+      // shaderPos = new Float32Array([...shaderPos, calcMidPoint(shaderPos[1], shaderPos[2], shaderPos[3]))]);
+      // shaderCol = new Uint8Array([...shaderCol, ]);
+      console.log(shaderPos);
+
+      draw();
+    } else {
+      frac <= 1 ? frac = 1 : frac -= 1;
+
+      console.log(frac);
+
+      draw();
+    }
+  }
+
   function handleMouseUp() {
     isDragging = false;
   }
@@ -196,7 +196,7 @@
     void main() {
       fragCol = vertCol;
       gl_Position = uMat * vertPos;
-    }`,);
+    }`);
     const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, `#version 300 es
     #pragma vscode_glsllint_stage: frag
     precision mediump float;
@@ -206,7 +206,7 @@
 
     void main() {
       outCol = vec4(fragCol, 1.);
-    }`,);
+    }`);
 
     const prog = createProgram(gl, vertShader, fragShader);
     const posAttrLoc = gl.getAttribLocation(prog, "vertPos");
@@ -235,7 +235,7 @@
 
     gl.uniformMatrix4fv(matLoc, false, mat);
 
-    gl.drawArrays(gl.TRIANGLES, 0, 4 * 3);
+    gl.drawArrays(gl.TRIANGLES, 0, frac *  4 * 3);
   }
 
   onMount(() => draw());
@@ -245,6 +245,7 @@
   width=500
   height=500
   class="bg-blue-500 pointer-events-auto"
+  on:wheel={(e) => handleWheel(e)}
   on:mouseup={() => handleMouseUp()}
   on:mousedown|preventDefault={(e) => handleMouseDown(e)}
   on:mousemove|preventDefault={(e) => handleMouseMove(e)}

src/lib/layout/BlackHole.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { compileShader, createProgram } from "$lib/scripts/webgl";
+
+  let canvasEl: HTMLCanvasElement;
+  let radius = 1.0;
+
+  const triVerts = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
+  const triCols = new Uint8Array([]);
+  const texCoords = new Float32Array([
+    0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, 1.0,
+  ]);
+
+  function handleWheel() {}
+
+  function handleMouseOver() {}
+
+  function handleMouseOut() {}
+
+  function handleMouseMove(event: any) {}
+
+  function draw(image) {
+    const gl = canvasEl.getContext("webgl2");
+
+    const vertShader = compileShader(gl, gl.VERTEX_SHADER, `#version 300 es
+    #pragma vscode_glsllint_stage: vert
+
+    in vec2 vertPos;
+    in vec2 aTexCoord;
+    out vec2 vTexCoord;
+
+    void main() {
+      gl_Position = vec4(vertPos, 0., 1.);
+      vTexCoord = aTexCoord;
+    }`);
+    const fragShader = compileShader(gl, gl.FRAGMENT_SHADER, `#version 300 es
+    #pragma vscode_glsllint_stage: frag
+    precision highp float;
+
+    uniform sampler2D uImg;
+
+    in vec2 vTexCoord;
+    out vec4 outCol;
+
+    void main() {
+      outCol = texture(uImg, vTexCoord);
+    }`);
+
+    const prog = createProgram(gl, vertShader, fragShader);
+    const posAttrLoc = gl.getAttribLocation(prog, "vertPos");
+    const colAttrLoc = gl.getAttribLocation(prog, "vertCol");
+    const texCoordAttrLoc = gl.getAttribLocation(prog, "aTexCoord");
+    const imgLoc = gl.getUniformLocation(prog, "uImg");
+
+    const triGeoBfr = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, triGeoBfr);
+    gl.bufferData(gl.ARRAY_BUFFER, triVerts, gl.STATIC_DRAW);
+    const triColBfr = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, triColBfr);
+    gl.bufferData(gl.ARRAY_BUFFER, triCols, gl.STATIC_DRAW);
+    const texCoordBfr = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBfr);
+    gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(texCoordAttrLoc);
+
+    const tex = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0 + 0);
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+    gl.viewport(0, 0, canvasEl.width, canvasEl.height);
+
+    gl.useProgram(prog);
+
+    gl.uniform1i(imgLoc, 0);
+
+    gl.enableVertexAttribArray(posAttrLoc);
+    gl.bindBuffer(gl.ARRAY_BUFFER, triGeoBfr);
+    gl.vertexAttribPointer(posAttrLoc, 2, gl.FLOAT, false, 0, 0);
+
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+
+  onMount(async () => {
+    const img = new Image();
+    img.src = "/src/lib/assets/james_webb_1.png";
+    img.onload = () => { };
+
+    draw(img);
+  });
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<canvas
+  width="1000"
+  height="1000"
+  class="bg-blue-500 pointer-events-auto"
+  on:wheel={() => handleWheel()}
+  on:mouseover={() => handleMouseOver()}
+  on:mouseout={() => handleMouseOut()}
+  on:mousemove|preventDefault={(e) => handleMouseMove(e)}
+  bind:this={canvasEl}
+/>

src/lib/layout/ShadowCast.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let canvasEl: HTMLCanvasElement;
+
+  function handleMouseOver() {}
+
+  function handleMouseOut() {}
+
+  function handleMouseMove(event: any) {}
+
+  function draw() {
+    const gl = canvasEl.getContext("webgl");
+
+    gl.clearColor(0.0, 0.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  onMount(() => draw());
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<canvas
+  width=1000
+  height=1000
+  class="bg-blue-500 pointer-events-auto"
+  on:mouseover={() => handleMouseOver()}
+  on:mouseout={() => handleMouseOut()}
+  on:mousemove|preventDefault={(e) => handleMouseMove(e)}
+  bind:this={canvasEl}
+/>