Skybox (#991)

fission/package.json

@@ -30,6 +30,7 @@
     "colord": "^2.9.3",
     "framer-motion": "^10.13.1",
     "playwright": "^1.45.0",
+    "lygia": "^1.1.3",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
     "react-dom": "^18.2.0",
@@ -67,6 +68,7 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
+    "vite-plugin-glsl": "^1.3.0",
     "vite-plugin-singlefile": "^0.13.5",
     "vitest": "^1.5.3"
   }

fission/src/Synthesis.tsx

@@ -49,11 +49,12 @@ import ScoringZonesPanel from "@/panels/configuring/scoring/ScoringZonesPanel"
 import ZoneConfigPanel from "@/panels/configuring/scoring/ZoneConfigPanel"
 import ScoreboardPanel from "@/panels/information/ScoreboardPanel"
 import DriverStationPanel from "@/panels/simulation/DriverStationPanel"
-import ManageAssembliesModal from "@/modals/spawning/ManageAssembliesModal.tsx"
-import World from "@/systems/World.ts"
-import { AddRobotsModal, AddFieldsModal, SpawningModal } from "@/modals/spawning/SpawningModals.tsx"
-import ImportMirabufModal from "@/modals/mirabuf/ImportMirabufModal.tsx"
-import ImportLocalMirabufModal from "@/modals/mirabuf/ImportLocalMirabufModal.tsx"
+import ManageAssembliesModal from '@/modals/spawning/ManageAssembliesModal.tsx';
+import World from '@/systems/World.ts';
+import { AddRobotsModal, AddFieldsModal, SpawningModal } from '@/modals/spawning/SpawningModals.tsx';
+import ImportMirabufModal from '@/modals/mirabuf/ImportMirabufModal.tsx';
+import Skybox from './ui/components/Skybox.tsx';
+import ImportLocalMirabufModal from '@/modals/mirabuf/ImportLocalMirabufModal.tsx';
 
 const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
