Екранна снимка от приложението

Искате ли да гледате Млечния път онлайн? Нова услуга за визуализация от Googleнаречен 100 000 звезди, ви позволява да правите обиколки на нашия космически квартал, както самостоятелно, така и с помощта на интерактивна обиколка.

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

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

Но наскоро, благодарение на интерактивна визуализацияот нашата Галактика, всеки има възможност да пътува из просторите на Млечния път. Сега е достатъчно да отворите услугата „Нашата галактика 3D и 100 000 звезди“ в браузъра и да се потопите във виртуално пътешествие в космоса. Разработено от Google, приложението включва данни за местоположението на близо 120 000 звезди в Млечния път, събрани от различни източници, включително космически мисии.

Навигация

Навигирането в интерактивната карта се извършва чрез панорамиране с мишката или тъчпада.

Щракването върху звездата от интерес ще покаже информация за нея. В този случай камерата се приближава директно до избраната звезда и цялата необходима информация се показва в прозореца до нея. Това дава възможност да се изследват в детайли обектите на нашата Галактика.

Музика

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

Добър ден.
Знаете ли каква е разликата между вашия компютър и космически кораб?
Верен отговор:всичко, но не и този път.

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

Цялата тази красота е написана на двигателя THREE.js, комбиниран с CSS и WebGL за показване на текст. Информацията за звездите и техните координати е взета от базата данни HYG, която от своя страна е компилация от три други.
Според един от участниците в проекта идеята се е родила като страничен ефект от изследването на двигателя.

И малък откъс, базиран на реални събития.

Измина доста време от края на Майкъл Чанг ( прибл. Член на творческия екип на Google) на един от неговите проекти. Проектът беше провален и изглеждаше, че всичко е завършено. Клиентите бяха доволни целевата аудиторияположително оцени усилията на господаря, а самият господар, честно казано, беше малко горд от резултата от труда си. Всичко се нормализира. С течение на времето обаче радостта от победата започна постепенно да отстъпва място на крехкостта на живота. Обичайният ритъм на живот на крайния срок изискваше нова порция кафе, но не и спокойно четене на новинарската емисия между дългите прозявки.
От скука, Майкъл реши да поднови експериментите си върху двигателя THREE.js. Беше невъзможно тези експерименти да се нарекат нещо необичайно - по-скоро той просто изследва нов инструмент, като всеки уважаващ себе си майстор, който иска да се развива в професията си. Но в случая с програмирането със сигурност не може да свърши добре.
Часовникът беше след полунощ, когато внезапно по тялото на Майкъл премина лек студ. Майсторът забеляза, че с някои промени в мащаба на сцената, изходът е невероятно красиви снимки. Тези картини станаха още по-интересни след добавянето на допълнителни частици. С многократно увеличение всяка точка от изображението беше замъглена, създавайки илюзията за наблюдение през микроскоп. Отдалеч сцената изглеждаше като малък остров в далечния космос. Майкъл крачеше замислено из стаята. Изобщо не исках да спя. Идеите го преследваха. Не последната роля изигра наскоро завършеният Mass Effect.
Слънцето едва се скри от хоризонта, когато анализаторът издаде пронизително писукане. Майсторът изтръпна. На тъмния екран единственият надпис замръзна - "Общо: 119.617". Денят вече мина добре. Сто и деветнадесет хиляди отлични звезди, заедно с техните координати, бяха скрити някъде на твърдия диск. Остава да вдъхнем малко живот на този куп байтове.

Оригиналът е отрязан и вместо него се появяват страници с код...

P.S. Както се оказа, това вече е

(Внимание към тези с включени високоговорители: свири мистериозна музика)

И така, през ноември 2012 г. ентусиастите на астрономията от Google представиха ново уеб приложение „100 000 звезди“, демонстрирайки възможностите Браузър Chromeвърху обработката на 3D съдържание с помощта на WebGL. Приложението ви позволява да визуализирате реалистична триизмерна карта на частта от галактиката около Слънцето, с която можете визуално да оцените разстоянието и позицията на определени звезди. За изображението на звездите и галактиката се използват реални снимки, представени на уебсайта на НАСА, описанията на звездите са взети от Wikipedia.
Предупреждавам ви веднага - за тези, които имат много работа, е по-добре да не включват този бизнес в работно време, има риск да се забиете! ;)
(Освен това ми се стори, че браузърите без Chrome са доста очевидно бавни в това приложение, така че ето го.)

Когато прозорецът с Вселената се зареди, виждаме нещо подобно:

