Snímka obrazovky z aplikácie

Chcete sledovať Mliečnu dráhu online? Nová vizualizačná služba od Google s názvom 100 000 Stars, vám umožňuje absolvovať prehliadky nášho kozmického susedstva, a to samostatne aj pomocou interaktívnej prehliadky.

Tiež dostupný detailné informácie o najbližších svietidlách k nám. Znalosť angličtiny je nevyhnutná, no aj keď ju neviete, môžete si vypočuť relaxačnú hudbu a pozrieť si nádherné vesmírne animácie.

Cestovanie po galaxii bolo možné

Nedávno však vďaka interaktívna vizualizácia našej Galaxie má každý možnosť cestovať cez rozlohy Mliečnej dráhy. Teraz stačí v prehliadači otvoriť službu „Naša Galaxy 3D a 100 000 hviezd“ a ponoriť sa do virtuálnej cesty vesmírom. Aplikácia vyvinutá spoločnosťou Google obsahuje údaje o polohe takmer 120 000 hviezd v Mliečnej dráhe, zhromaždené z rôznych zdrojov vrátane vesmírnych misií.

Navigácia

Navigácia na interaktívnej mape sa vykonáva posúvaním pomocou myši alebo dotykového panela.

Kliknutím na hviezdičku záujmu sa zobrazia informácie o nej. V tomto prípade sa kamera priblíži priamo k vybranej hviezde a v okne vedľa nej sa zobrazia všetky potrebné informácie. To umožňuje detailne študovať objekty našej Galaxie.

Hudba

Cestu interaktívnym priestorom sprevádzajú hudobné diela skladateľa Sama Hulinka, ktorý je známy aj písaním hudby pre počítačové hry, ako je napríklad Mass Effect.

Dobrý deň.
Viete, aký je rozdiel medzi vaším počítačom a vesmírnou loďou?
Správna odpoveď: všetko, ale tentoraz nie.

100 000 hviezd je jednou z kreatívne projekty google na vizualizáciu našej galaxie. Vo vnútri je príliš veľa hviezd. Môžete sa medzi nimi pohybovať a medzitým hodnotiť rozsah vesmíru - to stačí Pekný obrázok Toto povoľuje. Správa sa vykonáva pomocou myši.

Celá táto krása bola napísaná na engine THREE.js v kombinácii s CSS a WebGL na zobrazenie textu. Informácie o hviezdach a ich súradniciach sú prevzaté z databázy HYG, ktorá je zase kompiláciou troch ďalších.
Podľa jedného z účastníkov projektu sa nápad zrodil ako vedľajší efekt výskumu motorov.

A malý úryvok podľa skutočných udalostí.

Od konca Michaela Changa uplynulo dosť času ( približne. Člen kreatívneho tímu Google) jedného z jeho projektov. Projekt bol porazený a zdalo sa, že je všetko hotové. Zákazníci boli spokojní cieľové publikum pozitívne ocenil úsilie majstra a sám majster, úprimne povedané, bol na výsledok svojej práce trochu hrdý. Všetko sa vrátilo do normálu. Postupom času však radosť z víťazstva začala postupne ustupovať krehkosti bytia. Zvyčajné životné tempo zatvárača si vyžadovalo novú porciu kávy, ale nie uvoľnené čítanie správ medzi dlhými zívami.
Michael sa z nudy rozhodol obnoviť svoje experimenty na engine THREE.js. Nebolo možné nazvať tieto experimenty niečím nezvyčajným - skôr jednoducho skúmal nový nástroj, ako každý sebaúctyhodný majster, ktorý sa chce ďalej rozvíjať vo svojej profesii. No v prípade programovania to určite nemohlo skončiť dobre.
Bolo po polnoci, keď Michaelovým telom zrazu prebehol mierny chlad. Majster si všimol, že s určitými zmenami v mierke scény sú výstupom neuveriteľne krásne obrázky. Tieto maľby sa stali ešte zaujímavejšími po pridaní ďalších častíc. Pri viacnásobnom zväčšení bol každý bod obrazu rozmazaný, čo vytváralo ilúziu pozorovania cez mikroskop. Z diaľky scéna vyzerala ako malý ostrov vo vzdialenom vesmíre. Michael zamyslene chodil po miestnosti. Vôbec sa mi nechcelo spať. Prenasledovali ho nápady. Nie poslednú úlohu zohral nedávno dokončený Mass Effect.
Slnko bolo sotva za obzorom, keď syntaktický analyzátor prenikavo zaškrípal. Majster sa striasol. Na tmavej obrazovke zamrzol jediný nápis – „Celkom: 119.617“. Deň už prebehol dobre. Stodevätnásťtisíc vynikajúcich hviezd spolu s ich súradnicami sa ukrývalo niekde na pevnom disku. Zostáva vdýchnuť tomuto zhluku bajtov trochu života.

