@bigmistqke/view.gl 0.2.0 → 0.4.0

package/dev/dist/assets/glsl-composition-D_BaFFij.js

@@ -0,0 +1,97 @@
+import { g as glsl, u as uniform, a as attribute, c as compile } from './tag-C0Vskpp8.js';
+import { d as dom } from './utils-2dzuv_bW.js';
+
+const canvas = dom("canvas", {
+  width: window.innerWidth,
+  height: window.innerHeight,
+  parentElement: document.body,
+  style: { width: "100%" }
+});
+const gl = canvas.getContext("webgl2");
+gl.viewport(0, 0, canvas.width, canvas.height);
+console.log("gl is", gl);
+const mathUtils = glsl`
+  float wave(float x, float speed, float frequency) {
+    return sin(x * frequency + u_time * speed);
+  }
+`;
+const transforms = glsl`
+  ${uniform.float("u_time")}
+  ${mathUtils}
+  
+  mat2 rotation2D(float angle) {
+    float c = cos(angle);
+    float s = sin(angle);
+    return mat2(c, -s, s, c);
+  }
+`;
+const colors = glsl`
+  ${uniform.vec3("u_color")}
+  
+  vec3 rainbow(float t) {
+    return 0.5 + 0.5 * cos(6.28318 * (t + vec3(0.0, 0.33, 0.67)));
+  }
+`;
+const vertex = glsl`
+  precision highp float;
+  
+  ${attribute.vec2("a_position")}
+  ${transforms}
+  
+  void main() {
+    vec2 pos = a_position;
+    
+    // Rotate based on time
+    float angle = u_time;
+    pos = rotation2D(angle) * pos;
+    
+    // Add wave motion
+    pos.y += wave(pos.x, 2.0, 5.0) * 0.1;
+    
+    gl_Position = vec4(pos, 0.0, 1.0);
+  }
+`;
+const fragment = glsl`
+  precision highp float;
+  
+  ${colors}
+  ${[uniform.float("u_time")]}
+  
+  void main() {
+    // Animated rainbow color
+    vec3 color = rainbow(u_time * 0.5);
+    
+    // Mix with base color
+    color = mix(u_color, color, 0.7);
+    
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
+const {
+  program,
+  view: { attributes, uniforms }
+} = compile(gl, vertex, fragment);
+gl.useProgram(program);
+uniforms.u_color.set(1, 0.5, 0.2);
+attributes.a_position.set(
+  new Float32Array([
+    // Triangle
+    0,
+    0.5,
+    // top
+    -0.5,
+    -0.5,
+    // bottom left
+    0.5,
+    -0.5
+    // bottom right
+  ])
+).bind();
+function draw(delta) {
+  requestAnimationFrame(draw);
+  uniforms.u_time.set(delta / 1e3);
+  gl.clearColor(0.1, 0.1, 0.2, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+requestAnimationFrame(draw);

package/dev/dist/assets/grid-DfXHNLBm.js

@@ -0,0 +1,181 @@
+import { a as attribute, u as uniform, g as glsl, c as compile } from './tag-C0Vskpp8.js';
+import { d as dom, c as cursor } from './utils-2dzuv_bW.js';
+
+const canvas = dom("canvas", {
+  width: window.innerWidth,
+  height: window.innerHeight,
+  parentElement: document.body
+});
+const gl = canvas.getContext("webgl2", { antialias: false });
+if (!gl) {
+  throw new Error("WebGL not supported");
+}
+const state = {
+  position: { x: 0, y: 0 },
+  scale: 1,
+  elements: []
+};
+const container = dom("div", { parentElement: document.body });
+state.elements.push(createGridElement({ x: 100, y: 100 }));
+function createGridElement(position = { x: 0, y: 0 }) {
+  position = {
+    x: (position.x - state.position.x) / state.scale,
+    y: (position.y - state.position.y) / state.scale
+  };
+  const div = dom("div", {
+    innerText: "HALLO WORLD",
+    style: {
+      position: "fixed",
+      zIndex: "10",
+      left: "0px",
+      top: "0px",
+      transformOrigin: "top left",
+      background: "white",
+      padding: "2px",
+      borderRadius: "2px"
+    },
+    parentElement: container
+  });
+  function update() {
+    div.style.transform = `translate3d(${state.position.x + position.x * state.scale}px,${state.position.y + position.y * state.scale}px,0) scale(${state.scale})`;
+  }
+  update();
+  return {
+    element: div,
+    position,
+    update
+  };
+}
+canvas.addEventListener("pointerdown", (event) => {
+  cursor(event, (event2) => {
+    state.position.x -= event2.deltaX;
+    state.position.y -= event2.deltaY;
+    render();
+  });
+});
+canvas.addEventListener("dblclick", (event) => {
+  state.elements.push(
+    createGridElement({
+      x: event.clientX,
+      y: event.clientY
+    })
+  );
+});
+window.addEventListener(
+  "wheel",
+  (event) => {
+    const rect = canvas.getBoundingClientRect();
+    const mouseX = event.clientX - rect.left;
+    const mouseY = event.clientY - rect.top;
+    const scaleFactor = event.deltaY > 0 ? 0.95 : 1.05;
+    const oldScale = state.scale;
+    const newScale = Math.max(0.1, Math.min(10, oldScale * scaleFactor));
+    const gridX = (mouseX - state.position.x) / oldScale;
+    const gridY = (mouseY - state.position.y) / oldScale;
+    state.scale = newScale;
+    state.position.x = mouseX - gridX * newScale;
+    state.position.y = mouseY - gridY * newScale;
+    render();
+  },
+  { passive: true }
+);
+window.addEventListener("resize", render);
+const vertex = glsl`#version 300 es
+${attribute.vec2("a_vertex")}
+${uniform.vec2("u_screenSize")}
+${uniform.vec2("u_pos")}
+${uniform.float("u_scale")}
+out vec2 v_gridCoord;
+
+// Direct mapping: (-1,-1) is bottom-left, (1,1) is top-right in clip space
+// We want (0,0) to be top-left in pixel space
+vec2 project(vec2 pos, vec2 size){
+  return vec2(
+    (pos.x + 1.0),
+    (1.0 - pos.y)
+  ) * size * 0.5;
+}
+
+void main() {
+  vec2 pixelPos = project(a_vertex, u_screenSize);
+  
+  // Apply offset and scale to get grid coordinates
+  v_gridCoord = (pixelPos - u_pos) / u_scale;
+  
+  gl_Position = vec4(a_vertex, 0, 1);
+}`;
+const renderFragment = glsl`#version 300 es
+precision highp float;
+in vec2 v_gridCoord;
+out vec4 fragColor;
+${uniform.float("u_thickness")}
+
+float grid(vec2 coord, float thickness) {
+  vec2 cell = mod(coord, 100.0);
+  vec2 derivative = fwidth(coord);
+  
+  // Convert thickness from screen pixels to grid space
+  vec2 screenThickness = derivative * thickness;
+  
+  // Ensure minimum thickness to prevent lines from disappearing
+  vec2 minThickness = max(screenThickness, derivative * 0.5);
+  
+  // Create hard edges by checking if we're within thickness of a grid line
+  float lineX = step(cell.x, minThickness.x) + step(100.0 - minThickness.x, cell.x);
+  float lineY = step(cell.y, minThickness.y) + step(100.0 - minThickness.y, cell.y);
+  
+  // Clamp to 0-1 range and return maximum (union of lines)
+  return max(min(lineX, 1.0), min(lineY, 1.0));
+}
+
+void main() {
+  // Create grid pattern with adjustable thickness
+  float gridPattern = grid(v_gridCoord, u_thickness);
+  
+  // Grid colors
+  vec3 backgroundColor = vec3(0.1, 0.1, 0.15);
+  vec3 gridColor = vec3(0.3, 0.3, 0.4);
+  vec3 color = mix(backgroundColor, gridColor, gridPattern);
+  
+  fragColor = vec4(color, 1.0);
+}`;
+const {
+  program,
+  view: { attributes, uniforms }
+} = compile(gl, vertex, renderFragment);
+attributes.a_vertex.set(new Float32Array([
+  -1,
+  -1,
+  // bottom-left
+  1,
+  -1,
+  // bottom-right
+  -1,
+  1,
+  // top-left
+  -1,
+  1,
+  // top-left
+  1,
+  -1,
+  // bottom-right
+  1,
+  1
+  // top-right
+]));
+function render() {
+  gl.useProgram(program);
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  gl.viewport(0, 0, canvas.width, canvas.height);
+  gl.clearColor(0, 0, 0, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  attributes.a_vertex.bind();
+  uniforms.u_screenSize.set(canvas.width, canvas.height);
+  uniforms.u_pos.set(state.position.x, state.position.y);
+  uniforms.u_scale.set(state.scale);
+  uniforms.u_thickness.set(1);
+  state.elements.forEach((element) => element.update());
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+render();

package/dev/dist/assets/index-C2N3u8wj.css

@@ -0,0 +1,12 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0px;
+  height: 100%;
+  overscroll-behavior-y: none;
+}
+canvas {
+  margin: auto;
+  image-rendering: pixelated;
+}

package/dev/dist/assets/index-D-N0FDYs.js

@@ -0,0 +1,110 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/bezier-DrA4cU_H.js","assets/tag-C0Vskpp8.js","assets/utils-2dzuv_bW.js","assets/game-of-life-BYlzWhEL.js","assets/glsl-composition-D_BaFFij.js","assets/grid-DfXHNLBm.js","assets/overview-IeUhUflE.js","assets/pix-sim-DMJJA_WO.js","assets/ray-casting-modules-Dkfw4tdc.js","assets/ray-casting-DTQetDPd.js","assets/sdf-CS0uBonx.js","assets/symbol-BL_7GJ0M.js","assets/tetris-D8mokodr.js"])))=>i.map(i=>d[i]);
+import { d as dom } from './utils-2dzuv_bW.js';
+
+const scriptRel = 'modulepreload';const assetsURL = function(dep) { return "/"+dep };const seen = {};const __vitePreload = function preload(baseModule, deps, importerUrl) {
+	let promise = Promise.resolve();
+	if (true               && deps && deps.length > 0) {
+		document.getElementsByTagName("link");
+		const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+		const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
+		function allSettled(promises$2) {
+			return Promise.all(promises$2.map((p$1) => Promise.resolve(p$1).then((value$1) => ({
+				status: "fulfilled",
+				value: value$1
+			}), (reason) => ({
+				status: "rejected",
+				reason
+			}))));
+		}
+		promise = allSettled(deps.map((dep) => {
+			dep = assetsURL(dep);
+			if (dep in seen) return;
+			seen[dep] = true;
+			const isCss = dep.endsWith(".css");
+			const cssSelector = isCss ? "[rel=\"stylesheet\"]" : "";
+			if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) return;
+			const link = document.createElement("link");
+			link.rel = isCss ? "stylesheet" : scriptRel;
+			if (!isCss) link.as = "script";
+			link.crossOrigin = "";
+			link.href = dep;
+			if (cspNonce) link.setAttribute("nonce", cspNonce);
+			document.head.appendChild(link);
+			if (isCss) return new Promise((res, rej) => {
+				link.addEventListener("load", res);
+				link.addEventListener("error", () => rej(/* @__PURE__ */ new Error(`Unable to preload CSS for ${dep}`)));
+			});
+		}));
+	}
+	function handlePreloadError(err$2) {
+		const e$1 = new Event("vite:preloadError", { cancelable: true });
+		e$1.payload = err$2;
+		window.dispatchEvent(e$1);
+		if (!e$1.defaultPrevented) throw err$2;
+	}
+	return promise.then((res) => {
+		for (const item of res || []) {
+			if (item.status !== "rejected") continue;
+			handlePreloadError(item.reason);
+		}
+		return baseModule().catch(handlePreloadError);
+	});
+};
+
+const css = "/assets/index-C2N3u8wj.css";
+
+const iframe = document.querySelector("iframe");
+const nav = document.querySelector("nav");
+nav.append(dom("h3", { innerText: "Examples" }));
+const urls = Object.fromEntries(
+  Object.entries(/* #__PURE__ */ Object.assign({"./examples/bezier.ts": () => __vitePreload(() => import('./bezier-DrA4cU_H.js'),true              ?__vite__mapDeps([0,1,2]):void 0),"./examples/game-of-life.ts": () => __vitePreload(() => import('./game-of-life-BYlzWhEL.js'),true              ?__vite__mapDeps([3,1,2]):void 0),"./examples/glsl-composition.ts": () => __vitePreload(() => import('./glsl-composition-D_BaFFij.js'),true              ?__vite__mapDeps([4,1,2]):void 0),"./examples/grid.ts": () => __vitePreload(() => import('./grid-DfXHNLBm.js'),true              ?__vite__mapDeps([5,1,2]):void 0),"./examples/overview.ts": () => __vitePreload(() => import('./overview-IeUhUflE.js'),true              ?__vite__mapDeps([6,1]):void 0),"./examples/pix-sim.ts": () => __vitePreload(() => import('./pix-sim-DMJJA_WO.js'),true              ?__vite__mapDeps([7,1,2]):void 0),"./examples/ray-casting-modules.ts": () => __vitePreload(() => import('./ray-casting-modules-Dkfw4tdc.js'),true              ?__vite__mapDeps([8,1,2]):void 0),"./examples/ray-casting.ts": () => __vitePreload(() => import('./ray-casting-DTQetDPd.js'),true              ?__vite__mapDeps([9,1,2]):void 0),"./examples/sdf.ts": () => __vitePreload(() => import('./sdf-CS0uBonx.js'),true              ?__vite__mapDeps([10,1,2]):void 0),"./examples/symbol.ts": () => __vitePreload(() => import('./symbol-BL_7GJ0M.js'),true              ?__vite__mapDeps([11,1,2]):void 0),"./examples/tetris.ts": () => __vitePreload(() => import('./tetris-D8mokodr.js'),true              ?__vite__mapDeps([12,1]):void 0)})).map(([key, entry]) => {
+    const name = key.split("/").pop().replace(".ts", "");
+    const chunk = entry.toString().match(/import\(['"]([^'"]+)['"]/)[1];
+    return [name, chunk];
+  })
+);
+Object.entries(urls).forEach(([name, localUrl]) => {
+  nav.append(
+    dom("button", {
+      onclick(event) {
+        event.preventDefault();
+        load(name, localUrl);
+      },
+      innerHTML: name.replaceAll("-", " "),
+      "data-route": name
+    })
+  );
+});
+function load(name, url) {
+  window.location.hash = name;
+  URL.revokeObjectURL(iframe.src);
+  nav.querySelectorAll("button").forEach((button) => {
+    if (button.getAttribute("data-route") === name) {
+      button.classList.add("active");
+    } else {
+      button.classList.remove("active");
+    }
+  });
+  iframe.src = URL.createObjectURL(
+    new Blob(
+      [
+        `<head>
+<link rel="stylesheet" href="${new URL(css, import.meta.url).href}"></link>
+<script type="module" src="${new URL(url, import.meta.url).href}"><\/script></head>`
+      ],
+      {
+        type: "text/html"
+      }
+    )
+  );
+}
+const hash = window.location.hash.slice(1);
+if (hash && hash in urls) {
+  load(hash, urls[hash]);
+}
+window.addEventListener("hashchange", () => {
+  const hash2 = window.location.hash.slice(1);
+  if (hash2 && hash2 in urls) {
+    load(hash2, urls[hash2]);
+  }
+});

package/dev/dist/assets/main-CSE2fki3.js

@@ -0,0 +1,32 @@
+import './index-D-N0FDYs.js';
+import './utils-2dzuv_bW.js';
+
+true              &&(function polyfill() {
+	const relList = document.createElement("link").relList;
+	if (relList && relList.supports && relList.supports("modulepreload")) return;
+	for (const link of document.querySelectorAll("link[rel=\"modulepreload\"]")) processPreload(link);
+	new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type !== "childList") continue;
+			for (const node of mutation.addedNodes) if (node.tagName === "LINK" && node.rel === "modulepreload") processPreload(node);
+		}
+	}).observe(document, {
+		childList: true,
+		subtree: true
+	});
+	function getFetchOpts(link) {
+		const fetchOpts = {};
+		if (link.integrity) fetchOpts.integrity = link.integrity;
+		if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
+		if (link.crossOrigin === "use-credentials") fetchOpts.credentials = "include";
+		else if (link.crossOrigin === "anonymous") fetchOpts.credentials = "omit";
+		else fetchOpts.credentials = "same-origin";
+		return fetchOpts;
+	}
+	function processPreload(link) {
+		if (link.ep) return;
+		link.ep = true;
+		const fetchOpts = getFetchOpts(link);
+		fetch(link.href, fetchOpts);
+	}
+}());

package/dev/dist/assets/overview-IeUhUflE.js

@@ -0,0 +1,80 @@
+import { i as interleave, a as attribute, u as uniform, g as glsl, c as compile } from './tag-C0Vskpp8.js';
+
+const canvas = document.createElement("canvas");
+canvas.width = 800;
+canvas.height = 600;
+document.body.append(canvas);
+const gl = canvas.getContext("webgl2");
+gl.viewport(0, 0, canvas.width, canvas.height);
+const vertex = glsl`
+precision mediump float;
+
+${interleave("instancedData", [attribute.vec2("a_pos"), attribute.vec3("a_color")], {
+  instanced: true
+})}
+${attribute.vec2("a_vertex")}
+${uniform.float("u_time")}
+
+varying vec3 v_color;
+
+void main() {
+  float s = sin(u_time);
+  float c = cos(u_time);
+  mat2 rotation = mat2(
+    c, -s,
+    s,  c
+  );
+  vec2 position = a_pos + a_vertex * rotation;
+  gl_Position = vec4(position, 0.0,  1.0);
+
+  v_color = a_color;
+}`;
+const fragment = glsl`
+precision mediump float;
+
+varying vec3 v_color;
+
+void main() {
+  gl_FragColor = vec4(v_color, 1.0);
+}`;
+const {
+  program,
+  view: {
+    attributes: { a_vertex },
+    uniforms: { u_time },
+    interleavedAttributes: { instancedData }
+  }
+} = compile(gl, vertex, fragment);
+instancedData.set(
+  new Float32Array(
+    function* () {
+      for (let i = 0; i < 100; i++) {
+        yield (Math.random() - 0.5) * 2;
+        yield (Math.random() - 0.5) * 2;
+        yield Math.random();
+        yield Math.random();
+        yield Math.random();
+      }
+    }()
+  )
+);
+instancedData.bind();
+a_vertex.set(
+  new Float32Array([
+    // top
+    0,
+    1,
+    // bottom left
+    -1,
+    -1,
+    // bottom right
+    1,
+    -1
+  ])
+).bind();
+gl.useProgram(program);
+requestAnimationFrame(function draw(delta) {
+  requestAnimationFrame(draw);
+  u_time.set(delta / 1e3);
+  gl.drawArraysInstanced(gl.TRIANGLES, 0, 3, 100);
+});