vasturiano / globe.gl Goto Github PK
View Code? Open in Web Editor NEWUI component for Globe Data Visualization using ThreeJS/WebGL
Home Page: https://vasturiano.github.io/globe.gl/example/world-population/
License: MIT License
UI component for Globe Data Visualization using ThreeJS/WebGL
Home Page: https://vasturiano.github.io/globe.gl/example/world-population/
License: MIT License
Special characters in labels are showing as question marks i.e.
N?man
instead of Nüman
I think this is because the default font helvetiker regular doesn't support special characters. How do I use labelTypeFace([typeface ])
to specify a different/custom label font created with facetype.js or is there another built in font I can use, or am I doing something wrong with special characters?
Hi ! Thanks for your function !
Question : I can't stop rendering the animation. I have several pages in app where I can run some webgl animations with globeJS, but switching from page to another the processes are running slower and slower as I think animations are not paused or stopped.
Is there a way to programmatically stop (kill or pause) a rendering ?
Thanks for your help...
Is your feature request related to a problem? Please describe.
Based on your solar-terminator
example, I'm trying to make the globe feature two textures: one of the day Earth, and one of the night.
Describe the solution you'd like
Some way to pass earth-blue-marble.jpg
as a texture for
.tileMaterial(() => new THREE.MeshLambertMaterial({
color: '#ffff00',
opacity: 0.2,
transparent: true,
}))
while keeping earth-night.jpg
as the primary texture of the globe.
Describe alternatives you've considered
Somehow making a second set of tiles rotate on the opposite side of the planet simultaneously with the solar one.
On light backgrounds or light globe color, the arcs lines become hard to see or even invisible at times
Steps to reproduce the behavior:
Is there any way to change arc opacity or even blending mode so that these arcs are visible? Is this an issue with the light backgrounds and if so is there a workaround for this to work on light backgrounds.
Describe the bug
GlobeGL is not using passive event listeners. This affects the page's scroll performance and also throws errors in lighthouse reports.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Using passive event listeners
Is your feature request related to a problem? Please describe.
is this library easily integratable into a react project?
Describe the solution you'd like
might be nice for the readme to be updated to have a react quickstart guide
Describe alternatives you've considered
you could just explain it to me in this issue thread
Additional context
Hi!
Hope you are doing well! I want create a globe with some objects near, but i need help. I don't know how to get scene and other properties of myWorld like radius and etc. to work with them.
Hi,
Thanks for this great and easy-to-use component.
I am reasonably comfortable with Three.js and know how to work with that, so while I could use three-globe, I am using globe.gl for a project for its convenience for things like the mouseover functionality.
I know I can access some of the lower level Three.js stuff with world.renderer()
, world.camera()
etc. but I have tried poking around and can't find out exactly where or how globe.gl is setting the background colour on the three renderer.
Is there an easy way to just make globe.gl have a transparent background? (If not, I suggest there should be, eg. .setBackgroundColor(false)
or whatever). I see the default passed to the Three renderer is alpha: true
but that doesn't seem like it has any effect.
If there is not an easy way, where in the three.js code can I do it myself? (Things like world.renderer().setClearColor(0xffffff, 0)
have proved fruitless.)
I've been trying to set the orbit controls to auto rotation. How can I achieve an orbit effect?
Hi Vasco!
Hope you are doing well!
For a corona tracking visualization that I'm working on (work in progress) I use pointsData
and labelsData
. In the app (see screenshot below) there is a timeline and a globe, in which the globe shows a series of data points e.g. number of deaths for a given lat/lng coordinate. The size of the points is proportional to the number of deaths and if the number is above some threshold the count is shown as a label as well. The idea is that when the user hovers over the timeline the counts for that particular point in time are shown and that the globe points and labels update quickly.
What would you advise to be the best way to efficiently update labels (if any)? Preferably I like to animate the numbers in when the globe data is initially shown and to update the labels on timeline hover.
For the customLayerData
there is the customThreeObjectUpdate
method that allows one to efficiently update the data. However, for the other layers these options do not exist currently.
Say you have some points data e.g. gPointsData
and we want to update this efficiently. I had hoped that the globe instance would take a reference and that updating gPointsData
without rebinding would suffice for updating the globe view. Turns out this doesn't work, but fortunately re-binding data via globe.pointsData(gPointsData)
works and is quick enough.
However, for the labels data updating in a similar way is too slow and does not work well for quick updates for sizes of a few hundred labels and more. To reduce the work load on timeline hover I'm already throttling the hover events. Clearly I can debounce as well but that would make the timeline hover experience much less fluent.
What would you say is the best way to go here?
kind regards, Herman
Describe the bug
The new polygonCapCurvatureResolution
method only apples in the first creation process. After that, the loop still running with new data or changes, but the polygon won't update.
To Reproduce
Steps to reproduce the behavior:
polygonCapCurvatureResolution(d=> d.active ? 1 : 10)
, it works finepolygonCapCurvatureResolution
loop will re-run, but the polygon won't changeExpected behavior
polygonCapCurvatureResolution
will change the polygon layers after new loop
Is there a way to disable zooming? I see something about three.js controls, and I've tried that but it does nothing and the mousewheel still zooms. Also, is there a way to set an animation where the globe spins slowly on it's own? Thanks!
Dear Vasco,
Hope you are doing well in these challenging times. Thanks again for all your amazing work, really cool stuff!
I was wondering, is there a way to convert lat/long/altitude or x,y,z coordinates used by threejs to convert them to normalized device coordinates or x,y screen coordinates in relation to say a container element?
This would be very helpful to create annotations (say via an overlay div), showing additional information on globe positions, in which the annotation is connected via a line to the globe.
This is sort of what I'm aiming for: (the globe etc is already based on your work :-)
For a cool effect it would be nice that when the camera view changes, the annotation connection line updates as well. I'm aware of the getCoords
and toGeoCoords
functions, but I guess they serve a different purpose.
There are some references on the web that solve the coordinate conversion in relation to the current camera view, in particular see this three-js-annotations example and this stackoverflow question.
In the spirit of one of your own examples, let's say I set some labels on a globe (myGlobe) via labelsData
and let's say I want to create an annotation for the first label.
In what is suggested in the references above, I hoped something like this would work to get the x,y position information I was looking for:
let pos = new THREE.Vector3();
let obj = myGlobe.labelsData()[1]
pos = pos.setFromMatrixPosition(obj.__threeObj.matrixWorld);
pos.project(myGlobe.camera);
console.log("position", pos);
Unfortunately it doesn't. Somehow at the end it seems to go wrong in this threejs function:
applyMatrix3: function ( m ) {
var x = this.x, y = this.y, z = this.z;
var e = m.elements;
this.x = e[ 0 ] * x + e[ 3 ] * y + e[ 6 ] * z;
this.y = e[ 1 ] * x + e[ 4 ] * y + e[ 7 ] * z;
this.z = e[ 2 ] * x + e[ 5 ] * y + e[ 8 ] * z;
return this;
}
In both references the applyMatrix3
function errors out saying that elements
does not exist.
Do you have any clue what I can do?
I think the ability to add annotations, be it only by providing a method to get appropriate x,y coordinates in relation to the camera view, could be helpful to others as well, hence this feature request.
Personally I would already be super grateful if I can manually do the conversion, but I seem to lack the knowledge on what to do here. Any help is greatly appreciated.
best wishes and have a great day! Herman
Describe the bug
Cursor movements triggering polygon expansion via .onPolygonHover causes significant delay when animating multiple polygons at the same time.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Smooth transitions and animations when animating polygon geometry.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context
Likely an issue with re-generating the mesh for the animation.
I'm trying to produce a single polygon on a map that is slightly raised up with a transparent globe image. I'm getting a large pillar of orange with the entire canvas with the cap color.
This is my code:
const world = Globe()
(document.getElementById('globe'))
.backgroundImageUrl('<?php echo get_template_directory_uri(); ?>/images/background-globe.png')
.globeImageUrl('<?php echo get_template_directory_uri(); ?>/images/globeskin.png')
.showAtmosphere(false)
.polygonCapColor(feat => '#C3330C')
.polygonSideColor(() => '#EF4E23')
.hexTopColor('#C3330C')
.hexSideColor('#EF4E23')
.polygonAltitude(3)
world.controls().enableZoom = false;
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 2;
world.width([$(window).width()])
world.height([$(window).width() * 1.25]);
fetch('<?php echo get_template_directory_uri(); ?>/js/location.geojson').then(res => res.json()).then(countries => {
world.polygonsData(countries.features.filter(d => d.properties.ISO_A2 !== 'AQ'));
});
And here is my geojson
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"shape": "Rectangle",
"name": "Unnamed Layer",
"category": "default"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[-98.557021, 31.675237],
[-96.127868, 31.675237],
[-96.127868, 33.737238],
[-98.557021, 33.737238],
[-98.557021, 31.675237]
]
]
},
"id": "35f8ebbf-47ab-427b-8479-f674048b62be"
}]
}
Is it possible to zoom to a certain point by its coordinate or set the zoom-in or zoom-out level of the camera? When I try to add a globe to a storytelling website, I really hope the camera can move along some trajectories to help me tell the story.
Is your feature request related to a problem? Please describe.
In many cases, we need to free all memory / three.js objects without refresh browser. e.g. one-page app or dev with hot-reload in webpack,...
But I can't find any way to release them in current version. Recall Globe() would create new scene but the old one seems remain in the memory, and the scene would be slow rendering.
Describe the solution you'd like
There could be an API, e.g myGlobe.destroy()/.free()/..., to release all canvas/dom/threejs objects in old scene.
I am using points on globe gl. On clicking the point a card is shown .It works fine on the browser and I get my desired thing. But When I switch to mobile devices it doesn't seem to work. It doesn;t call hover or click function . I have used android as well as Ios devices to check this and it is the same . When I tried to test it on the PC browser. It work fine on different screen of mozilla firefox but it doesn't work on the google chrome small screen .I have also enabled the webgl extension on chrome and it's still the same .I also tried to test the example given in library and the behavior was same Please tell me about what can be done regarding this issue?
Is your feature request related to a problem? Please describe.
Describe the solution you'd like
I just find a example here:
vasturiano/react-globe.gl#55 (comment)
But it doesn't work in this version.
1.How do I write code to stop/resume autoRotate when mouse click?
2.Which version should I use? Ract ver or this ver? for performance wise?
Thanks for the great work!
Is your feature request related to a problem? Please describe.
As per this example: https://jsfiddle.net/ghe27wmt
if (elapsed > fpsInterval) {
worldGlobe.renderer().autoClear = false;
worldGlobe.renderer().clear();
worldGlobe.camera().layers.set(1); // sets camera to layer 1, the object that has bloom is in layer1
if (finalComposer !=null ) {finalComposer.render();} // renders the composer of the bloom
worldGlobe.renderer().clearDepth();
worldGlobe.camera().layers.set(0);//sets layer 0 (all the other non bloom objects)
worldGlobe.renderer().render(worldGlobe.scene(), worldGlobe.camera())
Describe the solution you'd like
I am trying to get the bloomPass to work on a specific camera.layer (to bloom only objects that are set in layer 1) as per the example above. But the bloomEffect does not show.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
I tried adding the unrealBloomPass to worldGlobe.postProcessingComposer() and replacing the above: finalComposer.render() to worldGlobe.postProcessingComposer().render() although no errors, I see no bloom on the object.
Additional context
So the short question is, whether it is somehow possible to only use a postprocessing pass on specific objects using camera layers. And how to go about it.
Hi there,
Fantastic library! Thank you for this detailed work and documentation.
I'm trying to use Points instead of Spheres in your Custom Layer API (found here: https://github.com/vasturiano/globe.gl/blob/master/example/custom-layer/index.html).
I am replacing the original code (pasted here for convenience):
.customLayerData(gData)
.customThreeObject(d => new THREE.Mesh(
new THREE.SphereBufferGeometry(d.radius),
new THREE.MeshLambertMaterial({ color: d.color })
))
.customThreeObjectUpdate((obj, d) => {
Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
});
(function moveSpheres() {
gData.forEach(d => d.lat += 0.2);
world.customLayerData(world.customLayerData());
requestAnimationFrame(moveSpheres);
})();
by my modified code:
.customLayerData(gData)
.customThreeObject(d => new THREE.Points(
new THREE.BufferGeometry(),
new THREE.PointsMaterial({ color: d.color, size: 100 })
))
.customThreeObjectUpdate((obj, d) => {
Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
});
(function moveSpheres() {
gData.forEach(d => d.lat += 0.2);
world.customLayerData(world.customLayerData());
requestAnimationFrame(moveSpheres);
})();
The original code works perfect: the spheres are visible where expected. My modified code doesn't yield points. Nothing appears. I tried to change the size of the point. I checked as reference:
So far, no success. I am wondering if you know why this is.
Thank you!
I am importing react-globe.gl as an ES6 modules on Meteor as a fullstack platform.
If I want to customize the globe, I have to import THREE as well, like this:
import THREE from 'three';
to be able to setup low-level stuff like a phong shader or lights.
But if I do, React complains about two simultaneously loaded three.js libraries:
This is because globe.gl
references all three
libraries as a hard dependencies and won't take the three
I already provide. I've seen that it also checks for window.THREE
, but this relies on a certain call order which you cannot guarantee in an ES6 environment.
If I omit three
from my package.json, the import won't work anymore.
To resolve this, I'd like to suggest to use a peer dependency instead, so it is up to the developer to import three
. The three-globe
library already does it this way.
Is your feature request related to a problem? Please describe.
The customLayerData() will loop all objs and trigger customThreeObjectUpdate for every objs. But with more and more objects in custom layer, the loop for all customThreeObjectUpdate will be slower and slower. But in most of the time, we only want to update one obj. All other loops will be waste of time.
Describe the solution you'd like
the customLayer cloud have a second vals to filter objs updating process, such as
let customData = [.....] // already got many objs
// if we just updated some of them
customData[3] = ....
customData[5] = ....
myGlobe.customLayerData(customData, [3, 5]) // indicate the indexes to update or some other way
or, if you can use observers to watch customLayerData objs, and only update the changed ones with new data
Currently, I have to manually maintain a __update
for every custom object, and manually by-pass the update process in customThreeObjectUpdate
. Hope it can be done in a better way
How can I set the globe to a fixed size and disable zoom in and out feature?
Zoom in out includes two finger scroll zooming and mouse wheel zooming...
Fixed size means a responsive size such as using percentage sizing...
Thanx in advance for the support...
Hi Vasco!
Hope you are doing well! I'm wondering, for a more artistic effect, is it also possible to apply a MeshMatcapMaterial to the globe? I was just goofing around and was looking at a codrops article in which they use this material, which looked kind of cool. Obviously pretty useless, but cool :-).
kind regards, Herman
There is a Tiles example, but I did not see how to render WMS map tiles. Please advise. Thank you.
On a white globe, there is heavy shading on the lower quadrant. Is there any way to lessen it? Thanks!
Describe the bug
with .pathStroke(), the path line will not able to interact with mouse event, looks like raycaster will not catch the obj.
To Reproduce
Steps to reproduce the behavior:
.pathStroke(2)
Expected behavior
with skroke value, path lines should able be clicked
Additional context
hope someone could dig animation with stroke
Hi,
I hope you are keeping well, and a great project.
I'm trying to use the air traffic example as it best fits my experiment. I am trying to build a map that connects people to their closest datacenter (All mocked data, was learning how to build a web api and thought I'd try to expand it more and came across this project).
I want to replace the fetching of the airport data and use an endpoint that exposes the following json:
[ { "metricName": "concurrentPlays", "proposition": "peacock", "state": "wi", "stateLongLat": { "destLat": "38.5284223", "destLong": "-77.7938668", "lat": "46.01222384063236", "long": "-90.5712890625" } }, { "metricName": "concurrentPlays", "proposition": "peacock", "state": "wi", "stateLongLat": { "destLat": "38.5284223", "destLong": "-77.7938668", "lat": "45.583289756006316", "long": "-89.40673828125" } } ];
I have a way to extract this data, but I want to parse the lat and longs (dest being destination, or end in your example equivalent) but I'm struggling to understand how to use the API specified, it seems there's a lot going on and removing bits of code seems to break the project.
If you're able to assist, will definitely donate more than just a coffee. :)
I tried manually passing in an array of lat/longs but it doesn't seem to work like this;
.arcStartLat(["38.42777351132902", "38.5284223"])
.arcStartLng(["-81.34277343750001", "-77.7938668"])
.arcEndLat(["38.5284223", "44.1757946"])
.arcEndLng(["-77.7938668", "-121.9088563"])
It does work if I give it one item for each as below:
.arcStartLat(["38.42777351132902"])
.arcStartLng(["-81.34277343750001"])
.arcEndLat(["38.5284223"])
.arcEndLng(["-77.7938668"])
I am using this as a alternative to the fetch example in the air traffic solution:
` const airportParse = ([metricName, proposition, state, startLat, startLng, endLat, endLng]) => ({ metricName, proposition, state, startLat, startLng, endLat, endLng });
var x;
Promise.all([
fetch('http://localhost:8080/update')
.then(res => res.json())
.then((out) => {
var i;
for (i = 0; i < out.length; i++) { //this works and gets every bit of data i need...
var index = out[i]
x = [...Array(300).keys()].map(() => (
[
// metricName = index.metricName, proposition = index.proposition, state = index.state, startLat = index.stateLongLat.lat, startLng = index.stateLongLat.long, endLat = index.stateLongLat.destLat, endLng = index.stateLongLat.destLong
startLat = index.stateLongLat.lat, startLng = index.stateLongLat.long, endLat = index.stateLongLat.destLat, endLng = index.stateLongLat.destLong
]
))
console.log(x)
}
myGlobe
.pointsData(x)
.arcsData(x);
})
]);`
Again, any help will be greatly appreciated. Happy to supply the code if necessary :) A massive thank you in advance
Hi Vasco,
Thanks for the amazing library!
I seem to have encountered a bug. onPolygonClick
does not fire when polygonAltitude
is set to a higher value: at first things appear to work correctly but stop working if the globe has been rotated.
Below is a reproducible example based on yours.
<head>
<style> body { margin: 0; } </style>
<script src="https://cdn.jsdelivr.net/npm/d3"></script>
<script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
var world;
const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
// GDP per capita (avoiding countries with small pop)
const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5, feat.properties.POP_EST);
fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>
{
const maxVal = Math.max(...countries.features.map(getVal));
colorScale.domain([0, maxVal]);
console.log(countries);
world = Globe()
.globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.polygonsData(countries.features)
.polygonAltitude(0.5) // set higher
.polygonCapColor(feat => colorScale(getVal(feat)))
.polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
.polygonStrokeColor(() => '#111')
.polygonLabel(({ properties: d }) => `
<b>${d.ADMIN} (${d.ISO_A2}):</b> <br />
GDP: <i>${d.GDP_MD_EST}</i> M$<br/>
Population: <i>${d.POP_EST}</i>
`)
.onPolygonClick(hoverD => world // change to on click
.polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d)))
)
.polygonsTransitionDuration(300)
(document.getElementById('globeViz'))
});
</script>
</body>
Is your feature request related to a problem? Please describe.
I've seen the Kasperky cybermap and it can switch from 3D to 2D, I think it's a really cool effect but might be hard to implement with extruded polygons maybe ?
Describe the solution you'd like
A function to switch between 3D and 2D.
Additional context
I've found this solution but I don't know how to integrate it to your library :
Changing the color of the globe seems to have no effect at all, when looking through the globeMaterial, seems the color is always a fixed black (0, 0, 0). How can we change the color of the globe?
There's any way of how to add arcsData
in real-time, my plan is to get a socket connection receiving lat and long with source and destination and go adding this data to the current globe as they arrive but I'm not sure if that possible with the current implementation.
I'm also trying also to set a world map in png with transparency for the ocean using the globeImageUrl
but it set white for the whole ocean, any idea about this?
PS: Thanks a lot to create this library!
Have had to patch this static value to .05 to get accurate behavior. Is there a consequence? Would you consider .05 as the default?
Thank you.
Do you think it would be possible to add the ability to use strokes in the polygons? It would be very nice to have this because when you have a lot of adjacent polygons is very difficult to differentiate them.
Is there an easy way to make the container responsive? Currently when you resize the window, the globe stays in its place.
Any help would be much appreciated.
When opened in Safari browser, either on desktop or mobile, it doesn't work. Just loads up to black screen.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expecting to see the globe and to interact with it.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
It happens only on Safari, and only with the Arcs example. The other browsers are okay.
Hi @vasturiano,
The touch support for mobile devices issue you resolved still has problems, varying support for different devices. I have tried using different devices. It works well on most but for Samsung and Apple devices, there are still problems. The onPointClick function still do not trigger on touch.
I hope that the issue will be fixed.!
Cheers
Describe the bug
With enable pointsMerge
, the pointsData([])
won't able to empty points
To Reproduce
Steps to reproduce the behavior:
pointsData([...])
pointsMerge(true)
pointsData([])
Expected behavior
All points should be removed
I dont't test hexBinMerge
yet, it may share the same problem
The choropleth and hexed globes don't load on a python server.
As issue #17 , when we do .customLayerData(data)
, it will loop all objs and trigger customThreeObjectUpdate for every objs. There will be performance issue with big data, but we can set a custom property/state to filter the process.
The customlayer works well with custom filter, but for all other layers, we still need a filter to improve performance with big data. e.g. airline demo
if we want to change something of a arc on click, e.g. color, after recall .arcsData(data)
, it will take 1-2s to process all arcs, meanwhile everything freezing. For all other .xxxData()
apis, they all share the same problem with big data.
So we need an easy way or second param in xxxData()
to add custom filter, like customLayerData()
as #17, only update objs on demand, not loop all of them.
Hi Vasco,
It seems that onHexClick
does not fire, unless I am using it wrong: example below.
<head>
<style> body { margin: 0; } </style>
<script src="https://cdn.jsdelivr.net/npm/d3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-dsv"></script>
<script src="https://cdn.jsdelivr.net/npm/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const weightColor = d3.scaleSequentialSqrt(d3.interpolateYlOrRd)
.domain([0, 1e7]);
const world = Globe()
(document.getElementById('globeViz'))
.globeImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.bumpImageUrl('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png')
.hexBinPointWeight('pop')
.hexAltitude(d => d.sumWeight * 6e-8)
.hexBinResolution(4)
.hexTopColor(d => weightColor(d.sumWeight))
.hexSideColor(d => weightColor(d.sumWeight))
.hexBinMerge(true)
.onHexClick(function(x){console.log(x)})
.enablePointerInteraction(false); // performance improvement
fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/world_population.csv').then(res => res.text())
.then(csv => d3.csvParse(csv, ({ lat, lng, pop }) => ({ lat: +lat, lng: +lng, pop: +pop })))
.then(data => world.hexBinPointsData(data));
// Add auto-rotation
world.controls().autoRotate = true;
world.controls().autoRotateSpeed = 0.1;
</script>
</body>
Testing on various mobile devices (phones and pads) indicates that depending on the drivers, GPU:s and browser versions three.js may render all or some objects pitch-black. In this case with globe.gl most of the coloured objects rendered correctly but the textured dark night globe didn't.
Mobile device having the same GPU/processor may behave differently depending on the phone model and year; older may work while newer doesn't. The same device may operate correctly with Chrome but not with Firefox etc.
The solution to this would be using material precision: 'mediump'
on all mobile devices as a default value. Solving this has first been suggested in 2018 by @Mugen87 mrdoob/three.js#14570. These examples are from another thread, and I can confirm that this is an issue. Testing various devices using these two tests below confirmed it.
This will show a white cube on all devices:
var material = newTHREE.MeshPhongMaterial( { precision: 'mediump' } );
https://jsfiddle.net/f2Lommf5/6721/embedded/result
This will not show a white cube on some devices, rendering it pitch-black
var material = new THREE.MeshPhongMaterial( { precision: 'highp' } );
https://jsfiddle.net/f2Lommf5/6722/embedded/result
IHMO is very important that 3D graphics operate flawlessly by default on all devices capable of running them, despite the bad drivers, operating systems, or browser versions.
Is anyone interested to investigate a solution to this? I am willing to test and confirm how possible solution works with various devices.
Describe the bug
Calling .pointsData()
on an already rendered globe causes it to lose its labels previously set via .labelsData()
.
To Reproduce
Steps to reproduce the behavior:
1.
<head>
<script src="//unpkg.com/globe.gl"></script>
</head>
<body style="margin:0">
<div id="viewport"></div>
</body>
// Gen random data
const N = 300;
const gData = [...Array(N).keys()].map(() => ({
lat: (Math.random() - 0.5) * 180,
lng: (Math.random() - 0.5) * 360,
size: Math.random() / 3,
color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)]
}));
const globe = Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.pointsData(gData)
.labelsData(gData)
.labelText(() => "Text")
.labelSize(2)
.pointAltitude('size')
.pointColor('color')
(document.getElementById('viewport'));
setTimeout(() => {
globe.pointsData(gData);
// globe.labelsData(gData);
}, 5000);
Expected behavior
Labels should not disappear.
Screenshots
N/A
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Calling .labelsData()
right after .pointsData()
seems to be bringing back labels and render them again after a second or two, but it's definitely a bug that points data interferes with labels data.
Describe the bug
Performance of this web component seems to be inferior to that of the vanilla three-globe component.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Performance of this component and the plugin it wraps to be exactly the same.
Screenshots
N/A
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
nouveau
and i915
modules used, not using full acceleration of my GPU (GeForce RTX 2080 Mobile). Willing to debug it more and provide a patch to fix the performance issue.
How to have the globe be transparent so that you see through it? For example if you got hexpolygons, to see their backside through the globe.
Been trying at this for hours with no success.
Describe the bug
I created my own custom layer based on the example that you have and I tried to combine it with the new Hexed Polygons Layer
but it is not working properly, take a look to the videos for a better explanation:
For the videos, I used the Custom and the Hexed examples, but happens the same with my own layer:
To Reproduce
Expected behavior
The animation of the custom layer should be as fluid as this:
But when I add the Hexed the custom layer animation reproduce with a lot of lag:
I tried to debug but didn't find a solution.
Is there any good place to get images to use for this globe? Or do you have any specifications on sizes it should use?
I have been looking for awhile and can't find a spot to get images i can use for wrapping around the globe.
Also is there any access to a zoom triggered function? I would like to try loading a more detailed map when zoomed in to a certain level, also maybe load different set of data at that point? So points can be clustered together when zoomed out and expand when zoomed in enough.
Describe the bug
Hi! I'm having a problem with my Globe.gl application that I'm hoping you can help me with. I cannot seem to be able to pass new JSON data to - or modify at all - the arcs data of my application.
To Reproduce
world.arcsData(usersJSONObjects).arcLabel(() => '').arcStartLat(() => "42.9814").arcStartLng(() => "-70.9478").arcColor(() => ['#ff0000', '#ffffff']).arcEndLat(arcs => arcs.loc_lat).arcEndLng(arcs => arcs.loc_lon).arcStroke(() => 0.025);
world.arcStroke(() => null);
Uncaught TypeError: Cannot read property 'uniforms' of undefined at updateObj (three-globe.module.js:856) at data-joint.module.js:288 at Array.forEach (<anonymous>) at updateObjs (data-joint.module.js:283) at viewDigest (data-joint.module.js:264) at threeDigest (three-globe.module.js:519) at Function.update (three-globe.module.js:841) at kapsule.module.js:112 at later (index.js:27)
Expected behavior
Oddly enough, this functionality works with labels: for example, I can later change the size of my labels and such, but for arcs, an error is given if I attempt to change anything beyond the initialization. The following code works:
world.arcsData(usersJSONObjects).arcLabel(() => '').arcStartLat(() => "42.9814").arcStartLng(() => "-70.9478").arcColor(() => ['#ff0000', '#ffffff']).arcEndLat(arcs => arcs.loc_lat).arcEndLng(arcs => arcs.loc_lon).arcStroke(() => 0.025);
world.labelSize(() => 0.06)
Desktop (please complete the following information):
Not sure if this is relevant because this crops up across all platforms I've tried this on, but Mac OS 10.14.6, Chrome Version 83.0.4103.116.
Additional context
Your work is amazing! Thanks so much for all your help and support in maintaining this project - having this be open-source must be an incredible commitment, but I can tell you that this framework is helping many people like me!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.