Originál je odrezaný a namiesto neho sa objavia strany kódu...

P.S. Ako sa ukázalo, už je to tak

(Pozor pre tých, ktorí majú zapnuté reproduktory: hrá tajomná hudba)

V novembri 2012 teda nadšenci astronómie zo spoločnosti Google predstavili novú webovú aplikáciu „100 000 hviezd“, ktorá demonštrovala možnosti Prehliadač Chrome o spracovaní 3D obsahu pomocou WebGL. Aplikácia umožňuje zobraziť realistickú trojrozmernú mapu časti galaxie obklopujúcej Slnko, pomocou ktorej môžete vizuálne odhadnúť vzdialenosť a polohu určitých hviezd. Pre obraz hviezd a galaxie sú použité skutočné fotografie prezentované na stránke NASA, popisy hviezd sú prevzaté z Wikipédie.
Hneď vás varujem - pre tých, ktorí majú veľa práce, je lepšie tento obchod nezaraďovať do pracovnej doby, hrozí uviaznutie! ;)
(Tiež sa mi zdalo, že prehliadače bez prehliadača Chrome sú v tejto aplikácii celkom zjavne pomalé, takže tu je.)

Keď sa načíta okno s vesmírom, vidíme niečo takéto:

Vizualizačné centrum je umiestnené na Slnku. Zmenou mierky posúvaním myši (alebo posúvačom vpravo) môžete meditovať o našej hviezde:

To isté sa dá urobiť zapnutím režimu zoznámenia od úplného začiatku (v ľavom hornom rohu). Vesmír sa roztočí, Slnko sa priblíži, objavia sa sprievodné vysvetľujúce „vozíky“.
Jeden z rámcov ďalšieho prehľadu v režime zoznamovania:

Ďalší záber z úvodnej 3D show. „Prehliadku“ je možné kedykoľvek pozastaviť stlačením cudzieho slova „stop“ v spodnej časti obrazovky.


V ktorejkoľvek fáze je možné priestor na obrazovke otočiť rôzne strany"chytením" myšou.

V ľavom hornom rohu je tiež prepínač na farebnú "spektrálnu analýzu" hviezd. Vyzerá to takto:


Prirodzene, kedykoľvek sa môžete vrátiť k pôvodnému zobrazeniu.

V určitej mierke sa ich mená objavujú pri hviezdach, na ktoré sa dá celkom dobre kliknúť. Kliknutím na názov hviezdy vidíme, ako sa k nám rýchlo približuje, pulzuje a predvádza sa a na ľavej strane obrazovky sa objaví stlačenie z Wikipédie:


Zároveň je táto hviezda teraz stredom hviezdneho priestoru na obrazovke a vesmír bude musieť byť vzhľadom na ňu „skrúcaný a otáčaný“ myšou. Ak chcete znova prepnúť stred súradníc na Slnko, v tom istom ľavom hornom rohu, ktorý je nám už známy, sa v tomto prípade zobrazí príslušné tlačidlo.

Na zvýšenie vnímania (alebo odpočinok po virtuálne cestovanie) Sem pridám moje obľúbené "tematické" klipy.

Michael Chang, od Google Teams na webe HTML5rocks napísal zaujímavý článok o konci experimentu Chrome, vizualizácia najbližších hviezd „100 000 Stars“. Projekt bol vyvinutý pomocou THREE.js a CSS3D. Opísal časť projektu, správu shaderov a spôsob použitia css text v kombinácii s WebGL.
Demo
Účelom napísania tohto článku je ukázať možnosti moderných webových technológií rusky hovoriacim používateľom internetu, v tomto prípade sa THREE.js používa na vizualizáciu blízkych hviezd v Mliečnej dráhe. Technológia WebGL je v čase písania tohto článku správne podporovaná iba prehliadačom Google Chrome!

Priestor

Po dokončení Globusu sa uskutočnili experimenty s THREE.js. Ukázalo sa, že je možné zmeniť mierku scény a zvýšiť počet efektov.

Keď bola hĺbka ostrosti naozaj extrémna, vzdialené objekty sa stali skutočne rozmazanými, podobne ako funguje naklonená fotografia na vytvorenie ilúzie pohľadu na mikroskopické scény. Naklonením efekt pôsobil, akoby ste sa pozerali do hlbokého vesmíru.

Na umiestnenie hviezd na scéne bola použitá astronomická databáza astronexus.com.

Prvým krokom je umiestniť každú hviezdu do katalógu ako jednu časticu. Niektoré hviezdy v katalógu majú svoje vlastné mená, ktoré sú tu uvedené.

Umiestnenie hviezd z astronomických údajov do 3D priestoru na seba nenechalo dlho čakať, hoci v súbore je presne 119 617 hviezd, pre moderné grafická karta GPU nebolo to ťažké. Pre individuálne definované hviezdy sa používa CSS prekrytie, pričom sa používa rovnaká metóda ako pre zemeguľu.

