Entities can now be highlighted by hovering over them again.

build.gradle.kts

@@ -1,9 +1,9 @@
 import org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile
 
 plugins {
-    kotlin("js") version "1.4.10" apply false
+    kotlin("js") version "1.4.20" apply false
-    kotlin("multiplatform") version "1.4.10" apply false
+    kotlin("multiplatform") version "1.4.20" apply false
-    kotlin("plugin.serialization") version "1.4.10" apply false
+    kotlin("plugin.serialization") version "1.4.20" apply false
 }
 
 tasks.wrapper {
@@ -14,7 +14,7 @@ subprojects {
     project.extra["coroutinesVersion"] = "1.3.9"
     project.extra["kotlinLoggingVersion"] = "2.0.2"
     project.extra["ktorVersion"] = "1.4.2"
-    project.extra["serializationVersion"] = "1.4.10"
+    project.extra["serializationVersion"] = "1.4.20"
     project.extra["slf4jVersion"] = "1.7.30"
 
     repositories {

buildSrc/build.gradle.kts

@@ -1,5 +1,5 @@
 plugins {
-    kotlin("jvm") version "1.4.20-RC"
+    kotlin("jvm") version "1.4.20"
     `java-gradle-plugin`
 }
 

web/src/main/kotlin/world/phantasmal/web/application/widgets/MainContentWidget.kt

@@ -30,12 +30,9 @@ class MainContentWidget(
             // language=css
             style("""
                 .pw-application-main-content {
-                    display: flex;
+                    display: grid;
-                    flex-direction: column;
+                    grid-template-rows: 100%;
-                }
+                    grid-template-columns: 100%;
-
-                .pw-application-main-content > * {
-                    flex-grow: 1;
                     overflow: hidden;
                 }
             """.trimIndent())

web/src/main/kotlin/world/phantasmal/web/core/rendering/Renderer.kt

@@ -24,8 +24,6 @@ abstract class Renderer(
     val camera: Camera,
 ) : DisposableContainer() {
     private val threeRenderer: ThreeRenderer = addDisposable(createThreeRenderer()).renderer
-    private var width = 0.0
-    private var height = 0.0
     private val light = HemisphereLight(
         skyColor = 0xffffff,
         groundColor = 0x505050,
@@ -36,6 +34,11 @@ abstract class Renderer(
     private var rendering = false
     private var animationFrameHandle: Int = 0
 
+    protected var width = 0.0
+        private set
+    protected var height = 0.0
+        private set
+
     val canvas: HTMLCanvasElement =
         threeRenderer.domElement.apply {
             tabIndex = 0
@@ -78,7 +81,13 @@ abstract class Renderer(
         window.cancelAnimationFrame(animationFrameHandle)
     }
 
+    fun resetCamera() {
+        controls.reset()
+    }
+
     open fun setSize(width: Double, height: Double) {
+        if (width == 0.0 || height == 0.0) return
+
         this.width = width
         this.height = height
         canvas.width = floor(width).toInt()

web/src/main/kotlin/world/phantasmal/web/externals/three/OrbitControls.kt

@@ -15,6 +15,7 @@ external interface OrbitControlsMouseButtons {
 external class OrbitControls(`object`: Camera, domElement: HTMLElement = definedExternally) {
     var enabled: Boolean
     var target: Vector3
+    var zoomSpeed: Double
     var screenSpacePanning: Boolean
 
     var mouseButtons: OrbitControlsMouseButtons

web/src/main/kotlin/world/phantasmal/web/externals/three/three.kt

@@ -148,7 +148,14 @@ external class Ray(origin: Vector3 = definedExternally, direction: Vector3 = def
     fun intersectPlane(plane: Plane, target: Vector3): Vector3?
 }
 
-external class Face3 {
+external class Face3(
+    a: Int,
+    b: Int,
+    c: Int,
+    normal: Vector3 = definedExternally,
+    color: Color = definedExternally,
+    materialIndex: Int = definedExternally,
+) {
     var normal: Vector3
 }
 
@@ -300,6 +307,19 @@ external class InstancedMesh(
     fun setMatrixAt(index: Int, matrix: Matrix4)
 }
 
+open external class Line : Object3D
+
+open external class LineSegments : Line
+
+open external class BoxHelper(
+    `object`: Object3D = definedExternally,
+    color: Color = definedExternally,
+) : LineSegments {
+    fun update(`object`: Object3D = definedExternally)
+
+    fun setFromObject(`object`: Object3D): BoxHelper
+}
+
 external class Scene : Object3D {
     var background: dynamic /* null | Color | Texture | WebGLCubeRenderTarget */
 }
@@ -394,6 +414,19 @@ external class Color(r: Double, g: Double, b: Double) {
 }
 
 open external class Geometry : EventDispatcher {
+    /**
+     * The array of vertices hold every position of points of the model.
+     * To signal an update in this array, Geometry.verticesNeedUpdate needs to be set to true.
+     */
+    var vertices: Array<Vector3>
+
+    /**
+     * Array of triangles or/and quads.
+     * The array of faces describe how each vertex in the model is connected with each other.
+     * To signal an update in this array, Geometry.elementsNeedUpdate needs to be set to true.
+     */
+    var faces: Array<Face3>
+
     /**
      * Array of face UV layers.
      * Each UV layer is an array of UV matching order and number of vertices in faces.
@@ -403,6 +436,17 @@ open external class Geometry : EventDispatcher {
 
     fun translate(x: Double, y: Double, z: Double): Geometry
 
+    /**
+     * Computes bounding box of the geometry, updating {@link Geometry.boundingBox} attribute.
+     */
+    fun computeBoundingBox()
+
+    /**
+     * Computes bounding sphere of the geometry, updating Geometry.boundingSphere attribute.
+     * Neither bounding boxes or bounding spheres are computed by default. They need to be explicitly computed, otherwise they are null.
+     */
+    fun computeBoundingSphere()
+
     fun dispose()
 }
 
@@ -492,6 +536,7 @@ open external class Material : EventDispatcher {
 
 external interface MeshBasicMaterialParameters : MaterialParameters {
     var color: Color
+    var opacity: Double
     var map: Texture?
     var skinning: Boolean
 }
@@ -503,6 +548,7 @@ external class MeshBasicMaterial(
 }
 
 external interface MeshLambertMaterialParameters : MaterialParameters {
+    var color: Color
     var skinning: Boolean
 }
 

web/src/main/kotlin/world/phantasmal/web/questEditor/loading/AreaAssetLoader.kt

@@ -15,11 +15,11 @@ import world.phantasmal.web.core.rendering.conversion.MeshBuilder
 import world.phantasmal.web.core.rendering.conversion.ninjaObjectToMeshBuilder
 import world.phantasmal.web.core.rendering.conversion.vec3ToThree
 import world.phantasmal.web.core.rendering.disposeObject3DResources
-import world.phantasmal.web.externals.three.Group
+import world.phantasmal.web.externals.three.*
-import world.phantasmal.web.externals.three.Object3D
 import world.phantasmal.web.questEditor.models.AreaVariantModel
 import world.phantasmal.web.questEditor.models.SectionModel
 import world.phantasmal.webui.DisposableContainer
+import world.phantasmal.webui.obj
 
 /**
  * Loads and caches area assets.
@@ -29,11 +29,11 @@ class AreaAssetLoader(
     private val assetLoader: AssetLoader,
 ) : DisposableContainer() {
     /**
-     * This cache's values consist of a TransformNode containing area render meshes and a list of
+     * This cache's values consist of an Object3D containing the area render meshes and a list of
      * that area's sections.
      */
     private val renderObjectCache = addDisposable(
-        LoadingCache<CacheKey, Pair<Object3D, List<SectionModel>>>(
+        LoadingCache<EpisodeAndAreaVariant, Pair<Object3D, List<SectionModel>>>(
             scope,
             { (episode, areaVariant) ->
                 val buffer = getAreaAsset(episode, areaVariant, AssetType.Render)
@@ -45,7 +45,7 @@ class AreaAssetLoader(
     )
 
     private val collisionObjectCache = addDisposable(
-        LoadingCache<CacheKey, Object3D>(
+        LoadingCache<EpisodeAndAreaVariant, Object3D>(
             scope,
             { (episode, areaVariant) ->
                 val buffer = getAreaAsset(episode, areaVariant, AssetType.Collision)
@@ -66,13 +66,13 @@ class AreaAssetLoader(
         episode: Episode,
         areaVariant: AreaVariantModel,
     ): Pair<Object3D, List<SectionModel>> =
-        renderObjectCache.get(CacheKey(episode, areaVariant))
+        renderObjectCache.get(EpisodeAndAreaVariant(episode, areaVariant))
 
     suspend fun loadCollisionGeometry(
         episode: Episode,
         areaVariant: AreaVariantModel,
     ): Object3D =
-        collisionObjectCache.get(CacheKey(episode, areaVariant))
+        collisionObjectCache.get(EpisodeAndAreaVariant(episode, areaVariant))
 
     private suspend fun getAreaAsset(
         episode: Episode,
@@ -87,7 +87,7 @@ class AreaAssetLoader(
         return assetLoader.loadArrayBuffer(baseUrl + suffix)
     }
 
-    private data class CacheKey(
+    private data class EpisodeAndAreaVariant(
         val episode: Episode,
         val areaVariant: AreaVariantModel,
     )
@@ -101,6 +101,30 @@ interface AreaUserData {
     var sectionId: Int?
 }
 
+private val COLLISION_MATERIALS: Array<Material> = arrayOf(
+    // Wall
+    MeshBasicMaterial(obj {
+        color = Color(0x80c0d0)
+        transparent = true
+        opacity = 0.25
+    }),
+    // Ground
+    MeshLambertMaterial(obj {
+        color = Color(0x405050)
+        side = DoubleSide
+    }),
+    // Vegetation
+    MeshLambertMaterial(obj {
+        color = Color(0x306040)
+        side = DoubleSide
+    }),
+    // Section transition zone
+    MeshLambertMaterial(obj {
+        color = Color(0x402050)
+        side = DoubleSide
+    }),
+)
+
 private val AREA_BASE_NAMES: Map<Episode, List<Pair<String, Int>>> = mapOf(
     Episode.I to listOf(
         Pair("city00_00", 1),
@@ -231,7 +255,6 @@ private fun areaGeometryToTransformNodeAndSections(
     return Pair(obj3d, sections)
 }
 
-// TODO: Use Geometry and not BufferGeometry for better raycaster performance.
 private fun areaCollisionGeometryToTransformNode(
     obj: CollisionObject,
     episode: Episode,
@@ -241,15 +264,18 @@ private fun areaCollisionGeometryToTransformNode(
     obj3d.name = "Collision Geometry $episode-${areaVariant.area.id}-${areaVariant.id}"
 
     for (collisionMesh in obj.meshes) {
-        val builder = MeshBuilder()
+        // Use Geometry instead of BufferGeometry for better raycaster performance.
-        // TODO: Material.
+        val geom = Geometry()
-        val group = builder.getGroupIndex(textureId = null, alpha = false, additiveBlending = false)
+
+        geom.vertices = Array(collisionMesh.vertices.size) {
+            vec3ToThree(collisionMesh.vertices[it])
+        }
 
         for (triangle in collisionMesh.triangles) {
             val isSectionTransition = (triangle.flags and 0b1000000) != 0
             val isVegetation = (triangle.flags and 0b10000) != 0
             val isGround = (triangle.flags and 0b1) != 0
-            val colorIndex = when {
+            val materialIndex = when {
                 isSectionTransition -> 3
                 isVegetation -> 2
                 isGround -> 1
@@ -257,23 +283,23 @@ private fun areaCollisionGeometryToTransformNode(
             }
 
             // Filter out walls.
-            if (colorIndex != 0) {
+            if (materialIndex != 0) {
-                val p1 = vec3ToThree(collisionMesh.vertices[triangle.index1])
+                geom.faces.asDynamic().push(
-                val p2 = vec3ToThree(collisionMesh.vertices[triangle.index2])
+                    Face3(
-                val p3 = vec3ToThree(collisionMesh.vertices[triangle.index3])
+                        triangle.index1,
-                val n = vec3ToThree(triangle.normal)
+                        triangle.index2,
-
+                        triangle.index3,
-                builder.addIndex(group, builder.vertexCount)
+                        vec3ToThree(triangle.normal),
-                builder.addVertex(p1, n)
+                        materialIndex = materialIndex,
-                builder.addIndex(group, builder.vertexCount)
+                    )
-                builder.addVertex(p2, n)
+                )
-                builder.addIndex(group, builder.vertexCount)
-                builder.addVertex(p3, n)
             }
         }
 
-        if (builder.vertexCount > 0) {
+        if (geom.faces.isNotEmpty()) {
-            obj3d.add(builder.buildMesh(boundingVolumes = true))
+            geom.computeBoundingBox()
+            geom.computeBoundingSphere()
+            obj3d.add(Mesh(geom, COLLISION_MATERIALS))
         }
     }
 

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityInstance.kt

@@ -16,6 +16,20 @@ class EntityInstance(
     selectedWave: Val<WaveModel?>,
     modelChanged: (instanceIndex: Int) -> Unit,
 ) : DisposableContainer() {
+    /**
+     * When set, this object's transform will match the instance's transform.
+     */
+    var follower: Object3D? = null
+        set(follower) {
+            follower?.let {
+                follower.position.copy(entity.worldPosition.value)
+                follower.rotation.copy(entity.worldRotation.value)
+                follower.updateMatrix()
+            }
+
+            field = follower
+        }
+
     init {
         updateMatrix()
 
@@ -24,6 +38,7 @@ class EntityInstance(
             entity.worldRotation.observe { updateMatrix() },
         )
 
+        // TODO: Visibility.
         val isVisible: Val<Boolean>
 
         if (entity is QuestNpcModel) {
@@ -50,19 +65,19 @@ class EntityInstance(
     }
 
     private fun updateMatrix() {
-        instanceHelper.position.set(
+        val pos = entity.worldPosition.value
-            entity.worldPosition.value.x,
+        val rot = entity.worldRotation.value
-            entity.worldPosition.value.y,
+        instanceHelper.position.copy(pos)
-            entity.worldPosition.value.z,
+        instanceHelper.rotation.copy(rot)
-        )
-        instanceHelper.rotation.set(
-            entity.worldRotation.value.x,
-            entity.worldRotation.value.y,
-            entity.worldRotation.value.z,
-        )
         instanceHelper.updateMatrix()
         mesh.setMatrixAt(instanceIndex, instanceHelper.matrix)
         mesh.instanceMatrix.needsUpdate = true
+
+        follower?.let { follower ->
+            follower.position.copy(pos)
+            follower.rotation.copy(rot)
+            follower.updateMatrix()
+        }
     }
 
     companion object {

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityInstancedMesh.kt

@@ -25,15 +25,17 @@ class EntityInstancedMesh(
         mesh.userData = this
     }
 
+    fun getInstance(entity: QuestEntityModel<*, *>): EntityInstance? =
+        instances.find { it.entity == entity }
+
     fun getInstanceAt(instanceIndex: Int): EntityInstance =
         instances[instanceIndex]
 
-    fun addInstance(entity: QuestEntityModel<*, *>) {
+    fun addInstance(entity: QuestEntityModel<*, *>): EntityInstance {
         val instanceIndex = mesh.count
         mesh.count++
 
-        instances.add(
+        val instance = EntityInstance(
-            EntityInstance(
             entity,
             mesh,
             instanceIndex,
@@ -42,7 +44,9 @@ class EntityInstancedMesh(
             removeAt(index)
             modelChanged(entity)
         }
-        )
+
+        instances.add(instance)
+        return instance
     }
 
     fun removeInstance(entity: QuestEntityModel<*, *>) {

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/EntityMeshManager.kt

@@ -3,7 +3,8 @@ package world.phantasmal.web.questEditor.rendering
 import kotlinx.coroutines.*
 import mu.KotlinLogging
 import world.phantasmal.lib.fileFormats.quest.EntityType
-import world.phantasmal.web.externals.three.Mesh
+import world.phantasmal.web.externals.three.BoxHelper
+import world.phantasmal.web.externals.three.Color
 import world.phantasmal.web.questEditor.loading.EntityAssetLoader
 import world.phantasmal.web.questEditor.loading.LoadingCache
 import world.phantasmal.web.questEditor.models.QuestEntityModel
@@ -30,7 +31,7 @@ class EntityMeshManager(
                 renderer.entities.add(mesh)
                 EntityInstancedMesh(mesh, questEditorStore.selectedWave) { entity ->
                     // When an entity's model changes, add it again. At this point it has already
-                    // been removed from its previous [EntityInstancedMesh].
+                    // been removed from its previous EntityInstancedMesh.
                     add(entity)
                 }
             },
@@ -43,24 +44,55 @@ class EntityMeshManager(
      */
     private val loadingEntities = mutableMapOf<QuestEntityModel<*, *>, Job>()
 
-    private var hoveredMesh: Mesh? = null
+    private var highlightedEntityInstance: EntityInstance? = null
-    private var selectedMesh: Mesh? = null
+    private var selectedEntityInstance: EntityInstance? = null
+
+    /**
+     * Bounding box around the highlighted entity.
+     */
+    private val highlightedBox = BoxHelper(color = Color(0.7, 0.7, 0.7)).apply {
+        visible = false
+        renderer.scene.add(this)
+    }
+
+    /**
+     * Bounding box around the selected entity.
+     */
+    private val selectedBox = BoxHelper(color = Color(0.9, 0.9, 0.9)).apply {
+        visible = false
+        renderer.scene.add(this)
+    }
 
     init {
-//        observe(questEditorStore.selectedEntity) { entity ->
+        observe(questEditorStore.highlightedEntity) { entity ->
-//            if (entity == null) {
+            if (entity == null) {
-//                unmarkSelected()
+                unmarkHighlighted()
-//            } else {
+            } else {
-//                val loaded = loadedEntities[entity]
+                val instance = getEntityInstance(entity)
-//
+
-//                // Mesh might not be loaded yet.
+                // Mesh might not be loaded yet.
-//                if (loaded == null) {
+                if (instance == null) {
-//                    unmarkSelected()
+                    unmarkHighlighted()
-//                } else {
+                } else {
-//                    markSelected(loaded.mesh)
+                    markHighlighted(instance)
-//                }
+                }
-//            }
+            }
-//        }
+        }
+
+        observe(questEditorStore.selectedEntity) { entity ->
+            if (entity == null) {
+                unmarkSelected()
+            } else {
+                val instance = getEntityInstance(entity)
+
+                // Mesh might not be loaded yet.
+                if (instance == null) {
+                    unmarkSelected()
+                } else {
+                    markSelected(instance)
+                }
+            }
+        }
     }
 
     override fun internalDispose() {
@@ -78,12 +110,14 @@ class EntityMeshManager(
                         model = (entity as? QuestObjectModel)?.model?.value
                     ))
 
-//            if (entity == questEditorStore.selectedEntity.value) {
+                    val instance = meshContainer.addInstance(entity)
-//                markSelected(instance)
-//            }
-
-                    meshContainer.addInstance(entity)
                     loadingEntities.remove(entity)
+
+                    if (entity == questEditorStore.selectedEntity.value) {
+                        markSelected(instance)
+                    } else if (entity == questEditorStore.highlightedEntity.value) {
+                        markHighlighted(instance)
+                    }
                 } catch (e: CancellationException) {
                     // Do nothing.
                 } catch (e: Throwable) {
@@ -119,24 +153,74 @@ class EntityMeshManager(
         }
     }
 
-//    private fun markSelected(entityMesh: AbstractMesh) {
+    private fun markHighlighted(instance: EntityInstance) {
-//        if (entityMesh == hoveredMesh) {
+        if (instance == selectedEntityInstance) {
-//            hoveredMesh = null
+            highlightedEntityInstance?.follower = null
-//        }
+            highlightedEntityInstance = null
-//
+            highlightedBox.visible = false
-//        if (entityMesh != selectedMesh) {
+            return
-//            selectedMesh?.let { it.showBoundingBox = false }
+        }
-//
+
-//            entityMesh.showBoundingBox = true
+        if (instance != highlightedEntityInstance) {
-//        }
+            highlightedEntityInstance?.follower = null
-//
+
-//        selectedMesh = entityMesh
+            highlightedBox.setFromObject(instance.mesh)
-//    }
+            instance.follower = highlightedBox
-//
+            highlightedBox.visible = true
-//    private fun unmarkSelected() {
+        }
-//        selectedMesh?.let { it.showBoundingBox = false }
+
-//        selectedMesh = null
+        highlightedEntityInstance = instance
-//    }
+    }
+
+    private fun unmarkHighlighted() {
+        highlightedEntityInstance?.let { highlighted ->
+            if (highlighted != selectedEntityInstance) {
+                highlighted.follower = null
+            }
+
+            highlightedEntityInstance = null
+            highlightedBox.visible = false
+        }
+    }
+
+    private fun markSelected(instance: EntityInstance) {
+        if (instance == highlightedEntityInstance) {
+            highlightedBox.visible = false
+        }
+
+        if (instance != selectedEntityInstance) {
+            selectedEntityInstance?.follower = null
+
+            selectedBox.setFromObject(instance.mesh)
+            instance.follower = selectedBox
+            selectedBox.visible = true
+        }
+
+        selectedEntityInstance = instance
+    }
+
+    private fun unmarkSelected() {
+        selectedEntityInstance?.let { selected ->
+            if (selected == highlightedEntityInstance) {
+                highlightedBox.setFromObject(selected.mesh)
+                selected.follower = highlightedBox
+                highlightedBox.visible = true
+            } else {
+                selected.follower = null
+            }
+
+            selectedEntityInstance = null
+            selectedBox.visible = false
+        }
+    }
+
+    private fun getEntityInstance(entity: QuestEntityModel<*, *>): EntityInstance? =
+        entityMeshCache.getIfPresentNow(
+            TypeAndModel(
+                entity.type,
+                (entity as? QuestObjectModel)?.model?.value
+            )
+        )?.getInstance(entity)
 
     private data class TypeAndModel(val type: EntityType, val model: Int?)
 }

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/QuestRenderer.kt

@@ -29,18 +29,13 @@ class QuestRenderer(
             scene.add(geom)
         }
 
-    init {
-        camera.position.set(0.0, 50.0, 200.0)
-    }
-
     override fun initializeControls() {
         super.initializeControls()
+        camera.position.set(0.0, 800.0, 700.0)
+        controls.target.set(0.0, 0.0, 0.0)
         controls.screenSpacePanning = false
         controls.update()
-    }
+        controls.saveState()
-
-    fun resetCamera() {
-        // TODO: Camera reset.
     }
 
     fun clearCollisionGeometry() {

web/src/main/kotlin/world/phantasmal/web/questEditor/rendering/UserInputManager.kt

@@ -147,6 +147,10 @@ private class StateContext(
 ) {
     val scene = renderer.scene
 
+    fun setHighlightedEntity(entity: QuestEntityModel<*, *>?) {
+        questEditorStore.setHighlightedEntity(entity)
+    }
+
     fun setSelectedEntity(entity: QuestEntityModel<*, *>?) {
         questEditorStore.setSelectedEntity(entity)
     }
@@ -293,14 +297,16 @@ private class IdleState(
     private val entityManipulationEnabled: Boolean,
 ) : State() {
     private var panning = false
+    private var rotating = false
+    private var zooming = false
 
     override fun processEvent(event: Evt): State {
         when (event) {
             is PointerDownEvt -> {
-                when (event.buttons) {
-                    1 -> {
                 val pick = pickEntity(event.pointerDevicePosition)
 
+                when (event.buttons) {
+                    1 -> {
                         if (pick == null) {
                             panning = true
                         } else {
@@ -317,7 +323,9 @@ private class IdleState(
                         }
                     }
                     2 -> {
-                        pickEntity(event.pointerDevicePosition)?.let { pick ->
+                        if (pick == null) {
+                            rotating = true
+                        } else {
                             ctx.setSelectedEntity(pick.entity)
 
                             if (entityManipulationEnabled) {
@@ -325,15 +333,21 @@ private class IdleState(
                             }
                         }
                     }
+                    4 -> {
+                        zooming = true
+                    }
                 }
             }
 
             is PointerUpEvt -> {
                 if (panning) {
-                    panning = false
                     updateCameraTarget()
                 }
 
+                panning = false
+                rotating = false
+                zooming = false
+
                 // If the user clicks on nothing, deselect the currently selected entity.
                 if (!event.movedSinceLastPointerDown &&
                     pickEntity(event.pointerDevicePosition) == null
@@ -342,8 +356,11 @@ private class IdleState(
                 }
             }
 
-            else -> {
+            is PointerMoveEvt -> {
-                // Do nothing.
+                if (!panning && !rotating && !zooming) {
+                    // User is hovering.
+                    ctx.setHighlightedEntity(pickEntity(event.pointerDevicePosition)?.entity)
+                }
             }
         }
 

web/src/main/kotlin/world/phantasmal/web/questEditor/stores/QuestEditorStore.kt

@@ -22,6 +22,7 @@ class QuestEditorStore(
     private val _currentQuest = mutableVal<QuestModel?>(null)
     private val _currentArea = mutableVal<AreaModel?>(null)
     private val _selectedWave = mutableVal<WaveModel?>(null)
+    private val _highlightedEntity = mutableVal<QuestEntityModel<*, *>?>(null)
     private val _selectedEntity = mutableVal<QuestEntityModel<*, *>?>(null)
 
     private val undoManager = UndoManager()
@@ -31,6 +32,15 @@ class QuestEditorStore(
     val currentQuest: Val<QuestModel?> = _currentQuest
     val currentArea: Val<AreaModel?> = _currentArea
     val selectedWave: Val<WaveModel?> = _selectedWave
+
+    /**
+     * The entity the user is currently hovering over.
+     */
+    val highlightedEntity: Val<QuestEntityModel<*, *>?> = _highlightedEntity
+
+    /**
+     * The entity the user has selected, typically by clicking it.
+     */
     val selectedEntity: Val<QuestEntityModel<*, *>?> = _selectedEntity
 
     val questEditingEnabled: Val<Boolean> = currentQuest.isNotNull() and !runner.running
@@ -66,6 +76,7 @@ class QuestEditorStore(
 
         // TODO: Stop runner.
 
+        _highlightedEntity.value = null
         _selectedEntity.value = null
         _selectedWave.value = null
 
@@ -112,10 +123,15 @@ class QuestEditorStore(
     fun setCurrentArea(area: AreaModel?) {
         // TODO: Set wave.
 
+        _highlightedEntity.value = null
         _selectedEntity.value = null
         _currentArea.value = area
     }
 
+    fun setHighlightedEntity(entity: QuestEntityModel<*, *>?) {
+        _highlightedEntity.value = entity
+    }
+
     fun setSelectedEntity(entity: QuestEntityModel<*, *>?) {
         entity?.let {
             currentQuest.value?.let { quest ->

web/src/main/kotlin/world/phantasmal/web/viewer/rendering/MeshRenderer.kt

@@ -1,7 +1,5 @@
 package world.phantasmal.web.viewer.rendering
 
-import world.phantasmal.lib.fileFormats.ninja.NinjaObject
-import world.phantasmal.lib.fileFormats.ninja.XvrTexture
 import world.phantasmal.web.core.rendering.DisposableThreeRenderer
 import world.phantasmal.web.core.rendering.Renderer
 import world.phantasmal.web.core.rendering.conversion.ninjaObjectToMesh
@@ -12,7 +10,7 @@ import world.phantasmal.web.externals.three.PerspectiveCamera
 import world.phantasmal.web.viewer.store.ViewerStore
 
 class MeshRenderer(
-    store: ViewerStore,
+    private val store: ViewerStore,
     createThreeRenderer: () -> DisposableThreeRenderer,
 ) : Renderer(
     createThreeRenderer,
@@ -26,21 +24,35 @@ class MeshRenderer(
     private var mesh: Mesh? = null
 
     init {
-        camera.position.set(0.0, 50.0, 200.0)
-
         initializeControls()
+        camera.position.set(0.0, 25.0, 100.0)
+        controls.target.set(0.0, 0.0, 0.0)
+        controls.zoomSpeed = 2.0
         controls.screenSpacePanning = true
         controls.update()
+        controls.saveState()
 
-        observe(store.currentNinjaObject, store.currentTextures, ::ninjaObjectOrXvmChanged)
+        observe(store.currentNinjaObject) {
+            ninjaObjectOrXvmChanged(reset = true)
+        }
+        observe(store.currentTextures) {
+            ninjaObjectOrXvmChanged(reset = false)
+        }
     }
 
-    private fun ninjaObjectOrXvmChanged(ninjaObject: NinjaObject<*>?, textures: List<XvrTexture>) {
+    private fun ninjaObjectOrXvmChanged(reset: Boolean) {
         mesh?.let { mesh ->
             disposeObject3DResources(mesh)
             scene.remove(mesh)
         }
 
+        if (reset) {
+            resetCamera()
+        }
+
+        val ninjaObject = store.currentNinjaObject.value
+        val textures = store.currentTextures.value
+
         if (ninjaObject != null) {
             val mesh = ninjaObjectToMesh(ninjaObject, textures, boundingVolumes = true)
 

web/src/main/kotlin/world/phantasmal/web/viewer/rendering/TextureRenderer.kt

@@ -7,6 +7,9 @@ import world.phantasmal.web.core.rendering.disposeObject3DResources
 import world.phantasmal.web.externals.three.*
 import world.phantasmal.web.viewer.store.ViewerStore
 import world.phantasmal.webui.obj
+import kotlin.math.ceil
+import kotlin.math.max
+import kotlin.math.sqrt
 
 class TextureRenderer(
     store: ViewerStore,
@@ -26,6 +29,10 @@ class TextureRenderer(
 
     init {
         initializeControls()
+        camera.position.set(0.0, 0.0, 5.0)
+        controls.update()
+        controls.saveState()
+
         observe(store.currentTextures, ::texturesChanged)
     }
 
@@ -35,11 +42,30 @@ class TextureRenderer(
             scene.remove(mesh)
         }
 
-        var x = 0.0
+        resetCamera()
+
+        // Lay textures out in a square grid of "cells".
+        var cellWidth = -1
+        var cellHeight = -1
+
+        textures.forEach {
+            cellWidth = max(cellWidth, SPACING + it.width)
+            cellHeight = max(cellHeight, SPACING + it.height)
+        }
+
+        val cellsPerRow = ceil(sqrt(textures.size.toDouble())).toInt()
+        val cellsPerCol = ceil(textures.size.toDouble() / cellsPerRow).toInt()
+
+        // Start at the center of the first cell because the texture quads are placed at the center
+        // of the given coordinates.
+        val startX = -(cellsPerRow * cellWidth) / 2 + cellWidth / 2
+        var x = startX
+        var y = (cellsPerCol * cellHeight) / 2 - cellHeight / 2
+        var cell = 0
 
         meshes = textures.map { xvr ->
             val quad = Mesh(
-                createQuad(x, 0.0, xvr.width, xvr.height),
+                createQuad(x, y, xvr.width, xvr.height),
                 MeshBasicMaterial(obj {
                     map = xvrTextureToThree(xvr, filter = NearestFilter)
                     transparent = true
@@ -47,13 +73,18 @@ class TextureRenderer(
             )
             scene.add(quad)
 
-            x += xvr.width + 10.0
+            x += cellWidth
+
+            if (++cell % cellsPerRow == 0) {
+                x = startX
+                y -= cellHeight
+            }
 
             quad
         }
     }
 
-    private fun createQuad(x: Double, y: Double, width: Int, height: Int): PlaneGeometry {
+    private fun createQuad(x: Int, y: Int, width: Int, height: Int): PlaneGeometry {
         val quad = PlaneGeometry(
             width.toDouble(),
             height.toDouble(),
@@ -66,7 +97,11 @@ class TextureRenderer(
                 arrayOf(Vector2(0.0, 1.0), Vector2(1.0, 1.0), Vector2(1.0, 0.0)),
             )
         )
-        quad.translate(x + width / 2, y + height / 2, -5.0)
+        quad.translate(x.toDouble(), y.toDouble(), -5.0)
         return quad
     }
+
+    companion object {
+        private const val SPACING = 10
+    }
 }

webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt

@@ -32,13 +32,9 @@ class LazyLoader(
             // language=css
             style("""
                 .pw-lazy-loader {
-                    display: flex;
+                    display: grid;
-                    flex-direction: column;
+                    grid-template-rows: 100%;
-                    align-items: stretch;
+                    grid-template-columns: 100%;
-                }
-
-                .pw-lazy-loader > * {
-                    flex-grow: 1;
                     overflow: hidden;
                 }
             """.trimIndent())

webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt

@@ -107,14 +107,11 @@ class TabContainer<T : Tab>(
 
                 .pw-tab-container-panes {
                     flex-grow: 1;
-                    display: flex;
+                    display: grid;
-                    flex-direction: row;
+                    grid-template-rows: 100%;
+                    grid-template-columns: 100%;
                     overflow: hidden;
                 }
-
-                .pw-tab-container-panes > * {
-                    flex-grow: 1;
-                }
             """.trimIndent())
         }
     }