Merge pull request #448 from Thorium-Sim/nebula-improvements

fix: Improvements to the nebula renderer. Closes #447

client/src/components/Starmap/Nebula/generateNebulaMap.js

@@ -131,8 +131,8 @@ function generateTexture(seed, canvases) {
       nebulaParams.push({
         scale: rand.random() * 0.5 + 0.25,
         color: [rand.random(), rand.random(), rand.random()],
-        intensity: rand.random() * 0.2 + 0.5,
-        falloff: rand.random() * 3.0 + 2.0,
+        intensity: rand.random() * 0.2 + 0.9,
+        falloff: rand.random() * 3.0 + 3.0,
         offset: [
           rand.random() * 2000 - 1000,
           rand.random() * 2000 - 1000,

client/src/components/Starmap/Nebula/index.tsx

@@ -7,38 +7,60 @@ import {
   sRGBEncoding,
   BoxBufferGeometry,
   Mesh,
+  TextureLoader,
 } from "three";
 import {useGetStarmapStore} from "../starmapStore";
 import NebulaWorker from "./generateNebulaMap?worker";
 
 const radius = 1e20;
 const CANVAS_WIDTH = 2048;
-const nebulaWorker = new NebulaWorker();
+let nebulaWorker: Worker | null = null;
+
+const canvas = document.createElement("canvas");
+if ("transferControlToOffscreen" in canvas) {
+  nebulaWorker = new NebulaWorker();
+}
 
 const nebulaGeometry = new BoxBufferGeometry(1, 1, 1);
 
-function generateMaterial() {
+const sides = ["back", "bottom", "front", "left", "right", "top"];
+function generateMaterial(primary: boolean, index: number) {
   const canvas = document.createElement("canvas");
+  document.body.appendChild(canvas);
   canvas.width = canvas.height = CANVAS_WIDTH;
 
-  // @ts-ignore Built in types don't recognize this property
-  const offscreenCanvas = canvas.transferControlToOffscreen();
-  offscreenCanvas.width = offscreenCanvas.height = CANVAS_WIDTH;
+  if ("transferControlToOffscreen" in canvas) {
+    // @ts-ignore Built in types don't recognize this property
+    const offscreenCanvas = canvas.transferControlToOffscreen();
+    offscreenCanvas.width = offscreenCanvas.height = CANVAS_WIDTH;
 
-  const canvasTexture = new CanvasTexture(canvas);
-  canvasTexture.encoding = sRGBEncoding;
+    const canvasTexture = new CanvasTexture(canvas);
+    canvasTexture.encoding = sRGBEncoding;
 
-  const material = new MeshBasicMaterial({
-    side: BackSide,
-    // transparent: true,
-    // depthWrite: false,
-    depthTest: false,
-    map: canvasTexture,
-    userData: {
-      offscreenCanvas,
-    },
-  });
-  return material;
+    const material = new MeshBasicMaterial({
+      side: BackSide,
+      transparent: primary,
+      depthWrite: !primary,
+      depthTest: false,
+      map: canvasTexture,
+      userData: {
+        offscreenCanvas,
+      },
+    });
+    return material;
+  } else {
+    const texture = new TextureLoader().load(
+      `/assets/skybox/${sides[index]}.png`
+    );
+    const material = new MeshBasicMaterial({
+      side: BackSide,
+      transparent: primary,
+      depthWrite: !primary,
+      depthTest: false,
+      map: texture,
+    });
+    return material;
+  }
 }
 
 function Nebula() {
@@ -48,12 +70,14 @@ function Nebula() {
 
   const [primaryMaterials, secondaryMaterials] = React.useMemo(
     () => [
-      Array.from({length: 6}).map(generateMaterial),
-      Array.from({length: 6}).map(generateMaterial),
+      Array.from({length: 6}).map((_, index) => generateMaterial(true, index)),
+      Array.from({length: 6}).map((_, index) => generateMaterial(false, index)),
     ],
     []
   );
+
   useEffect(() => {
+    if (!nebulaWorker) return;
     if (primaryMesh.current && secondaryMesh.current) {
       if (
         Array.isArray(primaryMesh.current.material) &&
@@ -87,15 +111,15 @@ function Nebula() {
           }, 500);
         }
         nebulaWorker.addEventListener("message", onMessage);
-        return () => nebulaWorker.removeEventListener("message", onMessage);
+        return () => nebulaWorker?.removeEventListener("message", onMessage);
       }
     }
   }, []);
   const useStarmapStore = useGetStarmapStore();
 
   const skyboxKey = useStarmapStore(s => s.skyboxKey);
   useEffect(() => {
-    nebulaWorker.postMessage({
+    nebulaWorker?.postMessage({
       type: "render",
       seed: skyboxKey,
       which: activeMesh.current === "primary" ? "secondary" : "primary",