Képernyőkép az alkalmazásból

Szeretné nézni a Milky Way-t online? Új vizualizációs szolgáltatás innen Google 100 000 Stars néven, lehetővé teszi, hogy önállóan és egy interaktív túra segítségével túrákat tegyen kozmikus környékünkön.

Szintén elérhető részletes információk a hozzánk legközelebb álló világítótestekről. Angol nyelvtudás szükséges, de ha nem is ismeri, nyugodtan hallgathat pihentető zenét és nézhet gyönyörű űranimációt.

A galaxis utazás lehetővé tette

De mostanában, köszönhetően interaktív vizualizáció Galaxisunkban mindenkinek lehetősége van arra, hogy a Tejútrendszeren keresztül utazzon. Most már elegendő megnyitni a "Our Galaxy 3D and 100 000 Stars" szolgáltatást a böngészőben, és belemerülni egy virtuális utazásba az űrben. A Google által kifejlesztett alkalmazás a Tejútrendszer közel 120 000 csillagának helyadatait tartalmazza, amelyeket különféle forrásokból gyűjtöttek össze, beleértve az űrmissziókat is.

Navigáció

Az interaktív térképen való navigálás az egérrel vagy az érintőpaddal történik.

A kívánt csillagra kattintva információk jelennek meg róla. Ebben az esetben a kamera közvetlenül a kiválasztott csillaghoz közelít, és minden szükséges információ megjelenik a mellette lévő ablakban. Ez lehetővé teszi Galaxisunk objektumainak részletes tanulmányozását.

Zene

Az interaktív téren keresztüli utazást Sam Hulink zeneszerző zenéi kísérik, aki arról is ismert, hogy zenét ír számítógépes játékok, mint például a Mass Effect.

Jó nap.
Tudod mi a különbség a számítógéped és az űrhajód között?
Helyes válasz: mindent, de ezúttal nem.

A 100 000 csillag az egyik kreatív projektek google, hogy vizualizálja galaxisunkat. Túl sok csillag van belül. Mozoghat közöttük, és közben felmérheti az univerzum méretét - ez elég Szép kép ez lehetővé teszi. A kezelés az egérrel történik.

Mindezt a szépséget a THREE.js motorra írták, CSS-sel és WebGL-lel kombinálva a szöveg megjelenítéséhez. A csillagokkal és koordinátáikkal kapcsolatos információk a HYG adatbázisból származnak, amely viszont három másik összeállítása.
A projekt egyik résztvevője szerint az ötlet a motorkutatás mellékhatásaként született meg.

És egy kis részlet valós események alapján.

Elég sok idő telt el Michael Chang vége óta ( kb. A Google kreatív csapatának tagja) egyik projektjének. A projekt elbukott, és úgy tűnt, minden kész. A vásárlók elégedettek voltak a célközönség pozitívan értékelte a mester erőfeszítéseit, és őszintén szólva maga a mester is büszke volt munkája eredményére. Minden visszatért a normális kerékvágásba. Idővel azonban a győzelem öröme fokozatosan átadta helyét az élet gyarlóságának. A deadliner szokásos élettempója megkívánt egy új adag kávét, de nem a hírfolyam nyugodt olvasását a hosszú ásítások között.
Michael unalmából úgy döntött, hogy folytatja kísérleteit a THREE.js motoron. Lehetetlen volt ezeket a kísérleteket valami szokatlannak nevezni – inkább egyszerűen felfedezte új eszköz, mint minden önmagát tisztelő mester, aki tovább szeretne fejlődni szakmájában. De a programozás esetében ennek biztosan nem lehetett jó vége.
Éjfél után járt az óra, amikor hirtelen enyhe hideg futott át Michael testén. A mester észrevette, hogy némi változtatással a jelenet léptékében hihetetlenül gyönyörű képek születnek. Ezek a festmények még érdekesebbek lettek további részecskék hozzáadása után. Többszörös nagyításnál a kép minden pontja elmosódott, ami a mikroszkópos megfigyelés illúzióját keltette. A jelenet távolról úgy nézett ki, mint egy kis sziget a távoli térben. Michael elgondolkodva járkált a szobában. Egyáltalán nem akartam aludni. Az ötletek kísértették. Nem az utolsó szerepet a nemrég elkészült Mass Effect játszotta.
A nap alig volt a látóhatáron kívül, amikor az elemző éles nyikorgást hallatott. A mester összerezzent. A sötét képernyőn az egyetlen felirat lefagyott - "Összesen: 119.617". A nap már jól telt. Száztizenkilencezer kiváló csillag a koordinátáikkal együtt rejtőzött valahol a merevlemezen. Már csak egy kis életet kell lehelni ebbe a bájtokba.

