Optimize rgb shader and replace background grid with starfield

evadecker · evadecker · commit 1d71e7a61dad · 2025-04-14T22:43:18.000-04:00
diff --git a/src/components/Guide.astro b/src/components/Guide.astro
@@ -136,7 +136,6 @@ const currentTime = new Date();
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    background: linear-gradient(to bottom, black, blue);
     min-height: 0;
     z-index: 1;
   }
diff --git a/src/components/RotatingLogo.astro b/src/components/RotatingLogo.astro
@@ -14,7 +14,6 @@
   import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
   import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
   import { RGBTrailPass } from "../shaders/RGBTrailPass";
-  import { GridHelper } from "three";
   import { DragControls } from "three/examples/jsm/Addons.js";
 
   const svg = `<svg width="199" height="71" viewBox="0 0 199 71" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -28,7 +27,9 @@
     // Three.js setup
     // ----------------------
 
-    const scene = new THREE.Scene();
+    const scene = new THREE.Scene(); // Exponential fog for depth effect
+    scene.fog = new THREE.FogExp2(0x000000, 0.0015);
+
     const camera = new THREE.PerspectiveCamera(
       100,
       canvas.clientWidth / canvas.clientHeight,
@@ -50,6 +51,60 @@
     renderer.toneMappingExposure = 1.2;
     canvas.appendChild(renderer.domElement);
 
+    // ----------------------
+    // Starfield
+    // ----------------------
+
+    // Create a group for all stars
+    const starField = new THREE.Group();
+    scene.add(starField);
+
+    // Star parameters
+    const starCount = 500;
+    const starSpeed = 12;
+    const minStarSize = 0.5;
+    const maxStarSize = 2;
+    const starDepth = 2400; // How far the stars travel
+    const centerAvoidanceRadius = 100; // Radius around center to avoid stars
+
+    // Create star material
+    const starMaterial = new THREE.MeshPhysicalMaterial({
+      color: "white",
+      emissive: "white",
+      emissiveIntensity: 10,
+      transparent: true,
+    });
+
+    // Create stars
+    const stars: THREE.Mesh[] = [];
+    for (let i = 0; i < starCount; i++) {
+      // Random star size between min and max
+      const randomSize =
+        minStarSize + Math.random() * (maxStarSize - minStarSize);
+
+      // Create a small sphere for each star
+      const geometry = new THREE.SphereGeometry(randomSize, 8, 8);
+      const star = new THREE.Mesh(geometry, starMaterial);
+
+      // Random position within a wide area, avoiding center
+      let x, y, z;
+      let distanceFromCenter;
+
+      // Keep generating positions until we find one outside the center avoidance radius
+      do {
+        x = (Math.random() - 0.5) * 1000;
+        y = (Math.random() - 0.5) * 1000;
+        z = -Math.random() * starDepth; // Start at random distances
+
+        // Calculate distance from center in x-y plane
+        distanceFromCenter = Math.sqrt(x * x + y * y);
+      } while (distanceFromCenter < centerAvoidanceRadius);
+
+      star.position.set(x, y, z);
+      starField.add(star);
+      stars.push(star);
+    }
+
     const composer = new EffectComposer(renderer);
 
     const resize = () => {
@@ -64,22 +119,6 @@
     window.addEventListener("resize", resize);
 
     // ----------------------
-    // Grid background
-    // ----------------------
-
-    // Create a more customized grid
-    const size = 3000;
-    const divisions = 69; // Lol
-    const mainColor = "white"; // Color of main grid lines
-    const secondaryColor = "white"; // Color of secondary grid lines
-
-    const grid = new GridHelper(size, divisions, mainColor, secondaryColor);
-    grid.position.set(0, -40, 0);
-    grid.material.transparent = true;
-    grid.material.opacity = 0.003; // Make grid semi-transparent
-
-    scene.add(grid);
-
     // SVG Logo
     // ----------------------
 
@@ -94,6 +133,8 @@
 
     const material = new THREE.MeshPhysicalMaterial({
       color: "white",
+      emissive: "white",
+      emissiveIntensity: 2,
       reflectivity: 1,
       metalness: 1,
       roughness: 0.15,
@@ -199,6 +240,46 @@
     svgGroup.rotation.y = Math.PI / 7;
 
     function animate() {
+      // Move stars toward camera
+      stars.forEach((star) => {
+        // Calculate current distance from center in x-y plane
+        const distanceFromCenter = Math.sqrt(
+          star.position.x * star.position.x + star.position.y * star.position.y,
+        );
+
+        // Apply slight outward drift for stars near the center
+        if (distanceFromCenter < centerAvoidanceRadius * 2) {
+          // Calculate direction vector from center to star
+          const dirX = star.position.x / distanceFromCenter;
+          const dirY = star.position.y / distanceFromCenter;
+
+          // Apply outward drift (stronger when closer to center)
+          const driftStrength =
+            (1 - distanceFromCenter / (centerAvoidanceRadius * 2)) * 0.5;
+          star.position.x += dirX * driftStrength;
+          star.position.y += dirY * driftStrength;
+        }
+
+        star.position.z += starSpeed;
+
+        // Reset stars that have passed the camera
+        if (star.position.z > 400) {
+          // Reset position, avoiding center
+          let newX, newY;
+          let distanceFromCenter;
+
+          do {
+            newX = (Math.random() - 0.5) * 1000;
+            newY = (Math.random() - 0.5) * 1000;
+            distanceFromCenter = Math.sqrt(newX * newX + newY * newY);
+          } while (distanceFromCenter < centerAvoidanceRadius);
+
+          star.position.z = -starDepth;
+          star.position.x = newX;
+          star.position.y = newY;
+        }
+      });
+
       // Normalize rotation to 0-2π range
       const normalizedRotation = svgGroup.rotation.y % (Math.PI * 2);
 
@@ -227,6 +308,12 @@
   .rotating-logo {
     width: 100%;
     height: 100%;
+    background: radial-gradient(
+      ellipse 80% 300% at 50% 120%,
+      blue,
+      black,
+      black
+    );
   }
 
   #canvas {
diff --git a/src/shaders/RGBTrailPass.ts b/src/shaders/RGBTrailPass.ts
@@ -1,74 +1,89 @@
 import {
   GLSL3,
   HalfFloatType,
-  MeshBasicMaterial,
   type Texture,
   type TextureDataType,
   WebGLRenderTarget,
   type WebGLRenderer,
 } from "three";
-import { FullScreenQuad } from "three/addons/postprocessing/Pass.js";
 import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
 import vertexShader from "./rgbtrail.vert?raw";
 
 export class RGBTrailPass extends ShaderPass {
-  frames: {
-    target: WebGLRenderTarget;
-    quad: FullScreenQuad;
-  }[];
-  comp: {
-    target: WebGLRenderTarget;
-    quad: FullScreenQuad;
-  };
+  private oldTarget: WebGLRenderTarget;
+  private newTarget: WebGLRenderTarget;
 
   constructor() {
-    const echoes = [
-      ["r", "g", "b", "a"],
-      // Red
-      ["2.0", "0.0", "0.0", "0.8 * a"],
-      // Green
-      ["0.0", "2.0", "0.0", "0.6 * a"],
-      // Blue
-      ["0.0", "0.0", "2.0", "0.4 * a"],
-      ["0.0", "0.0", "2.0", "0.3 * a"],
-      ["0.0", "0.0", "2.0", "0.2 * a"],
-      ["0.0", "0.0", "2.0", "0.1 * a"],
-    ].map(([r, g, b, a], i) => ({ r, g, b, a, i }));
-
     const fragmentShader = `
       #include <common>
 
