Add directional face shading, closes #148

common/webapp/src/js/map/Map.js

@@ -34,7 +34,7 @@ import {
 	Texture,
 	Vector3
 } from "three";
-import {alert, dispatchEvent, generateCacheHash, getPixel, hashTile, stringToImage, vecArrToObj} from "../util/Utils";
+import {alert, dispatchEvent, getPixel, hashTile, stringToImage, vecArrToObj} from "../util/Utils";
 import {TileManager} from "./TileManager";
 import {TileLoader} from "./TileLoader";
 import {LowresTileLoader} from "./LowresTileLoader";
@@ -358,7 +358,6 @@ export class Map {
 						type: 't',
 						value: texture
 					},
-					transparent: { value: transparent },
 					...animationUniforms
 				},
 				vertexShader: vertexShader,

common/webapp/src/js/map/hires/HiresVertexShader.js

@@ -24,10 +24,15 @@
  */
 import { ShaderChunk } from 'three';
 
+// language=GLSL
 export const HIRES_VERTEX_SHADER = `
 #include <common>
 ${ShaderChunk.logdepthbuf_pars_vertex}
 
+const vec2 lightDirection = normalize(vec2(1.0, 0.5));
+
+uniform float distance;
+
 attribute float ao;
 attribute float sunlight;
 attribute float blocklight;
@@ -52,6 +57,13 @@ void main() {
 	vSunlight = sunlight;
 	vBlocklight = blocklight;
 	
+	// apply directional lighting
+	if (vNormal.x * vNormal.z == 0.0) {
+        float distFac = smoothstep(1000.0, 50.0, distance);
+        vAo *= 1.0 - abs(dot(vNormal.xz, lightDirection)) * 0.4 * distFac;
+        vAo *= 1.0 - max(0.0, -vNormal.y) * 0.6 * distFac;
+    }
+	
 	gl_Position = projectionMatrix * (viewMatrix * modelMatrix * vec4(position, 1));
 	
 	${ShaderChunk.logdepthbuf_vertex}