Screenshot from the application

Want to watch Milky Way online? New visualization service from Google called 100,000 Stars, allows you to take tours of our cosmic neighborhood, both independently and with the help of an interactive tour.

Also available detailed information about the closest luminaries to us. Knowledge of English is necessary, but even if you do not know it, you can listen to relaxing music and watch beautiful space animation.

Galaxy travel made possible

But recently, thanks to interactive visualization of our Galaxy, everyone has the opportunity to travel through the expanses of the Milky Way. Now it is enough to open the service "Our Galaxy 3D and 100,000 Stars" in the browser and immerse yourself in a virtual journey in space. Developed by Google, the app includes location data for nearly 120,000 stars in the Milky Way, collected from a variety of sources, including space missions.

Navigation

Navigating the interactive map is done by panning with the mouse or touch pad.

Clicking on the star of interest will display information about it. In this case, the camera approaches directly to the selected star, and all the necessary information is displayed in the window next to it. This makes it possible to study in detail the objects of our Galaxy.

Music

The journey through the interactive space is accompanied by musical works by composer Sam Hulink, who is also known for writing music for computer games, such as Mass Effect.

Good day.
Do you know what is the difference between your computer and a spaceship?
Correct answer: everything, but not this time.

100,000 Stars is one of creative projects google to visualize our galaxy. There are just too many stars inside. You can move between them and, in the meantime, assess the scale of the universe - it’s enough Nice picture this allows. Management is carried out by the mouse.

All this beauty was written on the THREE.js engine, combined with CSS and WebGL to display text. Information about the stars and their coordinates is taken from the HYG database, which in turn is a compilation of three others.
According to one of the project participants, the idea was born as a side effect of engine research.

And, a small excerpt based on real events.

Quite a bit of time has passed since the end of Michael Chang ( approx. Google creative team member) of one of his projects. The project was defeated, and it seemed that everything was finished. The customers were happy the target audience positively appreciated the efforts of the master, and the master himself, to be honest, was a little proud of the result of his labors. Everything is back to normal. However, over time, the joy of victory began to gradually give way to the frailty of being. The usual pace of life of the deadliner required a new portion of coffee, but not a relaxed reading of the news feed in between long yawns.
Out of boredom, Michael decided to resume his experiments on the THREE.js engine. It was impossible to call these experiments something unusual - rather, he simply explored new tool, like any self-respecting master who wants to develop further in his profession. But in the case of programming, it certainly couldn't end well.
It was after midnight on the clock when a slight chill suddenly ran through Michael's body. The master noticed that with some changes in the scale of the scene, the output is incredibly beautiful pictures. These paintings became even more interesting after adding additional particles. With multiple magnification, each point of the image was blurred, creating the illusion of observation through a microscope. At a distance, the scene looked like a small island in distant space. Michael thoughtfully paced the room. I didn't want to sleep at all. Ideas haunted him. Not the last role was played by the recently completed Mass Effect.
The sun was barely out of the horizon when the parser let out a shrill squeak. The master shuddered. On the dark screen, the only inscription froze - "Total: 119.617". The day has already gone well. One hundred and nineteen thousand excellent stars, along with their coordinates, hid somewhere on the hard drive. It remains to breathe a little life into this bunch of bytes.

The original is cut off and pages of code appear instead...

P.S. As it turned out, this is already

(Attention to those with speakers turned on: mysterious music is playing)

So, in November 2012, astronomy enthusiasts from Google introduced a new web application "100,000 Stars", demonstrating the possibilities Chrome browser on processing 3D content using WebGL. The application allows you to visualize a realistic three-dimensional map of the part of the galaxy surrounding the Sun, with which you can visually estimate the distance and position of certain stars. For the image of the stars and the galaxy, real photographs presented on the NASA website are used, the descriptions of the stars are taken from Wikipedia.
I warn you right away - for those who have a lot of work, it is better not to include this business in working hours, there is a risk of getting stuck! ;)
(Also, it seemed to me that non-chrome browsers are quite obviously slow on this application, so here it is.)

When the window with the Universe loads, we see something like this:

The visualization center is positioned on the Sun. By changing the scale with the mouse scroll (or the slider on the right), you can meditate on our Star:

The same can be done by turning on the familiarization mode from the very beginning (in the upper left corner). The universe will spin, the Sun will approach, accompanying explanatory "carts" will appear.
One of the frames of the further review in the familiarization mode:

Another shot of the introductory 3D show. At any time, the "show" can be paused by pressing the foreign word "stop" at the bottom of the screen.


At any stage, the Screen Space can be twisted-turned in different sides by "grabbing" it with the mouse.

In the upper left corner there is also a switch to color "spectral analysis" of stars. It looks like this:


Naturally, at any time you can return to the original view.

