Скриншот из приложения

Хотите Млечный путь смотреть онлайн? Новый сервис визуализации от компании Google под названием 100000 звезд, позволяет совершать экскурсии по нашим космическим окрестностям, как самостоятельно, так и при помощи интерактивного тура.

Также имеется подробная информация о самых ближайших к нам светилах. Знание английского необходимо, но даже если вы его не знаете, то можно послушать релаксирующую музыку и посмотреть красивую космическую анимацию.

Путешествие по галактике стало возможным

Но с недавнего времени благодаря интерактивной визуализации нашей Галактики возможность путешествия по просторам Млечного Пути появилась у каждого. Теперь достаточно открыть в браузере сервис «Наша Галактика 3D и 100 000 Звезд» и погрузиться в виртуальное путешествие в космосе. Разработанное специалистами Google, приложение включает в себя данные о местоположении почти 120 000 светил Млечного Пути, собранных из различных источников, в том числе космических миссий.

Навигация

Перемещение по интерактивной карте осуществляется путем панорамирования при помощи мыши или сенсорной панели.

Нажатие на интересующей звезде позволит отобразить информацию о ней. При этом камера приближается непосредственно к выбранной звезде, а в окне рядом выводится вся необходимая информация. Это дает возможность детально изучить объекты нашей Галактики.

Музыка

Путешествие по интерактивному пространству сопровождается музыкальными произведениями композитора Сэма Хьюлинка, который также известен по написанию музыки для компьютерных игр, таких как Mass Effect.

Доброго времени суток.
Знаете ли вы, в чем разница между вашим компьютером и космическим кораблем?
Правильный ответ: во всем, но не в этот раз.

100,000 Stars - это один из творческих проектов google по визуализации нашей галактики. Внутри просто очень много звезд. Между ними можно перемещаться и, между делом, оценивать масштабы вселенной - достаточно красивая картинка это позволяет. Управление осуществляется мышью.

Вся сия красота была написана на движке THREE.js, в комбинации с CSS и WebGL для отображения текста. Информация о звездах и их координатах взята из базы HYG , которая в свою очередь является компиляцией трех других.
По словам одного из участников проекта, идея родилась как побочный эффект исследования движка.

И, небольшой отрывок, основанный на реальных событиях.

Совсем немного времени прошло после окончания Михаэлем Чангом (прим. участник творческой команды гугла ) одного из своих проектов. Проект был повержен, и, казалось, что все закончено. Заказчики были довольны, целевая аудитория положительно оценила старания мастера, да и сам мастер, честно говоря, слегка гордился результатом своих трудов. Все вернулось на круги своя. Однако, с течением времени радость победы начала понемногу уступать бренности бытия. Привычный ритм жизни дедлайнера требовал новой порции кофе, но никак не расслабленного чтения новостной ленты в перерывах между длинными зевками.
От скуки Михаэль решил возобновить свои опыты над движком THREE.js. Нельзя было назвать эти опыты чем то необычным - скорее он просто исследовал новый инструмент, как и всякий уважающий себя мастер, желающий развиваться в своей профессии дальше. Но в случае с программированием - это определенно не могло закончится ничем хорошим.
На часах было за полночь, когда по телу Михаэля внезапно пробежал легкий холодок. Мастер заметил, что при некоторых изменениях масштаба сцены, на выходе получаются невероятно красивые картины. Эти картины становились еще интереснее после добавления дополнительных частиц. При многократном увеличении каждая точка изображения размывалась, создавая иллюзию наблюдения в микроскоп. При отдалении же - сцена была похожа на маленький островок в далеком космосе. Михаэль задумчиво мерял шагами комнату. Спать не хотелось совсем. Идеи преследовали его. Не последнюю роль сыграл недавно пройденный Mass Effect.
Солнце едва вылезло из за горизонта, когда парсер издал пронзительный писк. Мастер вздрогнул. На темном экране замерла единственная надпись - «Total: 119,617». День уже удался. Сто девятнадцать тысяч отменных звезд вместе со своими координатами затаились где то на винчестере. Осталось вдохнуть в эту кучу байтов немного жизни.

Оригинал обрывается, и вместо него появляются страницы кода...

P.S Как оказалось, это уже

(Внимание тем, у кого включены колонки: играет загадочная музыка)

Итак, в ноябре 2012 года любители астрономии из компании Google представили новое web-приложение «100,000 Stars», демонстрирующее возможности браузера Chrome по обработке трёхмерного контента с использованием WebGL. Приложение позволяет визуализировать приближенную к реальности трёхмерную карту окружающей Солнце части галактики, при помощи которой можно наглядно оценить расстояние и позицию тех или иных звёзд. Для изображения звёзд и галактики использованы реальные фотографии, представленные на сайте NASA, описания звёзд взяты из Wikipedia.
Предупреждаю сразу - тем, у кого много работы, лучше не включать это дело в рабочее время, есть риск здорово залипнуть! ;)
(Также, как мне показалось, не-хромированные браузеры довольно явно подтормаживают на этом приложении, так что вот.)

