WebGL Occlusion Culling: Näkyvyyden optimointitekniikat globaaleihin sovelluksiin

Reaaliaikaisen 3D-grafiikan maailmassa suorituskyky on ensisijaisen tärkeää. Kehititpä sitten mukaansatempaavia kokemuksia verkkoselaimiin, interaktiivisia visualisointeja tai monimutkaisia verkkopelejä, sulavan ja reagoivan kuvataajuuden ylläpitäminen on ratkaisevan tärkeää käyttäjien sitouttamiseksi. Yksi tehokkaimmista tekniikoista tämän saavuttamiseksi WebGL:ssä on occlusion culling. Tämä blogikirjoitus tarjoaa kattavan yleiskatsauksen occlusion cullingista WebGL:ssä, tutkien erilaisia tekniikoita ja strategioita renderöintisuorituskyvyn optimoimiseksi globaalisti saatavilla olevissa sovelluksissa.

Mitä on Occlusion Culling?

Occlusion culling on tekniikka, jolla renderöintiputkesta poistetaan kohteet, jotka ovat piilossa muiden kohteiden takana kameran näkökulmasta. Pohjimmiltaan se estää GPU:ta tuhlaamasta resursseja geometrian renderöintiin, joka ei ole käyttäjän nähtävissä. Tämä johtaa merkittävään piirtokutsujen määrän ja yleisen renderöintikuorman vähenemiseen, mikä parantaa suorituskykyä erityisesti kohtauksissa, joissa on paljon geometrista monimutkaisuutta.

Ajatellaan esimerkiksi virtuaalista kaupunkinäkymää. Monet rakennukset saattavat olla piilossa toisten takana katsojan nykyisestä perspektiivistä. Ilman occlusion cullingia GPU yrittäisi silti renderöidä kaikki nämä piilossa olevat rakennukset. Occlusion culling tunnistaa ja poistaa nämä piilossa olevat elementit ennen kuin ne edes saavuttavat renderöintivaihetta.

Miksi Occlusion Culling on tärkeää WebGL:ssä?

WebGL toimii selainympäristössä, jolla on luonnostaan suorituskykyrajoituksia verrattuna natiivisovelluksiin. WebGL:n optimointi on ratkaisevan tärkeää laajan yleisön saavuttamiseksi ja sulavan kokemuksen tarjoamiseksi eri laitteilla ja verkkoyhteyksillä. Tässä syitä, miksi occlusion culling on erityisen tärkeää WebGL:ssä:

• Selaimen rajoitukset: Verkkoselaimet asettavat tietoturvan hiekkalaatikoita ja resurssirajoituksia, jotka voivat vaikuttaa suorituskykyyn.
• Vaihteleva laitteisto: WebGL-sovellukset toimivat monenlaisilla laitteilla, huippuluokan pelitietokoneista vähätehoisiin mobiililaitteisiin. Optimoinnit ovat kriittisiä tasaisen kokemuksen varmistamiseksi koko tällä kirjolla.
• Verkon viive: WebGL-sovellukset luottavat usein resurssien hakemiseen verkon yli. Renderöintikuorman vähentäminen voi epäsuorasti parantaa suorituskykyä minimoimalla verkon viiveen vaikutusta.
• Virrankulutus: Mobiililaitteilla tarpeettoman geometrian renderöinti kuluttaa akkua. Occlusion culling auttaa vähentämään virrankulutusta ja pidentämään akun kestoa.

Frustum Culling: Perusta

Ennen occlusion cullingiin syventymistä on tärkeää ymmärtää frustum culling, joka on perustavanlaatuinen näkyvyyden optimointitekniikka. Frustum culling poistaa kohteet, jotka ovat kokonaan kameran näkymäkartion (viewing frustum, eli kameran näkemä 3D-tila) ulkopuolella. Tämä on tyypillisesti ensimmäinen näkyvyystarkistus, joka suoritetaan renderöintiputkessa.

Näkymäkartio määritellään kameran sijainnin, suunnan, näkökentän, kuvasuhteen sekä lähi- ja kaukotason leikkaustasojen (near/far clipping planes) perusteella. Frustum culling on suhteellisen edullinen suorittaa ja se tarjoaa merkittävän suorituskykyparannuksen poistamalla kohteet, jotka ovat kokonaan näkymän ulkopuolella.

Frustum Cullingin toteutus