Центърът за визуализация е разположен на Слънцето. Като промените скалата с превъртане на мишката (или плъзгача вдясно), можете да медитирате върху нашата звезда:

Същото можете да направите, като включите режима за запознаване от самото начало (в горния ляв ъгъл). Вселената ще се завърти, Слънцето ще се приближи, ще се появят съпътстващи обяснителни "колички".
Един от кадрите на по-нататъшния преглед в режим на запознаване:

Още един кадър от встъпителното 3D шоу. По всяко време "шоуто" може да бъде спряно чрез натискане на чуждата дума "стоп" в долната част на екрана.


На всеки етап екранното пространство може да бъде усукано-предадено различни страникато го "хванете" с мишката.

В горния ляв ъгъл има и превключвател за цветен "спектрален анализ" на звездите. Изглежда така:


Естествено, по всяко време можете да се върнете към първоначалния изглед.

В определен мащаб имената им се появяват близо до звездите, които са доста кликащи. Щраквайки върху името на звезда, виждаме как тя бързо се приближава към нас, пулсира и се показва, а от лявата страна на екрана се появява стискане от Wikipedia:


В същото време тази звезда вече е центърът на екранното звездно пространство и Вселената ще трябва да се „завърти и завърти“ с мишката спрямо нея. За да превключите отново центъра на координатите към Слънцето, в същия горен ляв ъгъл, който вече ни е познат, в този случай се появява съответният бутон.

За засилване на възприятието (или почивка след виртуално пътуване) Тук ще добавя любимите си "тематични" клипове.

Майкъл Чанг, от Екипи на Googleна уебсайта HTML5rocks написа интересна статия за края на експеримента на Chrome, визуализацията на най-близките звезди „100 000 звезди“. Проектът е разработен с THREE.js и CSS3D. Той описа част от проекта, управлението на шейдърите и как да се използват css тексткомбиниран с WebGL.
Демонстрация
Целта на написването на тази статия е да покаже възможностите на съвременните уеб технологии на рускоезичните интернет потребители, в този случай THREE.js се използва за визуализиране на близки звезди в Млечния път. Технологията WebGL към момента на писане на тази статия се поддържа правилно само от Google Chrome!

пространство

След като Globus беше завършен, бяха проведени експерименти с THREE.js. Оказа се, че е възможно да се промени мащабът на сцената и да се увеличи броят на ефектите.

Когато дълбочината на рязкост беше наистина екстремна, отдалечените обекти ставаха наистина замъглени, подобно на фотографията с наклон и изместване, за да създадете илюзията за гледане на микроскопични сцени. Чрез накланяне ефектът създава впечатлението, че гледате в дълбокия космос.

За поставянето на звездите в сцената е използвана астрономическата база данни astronexus.com.

Първата стъпка е да поставите всяка звезда в каталога като отделна частица. Някои от звездите в каталога имат собствени имена, посочени тук.

Поставянето на звезди от астрономически данни в 3D пространството не отне много време, въпреки че в комплекта има точно 119617 звезди, за съвременните видеокарта GPUне беше трудно. За индивидуално дефинирани звезди се използва CSS наслагване, като се използва същият метод като за земното кълбо.

Създаване на галактиката

Според мен Майкъл успя да създаде модел на галактиката с невероятна гледка към Млечния път.

Прототип на частиците от системата на Млечния път

За да се образува Млечният път, се добавят 100 000 частици и се поставят в спирала.
Мнозина са се опитвали да оформят Млечния път, като използват частиците като плоско представяне на галактиката за частиците и да придадат на Млечния път по-реалистичен вид.

Изображение на спиралната галактика NGC 1232B, приблизително на 70 милиона светлинни години от Земята.
Всяка GL единица е светлинна година. В този случай сферата е широка 110 000 светлинни години.

• Един GL блок е пиксел в 3D, като една светлинна година

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

Сравнете с прототипните частици и частиците са придружени от плоско изображение.

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

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

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

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

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

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

Имаше няколко хака, които използвах, за да смекча Material.polygonoffset. Това беше използвано, за да принуди самолета да бъде на върха на повърхността на Слънцето и да реализира светлинните лъчи, идващи от сферата.

Друг проблем е с точността, тъй като звездните модели започват да треперят, когато сцената се увеличи. За да поправя това, трябваше да „нулирам“ ротационната сцена и отделно да завъртя модела на звездната карта и околен святза да създадете илюзията, че виждате звезди.

Внедрете акцент

Космическа визуализация с помощта на LensFlare. THREE.LensFlare е само за тази цел, всичко, което трябва да направите, е да го добавите към сцената.

