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
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.
Stripe isn't "giant" but it does seem to do a lot of this. They have job postings for their Ruby type checker...
Meanwhile my company is giant by any stretch of the imagination but I've never seen projects like this. It's a cultural thing borne out of the elite circles Stripe folks come from.
A vanity exercise? I think you are really missing the point here. As a 3D graphics developer myself, having published my 13-years long pet-project, a full-featured 3D graphics engine as open source (https://github.com/StylianosPolychroniadis/NthDimension), I can surely tell you that going 3D as well as GPU programming, is The most rewarding, in terms of computer science knowledge, effort one can possibly do.
Now only if UV texture-mapping was any easier, I would love to be in a position to call myself a 3D artist.
Luckily, procedural graphics (both geometry & texturing) has filled the gap for me.
Off course, the biggest school was working along with real 3D artists that shed light and introduced me to engine and shader optimization, my greatest passion at the moment (along with GPU parallelization).
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.
I suppose if you are not familiar with visual industry, it might be really difficult to figure out whom to contact in the first place.
And even real products that would benefit from actual visual design might just "hack the visuals" together. So this is not that far out.
They do discuss hiring external resources if you read the article -
"If we had known precisely the globe we wanted to build, we’d have been foolish not to hire GlobeKit. Instead, not knowing what we did not know, we decided to figure it out ourselves. "
And they do have internal designers on the task as well-
"To start, the project’s design lead created the best approximation of her vision of the globe in Photoshop."
Unfortunately, with the internet, you can get away with it as the code, help from StackOverflow and help from work colleagues can be done for free, without the need for a 3D artist.
What a shame for the 3D artists out there, but programmers will get their just deserts when GPT-3+ replaces them soon.
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."
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.
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!
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.
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!
I'm asking because I'm genuinely interested: does a very well-designed globe help in building trust to put you solidly in the middle of a business' revenue? Error messages are not gimmicks at all; but does a correct mapping of dots on to a sphere help you write the excellent docs that Stripe is known for?
(the developers did an incredible job on that infographic and it's great)
> 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.
Effective CEOs very often micromanage details of their company's core product. The most famous was of course Steve Jobs. Here is a quote from former Disney CEO Bob Iger showing that he gives creative feedback on their flagship properties: “I’ve probably seen each episode of The Mandalorian three times,” Iger says. “First, to give some notes. Second, to see the rough cut and the impact of the notes. And now, just recently, I watched all the final cuts so that I could be blown away by how it looks.”
Actually, this happens more often than it should. Sometimes high-level execs have a certain hobby horse they care about; a certain idea they want to push through. Company websites are a prime example because they have high visibility, and their importance tends to be overrated internally.
The problem with this is that those execs often don't have expertise in building these things and end up causing more frustration to the people supposed to do the job rather than being helpful. It is some form of micromanagement.
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.
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.
Since it's three.js you can plug in as many rasterizers, as you have eyes for XR, which makes it distinct from a proper 2D implementation, which would have to fake the arcs:
https://observablehq.com/@armollica/globe-with-lofted-arcs
The philosophical question here: is a stereopair of 2 near-orthographic (near side general Projections still a projection, or is it only a globe, if it's tactile?
In general I would prefer the CanvasRenderingContext2D way to handle this simple display use case, since it looks cleaner and more predictable across devices on screen and doesn't keep your gpu busy when not animating anything.
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.
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
It's not about resistance, it's about compatibility and use case scope.
In 3d a lot of assumptions about the shape of earth and location above ground become non-trivial very quickly. When it comes to precisions required in surveying, local systems are usually prefered, because you can ignore the whole thing of shifting global datums due to plate tectonics.
In essence:a patchwork of local references frames per plate is prefereable to a single global one, when having to work with measurements over the time of decades. Which happen to also work reasonably well in 2D when projected.
In GIS you are not dealing with true 3D data. Only the surface of the earth matters. Using 3D coordinates would be extremely wasteful.
So you need a projection to map the surface data onto a sphere and another one to map the sphere onto the 2d screen. No way around it. Using the same projection for display as for data saves a transformation. Usually it is some variant on Mercator because it is the one people are most familiar with.
In the end unless you are starting to think about true 3D (multi-story buildings, caves,...) thinking of a "3D globe" is just a bit of projection math that doesn't fundamentally change the problem.
It would certainly be interesting as an exam question, for example, to compare 2D and 3D for what it would reveal about each, but in the end it's all about choosing an appropriate model for the task at hand. I'd therefore suggest that pitting 2D against 3D is actively choosing to set up some kind of battle that doesn't actually exist in reality - most of the time there is nothing to be added to an analysis by choosing to store data in 3D, and 2D simplifies all parts of the chain i.e. capture, storage, processing, output etc. I'd strongly reject the idea that but for resistance we'd all be in a wonderland of 3D GIS. People in industry just pick the best tool for the task at hand, and that's almost always 2D.
Perhaps it is not only the resistance of practitioners/ legacy of experience and data in 2d, but also the unavailability of a decent tech stack for 3D GIS.
But why, if completely 3D GIS would be so super awesome, do you think that that decent tech stack doesn't exist? The answer is that for the vast majority of applications of GIS, 3D is just an unhelpful distraction.
I don't want to upset you, but I really think you are not speaking from a position of knowledge if you think otherwise (I have a couple of degrees in Geography including one in GIS specifically, plus 15+ years' experience in the field).
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. :-\
I also checked them out and loved it. With some digging around I think they are in some form of beta now and taking custom orders (hence the black box), but on their instagram (posted about 14 hours ago) they say they are about to release a public 1.0 version which should be affordable for an independent developer and large companies alike based on this link
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.
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/). 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).
Absolutely, maybe I should have used something like Monument Valley (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?
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 :)
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!)
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:
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.
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
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.
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.
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.
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]
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
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.
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.
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?
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/
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