At a certain scale, their names appear near the stars, which are quite clickable. By clicking on the name of a star, we see how it is rapidly approaching us, pulsing and flaunting, and a squeeze from Wikipedia appears on the left side of the screen:


At the same time, this star is now the center of the on-screen stellar space, and the Universe will have to be "twisted and rotated" with the mouse relative to it. To switch the coordinate center to the Sun again, in the same upper left corner already familiar to us, in this case, the corresponding button appears.

To heighten perception (or rest after virtual travel) I'll add my favorite "thematic" clips here.

Michael Chang, from Google Teams on the HTML5rocks website wrote an interesting article about the end of the Chrome experiment, the visualization of the nearest stars "100,000 Stars". The project was developed with THREE.js and CSS3D. He described part of the project, managing shaders, and how to use css text combined with WebGL.
Demo
The purpose of writing this article is to show the possibilities of modern web technologies to Russian-speaking Internet users, in this case THREE.js is used to visualize nearby stars in the Milky Way. WebGL technology, at the time of writing this article, is correctly supported only by Google Chrome!

Space

After the Globus was completed, experiments were carried out with THREE.js. It turned out that it is possible to change the scale of the scene, and increase the number of effects.

When the depth of field was really extreme, distant objects became really blurry, much like tilt-shift photography works to create the illusion of looking at microscopic scenes. By tilting, the effect made it appear as if you were looking into deep space.

To place the stars in the scene, the astronexus.com astronomy database was used.

The first step is to place each star in the catalog as a single particle. Some of the stars in the catalog have their own names, indicated here.

The placement of stars from astronomy data in 3D space did not take long, although there are exactly 119617 stars in the set, for modern video card GPU it wasn't difficult. For individually defined stars, a CSS overlay is used, using the same method as for the globe.

Creation of the galaxy

In my opinion, Michael succeeded in generating a model of the galaxy, with a stunning view of the Milky Way.

Prototype of the particles of the Milky Way system

To form the Milky Way, 100,000 particles are added and placed in a spiral.
Many have tried to shape the Milky Way by using the particles as a flat representation of the galaxy for the particles, and to give the Milky Way a more realistic appearance.

Image of the spiral galaxy NGC 1232B, approximately 70 million light-years from Earth.
Each GL unit is a light year. In this case, the sphere is 110,000 light years wide.

• One GL block is a pixel in 3D, like one light year

First there was the decision to rotate the galaxy scene itself rather than move the camera. But you need to zoom in and see what's in the pinwheel, so you can drag left and right with your mouse, rotate the object, and zooming is just a matter of changing camera.position.z.

Compare with Prototype particles and the particles are accompanied by a flat image.

At this stage, being able to imagine the relative size of the solar system by comparing from the radius for visualization, the Oort Cloud is selected as a model of the solar system, you can also visualize the simplified orbit of the Earth, and the actual radius of the sun in comparison.

The orbit of the sun, and the planets in the sphere, represent the Kuiper belts.

The sun was hard to make. The surface of the Sun is hot helium plasma, which needs momentum to change over time. An infrared image of the Sun's surface was modeled using a raster texture. The surface shader renders the color based on the grayscale of this texture and renders the look in a separate color ramp. When this activity shifts over time it creates these lava-like distortions.

A similar technique has been used for the Sun's corona, except that it will be a flat spritemap that is always facing the camera with THREE.Gyroscope(); .

The solar flares were created using shaders, spinning only along the edges of the sun's surface. Shader with noise function.
There are some questions about GL accuracy here. All variables for accuracy were pre-defined in THREE.js, when other star systems were modeled, it was a lot of work to increase accuracy.

Code for the Sun and other stars.

There were a few hacks I used to soften Material.polygonoffset . This was used to force the plane to be on the top of the Sun's surface and realized the light rays coming from the sphere.

Another problem is with accuracy in that the star models start to judder when the scene is zoomed in. To fix this I had to "zero out" the rotation scene and separately rotate the star map model and environment to give the illusion that you are seeing stars.

Implement highlight

Space visualization using LensFlare. THREE.LensFlare is just for this purpose, all you have to do is add it to the scene.

// This function retuns a lesnflare THREE object to be .add()ed to the scene graph function addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff); lensFlare = new THREE. LensFlare(overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor); // we"re going to be using multiple sub-lens-flare artifacts, each with a different size lensFlare.add(textureFlare1, 4096, 0.0, THREE.AdditiveBlending ); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); // and run each through a function below lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = new THREE.Vector3(x,y,z); lensFlare.size = size ? size: 16000 ; return lensFlare; ) // this function will operate over each lensflare artifact, moving them around the screen function lensFlareUpdateCallback(object) ( var f, fl = this.lensFlares.leng th; var flare; var vecX = -this.positionScreen.x * 2; var vecY = -this.positionScreen.y * 2; varsize = object.size ? object.size: 16000; var camDistance = camera.position.length(); for(f = 0; f< fl; f ++) { flare = this.lensFlares[ f ]; flare.x = this.positionScreen.x + vecX * flare.distance; flare.y = this.positionScreen.y + vecY * flare.distance; flare.scale = size / camDistance; flare.rotation = 0; } }