Frustum culling toteutetaan usein yksinkertaisella ympäröivän tilavuuden (bounding volume) testillä. Jokainen kohde esitetään ympäröivällä laatikolla (bounding box) tai pallolla (bounding sphere), ja sen sijaintia verrataan näkymäkartion määrittäviin tasoihin. Jos ympäröivä tilavuus on kokonaan minkä tahansa näkymäkartion tason ulkopuolella, kohde hylätään.

Monet WebGL-kirjastot tarjoavat sisäänrakennettuja funktioita frustum cullingia varten. Esimerkiksi Three.js:n ja Babylon.js:n kaltaiset kirjastot tarjoavat frustum culling -ominaisuuksia osana niiden kohtaustenhallintajärjestelmiä. Vaikka et käyttäisikään kirjastoa, on mahdollista luoda oma frustum culling -toiminnallisuus, mikä on erityisen tärkeää, jos suorituskyky on kriittinen tai kohtauksessasi on erityispiirteitä, joita oletustoteutukset eivät kata.

Occlusion Culling -tekniikat WebGL:ssä

WebGL:ssä voidaan käyttää useita occlusion culling -tekniikoita, joilla kullakin on omat kompromissinsa suorituskyvyn ja monimutkaisuuden suhteen. Tässä on joitakin yleisimmistä:

1. Hierarkkinen Z-puskurointi (Hi-Z) Occlusion Culling

Hi-Z occlusion culling hyödyntää syvyyspuskuria (Z-buffer) näkyvyyden määrittämiseen. Syvyyspuskurista luodaan hierarkkinen esitys, tyypillisesti alinäytteistämällä (downsampling) alkuperäinen Z-puskuri pienempien syvyyspuskurien pyramidiksi. Jokainen pyramidin taso edustaa matalamman resoluution versiota syvyyspuskurista, ja jokainen pikseli tallentaa maksimisyvyysarvon vastaavalta alueelta korkeamman resoluution tasolla.

Occlusion cullingin suorittamiseksi kohteen ympäröivä tilavuus projisoidaan Hi-Z-pyramidin matalimman resoluution tasolle. Projisoidun alueen sisällä olevaa maksimisyvyysarvoa verrataan sitten kohteen ympäröivän tilavuuden minimisyvyysarvoon. Jos Hi-Z-pyramidin maksimisyvyysarvo on pienempi kuin kohteen minimisyvyysarvo, kohde katsotaan peitetyksi ja hylätään.

Edut:

• Suhteellisen helppo toteuttaa.
• Voidaan toteuttaa kokonaan GPU:lla shaderien avulla.

Haitat:

• Vaatii alkuperäisen renderöintivaiheen syvyyspuskurin luomiseksi.
• Voi aiheuttaa artefakteja, jos Hi-Z-pyramidi ei ole riittävän tarkka.

Esimerkki: Hi-Z-toteutuksen yleiskatsaus

Vaikka täydellisen shader-toteutuksen tarjoaminen ei kuulu tämän artikkelin piiriin, tässä on käsitteellinen yleiskatsaus:

1. Syvyyspuskurin luonti: Renderöi kohtaus framebufferiin, jossa on syvyysliite.
2. Hi-Z-pyramidin luonti: Luo sarja framebuffer-puskureita asteittain pienemmillä resoluutioilla.
3. Alinäytteistys: Käytä shadereita syvyyspuskurin alinäytteistämiseen iteratiivisesti, luoden jokaisen Hi-Z-pyramidin tason. Ota kussakin vaiheessa jokaiselle pikselille maksimisyvyysarvo ympäröivistä 2x2 pikselistä korkeamman resoluution tasolla.
4. Peittokysely: Jokaiselle kohteelle:
   • Projisoi kohteen ympäröivä laatikko matalimman resoluution Hi-Z-tasolle.
   • Lue takaisin maksimisyvyysarvo projisoidun alueen sisältä.
   • Vertaa tätä arvoa kohteen minimisyvyyteen. Jos se on pienempi, kohde on peitetty.

2. Occlusion Queries

Occlusion queries ovat WebGL:n ominaisuus, jonka avulla GPU voi määrittää, kuinka monta fragmenttia (pikseliä) tietystä kohteesta on näkyvissä. Tätä tietoa voidaan sitten käyttää päättämään, renderöidäänkö kohde seuraavissa kuvissa.

