Fix Driver Station Hiding Zone Meshes [SYNTH-344]

fission/src/mirabuf/MirabufInstance.ts

@@ -137,6 +137,7 @@ class MirabufInstance {
                         ? [(A << 24) | (R << 16) | (G << 8) | B, A / 255.0]
                         : [0xe32b50, 1.0]
 
+                const isTransparent = opacity < 1.0
                 const material =
                     materialStyle === MaterialStyle.REGULAR
                         ? new THREE.MeshStandardMaterial({
@@ -146,7 +147,9 @@ class MirabufInstance {
                               metalness: appearance.metallic ?? 0.0,
                               shadowSide: THREE.DoubleSide,
                               opacity: opacity,
-                              transparent: opacity < 1.0,
+                              transparent: isTransparent,
+                              // Don't want transparent materials (driver station poly) to hide zones behind them
+                              depthWrite: !isTransparent,
                           })
                         : materialStyle === MaterialStyle.NORMAL
                           ? new THREE.MeshNormalMaterial()

fission/src/mirabuf/ProtectedZoneSceneObject.ts

@@ -1,8 +1,7 @@
 import type Jolt from "@synthesis.adsk/jolt-physics"
 import type * as THREE from "three"
-import * as Three from "three"
 import { MatchModeType } from "@/systems/match_mode/MatchModeTypes"
-import ZoneSceneObject from "@/mirabuf/ZoneSceneObject"
+import ZoneSceneObject, { createZoneMaterial } from "@/mirabuf/ZoneSceneObject"
 import World from "@/systems/World"
 import type MirabufSceneObject from "./MirabufSceneObject"
 import { ContactType } from "./ZoneTypes"
@@ -18,18 +17,8 @@ type RobotBox = [MirabufSceneObject, Jolt.OrientedBox]
 type Collision = [MirabufSceneObject, MirabufSceneObject]
 
 class ProtectedZoneSceneObject extends ZoneSceneObject<ProtectedZonePreferences> {
-    public static readonly RED_MATERIAL = new Three.MeshPhongMaterial({
-        color: 0xff0000,
-        shininess: 0.0,
-        opacity: 0.8,
-        transparent: true,
-    })
-    public static readonly BLUE_MATERIAL = new Three.MeshPhongMaterial({
-        color: 0x0022ff,
-        shininess: 0.0,
-        opacity: 0.8,
-        transparent: true,
-    })
+    public static readonly RED_MATERIAL = createZoneMaterial(0xff0000, 0.8)
+    public static readonly BLUE_MATERIAL = createZoneMaterial(0x0022ff, 0.8)
 
     private _robotsInside: Map<MirabufSceneObject, number> = new Map()
     private _lastRobotCollisionTime: number = 0

fission/src/mirabuf/ScoringZoneSceneObject.ts

@@ -1,26 +1,15 @@
 import type Jolt from "@synthesis.adsk/jolt-physics"
 import type * as THREE from "three"
-import * as Three from "three"
 import type { ScoringZonePreferences } from "@/systems/preferences/PreferenceTypes"
 import World from "@/systems/World"
 import { findListDifference } from "@/util/Utility"
 import type MirabufSceneObject from "./MirabufSceneObject"
 import type { RigidNodeAssociate } from "./MirabufSceneObject"
-import ZoneSceneObject from "./ZoneSceneObject"
+import ZoneSceneObject, { createZoneMaterial } from "./ZoneSceneObject"
 
 class ScoringZoneSceneObject extends ZoneSceneObject<ScoringZonePreferences> {
-    public static readonly RED_MATERIAL = new Three.MeshPhongMaterial({
-        color: 0xed1c24,
-        shininess: 0.0,
-        opacity: 0.7,
-        transparent: true,
-    })
-    public static readonly BLUE_MATERIAL = new Three.MeshPhongMaterial({
-        color: 0x0066b3,
-        shininess: 0.0,
-        opacity: 0.7,
-        transparent: true,
-    })
+    public static readonly RED_MATERIAL = createZoneMaterial(0xed1c24, 0.7)
+    public static readonly BLUE_MATERIAL = createZoneMaterial(0x0066b3, 0.7)
 
     private _prevGPs: Jolt.BodyID[] = []
 

fission/src/mirabuf/ZoneSceneObject.ts

@@ -12,18 +12,25 @@ import {
     convertThreeVector3ToJoltVec3,
 } from "@/util/TypeConversions"
 import {
+    createBoxMesh,
     deltaFieldTransformsPhysicalProp as deltaAndFieldTransformsToVisualProp,
     type VisualProperties,
 } from "@/util/threejs/MeshCreation"
 import type MirabufSceneObject from "./MirabufSceneObject"
 
-export default abstract class ZoneSceneObject<P extends object> extends SceneObject {
-    private static readonly TRANSPARENT_MATERIAL = new THREE.MeshPhongMaterial({
-        color: 0x0000,
+export function createZoneMaterial(color: THREE.ColorRepresentation, opacity: number): THREE.MeshPhongMaterial {
+    return new THREE.MeshPhongMaterial({
+        color,
+        opacity,
         shininess: 0.0,
-        opacity: 0.0,
         transparent: true,
+        depthWrite: false,
+        side: THREE.DoubleSide, // Keeps the zone visible when the camera moves inside of it
     })
+}
+
+export default abstract class ZoneSceneObject<P extends object> extends SceneObject {
+    private static readonly TRANSPARENT_MATERIAL = createZoneMaterial(0x0000, 0.0)
 
     private _parentAssembly: MirabufSceneObject
     public parentBodyId?: Jolt.BodyID
@@ -119,7 +126,7 @@ export default abstract class ZoneSceneObject<P extends object> extends SceneObj
     private createVisualMesh(props: VisualProperties) {
         const unitVector = new JOLT.Vec3(1, 1, 1)
 
-        this.mesh = World.sceneRenderer.createBox(unitVector, ZoneSceneObject.TRANSPARENT_MATERIAL)
+        this.mesh = createBoxMesh(unitVector, ZoneSceneObject.TRANSPARENT_MATERIAL)
         World.sceneRenderer.addObject(this.mesh)
 
         this.setMeshProperties(props)

fission/src/systems/scene/SceneRenderer.ts

@@ -1,4 +1,3 @@
-import type Jolt from "@synthesis.adsk/jolt-physics"
 import { EdgeDetectionMode, EffectComposer, EffectPass, RenderPass, SMAAEffect } from "postprocessing"
 import * as THREE from "three"
 import { CSM } from "three/examples/jsm/csm/CSM.js"
@@ -468,15 +467,6 @@ class SceneRenderer extends WorldSystem {
         }
     }
 
-    public createBox(halfExtent: Jolt.Vec3, material?: THREE.Material | undefined): THREE.Mesh {
-        const geo = new THREE.BoxGeometry(halfExtent.GetX(), halfExtent.GetY(), halfExtent.GetZ())
-        if (material) {
-            return new THREE.Mesh(geo, material)
-        } else {
-            return new THREE.Mesh(geo, this.createToonMaterial())
-        }
-    }
-
     public createToonMaterial(color: THREE.ColorRepresentation = 0xff00aa, steps: number = 5): THREE.MeshToonMaterial {
         const format = THREE.RedFormat
         const colors = new Uint8Array(steps)

fission/src/test/mirabuf/EjectableSceneObject.test.ts

@@ -19,7 +19,6 @@ const mockPhysicsSystem = {
 }
 const mockSceneRenderer = {
     filterSceneObjects: vi.fn().mockReturnValue([]),
-    createBox: vi.fn(),
     scene: {
         remove: vi.fn(),
     },

fission/src/test/mirabuf/IntakeSensorSceneObject.test.ts

@@ -20,7 +20,6 @@ const mockPhysicsSystem = {
 }
 const mockSceneRenderer = {
     sceneObjects: new Map(),
-    createBox: vi.fn(),
     scene: {
         remove: vi.fn(),
     },

fission/src/test/mirabuf/ProtectedZoneSceneObject.test.ts

@@ -26,7 +26,6 @@ const mockPhysicsSystem = {
 
 const mockSceneRenderer = {
     sceneObjects: new Map(),
-    createBox: vi.fn(),
     scene: {
         remove: vi.fn(),
     },

fission/src/test/mirabuf/ScoringZoneSceneObject.test.ts

@@ -23,7 +23,6 @@ const mockPhysicsSystem = {
 }
 const mockSceneRenderer = {
     sceneObjects: new Map(),
-    createBox: vi.fn(),
     scene: {
         remove: vi.fn(),
     },

fission/src/test/scene/SceneRenderer.test.ts

@@ -9,7 +9,6 @@ import SceneRenderer, {
     STANDARD_CAMERA_FOV_X,
     STANDARD_CAMERA_FOV_Y,
 } from "@/systems/scene/SceneRenderer"
-import JOLT from "@/util/loading/JoltSyncLoader"
 import type { RecursivePartial } from "@/util/Utility.ts"
 
 interface MockSceneObject {
@@ -202,16 +201,6 @@ describe("SceneRenderer", () => {
             expect(sphere.material).toBeInstanceOf(THREE.MeshToonMaterial)
         })
 
-        test("should create box with default material and correct position", () => {
-            const vec3 = new JOLT.Vec3(2, 3, 4)
-
-            const box = sceneRenderer.createBox(vec3)
-            expect(box.material).toBeInstanceOf(THREE.MeshToonMaterial)
-            expect(box.geometry.attributes.position.array[0]).toBe(1)
-            expect(box.geometry.attributes.position.array[1]).toBe(1.5)
-            expect(box.geometry.attributes.position.array[2]).toBe(2)
-        })
-
         test("should create toon material", () => {
             const material = sceneRenderer.createToonMaterial(0xff0000, 3)
             expect(material).toBeInstanceOf(THREE.MeshToonMaterial)

fission/src/test/util/MeshCreation.test.ts

@@ -2,7 +2,7 @@ import * as THREE from "three"
 import { Vector3 } from "three"
 import { describe, expect, test } from "vitest"
 import JOLT from "@/util/loading/JoltSyncLoader"
-import { createMeshForShape, deltaFieldTransformsPhysicalProp } from "@/util/threejs/MeshCreation"
+import { createBoxMesh, createMeshForShape, deltaFieldTransformsPhysicalProp } from "@/util/threejs/MeshCreation"
 
 describe("Mesh Creation Tests", () => {
     test("Sphere Mesh Creation", () => {
@@ -26,6 +26,21 @@ describe("Mesh Creation Tests", () => {
         expect(boxSize.y).toBeCloseTo(4.0, 2)
         expect(boxSize.z).toBeCloseTo(9.0, 2)
     })
+
+    test("Box Mesh spans the full given size, centered on its origin", () => {
+        const material = new THREE.MeshBasicMaterial()
+        const mesh = createBoxMesh(new JOLT.Vec3(2, 3, 4), material)
+
+        expect(mesh.material).toBe(material)
+
+        mesh.geometry.computeBoundingBox()
+        const size = new Vector3()
+        mesh.geometry.boundingBox?.getSize(size)
+        expect(size.x).toBeCloseTo(2.0, 2)
+        expect(size.y).toBeCloseTo(3.0, 2)
+        expect(size.z).toBeCloseTo(4.0, 2)
+        expect(mesh.geometry.boundingBox?.min).toEqual(new Vector3(-1, -1.5, -2))
+    })
 })
 
 describe("Delta Field Transform Physical Properties Tests", () => {

fission/src/ui/panels/configuring/assembly-config/interfaces/zones/ZoneConfigBase.tsx

@@ -8,6 +8,7 @@ import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import type { RigidNodeAssociate } from "@/mirabuf/MirabufSceneObject"
 import type { Alliance } from "@/systems/preferences/PreferenceTypes"
 import type GizmoSceneObject from "@/systems/scene/GizmoSceneObject"
+import { createZoneMaterial } from "@/mirabuf/ZoneSceneObject"
 import World from "@/systems/World"
 import SelectButton from "@/ui/components/SelectButton"
 import TransformGizmoControl from "@/ui/components/TransformGizmoControl"
@@ -72,18 +73,8 @@ export type ZoneConfigBaseProps<TZone extends BaseZonePreferences> = {
     children?: React.ReactNode
 }
 
-const DEFAULT_RED_MATERIAL = new THREE.MeshPhongMaterial({
-    color: 0xed1c24,
-    shininess: 0.0,
-    opacity: 0.7,
-    transparent: true,
-})
-const DEFAULT_BLUE_MATERIAL = new THREE.MeshPhongMaterial({
-    color: 0x0066b3,
-    shininess: 0.0,
-    opacity: 0.7,
-    transparent: true,
-})
+const DEFAULT_RED_MATERIAL = createZoneMaterial(0xed1c24, 0.7)
+const DEFAULT_BLUE_MATERIAL = createZoneMaterial(0x0066b3, 0.7)
 
 function computeDeltaFromGizmo(
     field: MirabufSceneObject,

fission/src/util/threejs/MeshCreation.ts

@@ -33,6 +33,11 @@ export function createMeshForShape(shape: Jolt.Shape) {
     return geometry
 }
 
+export function createBoxMesh(size: Jolt.Vec3, material: THREE.Material): THREE.Mesh {
+    const geo = new THREE.BoxGeometry(size.GetX(), size.GetY(), size.GetZ())
+    return new THREE.Mesh(geo, material)
+}
+
 export function getThreeObjForBody(body: Jolt.Body, color: THREE.Color) {
     const material = new THREE.MeshPhongMaterial({
         color: color,