Scene Tags

fission/src/Synthesis.tsx

@@ -59,6 +59,7 @@ import Skybox from "./ui/components/Skybox.tsx"
 import ConfigureRobotModal from "./ui/modals/configuring/ConfigureRobotModal.tsx"
 import ResetAllInputsModal from "./ui/modals/configuring/ResetAllInputsModal.tsx"
 import ZoneConfigPanel from "./ui/panels/configuring/scoring/ZoneConfigPanel.tsx"
+import SceneOverlay from "./ui/components/SceneOverlay.tsx"
 
 const DEFAULT_MIRA_PATH = "/api/mira/Robots/Team 2471 (2018)_v7.mira"
 
@@ -171,6 +172,7 @@ function Synthesis() {
                     >
                         <ToastProvider key="toast-provider">
                             <Scene useStats={true} key="scene-in-toast-provider" />
+                            <SceneOverlay />
                             <MainHUD key={"main-hud"} />
                             {panelElements.length > 0 && panelElements}
                             {modalElement && (

fission/src/mirabuf/MirabufSceneObject.ts

@@ -17,6 +17,7 @@ import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { MiraType } from "./MirabufLoader"
 import IntakeSensorSceneObject from "./IntakeSensorSceneObject"
 import EjectableSceneObject from "./EjectableSceneObject"
+import { SceneOverlayTag } from "@/ui/components/SceneOverlayEvents"
 
 const DEBUG_BODIES = false
 
@@ -44,6 +45,8 @@ class MirabufSceneObject extends SceneObject {
     private _intakeSensor?: IntakeSensorSceneObject
     private _ejectable?: EjectableSceneObject
 
+    private _nameTag: SceneOverlayTag | undefined
+
     get mirabufInstance() {
         return this._mirabufInstance
     }
@@ -96,6 +99,11 @@ class MirabufSceneObject extends SceneObject {
         this.EnableTransformControls() // adding transform gizmo to mirabuf object on its creation
 
         this.getPreferences()
+
+        // creating nametag for robots
+        if (this.miraType === MiraType.ROBOT) {
+            this._nameTag = new SceneOverlayTag("Hunter Barclah")
+        }
     }
 
     public Setup(): void {
@@ -205,6 +213,18 @@ class MirabufSceneObject extends SceneObject {
             x.computeBoundingBox()
             x.computeBoundingSphere()
         })
+
+        /* Updating the position of the name tag according to the robots position on screen */
+        if (this._nameTag && PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")) {
+            const boundingBox = this.ComputeBoundingBox()
+            this._nameTag.position = World.SceneRenderer.WorldToPixelSpace(
+                new THREE.Vector3(
+                    (boundingBox.max.x + boundingBox.min.x) / 2,
+                    boundingBox.max.y + 0.1,
+                    (boundingBox.max.z + boundingBox.min.z) / 2
+                )
+            )
+        }
     }
 
     public Dispose(): void {
@@ -222,6 +242,7 @@ class MirabufSceneObject extends SceneObject {
             World.PhysicsSystem.RemoveBodyAssocation(bodyId)
         })
 
+        this._nameTag?.Dispose()
         this.DisableTransformControls()
         World.SimulationSystem.UnregisterMechanism(this._mechanism)
         World.PhysicsSystem.DestroyMechanism(this._mechanism)
@@ -342,6 +363,19 @@ class MirabufSceneObject extends SceneObject {
         this.EnablePhysics()
     }
 
+    /**
+     *
+     * @returns The bounding box of the mirabuf object.
+     */
+    private ComputeBoundingBox(): THREE.Box3 {
+        const box = new THREE.Box3()
+        this._mirabufInstance.batches.forEach(batch => {
+            if (batch.boundingBox) box.union(batch.boundingBox)
+        })
+
+        return box
+    }
+
     private getPreferences(): void {
         this._intakePreferences = PreferencesSystem.getRobotPreferences(this.assemblyName)?.intake
         this._ejectorPreferences = PreferencesSystem.getRobotPreferences(this.assemblyName)?.ejector

fission/src/systems/preferences/PreferenceTypes.ts

@@ -10,6 +10,7 @@ export type GlobalPreference =
     | "ReportAnalytics"
     | "UseMetric"
     | "RenderScoringZones"
+    | "RenderSceneTags"
 
 export const RobotPreferencesKey: string = "Robots"
 export const FieldPreferencesKey: string = "Fields"
@@ -23,6 +24,7 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     ReportAnalytics: false,
     UseMetric: false,
     RenderScoringZones: true,
+    RenderSceneTags: true,
 }
 
 export type IntakePreferences = {

fission/src/systems/scene/SceneRenderer.ts

@@ -11,6 +11,10 @@ import fragmentShader from "@/shaders/fragment.glsl"
 import { Theme } from "@/ui/ThemeContext"
 import InputSystem from "../input/InputSystem"
 
+import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
+import {} from "@/ui/components/SceneOverlayEvents"
+import PreferencesSystem from "../preferences/PreferencesSystem"
+
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
 
@@ -151,6 +155,10 @@ class SceneRenderer extends WorldSystem {
             )
         })
 
+        // Update the tags each frame if they are enabled in preferences
+        if (PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags"))
+            new SceneOverlayEvent(SceneOverlayEventKey.UPDATE)
+
         this._composer.render(deltaT)
     }
 
@@ -219,6 +227,22 @@ class SceneRenderer extends WorldSystem {
         return screenSpace.unproject(this.mainCamera)
     }
 
+    /**
+     * Convert world space coordinates to screen space coordinates
+     *
+     * @param world World space coordinates
+     * @returns Pixel space coordinates
+     */
+    public WorldToPixelSpace(world: THREE.Vector3): PixelSpaceCoord {
+        this._mainCamera.updateMatrixWorld()
+        const screenSpace = world.project(this._mainCamera)
+        const widthHalf = window.innerWidth / 2
+        const heightHalf = window.innerHeight / 2
+        const x = screenSpace.x * widthHalf + widthHalf
+        const y = -(screenSpace.y * heightHalf) + heightHalf
+        return [x, y]
+    }
+
     /** 
      * Updates the skybox colors based on the current theme
 

fission/src/ui/components/SceneOverlay.tsx

@@ -0,0 +1,108 @@
+import { Box } from "@mui/material"
+import { useEffect, useReducer, useState } from "react"
+import {
+    SceneOverlayTag,
+    SceneOverlayEvent,
+    SceneOverlayEventKey,
+    SceneOverlayTagEvent,
+    SceneOverlayTagEventKey,
+} from "./SceneOverlayEvents"
+
+const tagMap = new Map<number, SceneOverlayTag>()
+
+function SceneOverlay() {
+    /* State to determine if the overlay is disabled */
+    const [isDisabled, setIsDisabled] = useState<boolean>(false)
+
+    /* h1 text for each tagMap tag */
+    const [components, updateComponents] = useReducer(() => {
+        if (isDisabled) return <></> // if the overlay is disabled, return nothing
+
+        return [...tagMap.values()].map(x => (
+            <div
+                key={x.id}
+                style={{
+                    position: "absolute",
+                    left: x.position[0],
+                    top: x.position[1],
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: "8px",
+                    padding: "8px",
+                    whiteSpace: "nowrap",
+                    transform: "translate(-50%, -100%)",
+                }}
+            >
+                <h1 className="text-2xl text-white font-sans" style={{ fontWeight: "bold" }}>
+                    {x.text}
+                </h1>
+            </div>
+        ))
+    }, [])
+
+    /* Creating listener for tag events to update tagMap and rerender overlay */
+    useEffect(() => {
+        const onTagAdd = (e: Event) => {
+            tagMap.set((e as SceneOverlayTagEvent).tag.id, (e as SceneOverlayTagEvent).tag)
+        }
+
+        const onTagRemove = (e: Event) => {
+            tagMap.delete((e as SceneOverlayTagEvent).tag.id)
+        }
+
+        const onUpdate = (_: Event) => {
+            updateComponents()
+        }
+
+        const onDisable = () => {
+            setIsDisabled(true)
+            updateComponents()
+        }
+
+        const onEnable = () => {
+            setIsDisabled(false)
+            updateComponents()
+        }
+
+        // listening for tags being added and removed
+        SceneOverlayTagEvent.Listen(SceneOverlayTagEventKey.ADD, onTagAdd)
+        SceneOverlayTagEvent.Listen(SceneOverlayTagEventKey.REMOVE, onTagRemove)
+
+        // listening for updates to the overlay every frame
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.UPDATE, onUpdate)
+
+        // listening for disabling and enabling scene tags
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.DISABLE, onDisable)
+        SceneOverlayEvent.Listen(SceneOverlayEventKey.ENABLE, onEnable)
+
+        // disposing all the tags and listeners when the scene is destroyed
+        return () => {
+            SceneOverlayTagEvent.RemoveListener(SceneOverlayTagEventKey.ADD, onTagAdd)
+            SceneOverlayTagEvent.RemoveListener(SceneOverlayTagEventKey.REMOVE, onTagRemove)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.UPDATE, onUpdate)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.DISABLE, onDisable)
+            SceneOverlayEvent.RemoveListener(SceneOverlayEventKey.ENABLE, onEnable)
+            tagMap.clear()
+        }
+    }, [])
+
+    /* Render the overlay as a box that spans the entire screen and does not intercept any user interaction */
+    return (
+        <Box
+            component="div"
+            display="flex"
+            sx={{
+                position: "fixed",
+                left: "0pt",
+                top: "0pt",
+                width: "100vw",
+                height: "100vh",
+                overflow: "hidden",
+                pointerEvents: "none",
+            }}
+        >
+            {components ?? <></>}
+        </Box>
+    )
+}
+
+export default SceneOverlay

