
To design and develop an interactive globe - tambourine_man
https://stripe.com/blog/globe
======
mxfh
Great basic and easy to follow tutorial for visualization display only
(virtual globes), which are totally fine to be spherical, just be aware of the
limitations.

So as a trained Cartographer I have two supplemental remarks on this:

1\. For anything involving simulations or else, that require an ellipsoidal
earth or beyond, go for Patrick Cozzi's (of CesiumJS) still very relevant book
_3D Engine Design for Virtual Globes_

[http://www.virtualglobebook.com/](http://www.virtualglobebook.com/)

2\. There is no fixed ratio of screen space for map vs globe display, it all
depends on the choice of projection used for the map version, the ratio
mentioned is apparently for a specific equirectangular plot.

Maps don't need to be rectangular, projections like Robinson or Equal Earth
are also considerable options, which don't make the map appear so huge and
have a way better screen space ratio vs. a globe than rectangular ones.

[https://en.wikipedia.org/wiki/Equal_Earth_projection](https://en.wikipedia.org/wiki/Equal_Earth_projection)

------
tenbino
These giant companies employ/stockpile vast numbers of elite programmers who
they don’t really need.

So they build other things. Nice work if you can get it.

~~~
mattiel
They are probably hired to do front-end work to make things look nice and be
creative at the same time.

I personally think that Stripe is on point with design. Which attracts more
customers.

You don’t need elite programmers to only do the “important stuff”. Visuals are
important too.

------
mbostock
Here’s a more mathematical description of the “sunflower pattern” on the
sphere, a spherical Fibonacci lattice: [http://extremelearning.com.au/evenly-
distributing-points-on-...](http://extremelearning.com.au/evenly-distributing-
points-on-a-sphere/)

As a live notebook: [https://observablehq.com/@mbostock/spherical-fibonacci-
latti...](https://observablehq.com/@mbostock/spherical-fibonacci-lattice)

------
iNerdier
‘None of us on the team considered ourselves 3D artists, so we leaned on each
other, the internet, and friends to help solve technical problems.’

You have money to burn on a vanity exercise using experienced programmers but
don’t even bother to hire anyone in the visual arts when designing it?

~~~
atonse
Err what? Stripe's design team for a decade has been so solid, so good, that
they literally drive some design trends across the web (at least with tech
companies).

I'd say they're probably one of the biggest champions of people in the "visual
arts" among tech companies.

~~~
soylentgraham
Design and Visual arts are not the same.

I agree with GP, this reads like a student's first foray into opengl.

------
konschubert
This is a cool project.

I am amazed that there are companies this big that investing so much time into
building what’s essentially a gimmick has positive RoI

~~~
patio11
There is an interesting chicken-and-egg problem in our line of business, in
that we have to convince you that we're not just normal-software-company
levels of trustworthy and competent, but trustworthy and competent enough for
you to put us solidly in the middle of your revenue. Additionally, due to the
way our business works, we might have to do that before you even have revenue.

So we invest quite a bit in "the little things." I don't think we'd call them
gimmicks. Error messages, for example, certainly aren't gimmicks; they're a
classic product feature for an API, but they're afterthoughts in most places
and we sweat them enough such that one of every X,000 developers debugging
their integration will praise the error message (specifically) to their
colleagues or friends. We aspire to that level of care up and down the stack.
This includes our web presences; they're shipping software products of our
company, after all.

The same sort of chicken-and-egg problem applies to hiring, by the by. The
best reason to work somewhere is the colleagues. How do you let people
experience the colleagues before the colleagues have convinced them to work
for you? Our answer: you create replete evidence that the kind of people you'd
end up working with would spend weeks getting a globe animation right and that
the people who manage/promote/etc them would say "Absolutely yes, the home
page redesign doesn't ship until we have a globe animation we can be proud
of."

~~~
graphene
on that note, are you aware that the globe on stripe.com is rotating in the
wrong direction?

~~~
ponker
This is a tricky one. The majority of worldwide software revenue comes from
companies in the North Hemisphere who read left-to-right, so most globes are
oriented this way.

~~~
graphene
Can't tell if sarcasm...? What I mean is that the globe should rotate towards
the East, not towards the West. This is of course assuming a stationary
camera!

~~~
atonse
Yes and the reply was saying that to the majority of readers (who read left to
right), the globe spinning as it does, probably feels more subconsciously
comfortable to our minds.

It's an artistic interpretation of a globe. It's not meant to be a
scientifically accurate representation (one could say that the oceans aren't
grey either, or that countries aren't sets of dots, or that the Earth isn't a
sphere but an oblong spheroid, slightly squished at the poles). Again,
scientific accuracy isn't paramount here.

~~~
zvorygin
This is actually a very intersting tangent! If I visualize interacting with a
physical globe, I'm going to spin it left, as if I was "reading" the globe
left-to-right. The rotation displayed on the stripe website is not the
rotation of the Earth, it's the rotation of a globe!

------
adamsvystun
> Despite the impending release, an executive (it was Patrick) posed to us:
> what would you build if you had the time to do it the way you wish you
> could?

Funny how CEO of Stripe is still participating in such (seemingly) low level
decisions. Can't imagine that CEO of Ford for example would participate in new
site design and development.

~~~
IAmNotAFix
Maybe that's because Ford makes cars.

~~~
VWWHFSfQ
And we saw what happened when a car company let someone spend company time and
resources to build their ideal car [0].

[0]
[https://i.ytimg.com/vi/Pw9gaEiQAxY/hqdefault.jpg](https://i.ytimg.com/vi/Pw9gaEiQAxY/hqdefault.jpg)

~~~
Witoso
Actually, Ford also tried to build an ideal car in the 50's. Edsel is now
known as a "popular symbol for a commercial failure."[1]

[1][https://en.wikipedia.org/wiki/Edsel](https://en.wikipedia.org/wiki/Edsel)

~~~
tenbino
That’s what The Simpsons episode is about.

------
billfruit
On a tangent, I do feel most GIS systems and applications still use 2d maps
instead of a 3d globe, which I think could do with some rethinking. Working
with globes could eliminate the whole apparatus of projections, and I guess
would simplify a lot of calculations.. but there seems to be much resistance
to this idea.

~~~
tomgp
It’s still being projected onto a screen though so you’re still using a
projection. There are some pretty extreme trade offs you accept when using a
orthographic ‘globe’ projection, not least of which is that you can’t see half
the planet for any given moment.

~~~
billfruit
I don't exactly get this argument. It is not only about what you see on
screen, I was talking about geographic operations like spatial queries being
executed on the globe rather than on a projected 2d surface.

~~~
growlist
> spatial queries being executed on the globe

But it's perfectly possible to create geodesically-correct buffers, for
example - such as you might see when calculating ballistic missile range over
thousands of kilometres - in a 2D projection, and indeed this has been
available for decades. And we have plenty of global models, such as WGS 84:
[https://en.wikipedia.org/wiki/World_Geodetic_System](https://en.wikipedia.org/wiki/World_Geodetic_System)

So what exactly are you talking about?

~~~
billfruit
So do you think there is no benefit if we can avoid projections entirely? Also
won't using 3d make working with great-circle paths easier?

------
Andrew_nenakhov
They mention globekit [1], an insanely cool globe visualization which deserves
their own post.

Does anyone know the price range for their services? I hate it when companies
don't put the price upfront and make potential customers ask for a quote. :-\

[1]: [https://globekit.co/](https://globekit.co/)

~~~
yencabulator
Cool, sure, but after several seconds of loading I closed the tab without
knowing anything more about the company. I'd say what's on globekit.co would
be a bad idea to put on stripe.com, as is.

~~~
whatsupsup
That's too bad. Check out [http://piano.io](http://piano.io) to see an example
of GlobeKit in use. They launched that over 2 years ago judging by the
timestamp on their instagram account -
[https://www.instagram.com/p/BmPBqP9BWUK/](https://www.instagram.com/p/BmPBqP9BWUK/)

------
robenkleene
It's fascinating to me that so much 3D web design work is still done by hand
in code, rather than using a visual 3D tool.

3D in web design essentially means simple rotating shapes, e.g., see the
Stripe globe or the Panic truck
([https://www.panic.com/transmit/](https://www.panic.com/transmit/)). I don't
want to diminish what's been accomplished here, this is absolutely bleeding
edge, state of the art work. But here's an example of what 3D design means in
other media ([https://vimeo.com/260279525](https://vimeo.com/260279525)).

~~~
yencabulator
Comparing something rendered on the fly with a video is a bit unfair.

~~~
robenkleene
Absolutely, maybe I should have used something like Monument Valley
([https://www.monumentvalleygame.com/](https://www.monumentvalleygame.com/))
as an example? I'm making a point tangential to performance though. Why aren't
assets like this made in visual tools for web design (e.g., Blender, Cinema
4D, or Houdini) the same way they are for other mediums like video games,
movies, and image assets?

~~~
soylentgraham
This is absolutely not even close to bleeding edge. I am frankly surprised it
wasn't made in an art tool.

The manvsmachine video IS what we're starting to reach in terms of quality,
even on mobile. (Admittedly cutting a lot of corners, but realtime is 99%
cutting corners :)

~~~
robenkleene
I meant bleeding edge just as incorporating 3D into web design. Per my
original comment, all I usually see people doing is rotating an asset. (If you
have some better examples, I’d love to see them!)

------
ArtWomb
Cool writeup! I agree with this sentiment 100%: "the web is poised to embrace
3D en masse". And with the heady webgl adoption that threejs brings, we see
sites with decorative elements that hog resources, inhibit user interactions,
and make finding the actual information you are looking for a nightmare. It's
a power tool, use it judiciously ;)

Post fails to mention how they are actually rendering the "dots". But I feel
perhaps they are executing excessive draw calls. 100K is not egregious.
ThreeJS docs include many instanced geometry samples. As well as library level
particle systems and materials. All anim logic handled via shaders. Raw webgl
points without textures are also very performant for things like starfields,
etc.

Wanted to link up the original "webgl-globe". Visualization originally used at
Google to see where in the world search requests were arriving from:

[https://github.com/dataarts/webgl-globe](https://github.com/dataarts/webgl-
globe)

~~~
wetmore
Yeah I thought their counts for the number of dots they could render
performantly were pretty low. I suspect they aren't doing any instancing
because from what I know about three.js the API for creating instanced
geometry is a bit more complicated than creating and using CircleGeometrys as
they do in their example. But of course the example could just be a simplified
one.

------
somishere
I love the tangibility afforded by a good globe, it's a great way to visualise
so many things. We built something similar a few years ago. It started off
with some lofty ambitions, but other work got in the way
[https://citizensgbr.org/explore/atlas](https://citizensgbr.org/explore/atlas)

------
blauditore
The dots in 3d are certainly the best-looking solution of the ones they
mention, but most likely also significantly slower than a texture-based
approach. It makes their website extremely janky for me when scrolling, on an
upper-midrange laptop.

~~~
Const-me
> slower than a texture-based approach

Try to rotate the globe with a mouse, and you'll see an effect very hard to
achieve with a texture.

> makes their website extremely janky for me when scrolling, on an upper-
> midrange laptop.

Probably a software issue with your laptop, not with the web site. Works fine
on my low-range laptop (i3-6157u, 16GB RAM, Windows 10, MS Edge).

~~~
blauditore
This mostly depends on the graphics chip (and drivers, obviously). What I'm
saying is that it shouldn't be necessary to have powerful graphics processing
just in order to see a marketing website, but YMMV.

~~~
Const-me
> This mostly depends on the graphics chip

That laptop only has Intel GPU, albeit a good one (Iris 550, 800 GFlops).

> it shouldn't be necessary to have powerful graphics processing just in order
> to see a marketing website

I generally agree. If I would be making that web site, I would have tested on
the slowest Intel GPU I have in this house, I think I still have a Windows
tablet with Atom Z3735G somewhere in the attic. However, I’m 100% certain it’s
technically possible to implement that particular thing in a way so it works
even there.

One obvious improvement, merge all dots into a single immutable mesh, for
mouse dragging effect displace them in vertex shader. Each dot needs 4
vertices, each vertex with XYZ relative to center of sphere, UV to apply round
sprite texture, and one scalar random number for mouse drag displacements.
They render 20k dots, rectangular sprites would need 80k vertices, with 6
floats per vertex that’s about 2MB of VRAM, and this way all dots will render
in a single draw call. Possible to optimize further by passing less data per
vertex (e.g. positions only need 2 floats for lat/lon, and texture coordinates
only need 2 bits of data), and more so if WebGL supports geometry shaders in
which case we only need to pass single vertex per dot without texture
coordinates, and expand them into quads on GPU.

However, such low-level GPU shenanigans require skills most web developers
probably don’t have.

------
cogburnd02
While I realize this article is about a software 'globe' I think it would be
really cool to have a more physical solution--a computer with software on it
that displays a globe to a Gakken Worldeye [1] which is controlled by a
Spaceball [2]

[1]
[https://www.youtube.com/watch?v=kcG9O6S6cOU](https://www.youtube.com/watch?v=kcG9O6S6cOU)

[2] [https://dezignstuff.com/3dconnexion-and-
spaceballs/](https://dezignstuff.com/3dconnexion-and-spaceballs/)

------
greggman3
Here's another article on doing things like this with three.js. It doesn't
cover interesting ways of placing the data but hopefully it's helpful anyway

[https://threejsfundamentals.org/threejs/lessons/threejs-
opti...](https://threejsfundamentals.org/threejs/lessons/threejs-optimize-
lots-of-objects.html)

------
wiradikusuma
While we're on this topic, does anyone know ready-to-use open source map
dashboard (preferably 3D, but I'm fine with 2D) to show signups or any event
of interest?

I want to display it on TV showing our user signups. Reminds me of X-COM.

------
worldmerge
This is really cool! The new Stripe site is a big piece of inspiration for me
for what web design could be. Also, to the dev team thank you for integrating
the Konami code into the site, that's a fun easter egg.

------
ChrisArchitect
Harks back to Shopify's Black Friday/Cyber Monday live globe tracker site no?

Also, Tron:Legacy.

------
Ndymium
Huh, looking at the first globe they made, it shows how much of the world is
"dark", i.e. where Stripe doesn't operate. For example, Russia. Is there an
alternative that covers more of the world? PayPal?

------
1MachineElf
Looking at this article reminded me of the Map Projections XKCD comic.

[https://xkcd.com/977/](https://xkcd.com/977/)

The Dymaxion map is what tipped me off to the rabbit hole that is the Dvorak
keyboard layout.

[https://en.wikipedia.org/wiki/Dvorak_keyboard_layout](https://en.wikipedia.org/wiki/Dvorak_keyboard_layout)