Occlusion queries -kyselyiden käyttämiseksi lähetät ensin kyselyobjektin GPU:lle. Sitten renderöit kohteen ympäröivän tilavuuden (tai yksinkertaistetun esityksen kohteesta) syvyystestaus päällä, mutta ilman kirjoitusta väripuskuriin. GPU pitää kirjaa syvyystestin läpäisevien fragmenttien määrästä. Ympäröivän tilavuuden renderöinnin jälkeen noudat kyselyn tuloksen. Jos näkyvien fragmenttien määrä on nolla, kohde katsotaan peitetyksi ja se voidaan jättää renderöimättä seuraavissa kuvissa.

Edut:

• Suhteellisen tarkka peittävyyden määritys.
• Voidaan käyttää monimutkaisen geometrian kanssa.

Haitat:

• Aiheuttaa viivettä, koska kyselyn tulos ei ole saatavilla ennen kuin kohde on renderöity. Tätä viivettä voidaan lieventää käyttämällä tekniikoita, kuten kuvaviivettä tai asynkronisia kyselyitä.
• Voi aiheuttaa GPU:n pysähtymisiä (stall), jos kyselytuloksia luetaan takaisin liian usein.

Esimerkki: Occlusion Query -toteutus

Tässä on yksinkertaistettu esimerkki occlusion queries -kyselyiden käytöstä WebGL:ssä:

            // Create an occlusion query object
const query = gl.createQuery();

// Begin the query
gl.beginQuery(gl.ANY_SAMPLES_PASSED, query);

// Render the object's bounding volume (or simplified geometry)
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

// End the query
gl.endQuery(gl.ANY_SAMPLES_PASSED, query);

// Check the query result (asynchronously)
gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE);

if (gl.getQueryParameter(query, gl.QUERY_RESULT_AVAILABLE)) {
  const visible = gl.getQueryParameter(query, gl.QUERY_RESULT);
  if (visible) {
   // Render the object
  } else {
   // Object is occluded, skip rendering
  }
  gl.deleteQuery(query);
}

            

              
                Copy
              
            
          

3. Portal Culling

Portal culling on näkyvyyden optimointitekniikka, joka on suunniteltu erityisesti kohtauksiin, joissa on selkeästi rajattuja suljettuja tiloja, kuten arkkitehtonisissa ympäristöissä tai sisätiloissa. Kohtaus jaetaan kuperiin alueisiin (huoneisiin), jotka on yhdistetty portaaleilla (ovet, ikkunat tai muut aukot).

Algoritmi alkaa kameran nykyisestä sijainnista ja käy rekursiivisesti läpi kohtausgraafia, vieraillen vain niissä huoneissa, jotka ovat potentiaalisesti näkyvissä portaalien kautta. Jokaisen huoneen osalta algoritmi tarkistaa, leikkaako huoneen ympäröivä tilavuus kameran näkymäkartion. Jos leikkaa, huoneen geometria renderöidään. Sitten algoritmi vierailee rekursiivisesti naapurihuoneissa, jotka on yhdistetty portaaleilla ja jotka ovat myös näkyvissä nykyisestä huoneesta.

Edut:

• Erittäin tehokas suljetuissa ympäristöissä.
• Voi vähentää merkittävästi piirtokutsujen määrää.

Haitat:

• Vaatii huolellista kohtausten osiointia ja portaalien määrittelyä.
• Voi olla monimutkainen toteuttaa.

Esimerkki: Portal Culling -skenaario

Kuvittele virtuaalinen museo. Museo on jaettu useisiin huoneisiin, jotka on yhdistetty oviaukoilla (portaaleilla). Kun käyttäjä seisoo yhdessä huoneessa, portal culling renderöisi vain kyseisen huoneen geometrian ja ne huoneet, jotka ovat näkyvissä oviaukkojen kautta. Muiden huoneiden geometria hylättäisiin.

4. Esilaskettu näkyvyys (PVS)

Esilasketut näkyvyysjoukot (PVS) sisältävät näkyvyystiedon laskemisen offline-tilassa ja sen tallentamisen tietorakenteeseen, jota voidaan käyttää ajon aikana. Tämä tekniikka soveltuu staattisiin kohtauksiin, joissa geometria ei muutu usein.