Az eredeti le van vágva, és helyette kódoldalak jelennek meg...

P.S. Mint kiderült, ez már megvan

(Bekapcsolt hangszórókkal rendelkezők figyelmébe: titokzatos zene szól)

Így 2012 novemberében a Google csillagászat iránt érdeklődői bemutatták a „100 000 Stars” nevű új webes alkalmazást, bemutatva a lehetőségeket. Chrome böngésző a 3D-s tartalom WebGL használatával történő feldolgozásával kapcsolatban. Az alkalmazás lehetővé teszi a galaxis Napot körülvevő részének valósághű, háromdimenziós térképének megjelenítését, amellyel vizuálisan megbecsülheti bizonyos csillagok távolságát és helyzetét. A csillagok és a galaxis képéhez a NASA honlapján bemutatott valódi fényképeket használnak, a csillagok leírását a Wikipédiáról vettük át.
Azonnal figyelmeztetlek - akinek sok munkája van, jobb, ha ezt az üzletet nem számítja be a munkaidőbe, fennáll az elakadás veszélye! ;)
(Számomra úgy tűnt, hogy a nem Chrome böngészők nyilvánvalóan lassúak ezen az alkalmazáson, ezért itt van.)

Amikor betöltődik az Univerzum ablaka, valami ilyesmit látunk:

A vizualizációs központ a Napon található. Az egérgörgővel (vagy a jobb oldali csúszkával) a léptéket módosítva meditálhat a csillagunkon:

Ugyanezt megtehetjük az ismerkedési mód bekapcsolásával a legelején (a bal felső sarokban). Az univerzum forog, a Nap közeledik, megjelennek a kísérő magyarázó "szekerek".
A további áttekintés egyik kerete ismerkedési módban:

Újabb felvétel a bevezető 3D-s műsorról. A „show” bármikor szüneteltethető a „stop” idegen szó megnyomásával a képernyő alján.


A Képernyőtér bármely szakaszban csavarható-beforgatható különböző oldalak egérrel "megragadva".

A bal felső sarokban van egy kapcsoló is a csillagok színspektrális elemzésére. Ez így néz ki:


Természetesen bármikor visszatérhet az eredeti nézethez.

Egy bizonyos léptékben a nevük a csillagok közelében jelenik meg, amelyek elég kattinthatók. Ha egy csillag nevére kattintunk, láthatjuk, hogyan közeledik felénk, lüktet és lobog, a képernyő bal oldalán pedig megjelenik a Wikipédiából származó szorítás:


Ugyanakkor ez a csillag most a képernyőn megjelenő csillagtér középpontja, és az Univerzumot hozzá képest kell majd az egérrel "csavarni és forgatni". Ahhoz, hogy a koordináták középpontját ismét a Napra váltsuk, ugyanabban a bal felső sarokban, amelyet már ismerünk, ebben az esetben megjelenik a megfelelő gomb.

Az érzékelés fokozása (vagy pihenés után virtuális utazás) Ide teszem fel a kedvenc "tematikus" klipjeimet.

Michael Chang, származású Google Teams a HTML5rocks honlapján érdekes cikket írt a Chrome-kísérlet végéről, a legközelebbi csillagok „100 000 csillag” megjelenítéséről. A projektet THREE.js-sel és CSS3D-vel fejlesztették ki. Leírta a projekt egy részét, a shaderek kezelését és a használat módját css szöveg WebGL-lel kombinálva.
Demó
A cikk megírásának célja, hogy bemutassa a modern webes technológiák lehetőségeit az oroszul beszélő internetezőknek, jelen esetben a THREE.js segítségével jeleníthetők meg a közeli csillagok a Tejútrendszerben. A WebGL technológiát a cikk írásakor helyesen csak a Google Chrome támogatja!

