update to work in pages

Konstiu · Konstiu · commit 55e55fbcb3c7 · 2026-02-24T15:37:39.000+01:00
diff --git a/Vis_Framework_2024W/index.html b/Vis_Framework_2024W/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Vis1</title>
+    <title>Volume Visualization</title>
 
     <link rel="stylesheet" type="text/css" href="style.css">
 
@@ -26,8 +26,7 @@
 <!-- call init function when page has loaded -->
 <body onload="init()">
 
-<h1>Vis1 Exercise</h1>
-<h2>Grüner Niklas, Unterweger Konstantin</h2>
+<h1>Volume Visualization</h1>
 
 <!-- data selector -->
 <p>Select your data here: <input id="upload" type="file"></p>
@@ -52,4 +51,4 @@ <h2>Grüner Niklas, Unterweger Konstantin</h2>
     </div>
 </div>
 </body>
-</html>
+</html>
diff --git a/Vis_Framework_2024W/js/shader.js b/Vis_Framework_2024W/js/shader.js
@@ -25,9 +25,38 @@ class Shader {
         });
     }
 
+    static #resolveAssetUrl(relativePath) {
+        // GitHub Pages is typically hosted under `https://<user>.github.io/<repo>/`.
+        // If the page is accessed without a trailing slash (e.g. `/repo`), the browser
+        // resolves relative paths against `/`, causing 404s for `shaders/...`.
+        // Normalize the base URL so assets stay relative to the project root.
+        let base = window.location.href;
+        const url = new URL(base);
+        const pathname = url.pathname;
+        const lastSegment = pathname.substring(pathname.lastIndexOf("/") + 1);
+        const looksLikeFile = lastSegment.includes(".");
+        if (!pathname.endsWith("/") && !looksLikeFile) {
+            url.pathname = pathname + "/";
+            url.search = "";
+            url.hash = "";
+            base = url.toString();
+        }
+
+        return new URL(relativePath, base).toString();
+    }
+
     async #loadShader(shader, name){
-        const program = await d3.text("shaders/"+name+".essl");
-        this.material[shader] = program;
+        const shaderUrl = Shader.#resolveAssetUrl(`shaders/${name}.essl`);
+        try {
+            const program = await d3.text(shaderUrl);
+            this.material[shader] = program;
+        } catch (e) {
+            console.error(
+                `Failed to load shader '${name}.essl' from '${shaderUrl}'. Current page URL is '${window.location.href}'.`,
+                e
+            );
+            throw e;
+        }
     }
 
     // this function has to be explicitly called after the constructor from another async function like that:
@@ -51,4 +80,4 @@ class Shader {
             this.material.uniforms[key] = new THREE.Uniform(value);
         }
     }
-}
+}
