diff --git a/.env b/.env index d6ce7cf..7e3f2a9 100644 --- a/.env +++ b/.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 diff --git a/src/globe/globe-fs.glsl b/src/globe/globe-fs.glsl deleted file mode 100644 index bf86f48..0000000 --- a/src/globe/globe-fs.glsl +++ /dev/null @@ -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. ); - -} \ No newline at end of file diff --git a/src/globe/globe-vs.glsl b/src/globe/globe-vs.glsl deleted file mode 100644 index 274068e..0000000 --- a/src/globe/globe-vs.glsl +++ /dev/null @@ -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 ); -} diff --git a/src/globe/globe-vs.js b/src/globe/globe-vs.js index d14cc0d..7543c11 100644 --- a/src/globe/globe-vs.js +++ b/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,8 +16,8 @@ varying vec3 vPos; void main(void) { vUv = uv; - vNormal = (vec4(normal, 0.) * uMMatrix).rgb; - vPos = (vec4(vPos, 1.) * uMMatrix).rgb; + vNormal = (vec4(normal, 0.) * uNormalMatrix).rgb; + vPos = (vec4(vPos, 1.) * uMMatrix).rgb; gl_Position = uPMatrix * uMVMatrix * vec4( position, 1.0 ); } -` +` \ No newline at end of file diff --git a/src/globe/index.js b/src/globe/index.js index a711309..e031ecf 100644 --- a/src/globe/index.js +++ b/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 - if (this.cameraX != this.camera.worldMatrix[12] || - this.cameraY != this.camera.worldMatrix[13] || - this.cameraZ != this.camera.worldMatrix[14] - ) { - this.cameraX = this.camera.worldMatrix[12] - this.cameraY = this.camera.worldMatrix[13] - this.cameraZ = this.camera.worldMatrix[14] - needsUpdate = true - } + // let needsUpdate = false + // if (this.cameraX != this.camera.worldMatrix[12] || + // this.cameraY != this.camera.worldMatrix[13] || + // this.cameraZ != this.camera.worldMatrix[14] + // ) { + // this.cameraX = this.camera.worldMatrix[12] + // this.cameraY = this.camera.worldMatrix[13] + // this.cameraZ = this.camera.worldMatrix[14] + // needsUpdate = true + // } + let needsUpdate = true; + if (!needsUpdate && this.imageLoaded) { return } - // console.log('RENDER WEBGL') - let screenPos = vec3.create() + 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() diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte index 40d3c76..1c35c68 100644 --- a/src/molecules/InteractiveGlobe.svelte +++ b/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, diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss index bc9d535..a282b55 100644 --- a/src/style/molecules/_globe.scss +++ b/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;