Tér

Miután a Globus elkészült, kísérleteket végeztünk a THREE.js-sel. Kiderült, hogy meg lehet változtatni a jelenet léptékét, és növelni az effektusok számát.

Amikor a mélységélesség nagyon extrém volt, a távoli tárgyak nagyon elmosódottá váltak, hasonlóan a tilt-shift fényképezéshez, amely a mikroszkopikus jelenetek illúzióját kelti. A megdöntéssel a hatás úgy tűnt, mintha a mélyűrbe nézne.

A csillagok elhelyezéséhez az astronexus.com csillagászati ​​adatbázisát használták.

Az első lépés az, hogy minden csillagot egyetlen részecskeként helyezzünk el a katalógusban. A katalógusban szereplő csillagok némelyikének saját neve van, amelyeket itt feltüntetünk.

A csillagászati ​​adatokból a csillagok elhelyezése a 3D-s térben nem tartott sokáig, bár a halmazban pontosan 119 617 csillag található, a modern kor számára. videokártya GPU nem volt nehéz. Az egyedileg meghatározott csillagokhoz CSS-fedvényt használnak, ugyanazt a módszert alkalmazva, mint a földgömb esetében.

A galaxis létrejötte

Véleményem szerint Michaelnek sikerült létrehoznia a galaxis modelljét, amely lenyűgöző kilátást nyújt a Tejútrendszerre.

A Tejútrendszer részecskéinek prototípusa

A Tejútrendszer kialakításához 100 000 részecskét adnak hozzá, és spirálba helyezik.
Sokan megpróbálták úgy alakítani a Tejútrendszert, hogy a részecskéket a galaxis lapos ábrázolásaként használták a részecskék számára, és valósághűbb megjelenést kölcsönöztek a Tejútnak.

Az NGC 1232B spirálgalaxis képe, körülbelül 70 millió fényévre a Földtől.
Minden GL egység egy fényév. Ebben az esetben a gömb 110 000 fényév széles.

• Egy GL blokk egy pixel 3D-ben, mint egy fényév

Először az a döntés született, hogy a kamera mozgatása helyett magát a galaxist forgatják. De nagyítani kell, és látnia kell, mi van a kerékben, így az egérrel balra-jobbra húzhatja, elforgathatja az objektumot, és a zoomolás már csak a camera.position.z megváltoztatása kérdése.

Hasonlítsa össze a prototípus részecskékkel, és a részecskéket lapos kép kíséri.

Ebben a szakaszban, mivel a sugárból való összehasonlítással elképzelhető a Naprendszer relatív mérete a megjelenítéshez, az Oort-felhőt a Naprendszer modelljeként választják ki, így a Föld egyszerűsített pályája és a tényleges ehhez képest a nap sugara.

A Nap pályája és a gömbben lévő bolygók a Kuiper-övet képviselik.

A napot nehéz volt elkészíteni. A Nap felszíne forró héliumplazma, amelynek lendületre van szüksége, hogy idővel megváltozzon. A Nap felszínének infravörös képét raszteres textúra segítségével modellezték. A felületi árnyékoló a színt ennek a textúrának a szürkeárnyalata alapján jeleníti meg, és a megjelenést külön színrámpán jeleníti meg. Amikor ez a tevékenység idővel eltolódik, az ilyen lávaszerű torzulásokat hoz létre.

Hasonló technikát alkalmaztak a Nap koronájánál is, azzal a különbséggel, hogy ez egy lapos spritemap lesz, amely mindig a kamera felé néz a THREE.Gyroscope(); .

A napkitöréseket árnyékolókkal hozták létre, amelyek csak a napfelszín szélei mentén forogtak. Árnyékoló zaj funkcióval.
Itt van néhány kérdés a GL pontosságával kapcsolatban. A pontosság minden változója előre definiálva volt a THREE.js-ben, amikor más csillagrendszereket modelleztek, rengeteg munka volt a pontosság növelése érdekében.

