Globe with markers and label: thoughts, ideas, approaches, solutions

[prisoner849]

Hi community!

Picture:

Demo + source code: https://codepen.io/prisoner849/full/oNopjyb

It was questioned many times on the forum, SO and discord: how to create a globe with markers, and more important, with interactable markers, when you click them, a label with some info would pop up.

So I decided to create this demo, which is kind of compilation of my thoughs and ideas. And now I’ve got an example I can refer to in case of further asking

There are comments in the source code.

PS It’s just a demo, not the ultimate solution.
PPS Feel free to add your demos and examples, with markers and labels, to the thread.

[Arthur]

Looks fantastic, well done!

Here’s some github repos with cool globes:

Google Data Arts WebGL Globe
Globe.gl - a wrapper around the previous repo

[vielzutun.ch]

Really well done!
I particularly like the little details, like the “radiating” markers spreading thinner until they vanish, and them not being in sync with each other. Then of course the very gentle backface culling transition zone for the labels. So you quite elegantly avoided one of the downsides of labels being a 2D-effect.

[prisoner849]

Oh, yeah, creation of markers with ripple effect was fun.
The hardest part was to make the label a friend of markers, and make it disappear, when a marker is on the backside of the sphere.

[drcmda]

nice touch with the pulsing annotations, looks like a game.

@prisoner849

PPS Feel free to add your demos and examples, with markers and labels, to the thread.

i have a barebones example in order to teach how to occlude (and animate) markers when they’re behind the globe: HTML Markers - CodeSandbox

[Suns]

Hi, I love those points. Thanks for sharing your code, I’ve tried them on another globe.

[vielzutun.ch]

@prisoner849

PPS Feel free to add your demos and examples, with markers and labels, to the thread.

Now that I’ve published a stand-alone version of TexFont for Three.js, I’m equally happy (but less proud) to publish my entry into this collection of “Globes with labels”:

In my entry, the labels are textured 3D-planes, and as such benefit from the full range of 3D features like:

• depth cueing
• automatic visibility handling
• various billboarding options
• dynamic content updating
• sensitivity for fog
• plus the rest I didn’t think of

Be warned, that the code is a monolithic mess (it contains an earlier version of TexFont) - please take this only as an MVP to see what this approach can do in terms of visual impact.

Please take particular note of the one label at latitude 0°, longitude 0° (Gulf of Guinea), which can be configured (GUI) as having [No | 2D | 3D] billboarding properties. In addition, its contents is dynamcally updated and displays pitch and yaw angles, as well as distance from the target of the OrbitControlled camera.

https://jsfiddle.net/Chrisssie/s63jnpea/

[danechitoaie]

Awesome. Any idea how to have the outer circle in different color?

[prisoner849]

@danechitoaie
Not that much to add and to change:

    shader.fragmentShader = `
    	uniform float time;
        varying float vPhase;
    	${shader.fragmentShader}
    `.replace(
      `vec4 diffuseColor = vec4( diffuse, opacity );`,
      `
      vec3 col = diffuse; // added
      
      vec2 lUv = (vUv - 0.5) * 2.;
      float val = 0.;
      float lenUv = length(lUv);
      val = max(val, 1. - step(0.25, lenUv)); // central circle
      float outerCircle = step(0.4, lenUv) - step(0.5, lenUv); // added
      col = mix(col, vec3(0, 1, 1), outerCircle); // added
      val = max(val, outerCircle); // outer circle // changed
      
      float tShift = fract(time * 0.5 + vPhase);
      val = max(val, step(0.4 + (tShift * 0.6), lenUv) - step(0.5 + (tShift * 0.5), lenUv)); // ripple
      
      if (val < 0.5) discard;
      
      vec4 diffuseColor = vec4( col, opacity );` // changed
    );

[danechitoaie]

@prisoner849

vec3 col = diffuse; // added
      
      vec2 lUv = (vUv - 0.5) * 2.;
      float val = 0.;
      float lenUv = length(lUv);
      val = max(val, 1. - step(0.25, lenUv)); // central circle
      float outerCircle = step(0.4, lenUv) - step(0.5, lenUv); // added
      col = mix(col, vec3(0, 1, 1), outerCircle); // added
      val = max(val, outerCircle); // outer circle // changed
      
      float tShift = fract(time * 0.5 + vPhase);
      val = max(val, step(0.4 + (tShift * 0.6), lenUv) - step(0.5 + (tShift * 0.5), lenUv)); // ripple
      
      if (val < 0.5) discard;
      
      vec4 diffuseColor = vec4( col, opacity );

Thank you. Oh man, you are doing magic. I’ve spent the past few days on bookofshaders but things still don’t make sense for me in regards to how they work and how you manipulate things.

[vielzutun.ch]

I stumbled across this website/widget provider:

Live Statistics | RevolverMaps - Free 3D Visitor Maps

What goes beyond what we’ve seen so far in this thread is the “depth stacking” of overlapping labels on concentrical hulls, which you can (to a degree) untangle by zooming in:

[Dinesh_Tarphe]

how to add pointer for particular country

[Dinesh_Tarphe]

how to add pointer for particular country, please help

[Shange]

This is awesome, I’ve been trying to create something like this but for displaying live news and now i can use this, here is what I made:

I was wondering if you could give mec some advice as the gui isnt fully working so i am unable to switch between globe textures and also the html news widgets do not display correctly within your labelMarker div you created, and one last thing is the globe has no specular map or bump map being shown even though I’ve added both, here is a live link and my code, feel free to edit:
https://shange-fagan.neocities.org/globe_news2/globe-news2.html

since it I couldnt paste the code here, here is a link to the code on the glitch website:(Glitch :･ﾟ✧)

ps - I tried to set the marker locations to the lat and lng of each country using fetch json file containing the latitude and longitude of each country but I get an error in the console that says: Uncaught (in promise) TypeError: dummy.position is not a function

[Kevin37]

Hey @Shange I was trying to open the glitch link provided, but it does not work for me, could you provide me a working link? I like the globe very much Thanks.

[jrlazz]

Hi @prisoner849 ,

Here goes a very simple alternative of use of InstancedMesh and dummyes,
based in Your beautiful creation.
And with postprocessing effect.
Maybe usefull for beginners.

the link:

https://jrlazz.eu5.org/anim/globe_markers_alt.html

Hope You like!

[mstudio]

@ Suns
How did you change the image?

[Suns]

Here: MapTheClouds - Chart Types

Yahoo Mail: Search, organise, conquer

[mstudio]

Suns
Thanks, your example show the globe and the markers but don’t show the popup?

[mstudio]

prisoner849
Can you help me with how to set fix position for the markers and not random and having custom HTML text to each marker? ChatGPT doesn’t helping