@@ -131,6 +132,7 @@ function Synthesis() {
 
     return (
         <AnimatePresence>
+            <Skybox key="123"/>
             <TooltipControlProvider
                 showTooltip={(type: TooltipType, controls?: TooltipControl[], duration: number = TOOLTIP_DURATION) => {
                     showTooltip(type, controls, duration)

fission/src/Window.d.ts

@@ -1,3 +1,6 @@
+import { Theme } from "@mui/material"
+
 declare interface Window {
     setAuthCode(code: string): void
+    getTheme(): Theme;
 }

fission/src/shaders/fragment.glsl

@@ -0,0 +1,39 @@
+uniform float rColor;
+uniform float gColor;
+uniform float bColor;
+
+varying vec3 vPosition;
+
+#include "/node_modules/lygia/generative/snoise.glsl" // no other known way to include this file 
+
+vec3 getColor(float noiseValue, float rColor, float gColor, float bColor) {
+	vec3 blueAccent = vec3(16.0/255.0, 35.0/255.0, 110.0/255.0);
+
+	vec3 skyColor = vec3(rColor, gColor, bColor);
+	vec3 horizonColor = mix(vec3(0.0, 0.0, 0.0), blueAccent, noiseValue);
+	vec3 voidColor = vec3(0.0, 0.0, 0.0);	
+
+    float tHorizon = smoothstep(200.0, 700.0, vPosition.y);
+    float tVoid = smoothstep(-700.0, -200.0, vPosition.y);
+
+    vec3 blendedColor = mix(horizonColor, skyColor, tHorizon);
+    vec3 finalColor = mix(voidColor, blendedColor, tVoid);
+
+    return finalColor;
+}
+
+// passing noise function through x^2(3-2x) to get more cloud-like results
+float func(float x) {
+	return x*x*(3.0-2.0*x);
+}
+
+
+void main() {
+	vec4 noiseCoord = vec4(vPosition.xz * 0.001, 1.0, 1.0); 
+	float noiseValue = snoise(noiseCoord) * 0.5 + 0.5;
+	noiseValue = func(noiseValue);
+
+	vec3 color = getColor(noiseValue, rColor, gColor, bColor);
+
+	gl_FragColor = vec4(color, 1.0);
+}

fission/src/shaders/vertex.glsl

@@ -0,0 +1,10 @@
+varying vec3 vPosition;
+varying vec2 vUv;
+
+void main() {
+    vPosition = position;
+    vUv = uv;
+
+    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
+    gl_Position = projectionMatrix * modelViewPosition;
+}

fission/src/systems/scene/SceneRenderer.ts

@@ -1,16 +1,22 @@
-import * as THREE from "three"
-import SceneObject from "./SceneObject"
-import WorldSystem from "../WorldSystem"
+import * as THREE from 'three';
+import SceneObject from './SceneObject';
+import WorldSystem from '../WorldSystem';
+
+import vertexShader from '@/shaders/vertex.glsl';
+import fragmentShader from '@/shaders/fragment.glsl';
+import { Theme } from '@/ui/ThemeContext';
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x73937e
 
 let nextSceneObjectId = 1
 
 class SceneRenderer extends WorldSystem {
-    private _mainCamera: THREE.PerspectiveCamera
-    private _scene: THREE.Scene
-    private _renderer: THREE.WebGLRenderer
+
+    private _mainCamera: THREE.PerspectiveCamera;
+    private _scene: THREE.Scene;
+    private _renderer: THREE.WebGLRenderer;
+    private _skybox: THREE.Mesh;
 
     private _sceneObjects: Map<number, SceneObject>
 
@@ -68,11 +74,28 @@ class SceneRenderer extends WorldSystem {
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.1)
         this._scene.add(ambientLight)
 
-        const ground = new THREE.Mesh(new THREE.BoxGeometry(10, 1, 10), this.CreateToonMaterial(GROUND_COLOR))
-        ground.position.set(0.0, -2.0, 0.0)
-        ground.receiveShadow = true
-        ground.castShadow = true
-        this._scene.add(ground)
+        const ground = new THREE.Mesh(new THREE.BoxGeometry(10, 1, 10), this.CreateToonMaterial(GROUND_COLOR));
+        ground.position.set(0.0, -2.0, 0.0);
+        ground.receiveShadow = true;
+        ground.castShadow = true;
+        this._scene.add(ground);
+
+        // Adding spherical skybox mesh
+        const geometry = new THREE.SphereGeometry(1000);
+        const material = new THREE.ShaderMaterial({
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+            side: THREE.BackSide,
+            uniforms: {
+                rColor: { value: 1.0 },
+                gColor: { value: 1.0 },
+                bColor: { value: 1.0 },
+            }
+        });
+        this._skybox = new THREE.Mesh(geometry, material); 
+        this._skybox.receiveShadow = false;
+        this._skybox.castShadow = false;
+        this.scene.add(this._skybox); 
     }
 
     public UpdateCanvasSize() {
@@ -88,7 +111,8 @@ class SceneRenderer extends WorldSystem {
         })
 
         // controls.update(deltaTime); // TODO: Add controls?
-        this._renderer.render(this._scene, this._mainCamera)
+        this._skybox.position.copy(this._mainCamera.position);
+        this._renderer.render(this._scene, this._mainCamera);
     }
 
     public Destroy(): void {
@@ -137,6 +161,21 @@ class SceneRenderer extends WorldSystem {
             gradientMap: gradientMap,
         })
     }
+
+    /* 
+     * Updates the skybox colors based on the current theme
+
+     * @param currentTheme: current theme from ThemeContext.useTheme()
+     */
+    public updateSkyboxColors(currentTheme: Theme) {
+        if (!this._skybox) return;
+        if (this._skybox.material instanceof THREE.ShaderMaterial) {
+            this._skybox.material.uniforms.rColor.value = currentTheme['Background']['color']['r'];
+            this._skybox.material.uniforms.gColor.value = currentTheme['Background']['color']['g'];
+            this._skybox.material.uniforms.bColor.value = currentTheme['Background']['color']['b'];
+        }
+    }
+
 }
 
-export default SceneRenderer
+export default SceneRenderer;

fission/src/ui/components/Skybox.tsx

@@ -0,0 +1,12 @@
+import World from "@/systems/World";
+import { useTheme } from "../ThemeContext";
+
+const Skybox = () => {
+   const { currentTheme, themes } = useTheme(); 
+   if (World.SceneRenderer) { World.SceneRenderer.updateSkyboxColors(themes[currentTheme]) }
+    return (
+        <></>
+    );
+}
+
+export default Skybox;

fission/tsconfig.json

@@ -38,7 +38,10 @@
         "strict": true,
         "noUnusedLocals": true,
         "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true
+        "noFallthroughCasesInSwitch": true,
+        "types": [
+            "vite-plugin-glsl/ext"
+        ],
     },
     "include": [
         "src"

fission/vite.config.ts

@@ -1,14 +1,27 @@
 import { defineConfig } from 'vitest/config'
 import * as path from 'path'
 import react from '@vitejs/plugin-react-swc'
+import glsl from 'vite-plugin-glsl';
 
 const basePath = '/fission/'
 const serverPort = 3000
 const dockerServerPort = 3003
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react(), /* viteSingleFile() */],
+    plugins: [react(), /* viteSingleFile() */ glsl({
+    include: [                   // Glob pattern, or array of glob patterns to import
+      '**/*.glsl', '**/*.wgsl',
+      '**/*.vert', '**/*.frag',
+      '**/*.vs', '**/*.fs'
+    ],
+    exclude: undefined,          // Glob pattern, or array of glob patterns to ignore
+    warnDuplicatedImports: true, // Warn if the same chunk was imported multiple times
+    defaultExtension: 'glsl',    // Shader suffix when no extension is specified
+    compress: false,             // Compress output shader code
+    watch: true,                 // Recompile shader on change
+    root: '/'                    // Directory for root imports
+  }) ],
     resolve: {
         alias: [
             { find: '@/components', replacement: path.resolve(__dirname, 'src', 'ui', 'components') },