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

globae update

Browse Source
This commit is contained in:
Nicolas Riciotti
2020-04-18 23:58:18 +02:00
parent 8e36c2b2f0
commit c531181972
3 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/globe/index.js
View File

@@ -29,10 +29,14 @@ class WebglGlobe {
this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0
this.options.scrollSmoothing = this.options.scrollSmoothing || 0.5 // smooth the globe position to avoid janks on scroll(lower==smoother)
this.options.cameraDistance = this.options.cameraDistance || 1 //a multiplier to move camera backward or forward
this.referenceHeight = 1;//used to set camera distance from globe where referenceHeight == window height
this.cities = options.markers//list of cities with their options
this._canUpdate = false
this.cities = options.markers//list of cities with their options
this.hasUpdateCameraPos = false
this.referenceHeight = 1;//used to set camera distance from globe where referenceHeight == window height
this.currMarkerScrollOffset = 0
this.markersScrollOffset = 0
this.globeScrollOffset = 0
let gl
let canvas = document.createElement('canvas')
@@ -55,7 +59,7 @@ class WebglGlobe {
//to allow transparent background on webgl canvas
alpha: true,
//only enable antialiasing if screen is small with no retina(for performances reasons)
antialias: window.innerWidth < 768 || !window.devicePixelRatio == 1 ? true : false,
antialias: window.innerWidth < 768 || window.devicePixelRatio == 1 ? true : false,
})
// we put the canvas at the end of body tag as 'position:fixed'
@@ -153,6 +157,11 @@ class WebglGlobe {
// Position marker
let p = lonLatToVector3(markers[i].lng, markers[i].lat)
//scale marker position to fit globe size
p[0] *= this.referenceHeight/2;
p[1] *= this.referenceHeight/2;
p[2] *= this.referenceHeight/2;
// Wrap marker in link
let el = document.createElement('a')
el.style.pointerEvents = 'auto'
@@ -233,10 +242,17 @@ class WebglGlobe {
* As the camera rotates arount the globe, we cant simply move the Y position of the camera or the globe
* Instead, we move the globe vertex inside the vertex shadder after compute the project on screen, so we pass the 'scroll' position to a uniform
*/
updateCameraPos(y) {
y *= 2;
if (this.globeMesh.material.uniforms.uCameraOffsetY) {
this.globeMesh.material.uniforms.uCameraOffsetY.value += ( y - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
updateCameraPos(y, scrollDiff) {
this.globeScrollOffset = y;
this.markersScrollOffset = scrollDiff
//avoid jump due to smoothing when setting it for first time as the inital values are 0
if (!this.hasUpdateCameraPos) {
this.hasUpdateCameraPos = true
if (this.globeMesh.material.uniforms.uCameraOffsetY) {
this.globeMesh.material.uniforms.uCameraOffsetY.value = this.globeScrollOffset
}
this.currMarkerScrollOffset = this.markersScrollOffset
}
}
@@ -255,10 +271,16 @@ class WebglGlobe {
// Update
update () {
if (!this.supportWebgl || !this._canUpdate || !this.imageLoaded) {
if (!this.supportWebgl || !this._canUpdate || !this.imageLoaded || !this.hasUpdateCameraPos) {
return
}
if (this.globeMesh.material.uniforms.uCameraOffsetY) {
this.globeMesh.material.uniforms.uCameraOffsetY.value += ( this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing
}
this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing
//compute the camera view-projection matrix to use it on the markers
this.camera.update()
vec3.set(this.cameraPosition, this.camera.worldMatrix[12], this.camera.worldMatrix[13], this.camera.worldMatrix[14])
@@ -266,7 +288,7 @@ class WebglGlobe {
mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
//Auto rotate the globe
this.globeMesh.rotation[1] = this.options.autoRotationSpeed
this.globeMesh.rotation[1] += this.options.autoRotationSpeed
this.globeMesh.updateMatrix()
this.globeMesh.updateWorldMatrix()
@@ -294,6 +316,8 @@ class WebglGlobe {
vec3.subtract(V, V, this.cameraPosition)
vec3.normalize(V, V)
//the marker is behind the globe: clamp it to the globe edge
if (vec3.dot(V, N) * -1 < 0) {
let dir = vec2.create()
@@ -305,11 +329,14 @@ class WebglGlobe {
vec2.normalize(dir2d, dir2d)
vec2.scale(dir2d, dir2d, this.circleScreenSize)
vec2.add(dir2d, dir2d, center)
dir2d[1] += this.currMarkerScrollOffset
marker.el.style.transform = `translate(${dir2d[0]}px, ${dir2d[1]}px) translateZ(0)`
marker.el.classList.remove('is-active')
}
//marker is in front of the globe; update 2D position
else {
y += this.currMarkerScrollOffset
marker.el.style.transform = `translate(${x}px, ${y}px) translateZ(0)`
marker.el.classList.add('is-active')
}