Finalize shader changes, improve shading for lower lods and make flat-view rotatable

src/controls/map/MapControls.js

@@ -173,10 +173,13 @@ export class MapControls {
         let maxAngleForZoom = this.getMaxPerspectiveAngleForDistance(this.manager.distance);
 
         // rotation
-        if (this.manager.ortho === 0) {
-            this.mouseRotate.update(delta, map);
-            this.keyRotate.update(delta, map);
-            this.touchRotate.update(delta, map);
+        this.mouseRotate.update(delta, map);
+        this.keyRotate.update(delta, map);
+        this.touchRotate.update(delta, map);
+
+        // snap rotation to north on orthographic view
+        if (this.manager.ortho !== 0 && Math.abs(this.manager.rotation) < 0.3) {
+            this.manager.rotation = softClamp(this.manager.rotation, 0, 0, 0.05);
         }
 
         // tilt

src/map/LowresTileLoader.js

@@ -85,6 +85,8 @@ export class LowresTileLoader {
                         return;
                     }
 
+                    const scale = Math.pow(this.tileSettings.lodFactor, this.lod - 1);
+
                     let material = new ShaderMaterial({
                         uniforms: {
                             ...this.uniforms,
@@ -97,6 +99,12 @@ export class LowresTileLoader {
                             textureImage: {
                                 type: 't',
                                 value: texture
+                            },
+                            lod: {
+                                value: this.lod
+                            },
+                            lodScale: {
+                                value: scale
                             }
                         },
                         vertexShader: this.vertexShader,
@@ -111,7 +119,6 @@ export class LowresTileLoader {
 
                     let object = new Mesh(this.geometry, material);
 
-                    const scale = Math.pow(this.tileSettings.lodFactor, this.lod - 1);
                     object.position.set(tileX * this.tileSettings.tileSize.x * scale, 0, tileZ * this.tileSettings.tileSize.z * scale);
                     object.scale.set(scale, 1, scale);
 

src/map/lowres/LowresFragmentShader.js

@@ -27,6 +27,8 @@ import { ShaderChunk } from 'three';
 export const LOWRES_FRAGMENT_SHADER = `
 ${ShaderChunk.logdepthbuf_pars_fragment}
 
+#define PI 3.1415926535897932
+
 #ifndef texture
 	#define texture texture2D
 #endif
@@ -45,6 +47,8 @@ uniform TileMap hiresTileMap;
 uniform sampler2D textureImage;
 uniform vec2 tileSize;
 uniform vec2 textureSize;
+uniform float lod;
+uniform float lodScale;
 
 varying vec3 vPosition;
 varying vec3 vWorldPosition;
@@ -71,6 +75,7 @@ vec2 posToMetaUV(vec2 pos) {
 	return vec2(pos.x / textureSize.x, pos.y / textureSize.y + 0.5);
 }
 
+
 void main() {
 	//discard if hires tile is loaded at that position
 	if (vDistance < 900.0 && texture(hiresTileMap.map, ((vWorldPosition.xz - hiresTileMap.translate) / hiresTileMap.scale - hiresTileMap.pos) / hiresTileMap.size + 0.5).r > 0.75) discard;
@@ -82,8 +87,31 @@ void main() {
 	
 	float heightX = metaToHeight(texture(textureImage, posToMetaUV(vPosition.xz + vec2(1.0, 0.0))));
 	float heightZ = metaToHeight(texture(textureImage, posToMetaUV(vPosition.xz + vec2(0.0, 1.0))));
-	float diff = (height - heightX) + (height - heightZ);
-	color.rgb += clamp(diff * 0.04, -0.2, 0.04);
+	float heightDiff = ((height - heightX) + (height - heightZ)) / lodScale;
+	float shade = clamp(heightDiff * 0.06, -0.2, 0.04);
+	
+	float ao = 0.0;
+	float aoStrength = 0.0;
+	if(lod == 1.0) {
+		aoStrength = smoothstep(PI - 0.8, PI - 0.2, acos(-clamp(viewMatrix[1][2], 0.0, 1.0)));
+		aoStrength *= 1.0 - smoothstep(200.0, 500.0, vDistance);
+		
+		if (aoStrength > 0.0) { 
+			const float r = 3.0;
+			const float step = 0.2;
+			const float o = step / r * 0.1;
+			for (float vx = -r; vx <= r; vx++) {
+				for (float vz = -r; vz <= r; vz++) {
+					heightDiff = height - metaToHeight(texture(textureImage, posToMetaUV(vPosition.xz + vec2(vx * step, vz * step))));
+					if (heightDiff < 0.0) {
+						ao -= o;            
+					}
+				}
+			}
+		}
+	}
+	
+	color.rgb += mix(shade, shade * 0.3 + ao, aoStrength);
 	
 	float blockLight = metaToLight(meta);
 	float light = mix(blockLight, 15.0, sunlightStrength);