WOW, that is amazing. I'm always blown away by stuff like this, where you can actually get a sense of how small we all are and how distant even the closest neighbor stars are.

I just close my eyes for a minute and think (or try to), what would it be like for those people that are finally able to reach, say, Vega (I know it's not the closest). Sure, this is not a big deal in sci-fi, but for reality, it's pretty mind blowing. This is 100% why I seriously want to live for a few hundred years: to have an opportunity to see the first time we actually go to the nearest star.

In the meantime, I guess this will have to suffice.

I also love this image that is not interactive like this, but still mind blowing: http://en.wikipedia.org/wiki/File:Earths_Location_in_the_Uni...

This is without a doubt one of the coolest and most beautiful webgl experiments I have seen in the last few years, it actually struck a real chord with me - music, lighting, effects, the zoom and the sheer beauty of it.

For those people unlucky enough to not be able to load this app (it took me quite a while) here is a particularly fantastic image I took (without asking or any right to, of course) - http://shanearmstrong.co.uk/content/cdn/the_beauty_of_the_co... - I apologize for any slow load times.

This is REALLY COOL!

Could someone explain how this is built or give an overview of how it works? In the 'about' page http://www.chromeexperiments.com/detail/100000-stars/ it says WebGL and CSS3D, but I'm wondering how they fit together and what does what.

Is there a better way to view the source than just 'view source' in chrome?

I know a number of programming languages and I'd like to learn more about how this project works. [Saw the link to book on graphic programming in other comments below http://www.arcsynthesis.org/gltut/index.html, but how to "take apart and study" this project? ] Kudos to anyone who can point me in the right direction. Thanks!

Here is a great Youtube video showing the sizes of objects starting with the moon and working its way up to the largest known star. (Our Sun is a rounding error at that point!) https://www.youtube.com/watch?v=HEheh1BH34Q - if youtube refuses to play because of audio try https://www.youtube.com/watch?v=fKTu6B4Rgek

Here is another one showing an animation of asteroids discovered in our solar system from 1980 to 2011. It starts off pretty tame, and by the end gets scary! https://www.youtube.com/watch?v=ONUSP23cmAE

Amusingly for a "Chrome Experiment" it refuses to run on my chrome (Chrome 23 on Fedora 17 with Ivy Bridge graphics).

Firefox on the same machine works flawlessly.

For those of you interested in the topic, the best publicly available database I've found is http://www.astronexus.com/node/34, and The Book for astronomical computation is Astronomical Algorithms, by Jean Meeus, http://www.willbell.com/math/mc1.HTM

(Shameless plug: I used both to implement the Common Lisp sky renderization engine for my startup, http://greaterskies.com, that makes pretty personalized posters out of thousands of stars)

It's like the galaxy map in Frontier Elite II was, in my imagination.

On my MBP scrolling is backwards (swipe up moves closer), and mouse motion controls the camera offset angle. It's easy to write the code this way, but awkward and surprising during use. It's better to pretend that the hand manipulates the model, with a swipe up pushing it away and a swipe right turning the model counterclockwise around the vertical axis of the view.

Absolutely amazing. By the way, it also works on Firefox. (Though performance isn't... stellar)

This is incredible, and with all the positional, magnitude, and spectral information publicly available, anyone could do it.

I would really love to see a search box that would allow me to jump to a specific star.

MBP Chrome here, I see maybe 50 closest stars. When I zoom out, the stars in galaxy are just transparent squares. Doesn't look like http://shanearmstrong.co.uk/content/cdn/the_beauty_of_the_co... or http://www.chromeexperiments.com/detail/100000-stars/img/ahZ...

67:2 [He] who created death and life to test you [as to] which of you is best in deed - and He is the Exalted in Might, the Forgiving -

67:3 [And] who created seven heavens in layers. You do not see in the creation of the Most Merciful any inconsistency. So return [your] vision [to the sky]; do you see any breaks?

67:4 Then return [your] vision twice again. [Your] vision will return to you humbled while it is fatigued.

Nothing interesting to add except it was an enjoyable way to start the day, thanks. Always good to have something remind you how insignificant you are! The music was great too

edit: loaded it in chrome instead, even better (should have been obvious given it's located on chromeexperiments.com)

I need to learn 3D graphics for some of my scientific projects. Specifically, I want to rotate clouds of points just as shown here. I have no idea where to start with doing this, however. Can somebody point me to a good tutorial or other resource in 3D graphics?

I wonder if there are clusters where distance between neighbouring stars are much less than with Sun and Proxima Centauri. Would these locations provide better opportunities for space faring civilizations to reach other star systems?

Eventually crashed Safari on my rMBP, but this seems to be a trend, so possibly Safari's fault (and would explain why WebGL is not enabled by default).

In any case, great visualisation. Would be a perfect use for a 3D monitor.

As cool as this is, if you have an iPad check out Star Walk. It's really really cool, and if you hold your iPad up to the sky it'd show you what the sky would look like if there isn't any pollutions.

Awesome! The only issue is that the visualization makes it look like we are in a cluster of stars. That is not correct. We're part of the diffuse field star population in the Milky Way.

I love the way they made the stars - from close a sun actually looks like a pile of hot, glowing, boiling gas, and not like cold orange sphere you can see pretty much everywhere else.

If your interested in simulating the physics of the universe checkout Universe Sandbox http://universesandbox.com/

Was I the only one really hoping for "Reticulating Splines"?

I am on rMBP and it hardlocked Chrome after I navigated towards the sun and clicked the information button about the sun. Worked fine until then, really cool.

OMG, someone pinch me, nexus 10 was born for this :)

Wow, this is great. Reminds me of Mass Effect and its presentation of planets and their descriptions. At least this stuff is real! :)

If you just want to rotate point clouds, it might be hard to do better than taking apart and studying a project that does that (like this one).

http://www.arcsynthesis.org/gltut/index.html will give you a good general background, though.

I don't know of a good one, so I'll write one here. This focuses on how things work, rather than how to use existing APIs, because I've basically never used GL. What's below is short and doesn't have much math, but it should be enough to allow someone who knows linear algebra and 2-D graphics to both understand and rederive most of 3D graphics.

To rotate a point cloud, you multiply each point by a rotation matrix to get the rotated point. A rotation matrix that rotates around the X-axis looks like

    [[1  0  0]
     [0  c  s]
     [0 -s  c]]

where s and c are the sin and cos of the angle you want to rotate. Then you can do an orthographic projection by just dropping the Z coordinate, leaving just X and Y coordinates (which you may need to scale to your screen), or a perspective projection by dividing X and Y by Z. (Be wary of division by zero.)

The usual approach is to maintain the original points unrotated and make a rotated copy of them for every frame, instead of overwriting them with a rotated version every frame, so that numerical errors don't accumulate and you can get away with single-precision floating-point. Also, conventionally, positive Z coordinates are in front of the camera and negative Z coordinates are behind it.

If the above isn't sufficiently clear, there's some code I wrote to generate an ASCII-art animation of a perspective-projected point cloud (the corners of a cube) at http://lists.canonical.org/pipermail/kragen-hacks/2012-April.... It's 15 lines of code and the only library it depends on are Python's functions to sleep for a fraction of a second, output stuff to stdout, and round to integer.

EXTRAS:

DISTANCE: For things that aren't points, you might be interested in how far away they are from the camera, too, like to scale them or figure out which ones are in front. That's the Z-coordinate after you rotate into camera space.

TRANSFORM COMPOSITION: If you want to rotate around two axes, it's probably better to multiply the two rotation matrices together, then multiply each point by the resulting transformation matrix, rather than doing two matrix multiplies for each point. You can also scale camera space to screen coordinates this way.

TRANSLATION: If you want to move the camera, you probably want to translate your points so the camera is at the origin before rotating them. If you represent your transformations as 4x4 matrices, with a possibly implicit fourth element in each point vector that is 1, you can represent translation in your transformation matrices too.

MULTIPLE SEPARATELY MOVING OBJECTS: A point cloud is a single rigid object. But whether you're drawing point clouds or something more complicated, it's often interesting to be able to move multiple objects separately. The usual way is to go from two coordinate systems, camera and world, to N: camera, world, and one for each object. Each object has a transformation matrix that maps its object space into world space. You move the object by changing its transformation matrix.

POLYGONS: If you're drawing polygons, straight lines are still straight lines when you rotate them, and in either perspective or orthographic projections, so you can just rotate and project the corners of the polygons into your canvas space, and then connect them with 2-D straight lines (or fill the resulting 2-D triangle).

FLAT SHADING: The color resulting from ordinary illumination ("diffuse reflection") is the underlying color of the polygon, multiplied by the cosine of the angle between the normal (perpendicular) to the surface and the direction of illumination; it's easiest to compute that cosine by taking a dot-product between two unit vectors, and to compute the normal by normalizing a cross-product between two of the sides. If you have more than one lighting source, add together the colors generated by each lighting source. You probably want to treat negative cosines as zero, or you'll get negative lighting when faces are illuminated from behind.

BACKFACE REMOVAL: if you're drawing a single convex object made of polygons, you can do correct hidden surface removal just by not drawing polygons whose normal points away from the camera (has a positive Z component). This is a useful optimization even if your object is more complicated, because it halves the load on the heavier-weight algorithms below.

HIDDEN SURFACE REMOVAL: If your polygons don't intersect, or only intersect at their edges, you can use the "painter's algorithm" to get correctly displayed hidden surfaces by just drawing them in order from the furthest to the closest; if they do intersect, you can either cut them up so they don't intersect any more, or you can use a "Z buffer" which tells you which object is closest to the camera at each pixel --- as you draw your things, you check the Z buffer to see what's the currently closest Z coordinate at each pixel you're drawing, and if the relevant point on that object has a lower Z coordinate, you update that pixel in both the Z buffer and the canvas.

SMOOTH SHADING: you can get apparently smooth surfaces out of quite rough polygon grids by storing a separate surface normal at each vertex, and then instead of coloring the whole polygon a single flat color, interpolate. You can either compute the colors at the corners of the polygons and interpolate the colors at each point you draw (Gouraud shading) or you can interpolate the normals and redo the lighting calculation for each point (Phong shading), which gives you dramatically better results if you have specular highlights.

SPECULAR HIGHLIGHTS: The diffuse-illumination calculation explained in "FLAT SHADING" above is sufficient for things that aren't shiny at all. For things that are somewhat shiny, you want "specular highlights", and the usual way to do those is to do the lighting calculation a second time, but instead of directly using the cosine of the angle between the light source direction and the surface normal, you take that cosine to some power (called the "shininess" or "Phong exponent") first. The 5th power is pretty shiny.

FOG: Faraway things fade exponentially. That is, you take the density of the fog (a fraction slightly less than 1) to the power of the Z coordinate of the point on the object, and multiply that by the color of the object.

TEXTURE MAPPING: If you want your surfaces not to be a single solid color, you can use a raster image (called a "texture") to map colors onto the surface. You just figure out where you are on the surface (by doing a matrix multiply from your surface point into "texture space") and figure out which texture pixel ("texel") you're at, or which ones you should interpolate between. (You can also use some other function to generate the color, rather than having an explicitly stored texture. The important thing is that it maps a 3-D point in object space to a color.) This is the start of the whole universe of "shaders", which represents a big part of current 3-D work. Another application of shaders is bump mapping:

BUMP MAPPING: If you're doing Phong shading, you can get apparent texture (in the usual sense: something you could feel if you could touch the object) on your surfaces without having to transform more points by simply perturbing the interpolated surface normals you're using to do your shading calculations. It's helpful if you perturb them in a deterministic way so that the texture moves with the surface.