flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

globe update

Browse Source
This commit is contained in:
Nicolas Riciotti
2020-04-17 15:09:58 +02:00
parent aeb4196918
commit 50d36d4015
7 changed files with 48 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/globe/globe-fs.glsl
View File

@@ -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. );
}

20
src/globe/globe-vs.glsl
View File

@@ -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 );
}

7
src/globe/globe-vs.js
View File

@@ -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 );
}
`
`

42
src/globe/index.js
View File

@@ -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()

4
src/molecules/InteractiveGlobe.svelte
View File

@@ -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,

11
src/style/molecules/_globe.scss
View File

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