[wip] Globe: Define lighting from a specific hour

src/modules/globe/frag.glsl

@@ -17,4 +17,4 @@ void main() {
     vec3 color = mix(nightColor, dayColor, mixAmount);
 
     gl_FragColor = vec4(color, 1.0);
-}
+}

src/modules/globe/index.ts

@@ -1,7 +1,6 @@
 // @ts-nocheck
 import { Renderer, Camera, Vec3, Orbit, Sphere, Transform, Program, Mesh, Texture } from 'ogl'
-import SunCalc from 'suncalc'
-import { map } from '$utils/functions/index'
+import { map } from '$utils/functions'
 // Shaders
 import VERTEX_SHADER from '$modules/globe/vertex.glsl?raw'
 import FRAGMENT_SHADER from '$modules/globe/frag.glsl?raw'
@@ -32,13 +31,7 @@ export class Globe {
             }
         ]
         const location = locations[1]
-        const localDate = new Date(now.toLocaleString('en-US', { timeZone: location.tz }))
-
-        this.sunPosition = SunCalc.getPosition(localDate, location.lat, location.lng)
-
-        var times = SunCalc.getTimes(new Date(), location.lat, location.lng);
-        var sunrisePos = SunCalc.getPosition(times.sunrise, location.lat, location.lng);
-        this.sunriseAzimuth = sunrisePos.azimuth * 180 / Math.PI;
+        const localDate = new Date(new Date().toLocaleString('en-US', { timeZone: location.tz }))
 
         // Parameters
         this.params = {
@@ -128,7 +121,14 @@ export class Globe {
         imgDark.onload = () => (mapDark.image = imgDark)
         imgDark.src = this.options.mapFileDark
 
-        const azimuthValue = map(this.sunriseAzimuth, -180, 180, -Math.PI, Math.PI);
+        // Create light
+        const dayTime = map(5, 0, 24, 0, 1, true)
+        const lightD = degToRad(360 / dayTime)
+        const sunPosition = new Vec3(
+            Math.cos(lightD),
+            Math.sin(lightD) * Math.sin(0),
+            Math.sin(lightD) * Math.cos(0)
+        )
 
         // Create program
         const program = new Program(this.gl, {
@@ -138,16 +138,11 @@ export class Globe {
                 u_dt: { value: 0 },
                 map: { value: mapWorld }, // Map Texture
                 mapDark: { value: mapDark }, // Map Dark Texture
-                altitude: { value: 0 },
-                azimuth: { value: 0 },
+                sunPosition: { value: sunPosition },
             },
             cullFace: null,
         })
 
-        // Create light
-        program.uniforms.altitude.value = this.sunPosition.altitude
-        program.uniforms.azimuth.value = this.sunPosition.azimuth
-
         // Create globe mesh
         this.globe = new Mesh(this.gl, {
             geometry: this.geometry,

src/modules/globe/vertex.glsl

@@ -6,19 +6,17 @@ attribute vec3 normal;
 uniform mat4 modelViewMatrix;
 uniform mat4 projectionMatrix;
 uniform mat3 normalMatrix;
-uniform float azimuth;
-uniform float altitude;
+uniform vec3 sunPosition;
 varying vec2 vUv;
 varying vec3 vSunDir;
 
 
 void main() {
     vUv = uv;
-    // float px = sin(rotation) * 1.0;
-    // float pz = cos(rotation) * 1.0;
-    float px = sin(0.0) * 1.0;
-    float pz = cos(0.0) * 1.0;
-    vec3 uLightPos = vec3(px, 0.0, pz);
+    float px = sunPosition.x;
+    float py = sunPosition.y;
+    float pz = sunPosition.z;
+    vec3 uLightPos = vec3(px, py, pz);
 
     vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);