Stvorenie galaxie

Podľa môjho názoru sa Michaelovi podarilo vytvoriť model galaxie s úžasným výhľadom na Mliečnu dráhu.

Prototyp častíc systému Mliečnej dráhy

Na vytvorenie Mliečnej dráhy sa pridá 100 000 častíc a umiestnia sa do špirály.
Mnohí sa pokúšali tvarovať Mliečnu dráhu pomocou častíc ako plochej reprezentácie galaxie pre častice a dať Mliečnej dráhe realistickejší vzhľad.

Snímka špirálovej galaxie NGC 1232B vzdialenej približne 70 miliónov svetelných rokov od Zeme.
Každá jednotka GL je svetelný rok. V tomto prípade je guľa široká 110 000 svetelných rokov.

• Jeden GL blok je pixel v 3D, ako jeden svetelný rok

Najprv tu bolo rozhodnutie otočiť samotnú scénu galaxie namiesto pohybu kamery. Treba si ale priblížiť a vidieť, čo je vo veterníku, takže môžete myšou ťahať doľava a doprava, otáčať objekt a približovanie je len otázkou zmeny camera.position.z.

Porovnajte s časticami prototypu a častice sú sprevádzané plochým obrázkom.

V tejto fáze, keď je možné predstaviť si relatívnu veľkosť slnečnej sústavy porovnaním s polomerom na vizualizáciu, je Oortov oblak vybraný ako model slnečnej sústavy, možno si tiež predstaviť zjednodušenú obežnú dráhu Zeme a skutočnú v porovnaní s polomerom slnka.

Dráha Slnka a planéty v sfére predstavujú Kuiperove pásy.

Slnko bolo ťažké vyrobiť. Povrch Slnka je horúca héliová plazma, ktorá potrebuje hybnosť, aby sa časom zmenila. Infračervený obraz povrchu Slnka bol modelovaný pomocou rastrovej textúry. Povrchový shader vykresľuje farbu na základe odtieňov šedej tejto textúry a vykresľuje vzhľad v samostatnej farebnej rampe. Keď sa táto činnosť v priebehu času posunie, vytvorí tieto deformácie podobné láve.

Podobná technika bola použitá pre slnečnú korónu s tým rozdielom, že to bude plochá spritemapa, ktorá je vždy otočená ku kamere s THREE.Gyroscope(); .

Slnečné erupcie boli vytvorené pomocou shaderov, ktoré sa točili iba pozdĺž okrajov slnečného povrchu. Shader s funkciou šumu.
Je tu niekoľko otázok o presnosti GL. Všetky premenné pre presnosť boli preddefinované v THREE.js, keď sa modelovali iné hviezdne systémy, dalo veľa práce zvýšiť presnosť.

Kód pre Slnko a iné hviezdy.

Na zjemnenie Material.polygonoffset som použil niekoľko hackov. Toto sa použilo na prinútenie lietadla, aby bolo na vrchu povrchu Slnka, a uvedomili si svetelné lúče prichádzajúce z gule.

Ďalší problém je s presnosťou v tom, že modely hviezd sa pri priblížení scény začnú chvieť. Aby som to napravil, musel som „vynulovať“ scénu rotácie a samostatne otočiť model hviezdnej mapy a životné prostredie aby ste vytvorili ilúziu, že vidíte hviezdy.

Implementujte zvýraznenie

Vizualizácia priestoru pomocou LensFlare. THREE.LensFlare je práve na tento účel, stačí ho pridať na scénu.

// Táto funkcia preladí objekt lesnflare TRI, ktorý sa má .add()pridať do funkcie grafu scény addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff); lensFlare = new THREE. LensFlare(overrideImage, 700, 0,0, THREE.AdditiveBlending, flareColor); // budeme používať viacero artefaktov odleskov pod objektívom, každý s inou veľkosťou lensFlare.add(textureFlare1, 4096, 0,0, THREE.Additive BHREE. ); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 0.0.512) /Additive. spustiť každý cez funkciu nižšie lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = new THREE.Vector3(x,y,z); lensFlare.size = veľkosť ? veľkosť: 16000 ; návrat lensFlare; ) // táto funkcia bude fungovať nad každým lensflare artefakt, ich pohyb po obrazovke funkcia 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 ? veľkosť objektu: 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; } }

textúra

Lietadlo na uľahčenie orientácie v priestore.

THREE.CylinderGeometry() bola aplikovaná na slnko. Ak chcete vytvoriť lúč svetla, zmeňte textúru časového posunu nasledovne:

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

Farba hviezdy

Každá hviezda má inú farbu na základe farebného indexu. Stručne povedané, červenomodré fialové hviezdy sú horúcejšie, biele a oranžové medzi nimi.

