globe update

.env

@@ -4,7 +4,7 @@ HOME_PHOTOS_LIMIT=6
 
 # API
 API_TOKEN="NJk0urljsdSvApUDzWxGgoO6"
-API_URL_DEV="http://api.housesof.localhost/how"
+API_URL_DEV="https://api.housesof.world/how"
 API_URL_PROD="https://api.housesof.world/how"
 
 # Tracking

src/globe/globe-fs.glsl

@@ -1,59 +0,0 @@
-#define PI 3.34159265359
-#define RECIPROCAL_PI 0.31830988618
-#define saturate(a) clamp( a, 0.0, 1.0 )
-
-precision highp float;
-
-varying vec3 vNormal;
-varying vec2 vUv;
-varying vec3 vPos;
-
-uniform sampler2D tInput;
-uniform vec3 uCameraPosition;
-
-
-vec3 F_Schlick_Frostbite (in vec3 f0 , in float f90 , in float u )
-{
-	return f0 + ( f90 - f0 ) * pow (1. - u, 5.);
-}
-
-void main(void) {
-    
-    vec3 N = vNormal;
-    vec3 outColor = vec3(0.);
-    vec3 diffuseColor = texture2D(tInput, vUv).rgb;//pow( texture2D(tInput, vUv).rgb, vec3(2.2) );
-
-    vec3 V = normalize(uCameraPosition - vPos);
-    vec3 L = normalize( vec3(20.,20.,20.) );
-    vec3 Ldir = normalize( L - vPos ) ;
-    vec3 radiance  = vec3(0.);      
-    float NdotL = max(0., dot(N,L) );
-    vec3 lColor = vec3(1.);
-
-    
-    float attenuation = 1.;//calcLightAttenuation(length(L - worldPos), directLight.distance, directLight.decay);
-
-    float roughness    = clamp( 1., 0.04, 1.0 );
-    vec3 H             = normalize(L);
-    float LdotH        = saturate ( dot (L , H ));
-    float NdotH        = saturate ( dot (N , H ));
-    float energyBias   = mix(0., 0.5, roughness );
-    float energyFactor = mix(1.0, 1.0 / 1.51, roughness );
-    float f90          = energyBias + 2.0 * LdotH * LdotH * roughness ;
-    vec3 f0            = vec3(1.0, 1.0, 1.0);
-    float lightScatter = F_Schlick_Frostbite ( f0 , f90 , NdotL ).r;
-    vec3 irradiance    = NdotL * lColor;
-    outColor           = diffuseColor * irradiance * lightScatter * energyFactor * attenuation;   
-
-
-    vec3 ambient = vec3(192./255., 181./255., 215./255.);
-    // outColor.r = max(ambient.r, outColor.r);
-    // outColor.g = max(ambient.g, outColor.g);
-    // outColor.b = max(ambient.b, outColor.b);
-    outColor = diffuseColor * vec3(NdotL) + diffuseColor * ambient * (1.-NdotL);
-
-    
-    // outColor =  pow(outColor, vec3(1.0 / 2.2));
-    gl_FragColor = vec4( outColor, 1. );
-
-}

src/globe/globe-vs.glsl

@@ -1,20 +0,0 @@
-precision highp float;
-
-attribute vec3 normal;
-attribute vec3 position;
-attribute vec2 uv;
-
-uniform mat4 uMVMatrix;
-uniform mat4 uMMatrix;
-uniform mat4 uPMatrix;
-
-varying vec2 vUv;
-varying vec3 vNormal;
-varying vec3 vPos;
-
-void main(void) {
-    vUv       = uv;
-    vNormal   = (vec4(normal, 0.) * uMMatrix).rgb;
-    vPos   = (vec4(vPos, 1.) * uMMatrix).rgb;
-    gl_Position = uPMatrix * uMVMatrix * vec4( position, 1.0 );
-}

src/globe/globe-vs.js

@@ -8,6 +8,7 @@ attribute vec2 uv;
 uniform mat4 uMVMatrix;
 uniform mat4 uMMatrix;
 uniform mat4 uPMatrix;
+uniform mat4 uNormalMatrix;
 
 varying vec2 vUv;
 varying vec3 vNormal;
@@ -15,7 +16,7 @@ varying vec3 vPos;
 
 void main(void) {
     vUv       = uv;
-    vNormal   = (vec4(normal, 0.) * uMMatrix).rgb;
+    vNormal   = (vec4(normal, 0.) * uNormalMatrix).rgb;
     vPos      = (vec4(vPos, 1.) * uMMatrix).rgb;
     gl_Position = uPMatrix * uMVMatrix * vec4( position, 1.0 );
 }