Esikäsittelyvaiheessa jokaiselle solulle tai alueelle kohtauksessa lasketaan näkyvyysjoukko. Tämä näkyvyysjoukko sisältää luettelon kaikista kohteista, jotka ovat näkyvissä kyseisestä solusta. Ajon aikana algoritmi määrittää kameran nykyisen sijainnin ja hakee vastaavan näkyvyysjoukon. Vain näkyvyysjoukossa olevat kohteet renderöidään.

Edut:

• Nopea ja tehokas ajon aikana.
• Erittäin tehokas staattisissa kohtauksissa.

Haitat:

• Vaatii pitkän esikäsittelyvaiheen.
• Ei sovellu dynaamisiin kohtauksiin.
• Voi kuluttaa merkittävän määrän muistia näkyvyysjoukkojen tallentamiseen.

Esimerkki: PVS pelinkehityksessä

Monet vanhemmat videopelit käyttivät PVS:ää renderöintisuorituskyvyn optimoimiseen tasoissa, joissa oli staattisia ympäristöjä. Näkyvyysjoukot esilaskettiin tasosuunnitteluprosessin aikana ja tallennettiin osaksi pelidataa.

Huomioitavaa globaaleissa sovelluksissa

Kun kehitetään WebGL-sovelluksia globaalille yleisölle, on tärkeää ottaa huomioon seuraavat seikat:

• Vaihtelevat verkkoyhteydet: Käyttäjillä eri puolilla maailmaa voi olla huomattavasti erilaiset internetyhteyden nopeudet. Optimoi resurssien lataus ja minimoi verkon yli siirrettävän datan määrä.
• Laitteiden ominaisuudet: Varmista, että sovelluksesi on yhteensopiva monenlaisten laitteiden kanssa, huippuluokan pelitietokoneista vähätehoisiin mobiililaitteisiin. Käytä mukautuvia renderöintitekniikoita säätääksesi renderöinnin laatua laitteen ominaisuuksien perusteella.
• Lokalisointi: Lokalisoi sovelluksesi tekstit ja muut resurssit tukemaan eri kieliä. Harkitse sisällönjakeluverkon (CDN) käyttöä lokalisoidun sisällön tarjoamiseksi palvelimilta, jotka ovat maantieteellisesti lähellä käyttäjää.
• Saavutettavuus: Suunnittele sovelluksesi niin, että se on saavutettavissa myös vammaisille käyttäjille. Tarjoa vaihtoehtoiset tekstit kuville, käytä näppäimistönavigointia ja varmista, että sovelluksesi on yhteensopiva ruudunlukijoiden kanssa.

Occlusion Cullingin optimointi WebGL:lle

Tässä on joitakin yleisiä vinkkejä occlusion cullingin optimoimiseksi WebGL:ssä:

• Käytä yksinkertaistettua geometriaa: Käytä yksinkertaistettua geometriaa occlusion cullingia varten. Sen sijaan, että renderöisit koko kohteen, käytä ympäröivää laatikkoa tai palloa.
• Yhdistä Occlusion Culling ja Frustum Culling: Suorita frustum culling ennen occlusion cullingia poistaaksesi kohteet, jotka ovat kokonaan näkymän ulkopuolella.
• Käytä asynkronisia kyselyitä: Käytä asynkronisia occlusion-kyselyitä välttääksesi GPU:n pysähtymisiä.
• Profiloi sovelluksesi: Käytä WebGL-profilointityökaluja suorituskyvyn pullonkaulojen tunnistamiseen ja koodisi optimoimiseen sen mukaisesti.
• Tasapainota tarkkuus ja suorituskyky: Valitse occlusion culling -tekniikka, joka löytää tasapainon tarkkuuden ja suorituskyvyn välillä. Joissakin tapauksissa voi olla parempi renderöidä muutama ylimääräinen kohde kuin käyttää liikaa aikaa occlusion cullingiin.

Perusteiden jälkeen: Edistyneet tekniikat

Yllä käsiteltyjen ydintekniikoiden lisäksi on olemassa useita edistyneitä strategioita, jotka voivat edelleen tehostaa näkyvyyden optimointia WebGL:ssä:

1. Konservatiivinen rasterointi

Konservatiivinen rasterointi laajentaa kolmioiden rasterointipeittoa varmistaen, että jopa ne pikselit, jotka ovat vain osittain kolmion peitossa, katsotaan peitetyiksi. Tämä voi olla erityisen hyödyllistä occlusion cullingissa, koska se auttaa välttämään tilanteita, joissa pienet tai ohuet kohteet poistetaan virheellisesti tarkkuusongelmien vuoksi.

