diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2019-08-09 20:56:49 +0100 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2019-08-09 20:56:49 +0100 |
| commit | 2bbcde7dd370f0f6eb6d8733aab697917f5a8963 (patch) | |
| tree | 53478f00d7a0c95ff2c2b4a703456aba7422a087 | |
| parent | 3b1d5f080b013ab306fb9d356d6e3337c75c40c6 (diff) | |
| download | terrain-2bbcde7dd370f0f6eb6d8733aab697917f5a8963.tar.xz terrain-2bbcde7dd370f0f6eb6d8733aab697917f5a8963.zip | |
Add loading overlay during terrain gen
| -rw-r--r-- | src/main/kotlin/Terrain.kt | 43 | ||||
| -rw-r--r-- | src/main/resources/index.html | 12 | ||||
| -rw-r--r-- | src/main/resources/presets.json | 2 | ||||
| -rw-r--r-- | src/main/resources/style.css | 45 |
4 files changed, 81 insertions, 21 deletions
diff --git a/src/main/kotlin/Terrain.kt b/src/main/kotlin/Terrain.kt index f6db6db..054055e 100644 --- a/src/main/kotlin/Terrain.kt +++ b/src/main/kotlin/Terrain.kt @@ -18,6 +18,8 @@ import info.laht.threekt.scenes.Scene import org.w3c.fetch.Request import kotlin.browser.document import kotlin.browser.window +import kotlin.dom.addClass +import kotlin.dom.removeClass import kotlin.math.pow class Terrain { @@ -38,11 +40,11 @@ class Terrain { var options = GenerateOptions( 80, - 11.0, - ScalingType.LINEAR.name, + 2.9, + ScalingType.EXPONENTIAL.name, false, - 5, - 15, + 4, + 16, false) init { @@ -73,8 +75,6 @@ class Terrain { generateTerrain() - generateWater() - window.addEventListener("resize", { camera.aspect = window.innerWidth.toDouble() / window.innerHeight camera.updateProjectionMatrix() @@ -98,8 +98,19 @@ class Terrain { generateTerrain() } + private fun regenerateTerrain() { + document.getElementById("loading-overlay")?.removeClass("hidden") + // without the setTimeout the loading overlay is never rendered + window.setTimeout({ + generateTerrain() + document.getElementById("loading-overlay")?.addClass("hidden") + }, 10) + } + private fun generateTerrain() { + val genStart = window.performance.now() + if (this::terrainMesh.isInitialized) { scene.remove(terrainMesh) } @@ -148,6 +159,11 @@ class Terrain { terrainMesh = Mesh(terrainGeom, terrainMaterial) .apply { receiveShadows = true } .also(scene::add) + + generateWater() + + val genEnd = window.performance.now() + println("Terrain generation took ${genEnd - genStart} ms") } private fun applyHeightMapColour(planeGeometry: PlaneGeometry) { @@ -204,41 +220,40 @@ class Terrain { min(10) .max(200) .step(5) - .onFinishChange { generateTerrain() } + .onFinishChange { regenerateTerrain() } } (it.add(this.options, "scalingFactor") as NumberController).apply { min(0) .max(50) .step(0.1) - .onFinishChange { generateTerrain() } + .onFinishChange { regenerateTerrain() } } (it.add(this.options, "waterHeight") as NumberController).apply { min(0) .max(30) .step(1) - .onFinishChange { generateWater() } + .onChange { generateWater() } } (it.add(this.options, "snowHeightThreshold") as NumberController).apply { min(0) .max(30) .step(1) - .onFinishChange { generateTerrain() } + .onFinishChange { regenerateTerrain() } } - it.add(this.options, "scalingType", ScalingType.values()).onChange { - generateTerrain() + it.add(this.options, "scalingType", Terrain.ScalingType.values()).onChange { + regenerateTerrain() } it.add(this, "reseedNoise") - it.add(this.options, "showWireframe").onChange { generateTerrain() } + it.add(this.options, "showWireframe").onChange { regenerateTerrain() } it.add(this.options, "autoRotate") } } } - } fun animate() { diff --git a/src/main/resources/index.html b/src/main/resources/index.html index 20e95b7..cc41b60 100644 --- a/src/main/resources/index.html +++ b/src/main/resources/index.html @@ -12,16 +12,16 @@ <script type="text/javascript" src="kotlin/kotlin.js"></script> <script type="text/javascript" src="kotlin/threejs-wrapper.js"></script> <script type="text/javascript" src="kotlin/terrain.js"></script> - <style> - body { - padding: 0; - margin: 0; - } - </style> + + <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"></div> + <div id="loading-overlay" class="hidden"> + hello + <div id="spinner"></div> + </div> <script> new terrain.Terrain().animate() diff --git a/src/main/resources/presets.json b/src/main/resources/presets.json index 1cefb98..0c797b3 100644 --- a/src/main/resources/presets.json +++ b/src/main/resources/presets.json @@ -1,5 +1,5 @@ { - "preset": "Mountainous", + "preset": "Mountain", "remembered": { "Mountain": { "0": { diff --git a/src/main/resources/style.css b/src/main/resources/style.css new file mode 100644 index 0000000..4d69b30 --- /dev/null +++ b/src/main/resources/style.css @@ -0,0 +1,45 @@ +body { + padding: 0; + margin: 0; +} + +#loading-overlay { + width: 100%; + height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0,0,0,.5); +} + +#spinner { + width: 50px; + height: 50px; + margin-top: -40px; + margin-left: -40px; + + position: absolute; + top: 50%; + left: 50%; + + border-width: 120px; + border-radius: 50%; + border: 16px solid #33abda; + border-top: 16px solid #3c3c3c; + -webkit-animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +canvas { + display: block; +} + +.hidden { + display: none; +}
\ No newline at end of file |