From 96ddef834fc8afdd082ce63af547b16a0b094ec0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efruz=20Y=C4=B1ld=C4=B1r=C4=B1r?=
<30903352+yldrefruz@users.noreply.github.com>
Date: Thu, 13 Jul 2023 22:44:27 +0300
Subject: [PATCH] 3d view system upgrade.
---
index.html | 36 ++++++++++++-
modules/io/export.js | 5 +-
modules/ui/3d.js | 118 ++++++++++++++++++++++++++++++++++++------
modules/ui/options.js | 21 ++++++++
4 files changed, 159 insertions(+), 21 deletions(-)
diff --git a/index.html b/index.html
index 4c1c9905..272293c7 100644
--- a/index.html
+++ b/index.html
@@ -5648,6 +5648,24 @@
+
+
+
Texture resolution:
+
+
+ Sun Color:
+
+
@@ -5665,6 +5692,11 @@
+
+
+
+
+
Sky:
-
+
@@ -7927,7 +7959,7 @@
-
+
diff --git a/modules/io/export.js b/modules/io/export.js
index 8484744b..191923a5 100644
--- a/modules/io/export.js
+++ b/modules/io/export.js
@@ -11,7 +11,7 @@ async function saveSVG() {
link.click();
tip(
- `${link.download} is saved. Open "Downloads" screen (crtl + J) to check. You can set image scale in options`,
+ `${link.download} is saved. Open "Downloads" screen (ctrl + J) to check. You can set image scale in options`,
true,
"success",
5000
@@ -157,7 +157,8 @@ async function getMapURL(type, options = {}) {
noWater = false,
noScaleBar = false,
noIce = false,
- fullMap = false
+ fullMap = false,
+ for3D = false
} = options;
if (fullMap) drawScaleBar(1);
diff --git a/modules/ui/3d.js b/modules/ui/3d.js
index 3135c6e1..a0c6bb1f 100644
--- a/modules/ui/3d.js
+++ b/modules/ui/3d.js
@@ -5,14 +5,17 @@ window.ThreeD = (function () {
scale: 50,
lightness: 0.7,
shadow: 0.5,
- sun: {x: 100, y: 600, z: 1000},
+ sun: {x: 300, y: 1500, z: 800},
rotateMesh: 0,
rotateGlobe: 0.5,
skyColor: "#9ecef5",
waterColor: "#466eab",
extendedWater: 0,
labels3d: 0,
- resolution: 2
+ wireframe: 0,
+ resolution: 2,
+ resolutionScale: 3,
+ sunColor: "#ffffff"
};
// set variables
@@ -100,6 +103,18 @@ window.ThreeD = (function () {
redraw();
};
+ const setSunColor = function(color){
+ options.sunColor = color;
+ spotLight.color = new THREE.Color(color);
+ render();
+ }
+
+ const setResolutionScale = function (scale) {
+ options.resolutionScale = scale;
+ console.log("New res:",scale);
+ redraw();
+ };
+
const setLightness = function (intensity) {
options.lightness = intensity;
ambientLight.intensity = intensity;
@@ -148,6 +163,11 @@ window.ThreeD = (function () {
}
};
+ const toggleWireframe = function () {
+ options.wireframe = !options.wireframe;
+ redraw();
+ };
+
const setColors = function (sky, water) {
options.skyColor = sky;
scene.background = scene.fog.color = new THREE.Color(sky);
@@ -189,16 +209,20 @@ window.ThreeD = (function () {
// light
ambientLight = new THREE.AmbientLight(0xcccccc, options.lightness);
scene.add(ambientLight);
- spotLight = new THREE.SpotLight(0xcccccc, 0.8, 2000, 0.8, 0, 0);
+ spotLight = new THREE.SpotLight(options.sunColor, 0.8, 2000, 0.8, 0, 0);
spotLight.position.set(options.sun.x, options.sun.y, options.sun.z);
spotLight.castShadow = true;
+ //maybe add a option for this. But changing the option will require to reinstance the spotLight.
+ spotLight.shadow.mapSize.width = 2048;
+ spotLight.shadow.mapSize.height = 2048;
scene.add(spotLight);
//scene.add(new THREE.SpotLightHelper(spotLight));
- // Rendered
+ // Renderer
Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});
Renderer.setSize(canvas.width, canvas.height);
Renderer.shadowMap.enabled = true;
+ Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
if (options.extendedWater) extendWater(graphWidth, graphHeight);
createMesh(graphWidth, graphHeight, grid.cellsX, grid.cellsY);
@@ -223,7 +247,7 @@ window.ThreeD = (function () {
function textureToSprite(texture, width, height) {
const map = new THREE.TextureLoader().load(texture);
- map.anisotropy = Renderer.getMaxAnisotropy();
+ map.anisotropy = Renderer.capabilities.getMaxAnisotropy();
const material = new THREE.SpriteMaterial({map});
const sprite = new THREE.Sprite(material);
@@ -295,8 +319,13 @@ window.ThreeD = (function () {
line: 5 - towns.attr("data-size") / 2
};
+ //Look for a custom model for city and town geometry. If not found use these.
+ //Maybe serialize the models to the .map file.
+
const city_icon_material = new THREE.MeshPhongMaterial({color: cityOptions.iconColor});
+ city_icon_material.wireframe = options.wireframe;
const town_icon_material = new THREE.MeshPhongMaterial({color: townOptions.iconColor});
+ town_icon_material.wireframe = options.wireframe;
const city_icon_geometry = new THREE.CylinderGeometry(cityOptions.iconSize * 2, cityOptions.iconSize * 2, cityOptions.iconSize, 16, 1);
const town_icon_geometry = new THREE.CylinderGeometry(townOptions.iconSize * 2, townOptions.iconSize * 2, townOptions.iconSize, 16, 1);
const line_material = new THREE.LineBasicMaterial({color: cityOptions.iconColor});
@@ -387,24 +416,76 @@ window.ThreeD = (function () {
lines = [];
}
+ async function createMeshTextureUrl(){
+ return new Promise(async (resolve, reject)=>{
+ const mapOptions = {
+ noLabels: options.labels3d,
+ noWater: options.extendedWater,
+ fullMap: true,
+ for3D: true
+ };
+ let sizeOfSkin = 512;
+ switch(options.resolutionScale){
+ case 1:
+ sizeOfSkin = 512;
+ break;
+ case 2:
+ sizeOfSkin = 1024;
+ break;
+ case 3:
+ sizeOfSkin = 2048;
+ break;
+ case 4:
+ sizeOfSkin = 4096;
+ break;
+ case 5:
+ sizeOfSkin = 8192;
+ break;
+ }
+ const url = await getMapURL("mesh",mapOptions);
+ const canvas = document.createElement("canvas");
+ const ctx = canvas.getContext("2d");
+ canvas.width = sizeOfSkin;
+ canvas.height = sizeOfSkin;
+ const img = new Image();
+ img.src = url;
+
+ img.onload = function(){
+ ctx.drawImage(img,0,0,canvas.width,canvas.height);
+ canvas.toBlob((blob)=>{
+ const blobObj = window.URL.createObjectURL(blob)
+ window.setTimeout(()=>{
+ canvas.remove();
+ window.URL.revokeObjectURL(blobObj);
+ }, 100);
+ resolve(blobObj);
+ })
+ }
+ })
+ }
// create a mesh from pixel data
async function createMesh(width, height, segmentsX, segmentsY) {
- const mapOptions = {
- noLabels: options.labels3d,
- noWater: options.extendedWater,
- fullMap: true
- };
- const url = await getMapURL("mesh", mapOptions);
- window.setTimeout(() => window.URL.revokeObjectURL(url), 5000);
if (texture) texture.dispose();
- texture = new THREE.TextureLoader().load(url, render);
+ if(!options.wireframe){
+ //Try loading skin texture.
+ texture = new THREE.TextureLoader().load(await createMeshTextureUrl(), render);
texture.needsUpdate = true;
+ }
+
+
if (material) material.dispose();
- material = new THREE.MeshLambertMaterial();
- material.map = texture;
- material.transparent = true;
+ if(options.wireframe){
+ material = new THREE.MeshLambertMaterial();
+ material.wireframe = true;
+ }else{
+ material = new THREE.MeshStandardMaterial();
+ material.map = texture;
+ material.roughness = 0.9;
+ material.transparent = true;
+ }
+
if (geometry) geometry.dispose();
geometry = new THREE.PlaneGeometry(width, height, segmentsX - 1, segmentsY - 1);
@@ -449,7 +530,7 @@ window.ThreeD = (function () {
noWater: options.extendedWater,
fullMap: true
};
- const url = await getMapURL("mesh", mapOptions);
+ const url = await createMeshTextureUrl();
window.setTimeout(() => window.URL.revokeObjectURL(url), 4000);
texture = new THREE.TextureLoader().load(url, render);
material.map = texture;
@@ -609,11 +690,14 @@ window.ThreeD = (function () {
update,
stop,
options,
+ setSunColor,
setScale,
+ setResolutionScale,
setLightness,
setSun,
setRotation,
toggleLabels,
+ toggleWireframe,
toggleSky,
setResolution,
setColors,
diff --git a/modules/ui/options.js b/modules/ui/options.js
index 960e3090..8139210b 100644
--- a/modules/ui/options.js
+++ b/modules/ui/options.js
@@ -1060,6 +1060,7 @@ function toggle3dOptions() {
document.getElementById("options3dSunX").addEventListener("change", changeSunPosition);
document.getElementById("options3dSunY").addEventListener("change", changeSunPosition);
document.getElementById("options3dSunZ").addEventListener("change", changeSunPosition);
+ document.getElementById("options3dMeshSkinResolution").addEventListener("change", changeResolutionScale);
document.getElementById("options3dMeshRotationRange").addEventListener("input", changeRotation);
document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation);
document.getElementById("options3dGlobeRotationRange").addEventListener("input", changeRotation);
@@ -1069,6 +1070,9 @@ function toggle3dOptions() {
document.getElementById("options3dMeshSky").addEventListener("input", changeColors);
document.getElementById("options3dMeshWater").addEventListener("input", changeColors);
document.getElementById("options3dGlobeResolution").addEventListener("change", changeResolution);
+ document.getElementById("options3dMeshWireframeMode").addEventListener("change",toggleWireframe3d);
+ document.getElementById("options3dSunColor").addEventListener("input", changeSunColor);
+
function updateValues() {
const globe = document.getElementById("canvas3d").dataset.type === "viewGlobe";
@@ -1081,6 +1085,7 @@ function toggle3dOptions() {
options3dSunY.value = ThreeD.options.sun.y;
options3dSunZ.value = ThreeD.options.sun.z;
options3dMeshRotationRange.value = options3dMeshRotationNumber.value = ThreeD.options.rotateMesh;
+ options3dMeshSkinResolution.value = ThreeD.options.resolutionScale;
options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe;
options3dMeshLabels3d.value = ThreeD.options.labels3d;
options3dMeshSkyMode.value = ThreeD.options.extendedWater;
@@ -1088,18 +1093,30 @@ function toggle3dOptions() {
options3dMeshSky.value = ThreeD.options.skyColor;
options3dMeshWater.value = ThreeD.options.waterColor;
options3dGlobeResolution.value = ThreeD.options.resolution;
+ options3dSunColor.value = ThreeD.options.sunColor;
+ console.log("options3dSunColor.value =",ThreeD.options.sunColor);
}
function changeHeightScale() {
options3dScaleRange.value = options3dScaleNumber.value = this.value;
+ console.log(this);
ThreeD.setScale(+this.value);
}
+ function changeResolutionScale() {
+ options3dMeshSkinResolution.value = this.value;
+ ThreeD.setResolutionScale(+this.value);
+ }
+
function changeLightness() {
options3dLightnessRange.value = options3dLightnessNumber.value = this.value;
ThreeD.setLightness(this.value / 100);
}
+ function changeSunColor(){
+ ThreeD.setSunColor(options3dSunColor.value);
+ }
+
function changeSunPosition() {
const x = +options3dSunX.value;
const y = +options3dSunY.value;
@@ -1117,6 +1134,10 @@ function toggle3dOptions() {
ThreeD.toggleLabels();
}
+ function toggleWireframe3d() {
+ ThreeD.toggleWireframe();
+ }
+
function toggleSkyMode() {
const hide = ThreeD.options.extendedWater;
options3dColorSection.style.display = hide ? "none" : "block";