Update globe files

src/globe/globe-fs.js

@@ -1,59 +0,0 @@
-export default `
-#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);
-
-
-    gl_FragColor = vec4( outColor, 1. );
-}
-`

src/modules/globe/beam/Material.js

@@ -1,6 +1,6 @@
 import Program from './Program';
-import vertexShader   from './shaders/default-vs.glsl';
-import fragmentShader from './shaders/mesh-fs.glsl';
+import vertexShader   from './shaders/default-vs.glsl?raw';
+import fragmentShader from './shaders/mesh-fs.glsl?raw';
 
 class Material extends Program {
 
@@ -22,7 +22,7 @@ class Material extends Program {
     }, options.defines);
 
     super(gl, options);
-  
+
     if (!gl) {
       return;
     }
@@ -42,7 +42,7 @@ class Material extends Program {
         }
       }
     });
-      
+
     this.map = options.map;
 
   }

src/modules/globe/beam/Program.js

@@ -1,6 +1,6 @@
 import UNIFORM_TYPE from './uniformTypes';
-import defaultVertexShader   from './shaders/default-vs.glsl';
-import defaultFragmentShader from './shaders/default-fs.glsl';
+import defaultVertexShader   from './shaders/default-vs.glsl?raw';
+import defaultFragmentShader from './shaders/default-fs.glsl?raw';
 import uuid from './utils/uuid';
 
 const TEXTURE_2D = 35678
@@ -51,7 +51,7 @@ class Program {
     }, options);
 
     this.options = options;
-    
+
     this._vertexShaderSource   = options.vertexShader;
     this._fragmentShaderSource = options.fragmentShader;
 