-      uniform sampler2D frames[${echoes.length}];
+      uniform sampler2D tOld;
+      uniform sampler2D tNew;
+      uniform float damp;
+      
       in vec2 xy;
       out vec4 outputPixel;
 
-      vec4 blend(vec4 bg, vec4 fg) {
-        vec4 result = mix(bg, fg, fg.a);
-        result = max(bg, result);
-        return result;
+      // Function to create a tighter falloff, similar to the Shadertoy example
+      float tighten(float x) {
+        return pow(1.0 - clamp(x, 0.0, 1.0), 8.0);
+      }
+
+      vec4 when_gt(vec4 x, float y) {
+        return max(sign(x - y), 0.0);
       }
 
       void main() {
-        outputPixel = vec4(0.0);
-        ${echoes
-          .map(
-            ({ r, g, b, a, i }) => `
-        {
-          vec4 pixel = texture(frames[${i}], xy);
-          pixel.r = ${r.replace("r", "pixel.r")};
-          pixel.g = ${g.replace("g", "pixel.g")};
-          pixel.b = ${b.replace("b", "pixel.b")};
-          pixel.a = ${a.replace("a", "pixel.a")};
-          outputPixel = blend(outputPixel, pixel);
-        }`,
-          )
-          .join("\n")}
+        vec4 texelOld = texture(tOld, xy);
+        vec4 texelNew = texture(tNew, xy);
+        
+        // Check if there's new content
+        bool hasNewContent = texelNew.r > 0.01 || texelNew.g > 0.01 || texelNew.b > 0.01;
+        
+        if (hasNewContent) {
+          // For new content, preserve the original color and set alpha to 1.0
+          outputPixel = vec4(texelNew.rgb, 1.0);
+        } else {
+          // For existing trail, apply damping with a tighter falloff
+          vec4 damped = texelOld * damp;
+          
+          // Apply visibility threshold with tighter falloff
+          float visibility = max(damped.r, max(damped.g, damped.b));
+          float tightVisibility = tighten(1.0 - visibility);
+          damped *= vec4(tightVisibility);
+          
+          // Check if the pixel is still visible
+          if (damped.a > 0.01) {
+            // Use the alpha value to determine the color
+            // As alpha decreases, we transition from colors to transparent
+            float alpha = damped.a;
+            
+            if (alpha > 0.65) {
+              // Red phase
+              outputPixel = vec4(1.0, 0.0, 0.0, alpha);
+            } else if (alpha > 0.5) {
+              // Green phase
+              outputPixel = vec4(0.0, 1.0, 0.0, alpha);
+            } else if (alpha > 0.1) {
+              // Blue phase
+              outputPixel = vec4(0.0, 0.0, 1.0, alpha);
+            } else {
+              // Fading out
+              outputPixel = vec4(0.0, 0.0, 0.0, alpha);
+            }
+          } else {
+            // Fully faded out
+            outputPixel = vec4(0.0, 0.0, 0.0, 0.0);
+          }
+        }
       }
     `;
 
     const shader = {
       uniforms: {
-        frames: { value: null },
+        tOld: { value: null },
+        tNew: { value: null },
+        damp: { value: 0.96 }, // Higher value = longer trail
       },
       vertexShader,
       fragmentShader,
@@ -84,39 +99,25 @@ export class RGBTrailPass extends ShaderPass {
       { type: HalfFloatType },
     ];
 
-    this.comp = {
-      target: new WebGLRenderTarget(...params),
-      quad: new FullScreenQuad(this.material),
-    };
-
-    this.frames = Array(echoes.length)
-      .fill(null)
-      .map(() => ({
-        target: new WebGLRenderTarget(...params),
-        quad: new FullScreenQuad(new MeshBasicMaterial({ transparent: true })),
-      }));
+    // Create two render targets for ping-pong buffering
+    this.oldTarget = new WebGLRenderTarget(...params);
+    this.newTarget = new WebGLRenderTarget(...params);
   }
 
   render(
     renderer: WebGLRenderer,
     writeBuffer: WebGLRenderTarget | null,
     readBuffer: { texture: Texture | null },
   ) {
-    // Update frame buffers
-    // biome-ignore lint/style/noNonNullAssertion: Array is always available
-    this.frames.unshift(this.frames.pop()!);
-
-    renderer.setRenderTarget(this.frames[0].target);
-    (this.frames[0].quad.material as MeshBasicMaterial).map =
-      readBuffer.texture;
-    this.frames[0].quad.render(renderer);
-
     // Update uniforms
-    this.material.uniforms.frames.value = this.frames.map(
-      (frame) => frame.target.texture,
-    );
-
-    // Render final composition
+    this.material.uniforms.tNew.value = readBuffer.texture;
+    this.material.uniforms.tOld.value = this.oldTarget.texture;
+    
+    // Render to new target
+    renderer.setRenderTarget(this.newTarget);
+    this.fsQuad.render(renderer);
+    
+    // Render to output buffer
     if (this.renderToScreen) {
       renderer.setRenderTarget(null);
       this.fsQuad.render(renderer);
@@ -125,24 +126,21 @@ export class RGBTrailPass extends ShaderPass {
       if (this.clear) renderer.clear();
       this.fsQuad.render(renderer);
     }
+    
+    // Swap buffers for next frame
+    const temp = this.oldTarget;
+    this.oldTarget = this.newTarget;
+    this.newTarget = temp;
   }
 
   setSize(width: number, height: number) {
-    this.comp.target.setSize(width, height);
-    for (const frame of this.frames) {
-      frame.target.setSize(width, height);
-    }
+    this.oldTarget.setSize(width, height);
+    this.newTarget.setSize(width, height);
   }
 
   dispose() {
-    this.comp.target.dispose();
-    this.comp.quad.dispose();
-
-    for (const frame of this.frames) {
-      frame.target.dispose();
-      frame.quad.dispose();
-    }
-
+    this.oldTarget.dispose();
+    this.newTarget.dispose();
     super.dispose();
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,6 @@ const currentTime = new Date();`
`136`	`136`	`flex-direction: column;`
`137`	`137`	`align-items: center;`
`138`	`138`	`justify-content: center;`
`139`		`- background: linear-gradient(to bottom, black, blue);`
`140`	`139`	`min-height: 0;`
`141`	`140`	`z-index: 1;`
`142`	`141`	`}`