🌘🥈 ↝ [SSP-41]: Trying (and failing) to get asteroid generator integra…

…ted; failed due to postprocessing error

app/tests/page.tsx

@@ -13,7 +13,6 @@ export default function TestPage() {
           <>
           <DailyMinorPlanetMissions />
           <TotalPoints />
-          <PlanetGenerator />
               {/* <Greenhouse /> */}
               {/* <MiningComponent /> */}
           </>

components/Data/Generator/Astronomers/DailyMinorPlanet/Asteroid.tsx

@@ -0,0 +1,54 @@
+import { useRef, useMemo } from "react"
+import { useFrame } from "@react-three/fiber"
+import * as THREE from "three"
+import { createNoise3D } from "simplex-noise"
+
+export function Asteroid({ metallic }: { metallic: number }) {
+  const meshRef = useRef<THREE.Mesh>(null)
+  const noise3D = useMemo(() => createNoise3D(), [])
+
+  // Generate geometry with noise-based displacement
+  const geometry = useMemo(() => {
+    const geo = new THREE.IcosahedronGeometry(1, 4)
+    const positions = geo.attributes.position
+    const vector = new THREE.Vector3()
+
+    for (let i = 0; i < positions.count; i++) {
+      vector.fromBufferAttribute(positions, i)
+      const noise = noise3D(vector.x * 2, vector.y * 2, vector.z * 2)
+      vector.normalize().multiplyScalar(1 + 0.3 * noise)
+      positions.setXYZ(i, vector.x, vector.y, vector.z)
+    }
+
+    geo.computeVertexNormals()
+    return geo
+  }, [noise3D])
+
+  // Interpolate between rocky and metallic materials based on slider
+  const material = useMemo(() => {
+    return new THREE.MeshStandardMaterial({
+      color: new THREE.Color().lerpColors(
+        new THREE.Color("#8B7355"), // Rocky brown
+        new THREE.Color("#A8A8A8"), // Metallic gray
+        metallic
+      ),
+      metalness: THREE.MathUtils.lerp(0.2, 0.8, metallic),
+      roughness: THREE.MathUtils.lerp(0.8, 0.3, metallic),
+    })
+  }, [metallic])
+
+  // Slow rotation
+  useFrame((state, delta) => {
+    if (meshRef.current) {
+      meshRef.current.rotation.y += delta * 0.2
+    }
+  })
+
+  return (
+    <>
+      <ambientLight intensity={0.5} />
+      <pointLight position={[10, 10, 10]} intensity={1} />
+      <mesh ref={meshRef} geometry={geometry} material={material} />
+    </>
+  );
+};

components/Data/Generator/Astronomers/DailyMinorPlanet/asteroid-viewer.tsx

@@ -0,0 +1,36 @@
+import { Canvas } from "@react-three/fiber"
+import { Stars, OrbitControls } from "@react-three/drei";
+import { Slider } from "@/components/ui/slider";
+import { useState } from "react";
+import { Asteroid } from "./Asteroid";
+import { Effects } from "./effects";
+
+export default function AsteroidViewer() {
+  const [metallic, setMetallic] = useState(0.5)
+
+  return (
+    <div className="w-full h-screen bg-black">
+      <Canvas camera={{ position: [0, 0, 4] }}>
+        <color attach="background" args={["black"]} />
+        <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
+        <Asteroid metallic={metallic} />
+        <OrbitControls enableZoom={false} autoRotate autoRotateSpeed={1} />
+        <Effects />
+      </Canvas>
+      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 w-64 bg-black/50 p-4 rounded-lg">
+        <label className="text-white text-sm mb-2 block">Material Type</label>
+        <Slider
+          value={[metallic]}
+          onValueChange={([value]) => setMetallic(value)}
+          max={1}
+          step={0.01}
+          className="w-full"
+        />
+        <div className="flex justify-between text-white/70 text-xs mt-1">
+          <span>Rocky</span>
+          <span>Metallic</span>
+        </div>
+      </div>
+    </div>
+  );
+};

components/Data/Generator/Astronomers/DailyMinorPlanet/effects.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Effect } from "postprocessing";
+import { forwardRef } from "react";
+import { extend, useThree } from "@react-three/fiber";
+import { EffectComposer, Noise } from "@react-three/postprocessing";
+import { BlendFunction } from "postprocessing";
+import { Uniform, WebGLRenderer } from "three";
+
+// Custom grain effect to match telescope image
+class GrainEffect extends Effect {
+  constructor({ blendFunction = BlendFunction.MULTIPLY } = {}) {
+    super(
+      "GrainEffect",
+      /* glsl */ `
+      uniform float time;
+
+      float random(vec2 p) {
+        return fract(sin(dot(p.xy, vec2(12.9898,78.233))) * 43758.5453123);
+      }
+
+      void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec2 grain = vec2(random(uv + time * 0.1));
+        outputColor = vec4(inputColor.rgb * (0.85 + 0.15 * grain.x), inputColor.a);
+      }
+    `,
+      {
+        blendFunction,
+        uniforms: new Map([["time", new Uniform(0)]]),
+      }
+    );
+  }
+
+  update(renderer: WebGLRenderer, inputBuffer: any, deltaTime: number) {
+    this.uniforms.get("time")!.value += deltaTime;
+  }
+}
+
+extend({ GrainEffect });
+
+export const Effects = forwardRef(() => {
+  return (
+    <EffectComposer>
+      <Noise opacity={0.15} />
+      {/* <grainEffect blendFunction={BlendFunction.MULTIPLY} /> */}
+    </EffectComposer>
+  );
+});
+
+Effects.displayName = "Effects";

package.json

@@ -32,6 +32,7 @@
     "@radix-ui/react-toggle": "^1.1.0",
     "@react-three/drei": "^9.120.4",
     "@react-three/fiber": "^8.17.10",
+    "@react-three/postprocessing": "^2.16.3",
     "@supabase/auth-helpers-nextjs": "^0.10.0",
     "@supabase/auth-helpers-react": "^0.5.0",
     "@supabase/auth-ui-react": "^0.4.7",
@@ -67,6 +68,7 @@
     "next-themes": "^0.3.0",
     "polished": "^4.3.1",
     "postcss": "^8.4.30",
+    "postprocessing": "^6.36.4",
     "pyodide": "^0.26.2",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",