src/globe/index.js

@@ -35,6 +35,9 @@ class WebglGlobe {
         this.cameraZ = 0
 
         this.options = options
+
+        this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0
+
         this.$el = options.el
         this.cities = options.markers
         let gl
@@ -135,6 +138,7 @@ class WebglGlobe {
             let el = document.createElement('a')
             el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug)
             el.setAttribute('sapper-noscroll', '')
+            if (markers[i].className) el.classList.add(  markers[i].className )
 
             // Add label
             let span = document.createElement('span')
@@ -188,7 +192,7 @@ class WebglGlobe {
         if (!this.supportWebgl) {
             return
         }
-        this.renderer.setPixelRatio(window.innerWidth < 768 ? 1 : settings.devicePixelRatio)
+        this.renderer.setPixelRatio(1)//window.innerWidth < 768 ? 1 : settings.devicePixelRatio)
         this.renderer.resize(settings.resolution[0], settings.resolution[1])
         this.camera.aspect = settings.resolution[0] / settings.resolution[1]
         this.camera.updateProjectionMatrix()
@@ -228,6 +232,8 @@ class WebglGlobe {
 
     // Update
     update () {
+
+
         if (!this.supportWebgl) {
             return
         }
@@ -242,26 +248,35 @@ class WebglGlobe {
         mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
         mat4.invert(this.inverseViewProjectionMatrix, this.viewProjectionMatrix)
 
-        let needsUpdate = false
+        // let needsUpdate = false
-        if (this.cameraX != this.camera.worldMatrix[12] ||
+        // if (this.cameraX != this.camera.worldMatrix[12] ||
-            this.cameraY != this.camera.worldMatrix[13] ||
+        //     this.cameraY != this.camera.worldMatrix[13] ||
-            this.cameraZ != this.camera.worldMatrix[14]
+        //     this.cameraZ != this.camera.worldMatrix[14]
-        ) {
+        // ) {
-            this.cameraX = this.camera.worldMatrix[12]
+        //     this.cameraX = this.camera.worldMatrix[12]
-            this.cameraY = this.camera.worldMatrix[13]
+        //     this.cameraY = this.camera.worldMatrix[13]
-            this.cameraZ = this.camera.worldMatrix[14]
+        //     this.cameraZ = this.camera.worldMatrix[14]
-            needsUpdate = true
+        //     needsUpdate = true
-        }
+        // }
+        let needsUpdate = true;
+
 
         if (!needsUpdate && this.imageLoaded) {
             return
         }
 
-        // console.log('RENDER WEBGL')
+
+        this.globeMesh.rotation[0] = 0
+         this.globeMesh.rotation[1] += this.options.autoRotationSpeed;
+         this.globeMesh.rotation[2] = 0
 
          let screenPos = vec3.create()
         this.markers.forEach((marker, i) => {
+            
             vec3.set(screenPos, marker.position[0], marker.position[1], marker.position[2])
+
+            vec3.transformMat4(screenPos, screenPos, this.globeMesh.worldMatrix)
+
             vec3.transformMat4(screenPos, screenPos, this.viewProjectionMatrix)
 
             let x = ((screenPos[0] + 1) / 2) * this.width
@@ -269,6 +284,7 @@ class WebglGlobe {
 
             let N = vec3.create()
             vec3.set(N, marker.position[0], marker.position[1], marker.position[2])
+            vec3.transformMat4(N, N, this.globeMesh.worldMatrix)
             vec3.normalize(N, N)
 
             let V = vec3.create()

src/molecules/InteractiveGlobe.svelte

@@ -31,6 +31,7 @@
             // Init the globe from library
             globe = new Globe({
                 el: scope,
+                autoRotationSpeed: -0.01,
                 texture: `/img/globe/map-${window.innerWidth >= 992 ? '4k' : '2k'}.png`,
                 markers: [...$locations.map(location => {
                     return {
@@ -39,7 +40,8 @@
                         countryName: location.country.name,
                         countrySlug: location.country.slug,
                         lat: location.coordinates.lat,
-                        lng: location.coordinates.lng
+                        lng: location.coordinates.lng,
+                        className: location.slug === 'marseille' ? 'is-left' : '',
                     }
                 })],
                 cameraDistance: 3,

src/style/molecules/_globe.scss

@@ -94,6 +94,17 @@
         }
     }
 
+
+    .marker.is-left {
+        .marker__label {
+            left: auto;
+            right: 360%;
+        }
+        .marker__country {
+            text-align: right;            
+        }
+    }
+
     // Grabbing
     &.is-grabbing {
         cursor: grabbing;