Когда окно со Вселенной загрузится, мы видим примерно такую картину:

Центр визуализации спозиционирован на Солнце. Изменив масштаб скроллом мыши (или ползунком справа), можно помедитировать на нашу Звезду:

То же самое можно сделать, с самого начала включив режим ознакомления (в верхнем левом углу). Вселенная закружится, приблизится Солнце, появятся сопутствующие пояснительные "телеги".
Один из кадров дальнейшего обзора в режиме ознакомления:

Ещё один кадр ознакомительного 3D-шоу. В любой момент "шоу" можно приостановить, нажав в нижней части экрана иностранное слово "stop".


В любой стадии экранное Пространство можно крутить-вертеть в разные стороны, "ухватив" его мышью.

В верхнем левом углу есть и переключалка на цветовой "спектральный анализ" звёзд. Выглядит это так:


Естественно, в любой момент можно вернуться к исходному виду.

При определённом масштабе возле звёзд появляются их названия, которые вполне кликабельны. Щёлкнув мышью по названию звезды, мы видим, как она стремительно приближается к нам, пульсирует и красуется, а в левой части экрана появляется выжимка из Википедии:


При этом центром экранного звёздного пространства теперь является именно эта звезда, и "крутить-вертеть" мышью Вселенную придётся относительно неё. Чтобы снова переключить центр координат на Солнце, всё в том же уже знакомом нам верхнем левом углу в данном случае появляется соответствующая кнопочка.

Для пущего восприятия (или отдыха после виртуального Путешествия) добавлю-ка я сюда любимые "тематические" клипы.

Майкл Чанг, из команды Google на сайте HTML5rocks написал интересную статью, о окончании эксперимента Chrome, визуализация ближайших звезд «100000 Stars». Проект был разработан с THREE.js и CSS3D. Он описал часть проекта, управление шейдеров, и как использовать текст CSS в сочетании с WebGL.
Демо
Цель написания статьи, показать возможности современных веб-технологий русскоязычным пользователям интернета, в данном случае используется THREE.js для визуализации близлежащих звезд в Млечном Пути. Технологию WebGL, на момент написания этой статьи, корректно поддерживает только Google Chrome!

Пространство

После того, как был завершен Глобус , проводились эксперименты с THREE.js. Оказалось что есть возможность менять масштаб сцены, и увеличивать количество эффектов.

Когда глубина резкости была действительно экстремальной, удаленные объекты стали действительно размыты подобно тому, как со сдвигом и наклоном работает фотография создавая иллюзию, глядя на микроскопические сцены. Наклонив, эффект делал вид, как если бы вы смотрели в глубокий космос.

Для размещения звезд в сцене, использовалась база астрономии astronexus.com .

Первый шаг для размещения каждой звезды в каталоге, как одна частица. Некоторые звезды в каталоге имеют собственные имена, обозначенные здесь.

Размещение звёзд из данных астрономии в 3D-пространстве не заняло много времени, хотя в наборе ровно 119617 звезд, для современных видеокарт GPU это не составило труда. Для индивидуально определённых звезд, использовано наложение CSS, используя такой же метод, как и для глобуса.

Создание галактики

На мой взгляд, Майклу удалось с генерировать модель галактики, с потрясающим видом Млечного Пути.

Прототип частиц системы Млечного Пути

Для формирования Млечного Пути, добавлено 100000 частиц и размещенных по спирали.
Сформировать Млечный Путь пытались многие, используя частицы как плоское изображение галактики для частиц, и придать Млечному Путь больше реальный внешний вид.

Изображение спиральной галактики NGC 1232Б, примерно 70 миллионов световых лет от земли.
Каждая единица GL является световой год. В этом случае сфера шириной 110 тысяч световых лет

• Один блок GL — это пиксель в 3D, как один световой год

Сначала было решение поворачивать саму сцену галактики, а не перемещать камеру. Но нужно приблизить и посмотреть что находится в вертушке, так что бы мышкой перетаскивать влево и вправо, поворачивать объект, а масштабирование это всего лишь вопрос изменения camera.position.z.

Сравните с Прототипом частиц и частицы сопровождаются плоским изображением.

На этом этапе в состоянии представить себе относительные размеры Солнечной системы путем сопоставления из радиуса для визуализации выбрано Облако Оорта как модель солнечной системы, можно также визуализировать упрощенную орбиту Земли, и фактический радиус солнца в сравнении.

