feat: track images with git lfs

app/src/lib/components/background/Background.frag

@@ -0,0 +1,98 @@
+precision highp float;
+
+varying vec2 vUv;
+
+const float PI = 3.14159265359;
+
+uniform vec2 dimensions;
+uniform vec3 camPos;
+uniform vec2 zoomLimits;
+uniform vec3 backgroundColor;
+
+float grid(float x, float y, float divisions, float thickness) {
+    x = fract(x * divisions);
+    x = min(x, 1.0 - x);
+
+    float xdelta = fwidth(x);
+    x = smoothstep(x - xdelta, x + xdelta, thickness);
+
+    y = fract(y * divisions);
+    y = min(y, 1.0 - y);
+
+    float ydelta = fwidth(y);
+    y = smoothstep(y - ydelta, y + ydelta, thickness);
+
+    return clamp(x + y, 0.0, 1.0);
+}
+
+float circle_grid(float x, float y, float divisions, float circleRadius) {
+
+    float gridX = mod(x + divisions/2.0, divisions) - divisions / 2.0;
+    float gridY = mod(y + divisions/2.0, divisions) - divisions / 2.0;
+
+    // Calculate the distance from the center of the grid
+    float gridDistance = length(vec2(gridX, gridY));
+
+    // Use smoothstep to create a smooth transition at the edges of the circle
+    float circle = 1.0 - smoothstep(circleRadius - 0.5, circleRadius + 0.5, gridDistance);
+
+    return circle;
+}
+
+float lerp(float a, float b,float t) {
+    return a * (1.0 - t) + b * t;
+}
+
+void main(void) {
+
+    float cx = camPos.x;
+    float cy = camPos.y;
+    float cz = camPos.z;
+
+    float width = dimensions.x;
+    float height =  dimensions.y;
+
+    float minZ = zoomLimits.x;
+    float maxZ = zoomLimits.y;
+
+    float divisions = 0.1/cz;
+    float thickness = 0.05/cz;
+    float delta = 0.1 / 2.0;
+
+    float nz = (cz - minZ) / (maxZ - minZ);
+
+    float ux = (vUv.x-0.5) * width + cx*cz;
+    float uy = (vUv.y-0.5) * height - cy*cz;
+
+
+    //extra small grid
+    float m1 = grid(ux, uy, divisions*4.0, thickness*4.0) * 0.1;
+    float m2 = grid(ux, uy, divisions*16.0, thickness*16.0) * 0.03;
+    float xsmall = max(m1, m2);
+    
+    float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.2;
+    xsmall = max(xsmall, s3);
+
+    // small grid
+    float c1 = grid(ux, uy, divisions, thickness) * 0.2;
+    float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.1;
+    float small = max(c1, c2);
+
+    float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
+    small = max(small, s1);
+
+    // large grid
+    float c3 = grid(ux, uy, divisions/8.0, thickness/8.0) * 0.1;
+    float c4 = grid(ux, uy, divisions/2.0, thickness/4.0) * 0.05;
+    float large = max(c3, c4);
+
+    float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.2;
+    large = max(large, s2);
+
+    float c = mix(large, small, min(nz*2.0+0.05, 1.0));
+    c = mix(c, xsmall, max(min((nz-0.3)/0.7, 1.0), 0.0));
+
+    vec3 color = mix(backgroundColor, vec3(1.0), c*0.5); 
+
+    gl_FragColor = vec4(color, 1.0);
+}

app/src/lib/components/background/Background.story.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Background from "./Background.svelte";
+  import { Canvas } from "@threlte/core";
+  import Camera from "../Camera.svelte";
+  let width = globalThis.innerWidth || 100;
+  let height = globalThis.innerHeight || 100;
+
+  let cameraPosition: [number, number, number] = [0, 1, 0];
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
+
+<Hst.Story>
+  <Canvas shadows={false}>
+    <Camera bind:position={cameraPosition} />
+
+    <Background {cameraPosition} {width} {height} />
+  </Canvas>
+</Hst.Story>

app/src/lib/components/background/Background.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { T } from "@threlte/core";
+
+  import BackgroundVert from "./Background.vert";
+  import BackgroundFrag from "./Background.frag";
+  import { colors } from "../graph/stores";
+
+  export let minZoom = 4;
+  export let maxZoom = 150;
+
+  export let cameraPosition: [number, number, number] = [0, 1, 0];
+
+  export let width = globalThis?.innerWidth || 100;
+  export let height = globalThis?.innerHeight || 100;
+
+  let bw = 2;
+  let bh = 2;
+
+  $: if (width && height) {
+    bw = width / cameraPosition[2];
+    bh = height / cameraPosition[2];
+  }
+</script>
+
+<T.Group
+  position.x={cameraPosition[0]}
+  position.z={cameraPosition[1]}
+  position.y={-1.0}
+>
+  <T.Mesh rotation.x={-Math.PI / 2} position.y={0.2} scale.x={bw} scale.y={bh}>
+    <T.PlaneGeometry args={[1, 1]} />
+    <T.ShaderMaterial
+      transparent
+      vertexShader={BackgroundVert}
+      fragmentShader={BackgroundFrag}
+      uniforms={{
+        camPos: {
+          value: [0, 1, 0],
+        },
+        backgroundColor: {
+          value: [0, 0, 0],
+        },
+        zoomLimits: {
+          value: [2, 50],
+        },
+        dimensions: {
+          value: [100, 100],
+        },
+      }}
+      uniforms.camPos.value={cameraPosition}
+      uniforms.backgroundColor.value={$colors.backgroundColorDarker}
+      uniforms.zoomLimits.value={[minZoom, maxZoom]}
+      uniforms.dimensions.value={[width, height]}
+    />
+  </T.Mesh>
+</T.Group>

app/src/lib/components/background/Background.vert

@@ -0,0 +1,15 @@
+varying vec2 vUv;
+varying vec3 vPosition;
+
+void main() {
+
+  vUv = uv;
+
+  vec4 modelPosition = modelMatrix * vec4(position, 1.0);
+
+  vec4 viewPosition = viewMatrix * modelPosition;
+  vec4 projectedPosition = projectionMatrix * viewPosition;
+
+  gl_Position = projectedPosition;
+}
+