A Nap és más csillagok kódja.

Volt néhány hack, amit a Material.polygonoffset lágyítására használtam. Ezt arra használták, hogy a repülőgépet a Nap felszínének tetejére kényszerítsék, és megvalósítsák a gömbből érkező fénysugarakat.

Egy másik probléma a pontossággal, hogy a sztármodellek remegni kezdenek, amikor a jelenetet nagyítjuk. Ennek kijavításához "nulláznom kellett" a forgatási jelenetet, és külön forgatni kellett a csillagtérkép modelljét és környezet hogy azt az illúziót keltse, hogy csillagokat lát.

A kiemelés megvalósítása

Térvizualizáció a LensFlare segítségével. A THREE.LensFlare csak erre a célra szolgál, csak annyit kell tennie, hogy hozzáadja a jelenethez.

// Ez a függvény újrahangol egy lesnflare THREE objektumot, amelyet .add() kell hozzáadni a jelenet grafikonhoz addLensFlare(x,y,z, size, overrideImage)( var flareColor = new THREE.Color(0xffffff); lensFlare = new THREE. LensFlare(overrideImage, 700, 0.0, THREE.AdditiveBlending, flareColor); // több sub-lens-flare műterméket fogunk használni, mindegyik különböző méretű lensFlare.add(textureFlare1, 4096, 0.0, AdditiveBlending ); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, 512, 0.0, THREE.AdditiveBlending); lensFlare.add(textureFlare2, HREE.Additive,B) mindegyiket futtassa át az alábbi függvényen: lensFlare.customUpdateCallback = lensFlareUpdateCallback; lensFlare.position = new THREE.Vector3(x,y,z); lensFlare.size = méret ? méret: 16000 ; return lensFlare; ) // ez a funkció mindegyiken működik lensflare műtermék, mozgatva őket a képernyő körül funkció 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 ? objektum.méret: 16000; var camDistance = kamera.pozíció.hossz(); 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; } }

Struktúra

Sík, a térben való tájékozódás elősegítésére.

HÁROM.CylinderGeometry() a napra lett alkalmazva. Fénysugár létrehozásához módosítsa az időeltolás textúráját az alábbiak szerint:

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

Csillag színe

Minden csillagnak más színe van a színindex alapján. Röviden, a vörös kék, lila csillagok forróbbak, fehérek és narancssárgák.

Színezd ki az egyes csillagokat a saját színükkel ezen adatok alapján. Ennek módja a részecskékre alkalmazott anyagárnyalatos attribútumokkal volt.

Var shaderMaterial = new THREE.ShaderMaterial(( egyenruhák: datastarUniforms, attribútumok: datastarAttributes, /* ... stb */ )); var datastarAttributes = ( méret: ( típus: "f", érték: ), colorIndex: ( típus: "f", érték: ), );

A ColorIndex tömb kitöltése úgy, hogy minden részecskének saját egyedi színe legyen.

Színskála a megfelelő szín megtalálásához a csillagok színeiből.

A bittérképes színadatok elérése JavaScript segítségével. Először töltse be a képet a DOM-ra, majd húzza be a grafikus elembe a grafikus bitkép eléréséhez.

// készítsünk egy üres vásznat a képhez méretezetten, ebben az esetben a gradientImage egy dom képelem gradientCanvas = document.createElement("canvas"); gradientCanvas.width = gradientImage.width; gradientCanvas.height = gradientImage.height; // rajzolja meg a képet gradientCanvas.getContext("2d").drawImage(gradientImage, 0, 0, gradientImage.width, gradientImage.height); // egy függvény a képpont színének megragadására normalizált százalékos érték alapján gradientCanvas.getColor = function(percentage)( return this.getContext("2d").getImageData(percentage * gradientImage.width,0, 1, 1).data ;)

Ezt a módszert a csillagmodell egyes csillagainak színezésére is használják.

