To design and develop an interactive globe
stripe.com
stripe.com
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.
So they build other things. Nice work if you can get it.
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.
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.
As a live notebook: https://observablehq.com/@mbostock/spherical-fibonacci-latti...
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?
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."
What a shame for the 3D artists out there, but programmers will get their just deserts when GPT-3+ replaces them soon.
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).
I'd say they're probably one of the biggest champions of people in the "visual arts" among tech companies.
I agree with GP, this reads like a student's first foray into opengl.
I am amazed that there are companies this big that investing so much time into building what’s essentially a gimmick has positive RoI
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."
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.
(the developers did an incredible job on that infographic and it's great)
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.
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.
...as datasets based on 2D map projections.
And different places have different projection systems.
2D projections will be with us for a long time.
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).
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
So what exactly are you talking about?
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.
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.
https://www.openstreetmap.org/user/StephaneP/diary/390290 https://news.ycombinator.com/item?id=20460596
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.
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.us17.list-manage.com/subscribe?u=a3ee0f28d3...
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).
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 :)
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:
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).
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.
https://threejsfundamentals.org/threejs/lessons/threejs-opti...
I want to display it on TV showing our user signups. Reminds me of X-COM.
Also, Tron:Legacy.
The Dymaxion map is what tipped me off to the rabbit hole that is the Dvorak keyboard layout.