WIP Add pro meshes for surfaces

Pro meshes not yet affected by surface map, leaving small gaps in the terrain

Author: Scarabol

src/game/LevelLoader.ts

@@ -15,6 +15,7 @@ export interface LevelConfData {
     fullName: string
     generateSpiders: boolean
     video: string
+    meshBasename: string
     textureBasename: string
     roofTexture: string
     rockFallStyle: RockFallStyle
@@ -72,6 +73,7 @@ export class LevelLoader {
             video: levelConf.video,
             mapWidth: terrainMap.width,
             mapHeight: terrainMap.height,
+            meshBasename: textureSet.meshBasename,
             textureBasename: textureSet.textureBasename,
             roofTexture: textureSet.roofTexture,
             rockFallStyle: rockFallStyle,

src/game/SceneManager.ts

@@ -87,6 +87,9 @@ export class SceneManager implements Updatable {
         EventBroker.subscribe(EventKey.BUILDINGS_CHANGED, () => {
             this.setBuildModeSelection(undefined) // TODO Check dependencies precisely
         })
+        EventBroker.subscribe(EventKey.COMMAND_CHANGE_PREFERENCES, (event) => {
+            this.terrain.forEachSurface((s) => s.mesh.setProMeshEnabled(SaveGameManager.preferences.wallDetails))
+        })
     }
 
     setActiveCamera(camera: PerspectiveCamera) {
@@ -135,10 +138,8 @@ export class SceneManager implements Updatable {
         this.setBuildModeSelection(undefined)
 
         this.floorGroup = new Group()
-        this.floorGroup.scale.setScalar(TILESIZE)
         this.roofGroup = new Group()
         this.roofGroup.visible = false
-        this.roofGroup.scale.setScalar(TILESIZE)
         this.terrain = TerrainLoader.loadTerrain(levelConf, this.worldMgr)
         this.terrain.forEachSurface((s) => {
             this.floorGroup.add(s.mesh)

src/game/TerrainLoader.ts

@@ -83,7 +83,7 @@ export class TerrainLoader {
                                     case SurfaceType.LAVA5:
                                     // fallthrough
                                     case SurfaceType.WATER:
-                                        worldMgr.ecs.addComponent(surface.entity, new FluidSurfaceComponent(surface.x, surface.y, surface.mesh.geometry.attributes.uv))
+                                        worldMgr.ecs.addComponent(surface.entity, new FluidSurfaceComponent(surface.x, surface.y, surface.mesh.lowMesh.geometry.attributes.uv))
                                         break
                                     case SurfaceType.SLUG_HOLE:
                                         terrain.slugHoles.add(surface)

src/game/model/building/BuildPlacementMarkerMesh.ts

@@ -2,10 +2,11 @@ import { BufferGeometry, Mesh, MeshPhongMaterial, Vector2 } from 'three'
 import { TILESIZE } from '../../../params'
 import { SceneManager } from '../../SceneManager'
 import { Surface } from '../../terrain/Surface'
+import { SurfaceMesh } from '../../terrain/SurfaceMesh'
 
 export class BuildPlacementMarkerMesh extends Mesh<BufferGeometry, MeshPhongMaterial> {
     sceneMgr: SceneManager
-    lastSurfaceMesh?: Mesh
+    lastSurfaceMesh?: SurfaceMesh
 
     constructor(sceneMgr: SceneManager) {
         super(new BufferGeometry(), new MeshPhongMaterial({
@@ -28,7 +29,7 @@ export class BuildPlacementMarkerMesh extends Mesh<BufferGeometry, MeshPhongMate
         this.position.copy(surfaceMesh.position.clone().multiplyScalar(TILESIZE))
         this.position.y += TILESIZE / 20
         this.geometry?.dispose()
-        this.geometry = surfaceMesh.geometry.clone()
+        this.geometry = surfaceMesh.lowMesh.geometry.clone()
     }
 
     setColor(hexColor: number) {

src/game/system/LaserShotSystem.ts

@@ -88,7 +88,7 @@ export class LaserShotSystem extends AbstractGameSystem {
             this.worldMgr.sceneMgr.addPositionalAudio(soundParent, 'SFX_LaserHit', false)
             this.worldMgr.sceneMgr.addMiscAnim(GameConfig.instance.miscObjects.boulderExplode, rockyIntersection.point, PRNG.animation.random() * 2 * Math.PI, false)
         } else {
-            const floorIntersection = this.raycaster.intersectObjects<SurfaceMesh>(this.worldMgr.sceneMgr.floorGroup.children, false)[0]
+            const floorIntersection = this.raycaster.intersectObjects<SurfaceMesh>(this.worldMgr.sceneMgr.floorGroup.children, true)[0]
             if (floorIntersection) {
                 beamLength = floorIntersection.distance
                 const surface = floorIntersection.object.userData.selectable

src/game/terrain/Surface.ts

@@ -1,4 +1,4 @@
-import { BackSide, Raycaster, Vector2, Vector3 } from 'three'
+import { Raycaster, Vector2, Vector3 } from 'three'
 import { SoundManager } from '../../audio/SoundManager'
 import { DeselectAll, SelectionChanged, UpdateRadarSurface, UpdateRadarTerrain } from '../../event/LocalEvents'
 import { CavernDiscovered, JobCreateEvent, OreFoundEvent, WorldLocationEvent } from '../../event/WorldEvents'
@@ -13,7 +13,7 @@ import { DrillJob } from '../model/job/surface/DrillJob'
 import { ReinforceJob } from '../model/job/surface/ReinforceJob'
 import { GameEntity } from '../ECS'
 import { SurfaceVertex } from './SurfaceGeometry'
-import { SurfaceMesh } from './SurfaceMesh'
+import { RoofMesh, SurfaceMesh } from './SurfaceMesh'
 import { SurfaceType } from './SurfaceType'
 import { Terrain } from './Terrain'
 import { WALL_TYPE, WallType } from './WallType'
@@ -34,6 +34,8 @@ import { PRNG } from '../factory/PRNG'
 import { GameState } from '../model/GameState'
 import { CompleteSurfaceJob } from '../model/job/surface/CompleteSurfaceJob'
 import { MaterialEntity } from '../model/material/MaterialEntity'
+import { ResourceManager } from '../../resource/ResourceManager'
+import { SaveGameManager } from '../../resource/SaveGameManager'
 
 export class Surface {
     readonly worldMgr: WorldManager
@@ -53,7 +55,7 @@ export class Surface {
     drillProgress: number = 0
 
     readonly mesh: SurfaceMesh
-    readonly roofMesh: SurfaceMesh
+    readonly roofMesh: RoofMesh
     wallType: WallType = WALL_TYPE.floor
     needsMeshUpdate: boolean = false
 
@@ -83,15 +85,10 @@ export class Surface {
                 this.rubblePositions = [this.getRandomPosition(), this.getRandomPosition(), this.getRandomPosition(), this.getRandomPosition()]
                 break
         }
-        // TODO Use pro meshes for high wall details in FPV
-        // const proMesh = ResourceManager.getLwoModel(this.terrain.textureSet.meshBasename + '01b.lwo')
-        // proMesh.position.copy(this.mesh.position)
-        // proMesh.scale.setScalar(1 / TILESIZE)
-        // this.terrain.floorGroup.add(proMesh)
         this.mesh = new SurfaceMesh(x, y, {selectable: this, surface: this})
-        this.roofMesh = new SurfaceMesh(x, y, {})
-        this.roofMesh.material.side = BackSide
-        this.roofMesh.position.y = 3
+        this.mesh.setProMeshEnabled(SaveGameManager.preferences.wallDetails)
+        const roofTexture = ResourceManager.getSurfaceTexture(this.terrain.levelConf.roofTexture, 0) ?? null // TODO Move to config handling
+        this.roofMesh = new RoofMesh(x, y, roofTexture)
     }
 
     private updateObjectName() {
@@ -143,7 +140,7 @@ export class Surface {
                 case SurfaceType.LAVA5:
                 // fallthrough
                 case SurfaceType.WATER:
-                    this.worldMgr.ecs.addComponent(this.entity, new FluidSurfaceComponent(this.x, this.y, this.mesh.geometry.attributes.uv))
+                    this.worldMgr.ecs.addComponent(this.entity, new FluidSurfaceComponent(this.x, this.y, this.mesh.lowMesh.geometry.attributes.uv))
                     break
                 case SurfaceType.HIDDEN_CAVERN:
                     this.surfaceType = SurfaceType.GROUND
@@ -351,7 +348,7 @@ export class Surface {
         this.terrain.pathFinder.updateSurface(this)
     }
 
-    private getVertex(x: number, y: number, s1: Surface, s2: Surface, s3: Surface): SurfaceVertex {
+    getVertex(x: number, y: number, s1: Surface, s2: Surface, s3: Surface): SurfaceVertex {
         const high = [this, s1, s2, s3].some((s) => !s.discovered) || ![this, s1, s2, s3].some((s) => s.surfaceType.floor)
         const minSeamProgress = Math.min(this.getSeamProgress(), s1.getSeamProgress(), s2.getSeamProgress(), s3.getSeamProgress())
         const offset = this.terrain.getHeightOffset(x, y)
@@ -365,9 +362,9 @@ export class Surface {
     private updateWallType(topLeft: SurfaceVertex, topRight: SurfaceVertex, bottomRight: SurfaceVertex, bottomLeft: SurfaceVertex) {
         let wallType: WallType = Surface.getWallType(topLeft.high, topRight.high, bottomRight.high, bottomLeft.high)
         if (wallType === WALL_TYPE.wall && topLeft.high === bottomRight.high) wallType = WALL_TYPE.weirdCrevice
-        this.wallType = wallType
+        this.wallType = wallType // TODO Update wall type only when necessary
         this.mesh.setHeights(wallType, topLeft, topRight, bottomRight, bottomLeft)
-        this.roofMesh.setHeights(wallType, topLeft.flipY(), topRight.flipY(), bottomRight.flipY(), bottomLeft.flipY())
+        this.roofMesh.setHeights(wallType, topLeft, topRight, bottomRight, bottomLeft)
         if (this.wallType !== WALL_TYPE.wall) this.cancelReinforceJobs()
         if (this.wallType < WALL_TYPE.wall) this.worldMgr.ecs.removeComponent(this.entity, EmergeComponent)
     }
@@ -426,8 +423,9 @@ export class Surface {
             suffix = this.surfaceType.shaping ? '0' + this.surfaceType.matIndex : this.surfaceType.matIndex
         }
         const textureFilepath = this.terrain.levelConf.textureBasename + suffix + '.bmp'
-        this.mesh.setTexture(textureFilepath, rotation)
-        this.roofMesh.setTexture(this.terrain.levelConf.roofTexture, rotation)
+        const proMeshSuffix = suffix.startsWith('1') ? '10' : suffix
+        const proMeshFilepath = (this.terrain.levelConf.meshBasename + proMeshSuffix).toLowerCase()
+        this.mesh.setTexture(textureFilepath, rotation, proMeshFilepath)
     }
 
     private determinePowerPathTextureNameSuffixAndRotation(rotation: number, suffix: string) {
@@ -480,7 +478,7 @@ export class Surface {
     select(): boolean {
         if (!this.isSelectable()) return false
         this.selected = true
-        this.mesh.setHighlightColor(0x6060a0)
+        this.setHighlightColor(0x6060a0)
         if (this.surfaceType.floor) SoundManager.playSfxSound('SFX_Floor')
         else if (this.surfaceType.shaping) SoundManager.playSfxSound('SFX_Wall')
         if (DEV_MODE) console.log(`Surface selected ${this.x}/${this.y}`, this)
@@ -502,7 +500,11 @@ export class Surface {
         } else if (this.drillJob) {
             color = 0xa0a0a0
         }
-        this.mesh.setHighlightColor(color)
+        this.setHighlightColor(color)
+    }
+
+    setHighlightColor(hex: number) {
+        this.mesh.setHighlightColor(hex)
     }
 
     hasRubble(): boolean {
@@ -595,7 +597,7 @@ export class Surface {
         const wasPath = this.surfaceType === SurfaceType.POWER_PATH || this.surfaceType === SurfaceType.POWER_PATH_BUILDING
         this.surfaceType = surfaceType
         if (this.surfaceType === SurfaceType.WATER || this.surfaceType === SurfaceType.LAVA5) {
-            this.worldMgr.ecs.addComponent(this.entity, new FluidSurfaceComponent(this.x, this.y, this.mesh.geometry.attributes.uv))
+            this.worldMgr.ecs.addComponent(this.entity, new FluidSurfaceComponent(this.x, this.y, this.mesh.lowMesh.geometry.attributes.uv))
         } else {
             this.worldMgr.ecs.removeComponent(this.entity, FluidSurfaceComponent)
         }

src/game/terrain/SurfaceGeometry.ts

@@ -1,6 +1,7 @@
 import { BufferGeometry, Vector2, Vector3 } from 'three'
 import { BufferAttribute } from 'three/src/core/BufferAttribute'
 import { WALL_TYPE, WallType } from './WallType'
+import { TILESIZE } from '../../params'
 
 export class SurfaceGeometry extends BufferGeometry {
     constructor() {
@@ -13,10 +14,10 @@ export class SurfaceGeometry extends BufferGeometry {
     setHeights(wallType: WallType, topLeft: SurfaceVertex, topRight: SurfaceVertex, bottomRight: SurfaceVertex, bottomLeft: SurfaceVertex) {
         const uvOffset = SurfaceGeometry.determineUvOffset(wallType, topLeft.high, bottomRight.high, topRight.high, bottomLeft.high)
 
-        const topLeftVertex = new Vector3(0, topLeft.height, 0)
-        const topRightVertex = new Vector3(1, topRight.height, 0)
-        const bottomRightVertex = new Vector3(1, bottomRight.height, 1)
-        const bottomLeftVertex = new Vector3(0, bottomLeft.height, 1)
+        const topLeftVertex = new Vector3(0, topLeft.height, 0).multiplyScalar(TILESIZE)
+        const topRightVertex = new Vector3(1, topRight.height, 0).multiplyScalar(TILESIZE)
+        const bottomRightVertex = new Vector3(1, bottomRight.height, 1).multiplyScalar(TILESIZE)
+        const bottomLeftVertex = new Vector3(0, bottomLeft.height, 1).multiplyScalar(TILESIZE)
 
         const vertices: Vector3[] = []
         const normals: Vector3[] = []

src/game/terrain/SurfaceMesh.ts

@@ -1,22 +1,113 @@
-import { Mesh, MeshPhongMaterial } from 'three'
+import { BackSide, Group, Mesh, MeshPhongMaterial, Texture } from 'three'
 import { ResourceManager } from '../../resource/ResourceManager'
 import { SurfaceGeometry, SurfaceVertex } from './SurfaceGeometry'
-import { WallType } from './WallType'
+import { WALL_TYPE, WallType } from './WallType'
 import { ObjectPointer } from '../../scene/ObjectPointer'
 import { Surface } from './Surface'
+import { TILESIZE } from '../../params'
+import { SceneMesh } from '../../scene/SceneMesh'
 
 export interface SurfaceMeshUserData {
     selectable?: Surface
     surface?: Surface
 }
 
-export class SurfaceMesh extends Mesh<SurfaceGeometry, MeshPhongMaterial> {
-    declare userData: SurfaceMeshUserData
+export class SurfaceMesh extends Group {
+    proMeshEnabled: boolean = false
+    lowMesh: SurfaceMeshLow
     objectPointer?: ObjectPointer // Only available for surfaces with tuto block id
+    proMesh?: SceneMesh
+
+    constructor(readonly x: number, readonly y: number, readonly userData: SurfaceMeshUserData) {
+        super()
+        this.lowMesh = new SurfaceMeshLow(x, y, userData)
+        this.add(this.lowMesh)
+    }
+
+    setProMeshEnabled(state: boolean) {
+        this.proMeshEnabled = state
+        if (this.proMesh) this.proMesh.visible = this.proMeshEnabled
+        this.lowMesh.visible = !this.proMesh?.visible
+    }
+
+    setHighlightColor(hex: number) {
+        this.lowMesh.setHighlightColor(hex)
+        this.proMesh?.material.forEach((m) => m.color.setHex(hex))
+    }
+
+    setTexture(textureFilepath: string, textureRotation: number, proMeshFilepath: string) {
+        this.lowMesh.setTexture(textureFilepath, textureRotation)
+        this.updateProMesh(proMeshFilepath)
+    }
+
+    updateProMesh(proMeshFilepath: string) {
+        const surface = this.userData.surface!
+        // TODO Keep the shape of the surface separately
+        const adjacent = surface.terrain.getAdjacent(this.x, this.y)
+        const topLeftVertex = surface.getVertex(this.x, this.y, adjacent.left, adjacent.topLeft, adjacent.top)
+        const topRightVertex = surface.getVertex(this.x + 1, this.y, adjacent.top, adjacent.topRight, adjacent.right)
+        const bottomRightVertex = surface.getVertex(this.x + 1, this.y + 1, adjacent.right, adjacent.bottomRight, adjacent.bottom)
+        const bottomLeftVertex = surface.getVertex(this.x, this.y + 1, adjacent.bottom, adjacent.bottomLeft, adjacent.left)
+        if (this.proMesh) {
+            this.remove(this.proMesh)
+            this.proMesh.dispose()
+            this.proMesh = undefined
+        }
+        if (surface.wallType === WALL_TYPE.corner || surface.wallType === WALL_TYPE.wall || surface.wallType === WALL_TYPE.invertedCorner ||
+            (surface.wallType === WALL_TYPE.floor && surface.hasRubble())) {
+            this.proMesh = ResourceManager.proMeshes.get(proMeshFilepath)?.clone(true)
+            if (!this.proMesh) console.warn(`Could not find surface pro mesh for "${proMeshFilepath}"`)
+        }
+        if (this.proMesh) {
+            this.proMesh.userData = this.userData
+            this.proMesh.rotation.y = SurfaceMesh.getWallAngle(surface.wallType, topLeftVertex.high, topRightVertex.high, bottomRightVertex.high, bottomLeftVertex.high)
+            // TODO Tear pro mesh to fit surface map offsets and close gaps in terrain
+            const posY = (topLeftVertex.offset + topRightVertex.offset + bottomRightVertex.offset + bottomLeftVertex.offset) / 4
+            this.proMesh.position.set(this.x + 0.5, posY, this.y + 0.5).multiplyScalar(TILESIZE)
+            this.add(this.proMesh)
+        }
+        if (this.proMesh) this.proMesh.visible = this.proMeshEnabled
+        this.lowMesh.visible = !this.proMesh?.visible
+    }
+
+    private static getWallAngle(wallType: WallType, topLeftHigh: boolean, topRightHigh: boolean, bottomRightHigh: boolean, bottomLeftHigh: boolean): number {
+        switch (wallType) {
+            case WALL_TYPE.corner:
+                if (topLeftHigh) return Math.PI / 2
+                else if (bottomLeftHigh) return Math.PI
+                else if (bottomRightHigh) return -Math.PI / 2
+                return 0
+            case WALL_TYPE.invertedCorner:
+                if (!topLeftHigh) return -Math.PI / 2
+                else if (!bottomLeftHigh) return 0
+                else if (!bottomRightHigh) return Math.PI / 2
+                return Math.PI
+            case WALL_TYPE.wall:
+                if (topLeftHigh && topRightHigh) return 0
+                else if (topLeftHigh && bottomLeftHigh) return Math.PI / 2
+                else if (topRightHigh && bottomRightHigh) return -Math.PI / 2
+                else return Math.PI
+        }
+        return 0
+    }
+
+    setHeights(wallType: WallType, topLeft: SurfaceVertex, topRight: SurfaceVertex, bottomRight: SurfaceVertex, bottomLeft: SurfaceVertex) {
+        this.lowMesh.setHeights(wallType, topLeft, topRight, bottomRight, bottomLeft)
+    }
+
+    dispose() {
+        this.removeFromParent()
+        this.lowMesh.dispose()
+        this.proMesh?.dispose()
+    }
+}
+
+class SurfaceMeshLow extends Mesh<SurfaceGeometry, MeshPhongMaterial> {
+    declare userData: SurfaceMeshUserData
 
     constructor(x: number, y: number, userData: SurfaceMeshUserData) {
         super(new SurfaceGeometry(), new MeshPhongMaterial({shininess: 0}))
-        this.position.set(x, 0, y)
+        this.position.set(x, 0, y).multiplyScalar(TILESIZE)
         this.userData = userData
     }
 
@@ -40,3 +131,20 @@ export class SurfaceMesh extends Mesh<SurfaceGeometry, MeshPhongMaterial> {
         this.material.dispose()
     }
 }
+
+export class RoofMesh extends Mesh<SurfaceGeometry, MeshPhongMaterial> {
+    constructor(x: number, y: number, texture: Texture | null) { // three.js uses null instead of undefined
+        super(new SurfaceGeometry(), new MeshPhongMaterial({shininess: 0, side: BackSide, map: texture}))
+        this.position.set(x, 3, y).multiplyScalar(TILESIZE)
+    }
+
+    setHeights(wallType: WallType, topLeft: SurfaceVertex, topRight: SurfaceVertex, bottomRight: SurfaceVertex, bottomLeft: SurfaceVertex) {
+        this.geometry.setHeights(wallType, topLeft.flipY(), topRight.flipY(), bottomRight.flipY(), bottomLeft.flipY())
+    }
+
+    dispose() {
+        this.removeFromParent()
+        this.geometry.dispose()
+        this.material.dispose()
+    }
+}

src/gui/overlay/PausePanel.ts

@@ -20,8 +20,11 @@ export class PausePanel extends MenuBasePanel {
         this.layersByKey.get('menu4')!.itemsTrigger[0].onClick = () => this.onRestartGame()
         const advOptions = this.layersByKey.get('menu5')!
         const wallDetailsToggle = advOptions.itemsCycle[0]
-        wallDetailsToggle.disabled = true // TODO Implement wall details with pro meshes
         wallDetailsToggle.setState(SaveGameManager.preferences.wallDetails)
+        wallDetailsToggle.onStateChanged = (state) => {
+            SaveGameManager.preferences.wallDetails = state
+            this.publishEvent(new ChangePreferences())
+        }
         const musicToggle = advOptions.itemsCycle[1]
         musicToggle.setState(SaveGameManager.preferences.toggleMusic)
         musicToggle.onStateChanged = (state) => {

src/nerp/NerpRunner.ts

@@ -268,7 +268,7 @@ export class NerpRunner {
         const tutoBlocks = this.tutoBlocksById.getOrUpdate(tutoBlockId, () => [])
         tutoBlocks.forEach((t) => {
             if (enabled) {
-                t.mesh.objectPointer?.setTargetPosition(t.getCenterWorld(), t.mesh)
+                t.mesh.objectPointer?.setTargetPosition(t.getCenterWorld(), t)
             } else {
                 t.mesh.objectPointer?.hide()
             }