Ugyanezt a technikát használják a csillag spektrális osztályának színkeresésére.

Shaderek száma

A projekt sok shadert használ az összes végrehajtásához vizuális effektekígy Michael Chang írta a shader betöltőt.

// shader listája we"ll load var shaderList = ["shaders/starsurface", "shaders/starhalo", "shaders/starflare", "shaders/galacticstars", /*...etc...*/]; // egy kis segédprogram az összes shader előzetes lekéréséhez és adatszerkezetbe helyezéséhez (a fenti listát helyettesítve) függvény loadShaders(lista, visszahívás)( var shaders = (); var expectFiles = list.length * 2; var loadedFiles = 0; function makeCallback(név, típus)( return function(data)( if(shaders === undefined)( shaders = (); ) shaders = adatok; // ellenőrizze, hogy készen van-e loadedFiles++; if(loadedFiles == expectFiles)( visszahívás(shaderek); ) ); ) for(var i=0; i

A LoadShaders() felveszi a shader fájlnevek listáját, megpróbálja betölteni az adatait, majd egyszerűen lecseréli a listát objektumokra. Ennek eredményeként a THREE.js űrlapon a következőképpen adhat át árnyékolókat:

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

CSS és feliratok a THREE.JS tetején

A Globe projekt szöveges címkéket jelenít meg a THREE.js jelenet tetején. A THREE.Projector() segítségével a címkéket a megfelelő helyen jelenítettük meg a képernyőn, és a megfelelő helyen jelöljük meg a CSS-táblázatot.

A CSS3D a szöveget a WebGL tetejére helyezi, hogy megnézze a forráskódot. Frissítse a THREE.js mátrixfüggvényt:

/* Kijavítja a különbséget a WebGL koordináták és a CSS koordináták között */ függvény toCSSMatrix(threeMat4, b) ( var a = threeMat4, f; if (b) ( f = [ a.elements, -a.elements, a.elements, a .elemek, a.elemek, -a.elemek, a.elemek, a.elemek, a.elemek, -a.elemek, a.elemek, a.elemek, a.elemek, -a.elemek, a.elemek, a.elems]; ) else ( f = [ a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek , a.elemek, a.elemek, a.elemek, a.elemek, a.elemek, a.elemek ]; ) for (var e in f) ( f[e] = epsilon(f[e]); ) return "matrix3d(" + f.join(",") + ")"; )

A szöveg most már nem dereng a kamera előtt. Ehhez a THREE.Gyroscope () -t használtuk, ami miatt az Object3D elveszíti orientációját, mivel öröklődik a helyszínről. Ezt a technikát "óriásplakátnak" hívják, és a giroszkóp tökéletes erre.

A jelek mindig lekerülnek a kameráról, ha a THREE.Gyroscope()-hoz csatlakoztatjuk.

Hangok

Használtam az audio címkét zenelejátszáshoz, de még a Chrome-ban is megbízhatatlan – néha egyszerűen nem fut. Ennek a dupla audio tag-feltörésnek a végén a lejátszás végén ellenőrizheti a játék másik címkéjét. Kiábrándító volt, hogy *de* nem volt mindig tökéletes ciklus, sajnos, úgy érzem, ez volt a legjobb, amit tehettem.

var musicA = document.getElementById("bgmusicA"); var musicB = document.getElementById("bgmusicB"); musicA.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playB = function()( musicB.play(); ) // várjon 15 másodpercet az újbóli lejátszás előtt setTimeout( playB, 15000); ), hamis); musicB.addEventListener("ended", function()( this.currentTime = 0; this.pause(); var playA = function()( musicA.play(); ) // különben a zene őrültségre késztet setTimeout(playA , 15000); ), hamis); // rendben van, van egy kis kódredundancia, elismerem musicA.play();

Végül

Talán hamarosan a Googlemap-ben nem csak a Föld 3D-s térképét láthatjuk, hanem a galaxisunk térképét is, és egy rövid utat kikövezünk a Marstól a Vénuszig :-D. A modern webes technológiák lehetővé teszik ezt, nem csak az űrjátékoknál, hanem a böngészőnél is.