Орбита солнца, и планеты в сфере, представляют пояса Койпера.

Солнце трудно было сделать. Поверхность Солнца является горячим гелием плазмы для этого необходим импульс что бы он менялся с течением времени. Было смоделировано с помощью растровой текстуры инфракрасное изображение поверхности Солнца. Поверхность шейдеров делает цвет, основан на градации серого этой текстуры и выполняет вид, в отдельном рампы цвета. Когда этот вид деятельности смещается с течением времени он создает эти лавообразные искажения.

Подобная техника была использована для короны Солнца, кроме того, что это будет плоский спрайт карта, которая всегда обращена к камере с помощью THREE.Gyroscope (); .

Солнечные вспышки были созданы с помощью шейдеров, спиннинг только по краям поверхности Солнца. Шейдеров с функцией шум.
Здесь появились некоторые вопросы в связи с точностью GL. Все переменные для точности были предварительно определены в THREE.js, когда моделировались другие звездные системы для увеличения точности было очень много работы.

Код для Солнца и других звезд.

Были несколько хаков я использовал для смягчения Material.polygonoffset . Это было использовано, чтобы заставить плоскость быть на верхней часть поверхности Солнца и реализовались световые лучи летящие от сферы.

Другая проблема связана с точностью в том, что модели звезд начинают дрожать когда сцена увеличивается в масштабе. Чтобы исправить это, я должен был «обнулить» сцену вращения и отдельно повернуть модель карты звезды и окружающей среды, чтобы создать иллюзию, что вы видите звезды.

Реализовать блик

Визуализация космоса с использованием LensFlare. THREE.LensFlare именно для этой цели, все, что нужно сделать добавить в сцену.

// 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.length; var flare; var vecX = -this.positionScreen.x * 2; var vecY = -this.positionScreen.y * 2; var size = 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; } }

Текстура

Плоскость, для помощи ориентации в пространстве.

THREE.CylinderGeometry() применялась для солнца. Для создания луча света, меняем текстуру смещения во времени следующим образом:

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

Цвет звёзд

Каждая звезда имеет различные цвета, основанные на color-index. Короче, красные синие фиолетовые звезды горячее, белые и оранжевые промежуточные.

Покрасить каждую звезду своим цветом на основе этих данных. Способ сделать это было с атрибутами шейдер материала, применяемого к частицам.

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

Заполнение массива ColorIndex что бы каждая частица имела свой уникальный цвет.

Цветовая шкала для поиска нужного цвета от показаний цвета звезды.

Получить доступ к растровым данным цвета с помощью JavaScript. Сначала загрузится изображение на DOM, втянуть его в графический элемент, для доступа к графическому растровому изображению.

// 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; }

Этот метод используется и для окраски отдельных звезд в модели звёзд.

Этот же прием используется, чтобы сделать цвет поиска для спектрального класса звезды.

Количество шейдеров

В проекте используется много шейдеров для выполнения всех визуальных эффектов, поэтому Майкл Чанг написан загрузчик шейдеров.

// 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() принимает список имен файлов шейдеров, пытается загрузить свои данные, а потом просто заменяет список с объектами. В итоге в THREE.js форму можно передать шейдеры к нему вот так:

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

CSS и надписи в верхней части THREE.JS

В проекте, Глобус, отображаются текстовые метки в верхней части сцены THREE.js. Для отображения меток в нужное положение экрана использовался THREE.Projector() , и разметка таблицей CSS в нужное место.

CSS3D разместит текст на верхнюю часть WebGL для этого посмотрите исходный код. Обновите функцию матрицы THREE.js:

/* 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(",") + ")"; }

Теперь текст больше не маячить перед камерой. Для этого использовали THREE.Gyroscope () , которая заставляет Object3D терять свою ориентацию унаследовав от сцены. Эта техника называется «billboarding», и гироскопом идеально подходит для этого.

Метки всегда выпадают с камеры, подключив его к THREE.Gyroscope().

Звуки

Я использовал тэг аудио для воспроизведения музыки, однако даже в Chrome ненадежно — иногда он просто не в петлю. В конце этой двойной аудио хак тег используется для проверки конца воспроизведения и велосипедные к другой тег для игры. Что было разочарование в том, что это * еще * не идеальный цикл все время, увы, я чувствую, что это было лучшее, что я мог сделать.

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();

В заключение

Возможно, скоро в Googlemap мы увидим не только 3D карту земли но и карту нашей галактики и проложить короткий путь от Марса до Венеры:-D. Современные веб-технологии позволяют это сделать, не только для космических игр, но и для браузера.