2. Näkyvyyspuskuri (ViBu)

Näkyvyyspuskuri (ViBu) on näyttötilan (screen-space) tietorakenne, joka tallentaa näkyvyystietoa jokaiselle pikselille. Tätä tietoa voidaan sitten käyttää erilaisiin renderöintitehosteisiin, kuten ambient occlusioniin ja globaaliin valaistukseen. ViBu:ta voidaan käyttää myös occlusion cullingiin määrittämällä, mitkä kohteet ovat näkyvissä kussakin pikselissä.

3. GPU-ohjattu renderöinti

GPU-ohjattu renderöinti siirtää enemmän renderöintityökuormaa CPU:lta GPU:lle. Tämä voi olla erityisen hyödyllistä occlusion cullingissa, koska se antaa GPU:lle mahdollisuuden suorittaa näkyvyyden määritystä rinnakkain muiden renderöintitehtävien kanssa.

Esimerkkejä todellisesta maailmasta

Tarkastellaan muutamia esimerkkejä siitä, miten occlusion cullingia käytetään todellisissa WebGL-sovelluksissa:

• Verkkopelit: Monet verkkopelit käyttävät occlusion cullingia renderöintisuorituskyvyn optimoimiseksi monimutkaisissa peliympäristöissä. Esimerkiksi peli, jossa on suuri kaupunkinäkymä, voi käyttää portal cullingia renderöidäkseen vain ne rakennukset, jotka ovat näkyvissä pelaajan nykyisestä sijainnista.
• Arkkitehtoniset visualisoinnit: Arkkitehtoniset visualisoinnit käyttävät usein occlusion cullingia parantaakseen interaktiivisten läpikäyntien suorituskykyä. Esimerkiksi käyttäjä, joka tutkii virtuaalista rakennusta, saattaa nähdä vain ne huoneet, jotka ovat näkyvissä hänen nykyisestä sijainnistaan.
• Interaktiiviset kartat: Interaktiiviset kartat voivat käyttää occlusion cullingia karttaruutujen renderöinnin optimoimiseksi. Esimerkiksi 3D-karttaa katsova käyttäjä saattaa nähdä vain ne ruudut, jotka ovat näkyvissä hänen nykyisestä näkökulmastaan.

Occlusion Cullingin tulevaisuus WebGL:ssä

WebGL:n kehittyessä voimme odottaa näkevämme lisää edistysaskeleita occlusion culling -tekniikoissa. Tässä on joitakin mahdollisia tulevaisuuden kehitysalueita:

• Laitteistokiihdytys: Tulevat WebGL-versiot saattavat tarjota laitteistokiihdytystä occlusion cullingille, mikä tekee siitä entistä tehokkaampaa.
• Tekoälypohjainen Occlusion Culling: Koneoppimistekniikoita voitaisiin käyttää näkyvyyden ennustamiseen ja occlusion culling -päätösten optimoimiseen.
• Integrointi WebGPU:n kanssa: WebGPU, WebGL:n seuraaja, on suunniteltu tarjoamaan matalamman tason pääsy GPU-laitteistoon, mikä voisi mahdollistaa kehittyneempiä occlusion culling -tekniikoita.

Yhteenveto

Occlusion culling on tehokas tekniikka renderöintisuorituskyvyn optimoimiseksi WebGL-sovelluksissa. Hylkäämällä kohteet, jotka eivät ole käyttäjän nähtävissä, occlusion culling voi merkittävästi vähentää piirtokutsujen määrää ja parantaa kuvataajuutta. Kehitettäessä WebGL-sovelluksia globaalille yleisölle on tärkeää ottaa huomioon selainympäristön rajoitukset, eri laitteiden vaihtelevat laitteisto-ominaisuudet ja verkon viiveen vaikutus. Valitsemalla huolellisesti oikeat occlusion culling -tekniikat ja optimoimalla koodisi voit tarjota sulavan ja reagoivan kokemuksen käyttäjille ympäri maailmaa.

Muista profiloida sovelluksesi säännöllisesti ja kokeilla erilaisia occlusion culling -tekniikoita löytääksesi parhaan ratkaisun omiin tarpeisiisi. Tärkeintä on löytää tasapaino tarkkuuden ja suorituskyvyn välillä saavuttaaksesi optimaalisen renderöintilaadun ja kuvataajuuden kohdeyleisöllesi.