Sancaros/phantasmal-world
1
0
Fork 0
mirror of https://github.com/DaanVandenBosch/phantasmal-world.git synced 2025-04-04 06:28:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Entities can now be highlighted by hovering over them again.

Browse Source
This commit is contained in:
Daan Vanden Bosch 2020-11-25 21:21:57 +01:00
parent 410f1c8bbc
commit 325cdb935a
17 changed files with 393 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
build.gradle.kts
View File

@ -1,9 +1,9 @@
import org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile
plugins {
kotlin("js") version "1.4.10" apply false
kotlin("multiplatform") version "1.4.10" apply false
kotlin("plugin.serialization") version "1.4.10" apply false
kotlin("js") version "1.4.20" apply false
kotlin("multiplatform") version "1.4.20" 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 {

2
buildSrc/build.gradle.kts
View File

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

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

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

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

@ -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()

1
web/src/main/kotlin/world/phantasmal/web/externals/three/OrbitControls.kt vendored
View File

@ -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

48
web/src/main/kotlin/world/phantasmal/web/externals/three/three.kt vendored
View File

@ -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
}

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

@ -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.Object3D
import world.phantasmal.web.externals.three.*
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()
// TODO: Material.
val group = builder.getGroupIndex(textureId = null, alpha = false, additiveBlending = false)
// Use Geometry instead of BufferGeometry for better raycaster performance.
val geom = Geometry()
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) {
val p1 = vec3ToThree(collisionMesh.vertices[triangle.index1])
val p2 = vec3ToThree(collisionMesh.vertices[triangle.index2])
val p3 = vec3ToThree(collisionMesh.vertices[triangle.index3])
val n = vec3ToThree(triangle.normal)
builder.addIndex(group, builder.vertexCount)
builder.addVertex(p1, n)
builder.addIndex(group, builder.vertexCount)
builder.addVertex(p2, n)
builder.addIndex(group, builder.vertexCount)
builder.addVertex(p3, n)
if (materialIndex != 0) {
geom.faces.asDynamic().push(
Face3(
triangle.index1,
triangle.index2,
triangle.index3,
vec3ToThree(triangle.normal),
materialIndex = materialIndex,
)
)
}
}
if (builder.vertexCount > 0) {
obj3d.add(builder.buildMesh(boundingVolumes = true))
if (geom.faces.isNotEmpty()) {
geom.computeBoundingBox()
geom.computeBoundingSphere()
obj3d.add(Mesh(geom, COLLISION_MATERIALS))
}
}

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

@ -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(
entity.worldPosition.value.x,
entity.worldPosition.value.y,
entity.worldPosition.value.z,
)
instanceHelper.rotation.set(
entity.worldRotation.value.x,
entity.worldRotation.value.y,
entity.worldRotation.value.z,
)
val pos = entity.worldPosition.value
val rot = entity.worldRotation.value
instanceHelper.position.copy(pos)
instanceHelper.rotation.copy(rot)
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 {

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

@ -25,24 +25,28 @@ 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(
EntityInstance(
entity,
mesh,
instanceIndex,
selectedWave
) { index ->
removeAt(index)
modelChanged(entity)
}
)
val instance = EntityInstance(
entity,
mesh,
instanceIndex,
selectedWave
) { index ->
removeAt(index)
modelChanged(entity)
}
instances.add(instance)
return instance
}
fun removeInstance(entity: QuestEntityModel<*, *>) {

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

@ -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 selectedMesh: Mesh? = null
private var highlightedEntityInstance: EntityInstance? = 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 ->
// if (entity == null) {
// unmarkSelected()
// } else {
// val loaded = loadedEntities[entity]
//
// // Mesh might not be loaded yet.
// if (loaded == null) {
// unmarkSelected()
// } else {
// markSelected(loaded.mesh)
// }
// }
// }
observe(questEditorStore.highlightedEntity) { entity ->
if (entity == null) {
unmarkHighlighted()
} else {
val instance = getEntityInstance(entity)
// Mesh might not be loaded yet.
if (instance == null) {
unmarkHighlighted()
} else {
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) {
// markSelected(instance)
// }
meshContainer.addInstance(entity)
val 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) {
// if (entityMesh == hoveredMesh) {
// hoveredMesh = null
// }
//
// if (entityMesh != selectedMesh) {
// selectedMesh?.let { it.showBoundingBox = false }
//
// entityMesh.showBoundingBox = true
// }
//
// selectedMesh = entityMesh
// }
//
// private fun unmarkSelected() {
// selectedMesh?.let { it.showBoundingBox = false }
// selectedMesh = null
// }
private fun markHighlighted(instance: EntityInstance) {
if (instance == selectedEntityInstance) {
highlightedEntityInstance?.follower = null
highlightedEntityInstance = null
highlightedBox.visible = false
return
}
if (instance != highlightedEntityInstance) {
highlightedEntityInstance?.follower = null
highlightedBox.setFromObject(instance.mesh)
instance.follower = highlightedBox
highlightedBox.visible = true
}
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?)
}

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

@ -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()
}
fun resetCamera() {
// TODO: Camera reset.
controls.saveState()
}
fun clearCollisionGeometry() {

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

@ -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 -> {
val pick = pickEntity(event.pointerDevicePosition)
when (event.buttons) {
1 -> {
val pick = pickEntity(event.pointerDevicePosition)
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 -> {
// Do nothing.
is PointerMoveEvt -> {
if (!panning && !rotating && !zooming) {
// User is hovering.
ctx.setHighlightedEntity(pickEntity(event.pointerDevicePosition)?.entity)
}
}
}

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

@ -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 ->

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

@ -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)

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

@ -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
}
}

10
webui/src/main/kotlin/world/phantasmal/webui/widgets/LazyLoader.kt
View File

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

9
webui/src/main/kotlin/world/phantasmal/webui/widgets/TabContainer.kt
View File

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