@@ -62,7 +62,7 @@ class Program {
 
     gl.attachShader(this._program, this.vertexShader);
     gl.attachShader(this._program, this.fragmentShader);
-    
+
     this.type          = options.type;
     this.attributes    = {};
     this.defines       = options.defines;
@@ -94,7 +94,7 @@ class Program {
     if (!this.gl) {
       return;
     }
-    
+
     if (this.isCompiling) {
       return;
     }
@@ -150,7 +150,7 @@ let isMMatrix = false;
     var numUniforms = this.gl.getProgramParameter( this._program, this.gl.ACTIVE_UNIFORMS );
 
     for (let i = 0; i < numUniforms; ++i) {
-      
+
       var uniform = this.gl.getActiveUniform( this._program, i );
 
       if( uniform === null ){
@@ -186,13 +186,13 @@ let isMMatrix = false;
           value: null,
           size: uniform.size
         }
-      
+
         //set texture unit
         if (uniform.type === TEXTURE_2D || uniform.type === TEXTURE_CUBE_MAP) {
           this.uniforms[ name ].unit = this._textureUnit;
           this._textureUnit++;
         }
-      
+
       }
 
     }
@@ -203,10 +203,10 @@ let isEnd = false;
   //merge user defined uniforms
     for (let u in this._savedUniforms) {
 
-   
 
-        if (this.uniforms[u] !== void 0){ 
-            if (this._savedUniforms[u].value !== void 0 
+
+        if (this.uniforms[u] !== void 0){
+            if (this._savedUniforms[u].value !== void 0
                && this._savedUniforms[u].value !== null) {
 
 
@@ -221,8 +221,8 @@ let isEnd = false;
 
 
     for (let u in this._userDefinedUniforms) {
-      if (this.uniforms[u] !== void 0 
-        && this._userDefinedUniforms[u] !== void 0 
+      if (this.uniforms[u] !== void 0
+        && this._userDefinedUniforms[u] !== void 0
           && this._userDefinedUniforms[u] !== null) {
           this.uniforms[u].value = this._userDefinedUniforms[u];
       }
@@ -232,13 +232,13 @@ let isEnd = false;
     var numAttributes = this.gl.getProgramParameter( this._program, this.gl.ACTIVE_ATTRIBUTES );
 
     for (let i = 0; i < numAttributes; ++i) {
-      
+
       var attribute = this.gl.getActiveAttrib( this._program, i );
-        
+
       if( attribute === null ){
         this.gl.getError();
         continue;
-      } 
+      }
 
       this.attributes[ attribute.name ] = {
         location: this.gl.getAttribLocation( this._program, attribute.name ),
@@ -250,7 +250,7 @@ let isEnd = false;
       //this way we make sure that any enabled attribute has some data not to trigger an error
       //see http://www.mjbshaw.com/2013/03/webgl-fixing-invalidoperation.html
       // this.gl.enableVertexAttribArray( this.attributes[attribute.name].location );
-    
+
     }
 
 
@@ -264,7 +264,7 @@ let isEnd = false;
     if (!this.gl) {
       return;
     }
-    
+
 
     this.gl.useProgram(this._program);
   }
@@ -274,7 +274,7 @@ let isEnd = false;
     if (!this.gl) {
       return;
     }
-    
+
     for (var attr in this.attributes) {
       if (attributes[attr] !== void 0) {
         attributes[attr].bind();
@@ -289,7 +289,7 @@ let isEnd = false;
     if (!this.gl) {
       return;
     }
-    
+
 
     this.gl.useProgram(this._program);
 
@@ -307,7 +307,7 @@ let isEnd = false;
     // }
 
     if (this.blend) {
-      
+
       // this.gl.disable(this.gl.DEPTH_TEST);
       // this.gl[ this.depthTest ? 'enable' : 'disable' ](this.gl.DEPTH_TEST);
 
@@ -315,7 +315,7 @@ let isEnd = false;
         this.gl.depthFunc( this.gl.LESS );
       }
 
-      
+
       this.gl.blendEquation(this.blendEquation);
       this.gl.blendFuncSeparate(this.blendSrcRGB, this.blendDstRGB, this.blendSrcAlpha, this.blendDstAlpha);
       // this.gl.blendFunc(this.blendSrc,this.blendDst);
@@ -351,7 +351,7 @@ let isEnd = false;
           }
           break;
         default:
-          
+
           //texture2D
           if (this.uniforms[ uniformName ].type === TEXTURE_2D ||
               this.uniforms[ uniformName ].type === TEXTURE_CUBE_MAP ){
@@ -370,7 +370,7 @@ let isEnd = false;
           else {
 
             let type = UNIFORM_TYPE[this.uniforms[ keys[i] ].type];
-            
+
             //add 'v' to the uniformType if the unifor is an array: ex "3f" => "3fv"
             if (this.uniforms[ uniformName ].isArray) {
               type += 'v';
@@ -380,17 +380,17 @@ let isEnd = false;
 
               if (type == '2f') {
                 this.gl['uniform' + type ](this.uniforms[ uniformName ].location, this.uniforms[ uniformName ].value[0], this.uniforms[ uniformName ].value[1]);
-              
+
                 // drawnUniforms2f.push(uniformName);
               }
-              else if (type == '3f') {  
+              else if (type == '3f') {
                 this.gl['uniform' + type ](this.uniforms[ uniformName ].location, this.uniforms[ uniformName ].value[0], this.uniforms[ uniformName ].value[1], this.uniforms[ uniformName ].value[2]);
-                
+
                 // drawnUniforms3f.push(uniformName);
               }
               else if (type == '4f') {
                 this.gl['uniform' + type ](this.uniforms[ uniformName ].location, this.uniforms[ uniformName ].value[0], this.uniforms[ uniformName ].value[1], this.uniforms[ uniformName ].value[2], this.uniforms[ uniformName ].value[3]);
-                
+
                 // drawnUniforms4f.push(uniformName);
               }
               else {
@@ -415,7 +415,7 @@ let isEnd = false;
     else {
       this.gl.drawArrays(this.wireframe ? this.gl.LINE_STRIP : this.type, 0, geometry.length);
     }
-    
+
 
   }
 

src/modules/globe/globe-fs.glsl

@@ -0,0 +1,53 @@
+#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);
+
+    gl_FragColor = vec4(outColor, 1.);
+}

src/modules/globe/globe-vs.glsl

@@ -1,4 +1,3 @@
-export default `
 precision highp float;
 
 attribute vec3 normal;
@@ -15,12 +14,11 @@ varying vec2 vUv;
 varying vec3 vNormal;
 varying vec3 vPos;
 
-void main(void) {
-    vUv       = uv;
-    vNormal   = (uNormalMatrix * vec4(normal, 1.)).rgb;
-    vPos      = (uMMatrix * vec4(position, 1.)).rgb;
-    gl_Position = uPMatrix * uMVMatrix * vec4( position, 1.0 );
 
+void main(void) {
+    vUv = uv;
+    vNormal = (uNormalMatrix * vec4(normal, 1.)).rgb;
+    vPos = (uMMatrix * vec4(position, 1.)).rgb;
+    gl_Position = uPMatrix * uMVMatrix * vec4(position, 1.0);
     gl_Position[1] += uCameraOffsetY * gl_Position.w;
-}
-`
+}

src/modules/globe/index.js

@@ -4,8 +4,8 @@ import { vec2, vec3, mat4 } from './beam'
 import { Container, Mesh, Material, Texture, SphereGeometryBuffer, PlaneGeometryBuffer } from './beam'
 
 // GLSL shaders as strings
-import GlobeVS from './globe-vs'
-import GlobeFS from './globe-fs'
+import GlobeVS from './globe-vs.glsl?raw'
+import GlobeFS from './globe-fs.glsl?raw'
 
 const FOV = 1 // Camera Field of view; we use 1 to prevent strong perspective effect on the globe
 
@@ -135,7 +135,7 @@ class WebglGlobe {
             fragmentShader: GlobeFS,
         })
         this.globeMesh.geometry = new SphereGeometryBuffer(this.renderer.gl, {
-            radius: this.referenceHeight/2,
+            radius: this.referenceHeight / 2,
             widthSegments: 100, heightSegments: 100
         })
         this.scene.add(this.globeMesh)
@@ -172,8 +172,8 @@ class WebglGlobe {
             // Wrap marker in link
             let el = document.createElement('a')
             el.style.pointerEvents = 'auto'
-            el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug)
-            el.setAttribute('sapper-noscroll', '')
+            el.setAttribute('href', `/${markers[i].countrySlug}/${markers[i].slug}`)
+            el.setAttribute('sveltekit-noscroll', '')
             if (markers[i].className) el.classList.add(markers[i].className)
 
             // Add label