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

Hi community!


Demo + source code:

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 :slight_smile:

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.


Looks fantastic, well done!

Here’s some github repos with cool globes:

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

1 Like

Really well done! :clap: :+1:
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.

1 Like

Oh, yeah, creation of markers with ripple effect was fun. :slight_smile:
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. :muscle:


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

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


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


1 Like

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 :wink:

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.


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

Not that much to add and to change:

    shader.fragmentShader = `
    	uniform float time;
        varying float vPhase;
      `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

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.

1 Like

I stumbled across this website/widget provider:

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:

1 Like

how to add pointer for particular country

how to add pointer for particular country, please help

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:

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

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 :slight_smile: Thanks.