Vyfarbite každú hviezdu vlastnou farbou na základe týchto údajov. Spôsob, ako to urobiť, bol s atribútmi shadera materiálu aplikovanými na častice.

Var shaderMaterial = new THREE.ShaderMaterial(( uniformy: datastarUniforms, atribúty: datastarAttributes, /* ... atď */ )); var datastarAttributes = ( size: ( typ: "f", hodnota: ), colorIndex: ( typ: "f", hodnota: ), );

Vyplnenie poľa ColorIndex tak, aby každá častica mala svoju vlastnú jedinečnú farbu.

Farebná škála na nájdenie správnej farby z hodnôt hviezdnej farby.

Získajte prístup k údajom bitmapových farieb pomocou JavaScriptu. Najprv načítajte obrázok na DOM, presuňte ho do grafického prvku, aby ste získali prístup ku grafickej bitmape.

// vytvorte prázdne plátno s veľkosťou zodpovedajúcou obrázku, v tomto prípade gradientImage je dom obrázkový prvok gradientCanvas = document.createElement("canvas"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // nakreslíme obrázok gradientCanvas.getContext("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // funkcia na zachytenie farby pixelov na základe normalizovanej percentuálnej hodnoty gradientCanvas.getColor = function(percentage)( return this.getContext("2d")).getImageData(percentage * gradientImage.width,0, 1, 1).data ;)

Táto metóda sa používa aj na farbenie jednotlivých hviezd v modeli hviezd.

Rovnaká technika sa používa na farebné vyhľadávanie spektrálnej triedy hviezdy.

Počet shaderov

Projekt používa veľa shaderov na vykonanie všetkých vizuálne efekty tak Michael Chang napísal shader loader.

// zoznam shaderov, ktoré načítame var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...atď...*/]; // malý nástroj na predbežné načítanie všetkých shaderov a ich vloženie do dátovej štruktúry (nahradením zoznamu vyššie) function loadShaders(list, callback)( var shaders = (); var expectFiles = list.length * 2; var loadFiles = 0; function makeCallback(name, type)( return function(data)( if(shaders === undefined)( shaders = (); ) shaders = data; // check if done loadFiles++; if(loadedFiles == expectFiles)( spätné volanie (shaders); ) ); ) for (var i=0; i

LoadShaders() vezme zoznam názvov súborov shaderov, pokúsi sa načítať jeho údaje a potom jednoducho nahradí zoznam objektmi. Výsledkom je, že vo formulári THREE.js mu môžete odovzdať shadery takto:

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

CSS a titulky v hornej časti THREE.JS

Projekt Globe zobrazuje textové štítky v hornej časti scény THREE.js. THREE.Projector() sa použil na zobrazenie štítkov na správnej pozícii na obrazovke a označenie pomocou tabuľky CSS na správnom mieste.

CSS3D umiestni text na vrch WebGL pre tento pohľad na zdrojový kód. Aktualizujte funkciu matice THREE.js:

/* Opravuje rozdiel medzi súradnicami WebGL a súradnicami CSS */ funkcia toCSSMatrix(triMat4, b) ( var a = triMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a .prvky, a.prvky, -a.prvky, a.prvky, a.prvky, a.prvky, -a.prvky, a.prvky, a.prvky, a.prvky, -a.prvky, a.prvky, 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(,"") + ")"; )

Teraz sa text už pred kamerou neobjavuje. Na to sme použili THREE.Gyroscope () , ktorý spôsobí, že Object3D stratí svoju orientáciu dedením zo scény. Táto technika sa nazýva „billboarding“ a gyroskop je na to ako stvorený.

Značky vždy vypadnú z fotoaparátu pripojením k THREE.Gyroscope().

Zvuky

Zvukovú značku som použil na prehrávanie hudby, no ani v prehliadači Chrome je nespoľahlivá – niekedy sa jednoducho nezacyklí. Na konci tohto dvojitého hacku audio tagu sa skontroluje koniec prehrávania a prejde na ďalší tag pre hru. Čo bolo sklamaním, bolo, že to *zatiaľ* nebol vždy dokonalý cyklus, bohužiaľ, mám pocit, že to bolo to najlepšie, čo som mohol urobiť.

var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // počkajte 15 sekúnd, kým sa znova prehrá setTimeout( playB, 15000); ), nepravda); musicB.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // inak vás hudba privedie do šialenstva setTimeout(playA , 15000); ), nepravda); // dobre, je tu trochu redundancie kódu, uznávam to musicA.play();

Konečne

Snáď už čoskoro v Googlemap uvidíme nielen 3D mapu zeme, ale aj mapu našej galaxie a vydláždime si krátku cestu z Marsu na Venušu :-D. Umožňujú to moderné webové technológie nielen pre vesmírne hry, ale aj pre prehliadač.