Texture

Plane, to help orientation in space.

THREE.CylinderGeometry() was applied to the sun. To create a ray of light, change the time offset texture as follows:

Mesh.material.map.needsUpdate = true; mesh.material.map.onUpdate = function()( this.offset.y -= 0.001; this.needsUpdate = true; )

Star color

Each star has a different color based on the color-index. In short, red blue purple stars are hotter, white and orange in between.

Color each star with its own color based on this data. The way to do this was with the material shader attributes applied to the particles.

Var shaderMaterial = new THREE.ShaderMaterial(( uniforms: datastarUniforms, attributes: datastarAttributes, /* ... etc */ )); var datastarAttributes = ( size: ( type: "f", value: ), colorIndex: ( type: "f", value: ), );

Filling the ColorIndex array so that each particle has its own unique color.

Color scale to find the right color from star color readings.

Access bitmap color data with JavaScript. First load the image on the DOM, drag it into the graphic element to access the graphic bitmap.

// make a blank canvas, sized to the image, in this case gradientImage is a dom image element gradientCanvas = document.createElement("canvas"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // draw the image gradientCanvas.getContext("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // a function to grab the pixel color based on a normalized percentage value gradientCanvas.getColor = function(percentage)( return this.getContext("2d").getImageData(percentage * gradientImage.width,0, 1, 1).data ; )

This method is also used for coloring individual stars in the star model.

The same technique is used to make a color search for the spectral class of a star.

Number of shaders

The project uses many shaders to perform all visual effects so Michael Chang wrote the shader loader.

// list of shaders we"ll load var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...etc...*/]; // a small util to pre-fetch all shaders and put them in a data structure (replacing the list above) function loadShaders(list, callback)( var shaders = (); var expectedFiles = list.length * 2; var loadedFiles = 0; function makeCallback(name, type)( return function(data)( if(shaders === undefined)( shaders = (); ) shaders = data; // check if done loadedFiles++; if(loadedFiles == expectedFiles)( callback(shaders); ) ); ) for(var i=0; i

LoadShaders() takes a list of shader filenames, tries to load its data, and then simply replaces the list with objects. As a result, in the THREE.js form, you can pass shaders to it like this:

Var galacticShaderMaterial = new THREE.ShaderMaterial(( vertexShader: shaderList.galacticstars.vertex, fragmentShader: shaderList.galacticstars.fragment, /*...*/ ));

CSS and captions at the top of THREE.JS

The project, Globe, displays text labels at the top of the THREE.js scene. THREE.Projector() was used to display labels in the right position on the screen, and markup with a CSS table in the right place.

CSS3D will place the text on top of WebGL for this look at the source code. Update the THREE.js matrix function:

/* Fixes the difference between WebGL coordinates to CSS coordinates */ function toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a .elements, a.elements, -a.elements, a.elements, a.elements, a.elements, -a.elements, a.elements, a.elements, a.elements, -a.elements, a.elements, a.elements]; ) else ( f = [ a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements, a.elements , a.elements, a.elements, a.elements, a.elements, a.elements, a.elements ]; ) for (var e in f) ( f[e] = epsilon(f[e]); ) return "matrix3d(" + f.join(",") + ")"; )

Now the text no longer looms in front of the camera. To do this, we used THREE.Gyroscope () , which causes the Object3D to lose its orientation by inheriting from the scene. This technique is called "billboarding" and the gyroscope is perfect for this.

Marks are always dropped from the camera by connecting it to THREE.Gyroscope().

Sounds

I've used the audio tag to play music, however even in Chrome it's unreliable - sometimes it just doesn't loop. At the end of this double audio tag hack is used to check the end of the playback and cycling to another tag for the game. What was disappointing was that it *yet* wasn't a perfect cycle all the time, alas, I feel like it was the best I could do.

var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // make it wait 15 seconds before playing again setTimeout( playB, 15000); ), false); musicB.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // otherwise the music will drive you insane setTimeout(playA , 15000); ), false); // okay so there"s a bit of code redundancy, I admit it musicA.play();

Finally

Perhaps soon in Googlemap we will see not only a 3D map of the earth, but also a map of our galaxy and pave a short way from Mars to Venus :-D. Modern web technologies make it possible to do this, not only for space games, but also for the browser.