// Тази функция връща обект lesnflare THREE, който да бъде .add()ed към графичната функция на сцената addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff); lensFlare = new THREE. LensFlare(overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor); // ние ще използваме множество артефакти за под-лещи, всеки с различен размер 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); // и пуснете всеки чрез функция по-долу lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = new THREE.Vector3(x,y,z); lensFlare.size = size ? size: 16000; return lensFlare; ) // тази функция ще работи върху всеки lensflare артефакт, премествайки ги из екранната функция 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? обект.размер: 16000; var camDistance = camera.position.length(); за (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 = вярно; mesh.material.map.onUpdate = function()( this.offset.y -= 0.001; this.needsUpdate = true; )

Звезден цвят

Всяка звезда има различен цвят въз основа на цветовия индекс. Накратко, червените сини лилави звезди са по-горещи, бели и оранжеви между тях.

Оцветете всяка звезда със собствен цвят въз основа на тези данни. Начинът да направите това беше с атрибутите на материалния шейдър, приложени към частиците.

Var shaderMaterial = new THREE.ShaderMaterial(( униформи: datastarUniforms, атрибути: datastarAttributes, /* ... и т.н. */ )); var datastarAttributes = ( размер: ( тип: "f", стойност:), colorIndex: ( тип: "f", стойност:),);

Попълване на масива ColorIndex, така че всяка частица да има свой уникален цвят.

Цветова скала за намиране на правилния цвят от показанията на цвета на звездата.

Достъп до цветни данни за растерно изображение с JavaScript. Първо заредете изображението в DOM, плъзнете го в графичния елемент за достъп до графичното растерно изображение.

// направете празно платно, оразмерено спрямо изображението, в този случай gradientImage е елемент на изображение dom gradientCanvas = document.createElement("canvas"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // начертайте изображението gradientCanvas.getContext("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // функция за прихващане на цвета на пикселите въз основа на нормализирана процентна стойност gradientCanvas.getColor = function(percentage)( return this.getContext("2d").getImageData(percentage * gradientImage.width,0, 1, 1).data ;)

Този метод се използва и за оцветяване на отделни звезди в звездния модел.

Същата техника се използва за извършване на цветово търсене за спектралния клас на звезда.

Брой шейдъри

Проектът използва много шейдъри за изпълнение на всички визуални ефектитака Майкъл Чанг написа зареждащия инструмент за шейдъри.

// списък с шейдъри, които ще заредим var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...etc...*/]; // малка помощна програма за предварително извличане на всички шейдъри и поставянето им в структура от данни (заместваща списъка по-горе) функция loadShaders(списък, обратно извикване)( var shaders = (); var expectFiles = list.length * 2; var loadedFiles = 0; функция makeCallback(име, тип)( връща функция(данни)( if(shaders === undefined)( shaders = (); ) shaders = data; // проверка дали е готово loadedFiles++; if(loadedFiles == expectFiles)( обратно извикване (шейдъри); ) ); ) за (променлива i=0; i

LoadShaders() взема списък с имена на файлове на шейдъри, опитва се да зареди данните си и след това просто замества списъка с обекти. В резултат на това във формуляра THREE.js можете да му подадете шейдъри по следния начин:

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

CSS и надписи в горната част на THREE.JS

Проектът, Globe, показва текстови етикети в горната част на сцената THREE.js. THREE.Projector() беше използван за показване на етикети в правилната позиция на екрана и маркиране с CSS таблица на правилното място.

CSS3D ще постави текста върху WebGL за този поглед върху изходния код. Актуализирайте матричната функция THREE.js:

/* Коригира разликата между WebGL координатите и CSS координатите */ function toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a .елементи, а.елементи, -а.елементи, а.елементи, а.елементи, а.елементи, -а.елементи, а.елементи, а.елементи, а.елементи, -а.елементи, а.елементи, а.елементи]; ) else ( f = [ а.елементи, а.елементи, а.елементи, а.елементи, а.елементи, а.елементи, а.елементи, а.елементи, а.елементи, а.елементи , 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 да губи своята ориентация чрез наследяване от сцената. Тази техника се нарича "билбординг" и жироскопът е идеален за това.

Знаците винаги се премахват от камерата, като я свържете към 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(); ) // накарайте го да изчака 15 секунди, преди да възпроизведете отново setTimeout( playB, 15000); ), невярно); musicB.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // в противен случай музиката ще ви подлуди setTimeout(playA , 15000); ), невярно); // добре, така че има малко излишен код, признавам го musicA.play();

Накрая

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