camera Position, Direction and FOV available in shaders, WIP Volume Raymarching Praktikum

Author: Ka1serM

src/App.css

@@ -2,82 +2,6 @@
 @plugin "@tailwindcss/typography";
 @import 'katex/dist/katex.min.css';
 
-/* Ensure inner scroll works nicely */
-.prose {
-  max-width: 100%;
-  min-width: 0;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  box-sizing: border-box;
-}
-
-/* KaTeX horizontal scroll */
-.prose .katex-display {
-  overflow-x: auto;
-  overflow-y: hidden;
-  max-width: 100%;
-  margin: 1em 0;
-}
-.prose .katex {
-  font-size: 1em;
-  white-space: normal;
-}
-.prose .katex .katex-html {
-  white-space: normal;
-  max-width: 100%;
-  overflow-wrap: break-word;
-}
-.prose .katex-display > .katex {
-  display: inline-block;
-  max-width: 100%;
-  text-align: left;
-}
-
-/* Code blocks */
-.prose pre {
-  max-width: 100%;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-.prose code {
-  max-width: 100%;
-  overflow-wrap: break-word;
-  word-break: break-all;
-}
-
-/* Tables */
-.prose table {
-  display: block;
-  max-width: 100%;
-  overflow-x: auto;
-}
-
-/* Images & embedded content */
-.prose img,
-.prose iframe,
-.prose video,
-.prose embed,
-.prose object {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Very long words */
-.prose p,
-.prose li,
-.prose td,
-.prose th {
-  overflow-wrap: break-word;
-  word-break: break-word;
-  hyphens: auto;
-}
-
-/* Smooth scrolling for inner scroll */
-.flex-1.overflow-y-auto {
-  -webkit-overflow-scrolling: touch;
-}
-
 @custom-variant dark (&:is(.dark *));
 
 @font-face {

src/lib/components/ShaderPreview.svelte

@@ -35,7 +35,8 @@
     camera.position.set(0, 0, 1);
     camera.aspect = aspect;
     camera.updateProjectionMatrix();
-    if (!sharedCameraRef) sharedCameraRef = camera;
+    if (!sharedCameraRef)
+      sharedCameraRef = camera;
 
     // Renderer
     renderer = new THREE.WebGLRenderer({
@@ -83,13 +84,22 @@
     animate();
   }
 
-  // --- Animate loop ---
+  // Call every frame
   function animate() {
     animationFrameId = requestAnimationFrame(animate);
     if (!renderer || !scene || !camera) return;
 
+    // Update Shader Uniforms
     controls?.update();
-    if (shaderMaterial) shaderMaterial.uniforms.time.value = clock.getElapsedTime();
+    if (shaderMaterial) {
+      // Update Time
+      shaderMaterial.uniforms.time.value = clock.getElapsedTime();
+
+      // Update Camera Position, Direction and FOV
+      shaderMaterial.uniforms.cameraPosition.value.copy(camera.position);
+      shaderMaterial.uniforms.cameraDirection.value.copy(camera.getWorldDirection(new THREE.Vector3()));
+      shaderMaterial.uniforms.cameraFov.value = camera.fov * (Math.PI / 180); // convert degrees to radians
+    }
 
     renderer.render(scene, camera);
   }
@@ -139,6 +149,9 @@
         iResolution: {
           value: new THREE.Vector2(container.clientWidth * window.devicePixelRatio, container.clientHeight * window.devicePixelRatio)
         },
+          cameraFov: { value: camera.fov * (Math.PI / 180) }, // convert degrees to radians
+          cameraPosition: { value: camera.position.clone() },
+          cameraDirection: { value: camera.getWorldDirection(new THREE.Vector3()) },
       },
       glslVersion: THREE.GLSL3,
     });

src/lib/components/TaskPanel.svelte

@@ -19,7 +19,7 @@
 
 <div class="h-full flex flex-col overflow-hidden">
   <!-- Header -->
-  <div class="flex items-center justify-between p-6 flex-shrink-0">
+  <div class="flex items-center justify-between p-6 shrink-0">
     {#if $taskStore?.task}
       <h1 class="text-2xl font-bold text-foreground">
         {$taskStore.task.title}