feat(viewer): starfield backdrop for deep-space context

2 files changed, 19 insertions, 3 deletions

diff --git a/public/App.js b/public/App.js
index 7e73305..f9e8de3 100644
--- a/public/App.js
+++ b/public/App.js
@@ -2,10 +2,11 @@ import { Union, Record } from "./fable_modules/fable-library-js.4.24.0/Types.js"
 import { union_type, obj_type, class_type, record_type, bool_type, string_type } from "./fable_modules/fable-library-js.4.24.0/Reflection.js";
 import { defaultOf, equals, comparePrimitives, createAtom } from "./fable_modules/fable-library-js.4.24.0/Util.js";
 import { Replay_frames } from "./SomhairlesDream.Shared/Replay.js";
-import { sortBy, map, equalsWith, tryFind, iterateIndexed, sort, item } from "./fable_modules/fable-library-js.4.24.0/Array.js";
+import { sortBy, map, equalsWith, tryFind, iterateIndexed, setItem, sort, item } from "./fable_modules/fable-library-js.4.24.0/Array.js";
 import { join, isNullOrWhiteSpace, printf, toText } from "./fable_modules/fable-library-js.4.24.0/String.js";
 import { MeshData_triangleIndices, MeshData_positionData } from "./SomhairlesDream.Shared/Domain.js";
 import { min, max } from "./fable_modules/fable-library-js.4.24.0/Double.js";
+import { seeded } from "./fable_modules/fable-library-js.4.24.0/Random.js";
 import { some, defaultArg } from "./fable_modules/fable-library-js.4.24.0/Option.js";
 import { awaitPromise, startImmediate } from "./fable_modules/fable-library-js.4.24.0/Async.js";
 import { singleton } from "./fable_modules/fable-library-js.4.24.0/AsyncBuilder.js";
@@ -269,7 +270,7 @@ export function frameObject(view, node) {
             const norm = Math.sqrt(((0.3 * 0.3) + (0.44 * 0.44)) + (0.85 * 0.85));
             camera.position.set((0.3 / norm) * distance, (0.44 / norm) * distance, (0.85 / norm) * distance);
             camera.near = max(1, distance * 0.05);
-            camera.far = (distance + (longest * 3));
+            camera.far = max(700, distance + (longest * 3));
             camera.lookAt(0, 0, 0);
             camera.updateProjectionMatrix();
             const matchValue_3 = view.Controls;
@@ -334,6 +335,21 @@ export function initializeView() {
     scene.add(rimLight);
     const bounceLight = new THREE.HemisphereLight("#3d4a56", "#141a1e", 0.9);
     scene.add(bounceLight);
+    const starPositions = new Float64Array(2600 * 3);
+    const starRng = seeded(4242);
+    for (let index = 0; index <= (2600 - 1); index++) {
+        const theta = (starRng.NextDouble() * 2) * 3.141592653589793;
+        const phi = Math.acos((2 * starRng.NextDouble()) - 1);
+        const radius = 260 + (starRng.NextDouble() * 90);
+        setItem(starPositions, index * 3, (radius * Math.sin(phi)) * Math.cos(theta));
+        setItem(starPositions, (index * 3) + 1, radius * Math.cos(phi));
+        setItem(starPositions, (index * 3) + 2, (radius * Math.sin(phi)) * Math.sin(theta));
+    }
+    const starGeometry = new THREE.BufferGeometry();
+    starGeometry.setAttribute("position", new THREE.Float32BufferAttribute(starPositions, 3));
+    const starMaterial = new THREE.PointsMaterial({ color: "#c9d6e6", size: 1.7, sizeAttenuation: true, transparent: true, opacity: 0.9, depthWrite: false });
+    const stars = new THREE.Points(starGeometry, starMaterial);
+    scene.add(stars);
     const grid = new THREE.GridHelper(24, 48, "#5a4a2a", "#2a2f33");
     grid.position.y = -1.35;
     scene.add(grid);
diff --git a/public/index.html b/public/index.html
index 84dd147..71f67b1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -140,6 +140,6 @@
       <span>heritage 参考线保留占位演示 · F# / OPEN CODE</span>
     </footer>
   </main>
-  <script type="module" src="/App.js?v=ui10"></script>
+  <script type="module" src="/App.js?v=ui11"></script>
 </body>
 </html>