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

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

11 Likes

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

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:

2 Likes

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

1 Like

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

og_1400_900

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.

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

1 Like

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

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

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