feat: initial commit

2026-08-19 21:23:42 +02:00
parent d87042cebb
commit f33bfd81f9
30 changed files with 5527 additions and 0 deletions
--- a/18
+++ b/18
@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2026 AmyT3a
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
+LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/README.md
+++ b/README.md
@@ -0,0 +1,18 @@
+# SDF-Workshop
+
+A interactive reveal.js workshop to teach the basics of signed distance field rendering.
+[Here](https://sdf.madeio.net) are the slides.
+
+## Further reading
+Big big thanks to [Inigo Quilez](https://iquilezles.org/), a major inspiration to me and my major source to learn about SDF rendering.
+- [furmula collection](https://iquilezles.org/articles/distfunctions/)
+- [normals](https://iquilezles.org/articles/normalsSDF/)
+- [soft shadow](https://iquilezles.org/articles/rmshadows/)
+- [a creazy sdf scene](https://www.shadertoy.com/view/4ttSWf) (only follow link on a system with a capable gpu) 
+
+## Tech Stack
+- [Reveal.js](https://github.com/hakimel/reveal.js/)
+- [Codemirror](https://code.haverbeke.berlin/codemirror/dev/) - the shader editor
+  - [Vim Motions](https://github.com/replit/codemirror-vim)
+  - [glsl highlightibg](https://github.com/untopics/codemirror-lang-glsl)
+- [Svelte (UI Framework/State Management](https://github.com/sveltejs)
--- a/Untitled.blend
+++ b/Untitled.blend
--- a/Untitled.blend1
+++ b/Untitled.blend1
--- a/index.html
+++ b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+		/>
+
+		<title>reveal.js</title>
+
+	</head>
+	<body>
+    <div id="app"></div>
+
+		<script type="module" src="./src/main.ts">
+		</script>
+	</body>
+</html>
--- a/opencode.json
+++ b/opencode.json
@@ -0,0 +1,51 @@
+
+{
+  "$schema": "https://opencode.ai/config.json",
+  "permission": {
+    "lsp": "allow"
+  },
+  "lsp": true,
+  "provider": {
+    "llamacpp": {
+      "npm": "@ai-sdk/openai-compatible",
+      "options": {
+        "baseURL": "http://localhost:11434/v1",
+        "apiKey": "ollama"
+      },
+      "models": {
+        "google/gemma-4-12B-it-qat-q4_0-gguf": {
+          "name":"local llamacpp",
+          "modalities": {
+            "input": ["text", "image"],
+            "output": ["text"]
+          },
+          "_launch": true,
+          "tool_call": true,
+          "maxTokens": 16384,
+          "vision": true
+        }
+      }
+    },
+    "myprovider": {
+      "npm": "@ai-sdk/openai-compatible",
+      "name": "Uni Mainz",
+      "options": {
+        "baseURL": "https://ki-chat.uni-mainz.de/api",
+        "apiKey": "sk-b0949c09e3654161b7028bdb4a46aca4"
+      },
+      "models": {
+        "Qwen3 235B Thinking": {
+          "name": "Qwen3 Thinking",
+          "modalities": {
+            "input": ["text", "image"],
+            "output": ["text"]
+          },
+          "limit": {
+            "context": 65563,
+            "output": 16384
+          }
+        }
+      }
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,47 @@
+{
+	"name": "ReSTIR Presentation",
+	"description": "The HTML Presentation Framework",
+	"homepage": "https://revealjs.com",
+	"subdomain": "revealjs",
+	"license": "MIT",
+	"type": "module",
+	"files": [
+		"dist",
+		"css",
+		"js",
+		"LICENSE",
+		"README.md",
+		"index.html",
+		"demo.html"
+	],
+	"scripts": {
+		"dev": "npm run start",
+		"start": "vite",
+		"prepack": "npm run build",
+		"build:core": "tsc && vite build && vite build -c vite.config.styles.ts && node scripts/add-banner.js dist/reveal.js",
+		"build:es5": "npm run build && node scripts/build-es5.js",
+		"build:styles": "vite build -c vite.config.styles.ts",
+		"build": "vite build",
+		"package": "node scripts/zip.js",
+		"test": "node scripts/test.js",
+		"react:build": "npm run --prefix react build",
+		"react:demo": "npm run --prefix react demo",
+		"react:test": "npm run --prefix react test"
+	},
+	"devDependencies": {
+		"@catppuccin/highlightjs": "^1.0.1",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"@tsconfig/svelte": "^5.0.8",
+		"@types/node": "^25.9.1",
+		"@vitejs/devtools": "^0.3.4",
+		"highlight.js": "^11.11.1",
+		"typescript": "~6.0.2",
+		"vite": "^8.0.12",
+		"vite-plugin-dts": "^4.5.4"
+	},
+	"dependencies": {
+		"@lucide/svelte": "^1.23.0",
+		"reveal.js": "^6.0.1",
+		"svelte": "^5.56.4"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  import "@catppuccin/highlightjs/css/catppuccin-latte.css";
+  import "reveal.js/reveal.css";
+  import "reveal.js/theme/white.css";
+  import Reveal, { type RevealApi } from "reveal.js";
+  import { onMount, tick } from "svelte";
+  import reveal from "./config.ts";
+  import PathTracing from "./PathTracing.svelte";
+  import EstInegration from "./EstInegration.html?raw";
+  import pathMath from "./pathExample.html?raw";
+  import fir from "./imgs/n1.png";
+  import pdf from "./imgs/pdf.svg";
+  import distr from "./imgs/distr.png";
+
+  let deck: RevealApi | undefined;
+
+  onMount(async () => {
+    await tick();
+    deck = new Reveal(reveal.reveal);
+    deck.initialize({ slideNumber: true });
+  });
+</script>
+
+<svelte:head>
+  <title>ReSTIR</title>
+</svelte:head>
+
+<div class="reveal">
+  <div class="slides">
+    <section>
+      <h2>ReSTIR</h2>
+      Ray reconstruction in realtime
+      <p style="font-size: 20px">
+        <a
+          href="https://git.madeio.net/Amy/PathTracingPresentation"
+          target="_blank">Source Code: Slides,</a
+        >
+        <a href="https://codeberg.org/AmyT3a/PathTracer" target="_blank"
+          >WebGPU Renderer</a
+        > <br /> Amy Retzerau
+      </p>
+    </section>
+    <section>
+      <h2>ReSTIR</h2>
+      Reservoir-based spatial/temporal importance resampling
+    </section>
+    <PathTracing />
+    {@html EstInegration}
+    <section data-markdown data-separator-notes="^Note:">
+      <script type="text/template">
+    ## Andwendungen
+    - Direct Lighting <!-- .element: class="fragment"  -->
+
+    - BSDF <!-- .element: class="fragment"  -->
+
+    - Valume Rendering <!-- .element: class="fragment"  -->
+
+    - Pathtracing <!-- .element: class="fragment"  -->
+
+      </script>
+    </section>
+    <section>
+      <section>
+        <h2>Anwendung beim Pathtracing</h2>
+      </section>
+      <section>
+        <img src={fir} height="500px" />
+      </section>
+      {@html pathMath}
+    </section>
+    <section>
+      A Gentle Introduction to ReSTIR Path Reuse in Real-Time <br />
+      2023 <br />
+      Chris Wyman, Markus Kettunen, Daqi Lin
+    </section>
+  </div>
+</div>
+
+<style>
+  .reveal :global(.slide-number) {
+    border-radius: 3px;
+  }
+
+  .slides :global(a) {
+    color: #1e66f5 !important;
+  }
+
+  :global(html:not(.reveal-print) .slide-number) {
+    bottom: unset !important;
+    top: 8px;
+  }
+
+  :global(.slides section:not(:has(section, pre))) {
+    background: #eff1f5 !important;
+    box-shadow: 0 5px 15px #00000026;
+    border-radius: 10px;
+    margin-left: 0;
+    padding: 10px 0 10px 0;
+  }
+
+  .reveal :global(pre) {
+    border-radius: 10px;
+  }
+
+  .reveal :global(code.hljs) {
+    border-radius: 10px;
+    /* background: transparent !important; */
+  }
+
+  .reveal :global(.lucide) {
+    vertical-align: middle;
+  }
+
+  :global(.hide) {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    line-height: 0;
+    z-index: 100;
+  }
+</style>
--- a/src/EstInegration.html
+++ b/src/EstInegration.html
@@ -0,0 +1,180 @@
+<section>
+  <section>
+    <h2>annäherung an Integrale</h2>
+  </section>
+  <section data-markdown>
+    <script type="text/template">
+    ## Monte Carlo
+    $$I \approx \frac 1 M \sum^M_ &lbrace; i = 1 &rbrace; f(X_i)$$
+
+    $X\subset\Omega$<!-- .element: class="fragment"  -->
+
+    $|X|=M$<!-- .element: class="fragment" -->
+
+    gleichverteilt<!-- .element: class="fragment"  -->
+
+    ---
+
+
+    $$ I \approx \frac 1 M \sum^M_ &lbrace; i = 1 &rbrace; \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace; $$
+    $p_i$ Wahrscheinlichkeitsdichte (PDF) für $X_i$
+
+---
+
+    $$ I \approx  \frac &lbrace; f(X) &rbrace;
+    &lbrace; p(X) &rbrace; $$
+    </script>
+  </section>
+</section>
+<section>
+  <section data-markdown data-separator-notes="^Note:">
+    <script type="text/template">
+      ## Support
+      Bei einer Funktion $f: X\to Y$
+
+      $\text &lbrace; supp&rbrace;(f) \Leftrightarrow g: \set &lbrace; x \in X : f(x)\neq 0 &rbrace; \to Y$
+
+      Zufallszahl $X$<!-- .element: class="fragment"  data-fragment-index="1"-->
+
+      $\text{supp}(X) \Leftrightarrow$ Wertebreich von $X$<!-- .element: class="fragment" data-fragment-index="1" -->
+    </script>
+  </section>
+</section>
+<section>
+  <section>
+    <h2>Multiple Importance Sampling</h2><aside class="notes">
+    - Bisher 1 wahrscheinlichkeits funktion
+    - mehrere??
+  </aside>
+  </section>
+  <section data-markdown data-separator-notes="^Note:">
+    <script type="text/template">
+    ## MIS
+    $$\begin{align}
+    I &\approx \sum^M_ &lbrace; i = 1 &rbrace; \frac 1 M \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace;  \\\\
+    &\approx \sum^M_ &lbrace; i = 1 &rbrace; m_i(X_i) \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace; \end{align}$$
+
+---
+
+    ## Bedingungen
+    $$\sum _ {  X_i \in \text{supp}(X) } m_i (X) = 1 $$
+
+    $$\forall x \notin \text{supp}(X_i):m_i(x)=0$$<!-- .element: class="fragment"  -->
+
+Note:
+arsch teuer jedes Mal f
+---
+    ## Wir werden nutzen
+    $$m_i(x)=\frac{p_i(x)}{\sum_jp_j(x)}$$
+
+Note:
+gewichten die wahrscheinlichkeit von p_i
+relativ zu allen funtionen die wir betrachten
+    </script>
+  </section>
+</section>
+<section>
+  <section>
+    <h2>Resampled Importance <br/>Sampling</h2><aside class="notes">
+    - abstrahieren
+    - eher nicht vergessen
+  </aside>
+  </section>
+  <section data-markdown data-separator-notes="^Note:">
+    <script type="text/template">
+    $$\int f \approx \frac {f}{p}$$
+    $$\Rightarrow \frac 1 p \approx \frac {\int f} f$$
+
+    $$\Leftrightarrow \frac 1 p \approx \frac 1 f
+     \sum^M_ &lbrace; i = 1 &rbrace; m_i(X_i) \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace; $$<!-- .element: class="fragment"  -->
+
+
+---
+    $$I = W_X \cdot f(X)$$
+    $$\Rightarrow W_{X} = \frac 1 p$$
+
+    $$W_{X} = \frac 1 {f(X)}
+     \sum^M_ &lbrace; i = 1 &rbrace; m_i(X_i) \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace; $$<!-- .element: class="fragment"  -->
+---
+
+    $$W_{X} = \frac 1 f
+     \sum^M_ &lbrace; i = 1 &rbrace; m_i(X_i) \frac &lbrace; f(X_i) &rbrace;
+    &lbrace; p_i(X_i) &rbrace; $$
+    $$w_i =  m_i(X_i) \frac &lbrace; f(X_i) &rbrace;{p_i(X_i)}$$
+
+    $$w_i = m_i(X_i) \cdot f (X_i) \cdot W_{X_i}$$<!-- .element: class="fragment"  -->
+
+
+---
+    ## RIS
+    Zielfunktion $\hat p$
+
+    muss nicht $\hat p = f$
+
+Note:
+- nur für canonische korrektheit
+- falls PDF für 
+
+---
+$$W_X = \frac 1 {\hat p (X)} \sum_{i=1}^M(w_i)$$
+$$w_i = m_i(X_i)\frac {\hat p (X_i)}{p(X_i)}$$
+
+Note:
+- wenn p^ f keine varianz
+
+    </script>
+  </section>
+</section>
+<section>
+  <section>
+    <h2>Ziehen der Samples</h2>
+  </section>
+  <section>
+    <h2>Batch selection</h2>
+  </section>
+  <section>
+  <pre><Code data-trim data-line-numbers="1|2-8|10-15" class="language-python">
+    samples = [[w0,s0],[w1,s1],[wM,sM]]
+    get_index():
+      r = random()
+      for i in range(length(samples)):
+        r -= weights[i][0]
+        if r <= 0:
+          return i
+      return None
+
+    get_weight():
+      i = get_index()
+      if i is not None:
+        w = sum(s[0] for s in samples) / p(sample)
+        return[w,samples[i][1]]
+      return [0,None]
+
+
+  </Code></pre>
+  </section>
+  <section>
+    <h2>Reservoir</h2>
+  </section>
+  <section>
+  <pre><Code data-trim data-line-numbers="1,2|4-7|9-11" class="language-python">
+    reservoir_sample = None
+    weight_sum = 0
+
+    add_sample(sample,weight):
+      weight_sum += weight;
+      if random() < ( weight / weight_sum ):
+        reservoir_sample = sample
+
+    get_weight():
+      if reservoir_sample is not None:
+        return  weight_sum / p(reservoir_sample)
+        
+  </Code></pre>
+  </section>
+</section>
--- a/src/PathTracing.svelte
+++ b/src/PathTracing.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import img from "./imgs/basic-path.png";
+  import pathMath from "./pathMath.html?raw";
+  import fir from "./imgs/n0.png";
+  import sec from "./imgs/1.png";
+</script>
+
+<section>
+  <section data-background-image={img}>
+    <h2>Path Tracing Recap</h2>
+  </section>
+  <section>
+    <img src={fir} height="500px" />
+    <aside class="notes">- Camera - Diffuse - Area Light - Falsch herum</aside>
+  </section>
+  {@html pathMath}
+</section>
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,25 @@
+
+html, body, #app {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  background-color: #9ca0b0!important;
+}
+h2 {
+  color: #4c4f69 !important;
+}
+
+section {
+  color: #4c4f69 !important;
+}
+
+
+
+
+:root{
+  --my-bezier: cubic-bezier(0.28, 1.17, 0.64, 1);
+  --r-heading-text-transform: none !important;
+  --r-link-color: #1e66f5 !important;
+}
--- a/src/config.ts
+++ b/src/config.ts
@@ -0,0 +1,16 @@
+import Highlight from "reveal.js/plugin/highlight";
+import RevealMath from "reveal.js/plugin/math";
+import Markdown from "reveal.js/plugin/markdown";
+import Nodes from "reveal.js/plugin/notes";
+
+export default {
+  // App Config
+  app: {
+    name: "Boilerplate",
+  },
+  // Reveal Config
+  reveal: {
+    plugins: [Highlight, RevealMath.MathJax4, Markdown, Nodes],
+    hash: true,
+  },
+};
--- a/src/imgs/0.png
+++ b/src/imgs/0.png
--- a/src/imgs/1.png
+++ b/src/imgs/1.png
--- a/src/imgs/3.png
+++ b/src/imgs/3.png
--- a/src/imgs/4.png
+++ b/src/imgs/4.png
--- a/src/imgs/basic-path.png
+++ b/src/imgs/basic-path.png
--- a/src/imgs/distr.png
+++ b/src/imgs/distr.png
--- a/src/imgs/n0.png
+++ b/src/imgs/n0.png
--- a/src/imgs/n1.png
+++ b/src/imgs/n1.png
--- a/src/imgs/pdf.svg
+++ b/src/imgs/pdf.svg
@@ -0,0 +1 @@
+https://de.wikipedia.org/wiki/Datei:Integral_as_region_under_curve.svg
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,19 @@
+import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
+
+// import 'reveal.js/reveal.css';
+//
+// import 'reveal.js/plugin/highlight/monokai.css';
+const appEle = document.getElementById("app")!;
+const app = mount(App, {
+  target: appEle,
+});
+appEle.addEventListener("keydown", (e) => {
+  if (e.key == "Escape") {
+    console.log("test");
+    e.preventDefault();
+  }
+});
+
+export default app;
--- a/src/pathExample.html
+++ b/src/pathExample.html
@@ -0,0 +1,16 @@
+
+<section data-markdown data-separator-notes="^Note:">
+  <script type="text/template">
+    $$I=\int_\Omega f(x)dx$$
+    ---
+    $$f(X)=\prod^D f_s ( x_j \to x_{j+1} )\cdot G(x_j \leftrightarrow x_{𝑗+1})$$
+    Bounces $X$: $[x_0,x_1,x_2,...,x_D]$
+
+    ---
+  $$f_L(a,b) = \frac {p(b)} \pi $$
+  $$G(a,b) = \cos(\alpha)$$
+    
+---
+ $$J = V(x_1,y_2) \frac{ \frac{\cos(\alpha_{x_1})\cos(\alpha_{y_2})}{x_1\cdot y_2}}{\frac{\cos(\alpha_{y_1})\cos(\alpha_{y_2})}{y_1\cdot y_2}}$$
+  </script>
+</section>
--- a/src/pathMath.html
+++ b/src/pathMath.html
@@ -0,0 +1,16 @@
+<section data-markdown data-separator-notes="^Note:">
+  <script type="text/template">
+    $$I_i=\int_{\Omega_i} f(x)dx$$
+
+Note:
+  Omega menga aller
+  lichstrahlen
+  photonen
+  radienz
+---
+
+    $$f(X)=\prod^D f_s ( x_j \to x_{j+1} )\cdot G(x_j \leftrightarrow x_{𝑗+1})$$
+    Bounces $X$: $[x_0,x_1,x_2,...,x_D]$
+
+  </script>
+</section>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+	"compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
+    "types": ["svelte", "vite/client"],
+
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+    "moduleDetection": "force",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"noEmit": true,
+
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+	"references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "module": "esnext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/upload.sh
+++ b/upload.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+rsync -a dist/* root@192.168.178.143:Nginx/data/sdf/
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { DevTools } from "@vitejs/devtools";
+
+export default defineConfig({
+  devtools: {
+    enabled: true,
+  },
+  plugins: [svelte(), DevTools()],
+});
				`@@ -0,0 +1 @@`
				`https://de.wikipedia.org/wiki/Datei:Integral_as_region_under_curve.svg`