A simple projection trick for orthographic globe clipping

Show and Tell
1

Hi everyone,

While working on teaching material for a web visualization course, I stumbled upon a simple trick that I haven’t seen documented before (though it may well be known, and I’d love to hear if someone has seen it elsewhere).

The idea: instead of clipping polygons at the horizon with spherical Sutherland-Hodgman, you can modify the projection so that back-hemisphere points project beyond the globe radius, then let a circular SVG clipPath do all the work.

The core is 4 lines of JavaScript:

js

const cosC = sinφc * sinφ + cosφc * cosφ * Math.cos(dλ);
if (cosC < 0) {
  const d = Math.hypot(px, py) || 1;
  const s = (2 * R - d) / d;
  px *= s; py *= s;
}

The transformation d → 2R - d is continuous at the horizon (no seam), and pushes antipodal points far outside the circle where the clipPath hides them. I call it “Horizon Overflow”.

I put together a notebook with an interactive explanation and a side-by-side comparison showing what happens at each step:

Obviously this doesn’t replace d3-geo for serious cartography: there’s no great-circle resampling, and edge precision depends on vertex density. But for interactive globes with standard resolution data (countries-110m), it works well and is much simpler to understand and implement.

I’m curious:

  • Has anyone seen this approach before? I’d be happy to credit prior work.
  • Are there edge cases I might have missed?

Thanks for any feedback!

Jean-Luc

2 Likes