Live data from Hacker News

To design and develop an interactive globe

stripe.com

61–67 of 67 posts

Re: To design and develop an interactive globe

#61
post #36

‘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?

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.

Design and Visual arts are not the same.

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

Re: To design and develop an interactive globe

#62

Earlier quoted context omitted.

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

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

Re: To design and develop an interactive globe

#63

Earlier quoted context omitted.

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!)

Re: To design and develop an interactive globe

#64

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.

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

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.

Re: To design and develop an interactive globe

#66

Earlier quoted context omitted.

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

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.

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

Re: To design and develop an interactive globe

#67

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.

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.

Post reply on HN