fission/src/ui/components/SceneOverlayEvents.ts

@@ -0,0 +1,87 @@
+let nextTagId = 0
+
+/* Coordinates for tags in world space */
+export type PixelSpaceCoord = [number, number]
+
+/** Contains the event keys for events that require a SceneOverlayTag as a parameter */
+export const enum SceneOverlayTagEventKey {
+    ADD = "SceneOverlayTagAddEvent",
+    REMOVE = "SceneOverlayTagRemoveEvent",
+}
+
+/** Contains the event keys for other Scene Overlay Events */
+export const enum SceneOverlayEventKey {
+    UPDATE = "SceneOverlayUpdateEvent",
+    DISABLE = "SceneOverlayDisableEvent",
+    ENABLE = "SceneOverlayEnableEvent",
+}
+
+/**
+ * Represents a tag that can be displayed on the screen
+ *
+ * @param text The text to display
+ * @param position The position of the tag in screen space (default: [0,0])
+ */
+export class SceneOverlayTag {
+    private _id: number
+    public text: string
+    public position: PixelSpaceCoord // Screen Space
+
+    public get id() {
+        return this._id
+    }
+
+    /** Create a new tag */
+    public constructor(text: string, position?: PixelSpaceCoord) {
+        this._id = nextTagId++
+
+        this.text = text
+        this.position = position ?? [0, 0]
+        new SceneOverlayTagEvent(SceneOverlayTagEventKey.ADD, this)
+        // new SceneOverlayTagAddEvent(this)
+    }
+
+    /** Removing the tag */
+    public Dispose() {
+        new SceneOverlayTagEvent(SceneOverlayTagEventKey.REMOVE, this)
+        // new SceneOverlayTagRemoveEvent(this)
+    }
+}
+
+/** Event handler for events that use a SceneOverlayTag as a parameter */
+export class SceneOverlayTagEvent extends Event {
+    public tag: SceneOverlayTag
+
+    public constructor(eventKey: SceneOverlayTagEventKey, tag: SceneOverlayTag) {
+        super(eventKey)
+
+        this.tag = tag
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(eventKey: SceneOverlayTagEventKey, func: (e: Event) => void) {
+        window.addEventListener(eventKey, func)
+    }
+
+    public static RemoveListener(eventKey: SceneOverlayTagEventKey, func: (e: Event) => void) {
+        window.removeEventListener(eventKey, func)
+    }
+}
+
+/** Event handler for other SceneOverlay events */
+export class SceneOverlayEvent extends Event {
+    public constructor(eventKey: SceneOverlayEventKey) {
+        super(eventKey)
+
+        window.dispatchEvent(this)
+    }
+
+    public static Listen(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
+        window.addEventListener(eventKey, func)
+    }
+
+    public static RemoveListener(eventKey: SceneOverlayEventKey, func: (e: Event) => void) {
+        window.removeEventListener(eventKey, func)
+    }
+}

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -8,6 +8,7 @@ import Button from "@/components/Button"
 import Slider from "@/components/Slider"
 import Checkbox from "@/components/Checkbox"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+import { SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 
 const moveElementToTop = (arr: string[], element: string | undefined) => {
     if (element == undefined) {
@@ -44,6 +45,9 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const [renderScoringZones, setRenderScoringZones] = useState<boolean>(
         PreferencesSystem.getGlobalPreference<boolean>("RenderScoringZones")
     )
+    const [renderSceneTags, setRenderSceneTags] = useState<boolean>(
+        PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")
+    )
 
     const saveSettings = () => {
         PreferencesSystem.setGlobalPreference<string>("ScreenMode", screenMode)
@@ -54,6 +58,7 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
         PreferencesSystem.setGlobalPreference<boolean>("ReportAnalytics", reportAnalytics)
         PreferencesSystem.setGlobalPreference<boolean>("UseMetric", useMetric)
         PreferencesSystem.setGlobalPreference<boolean>("RenderScoringZones", renderScoringZones)
+        PreferencesSystem.setGlobalPreference<boolean>("RenderSceneTags", renderSceneTags)
 
         PreferencesSystem.savePreferences()
     }
@@ -136,6 +141,15 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
                     setRenderScoringZones(checked)
                 }}
             />
+            <Checkbox
+                label="Render Scene Tags"
+                defaultState={PreferencesSystem.getGlobalPreference<boolean>("RenderSceneTags")}
+                onClick={checked => {
+                    setRenderSceneTags(checked)
+                    if (!checked) new SceneOverlayEvent(SceneOverlayEventKey.DISABLE)
+                    else new SceneOverlayEvent(SceneOverlayEventKey.ENABLE)
+                }}
+            />
         </Modal>
     )
 }