Some changes to the shader to enable dynamic day/night changes

Author: TBlueF

BlueMapCore/src/main/webroot/js/libs/BlueMap.js

@@ -34,8 +34,6 @@ import {
 	FrontSide,
 	Mesh,
 	MeshBasicMaterial,
-	MeshLambertMaterial,
-	NormalBlending,
 	NearestFilter,
 	NearestMipmapLinearFilter,
 	PerspectiveCamera,
@@ -120,6 +118,8 @@ export default class BlueMap {
 			z: this.settings[this.map]["startPos"]["z"]
 		};
 
+		this.targetSunLightStrength = 1;
+
 		this.controls.setTileSize(this.settings[this.map]['hires']['tileSize']);
 		this.controls.resetPosition();
 		this.controls.targetPosition.set(startPos.x, this.controls.targetPosition.y, startPos.z);
@@ -229,13 +229,27 @@ export default class BlueMap {
 	render = () => {
 		requestAnimationFrame(this.render);
 
+		//update controls
 		if (this.controls.update()) this.updateFrame = true;
 
+		//update lighting
+		let targetLight = 1;
+		if (this.camera.position.y < 400){
+			targetLight = this.targetSunLightStrength;
+		}
+		if (Math.abs(targetLight - this.sunLightStrength.value) > 0.01) {
+			this.sunLightStrength.value += (targetLight - this.sunLightStrength.value) * 0.1;
+			this.updateFrame = true;
+		}
+
+		//don't render if nothing has changed
 		if (!this.updateFrame) return;
 		this.updateFrame = false;
 
+		//render event
 		document.dispatchEvent(new Event('bluemap-update-frame'));
 
+		//render
 		this.skyboxCamera.rotation.copy(this.camera.rotation);
 		this.skyboxCamera.updateProjectionMatrix();
 
@@ -291,6 +305,11 @@ export default class BlueMap {
 		this.updateFrame = true;
 		this.quality = 1;
 
+		this.targetSunLightStrength = 1;
+		this.sunLightStrength = {
+			value: this.targetSunLightStrength
+		};
+
 		this.renderer = new WebGLRenderer({
 			alpha: true,
 			antialias: true,
@@ -307,23 +326,10 @@ export default class BlueMap {
 		this.skyboxCamera.updateProjectionMatrix();
 
 		this.skyboxScene = new Scene();
-		this.skyboxScene.ambient = new AmbientLight(0xffffff, 1);
-		this.skyboxScene.add(this.skyboxScene.ambient);
 		this.skyboxScene.add(this.createSkybox());
 
 		this.lowresScene = new Scene();
-		this.lowresScene.ambient = new AmbientLight(0xffffff, 0.6);
-		this.lowresScene.add(this.lowresScene.ambient);
-		this.lowresScene.sunLight = new DirectionalLight(0xccccbb, 0.7);
-		this.lowresScene.sunLight.position.set(1, 5, 3);
-		this.lowresScene.add(this.lowresScene.sunLight);
-
 		this.hiresScene = new Scene();
-		this.hiresScene.ambient = new AmbientLight(0xffffff, 1);
-		this.hiresScene.add(this.hiresScene.ambient);
-		this.hiresScene.sunLight = new DirectionalLight(0xccccbb, 0.2);
-		this.hiresScene.sunLight.position.set(1, 5, 3);
-		this.hiresScene.add(this.hiresScene.sunLight);
 
 		this.element.append(this.renderer.domElement);
 		this.handleContainerResize();
@@ -391,9 +397,7 @@ export default class BlueMap {
 							type: 't',
 							value: texture
 						},
-						sunlightStrength: {
-							value: 1
-						}
+						sunlightStrength: this.sunLightStrength
 					};
 
 					let material = new ShaderMaterial({
@@ -419,7 +423,12 @@ export default class BlueMap {
 	}
 
 	async loadLowresMaterial() {
+		let uniforms = {
+			sunlightStrength: this.sunLightStrength
+		};
+
 		this.lowresMaterial = new ShaderMaterial({
+			uniforms: uniforms,
 			vertexShader: LOWRES_VERTEX_SHADER,
 			fragmentShader: LOWRES_FRAGMENT_SHADER,
 			transparent: false,

BlueMapCore/src/main/webroot/js/libs/shaders/LowresFragmentShader.js

@@ -24,6 +24,8 @@
  */
 
 const LOWRES_FRAGMENT_SHADER = `
+uniform float sunlightStrength;
+
 varying vec3 vPosition;
 varying vec3 vNormal;
 varying vec2 vUv;
@@ -35,6 +37,8 @@ void main() {
 	float diff = sqrt(max(dot(vNormal, vec3(0.3637, 0.7274, 0.5819)), 0.0)) * 0.4 + 0.6;
 	color *= diff;
 
+	color *= sunlightStrength;
+
 	gl_FragColor = color;
 }
 `;