WebGL-klusteroitu viivästetty valaistus: edistynyt valaistuksen hallinta

Reaaliaikaisen 3D-grafiikan maailmassa valaistuksella on keskeinen rooli realististen ja visuaalisesti miellyttävien näkymien luomisessa. Vaikka perinteiset suoran renderöinnin (forward rendering) menetelmät voivat tulla laskennallisesti kalliiksi suurella määrällä valonlähteitä, viivästetty renderöinti (deferred rendering) tarjoaa houkuttelevan vaihtoehdon. Klusteroitu viivästetty valaistus vie tämän askeleen pidemmälle tarjoten tehokkaan ja skaalautuvan ratkaisun monimutkaisten valaistustilanteiden hallintaan WebGL-sovelluksissa.

Viivästetyn renderöinnin ymmärtäminen

Ennen kuin syvennymme klusteroituun viivästettyyn valaistukseen, on tärkeää ymmärtää viivästetyn renderöinnin perusperiaatteet. Toisin kuin suora renderöinti, joka laskee valaistuksen jokaiselle fragmentille (pikselille) rasteroinnin yhteydessä, viivästetty renderöinti erottaa geometria- ja valaistusvaiheet toisistaan. Tässä erittely:

1. Geometriavaihe (G-puskurin luonti): Ensimmäisessä vaiheessa näkymän geometria renderöidään useisiin renderöintikohteisiin, joita kutsutaan yhteisesti G-puskuriksi. Tämä puskuri tallentaa tyypillisesti tietoja, kuten:
   • Syvyys: Etäisyys kamerasta pintaan.
   • Normaalit: Pinnan suunta.
   • Albedo: Pinnan perusväri.
   • Spekulaari: Spekulaarisen korostuksen väri ja voimakkuus.
2. Valaistusvaihe: Toisessa vaiheessa G-puskuria käytetään laskemaan valaistuksen vaikutus kullekin pikselille. Tämä antaa meille mahdollisuuden lykätä kalliita valaistuslaskelmia, kunnes meillä on kaikki tarvittavat pintatiedot.

Viivästetty renderöinti tarjoaa useita etuja:

• Vähentynyt päällepiirto (overdraw): Valaistuslaskelmat suoritetaan vain kerran pikseliä kohden riippumatta siihen vaikuttavien valonlähteiden määrästä.
• Yksinkertaistetut valaistuslaskelmat: Kaikki tarvittavat pintatiedot ovat helposti saatavilla G-puskurissa, mikä yksinkertaistaa valaistusyhtälöitä.
• Erotettu geometria ja valaistus: Tämä mahdollistaa joustavammat ja modulaarisemmat renderöintiputket.

Tavallinen viivästetty renderöinti voi kuitenkin kohdata haasteita käsiteltäessä erittäin suurta määrää valonlähteitä. Tässä kohtaa klusteroitu viivästetty valaistus astuu kuvaan.

Esittelyssä klusteroitu viivästetty valaistus

Klusteroitu viivästetty valaistus on optimointitekniikka, jonka tavoitteena on parantaa viivästetyn renderöinnin suorituskykyä erityisesti näkymissä, joissa on lukuisia valonlähteitä. Ydinajatuksena on jakaa näkymäkartio (view frustum) 3D-klustereiden ruudukkoon ja määrittää valot näihin klustereihin niiden sijainnin perusteella. Tämä antaa meille mahdollisuuden määrittää tehokkaasti, mitkä valot vaikuttavat mihinkin pikseleihin valaistusvaiheen aikana.

Miten klusteroitu viivästetty valaistus toimii

1. Näkymäkartion jako: Näkymäkartio jaetaan 3D-klustereiden ruudukkoon. Tämän ruudukon mitat (esim. 16x9x16) määrittävät klusteroinnin tarkkuuden.
2. Valojen määritys: Jokainen valonlähde määritetään klustereihin, joiden kanssa se leikkaa. Tämä voidaan tehdä tarkistamalla valon rajaava tilavuus (bounding volume) klusterin rajoja vasten.
3. Klusterin valolistan luonti: Jokaista klusteria varten luodaan lista siihen vaikuttavista valoista. Tämä lista voidaan tallentaa puskuriin tai tekstuuriin.
4. Valaistusvaihe: Valaistusvaiheen aikana määritämme jokaiselle pikselille, mihin klusteriin se kuuluu, ja käymme sitten läpi kyseisen klusterin valolistan valot. Tämä vähentää merkittävästi kunkin pikselin kohdalla huomioon otettavien valojen määrää.

Klusteroidun viivästetyn valaistuksen edut

• Parempi suorituskyky: Vähentämällä pikseliä kohden tarkasteltavien valojen määrää, klusteroitu viivästetty valaistus voi parantaa merkittävästi renderöinnin suorituskykyä, erityisesti näkymissä, joissa on suuri määrä valonlähteitä.
• Skaalautuvuus: Suorituskykyhyödyt korostuvat valonlähteiden määrän kasvaessa, mikä tekee siitä skaalautuvan ratkaisun monimutkaisiin valaistustilanteisiin.
• Vähentynyt päällepiirto: Kuten tavallinen viivästetty renderöinti, klusteroitu viivästetty valaistus vähentää päällepiirtoa suorittamalla valaistuslaskelmat vain kerran pikseliä kohden.

Klusteroidun viivästetyn valaistuksen toteuttaminen WebGL:ssä

Klusteroidun viivästetyn valaistuksen toteuttaminen WebGL:ssä sisältää useita vaiheita. Tässä on yleiskatsaus prosessista:

1. G-puskurin luonti: Luo G-puskuritekstuurit tarvittavien pintatietojen (syvyys, normaalit, albedo, spekulaari) tallentamiseksi. Tämä edellyttää tyypillisesti useiden renderöintikohteiden (MRT) käyttöä.
2. Klusterien generointi: Määrittele klusteriruudukko ja laske klusterien rajat. Tämä voidaan tehdä JavaScriptissä tai suoraan varjostimessa.
3. Valojen määritys (CPU-puoli): Käy läpi valonlähteet ja määritä ne sopiviin klustereihin. Tämä tehdään tyypillisesti suorittimella (CPU), koska se tarvitsee laskea vain, kun valot liikkuvat tai muuttuvat. Harkitse spatiaalisen kiihdytysrakenteen (esim. rajaavien tilavuuksien hierarkia tai ruudukko) käyttöä valojen määritysprosessin nopeuttamiseksi, erityisesti suurella valomäärällä.
4. Klusterin valolistan luonti (GPU-puoli): Luo puskuri tai tekstuuri kunkin klusterin valolistojen tallentamiseksi. Siirrä kullekin klusterille määritetyt valoindeksit suorittimelta grafiikkaprosessorille (GPU). Tämä voidaan saavuttaa käyttämällä tekstuuripuskuriobjektia (TBO) tai tallennuspuskuriobjektia (SBO), riippuen WebGL-versiosta ja saatavilla olevista laajennuksista.
5. Valaistusvaihe (GPU-puoli): Toteuta valaistusvaiheen varjostin, joka lukee G-puskurista, määrittää klusterin kullekin pikselille ja käy läpi klusterin valolistan valot lopullisen värin laskemiseksi.

Koodiesimerkkejä (GLSL)

Tässä on joitakin koodinpätkiä, jotka havainnollistavat toteutuksen keskeisiä osia. Huomaa: nämä ovat yksinkertaistettuja esimerkkejä ja saattavat vaatia muutoksia omien tarpeidesi mukaan.

G-puskurin fragmenttivarjostin

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // Esimerkki spekulaariväristä ja kiiltävyydestä
}

Valaistusvaiheen fragmenttivarjostin

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 //Esimerkki, tulee määrittää ja olla johdonmukainen

// Funktio maailman sijainnin rekonstruoimiseksi syvyydestä ja ruudun koordinaateista
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// Funktio klusteri-indeksin laskemiseksi maailman sijainnin perusteella
int calculateClusterIndex(vec3 worldPosition) {
    // Muunna maailman sijainti näkymäavaruuteen
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Laske normalisoidut laitekoordinaatit (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspective divide

    //Muunna [0, 1] -alueelle
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Rajoita arvo estääksesi pääsyn rajojen ulkopuolelle
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Laske klusteri-indeksi
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Laske 1D-indeksi
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // simplified specular intensity


  // Rekonstruoi maailman sijainti syvyydestä
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Laske klusteri-indeksi
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Määritä tämän klusterin valolistan alku- ja loppuindeksit
    int lightListOffset = clusterIndex * 2; // Olettaen, että jokainen klusteri tallentaa alku- ja loppuindeksit
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalisoi valoindeksit [0, MAX_LIGHTS] -alueelle
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Kerää valaistuksen vaikutukset
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Varmistustarkistus estämään pääsyn rajojen ulkopuolelle

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        //Yksinkertainen diffuusi valaistus
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Yksinkertainen spekulaarinen valaistus
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // Yksinkertainen vaimennus


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

Tärkeitä huomioita

• Klusterin koko: Klusterin koon valinta on ratkaisevan tärkeää. Pienemmät klusterit tarjoavat paremman karsinnan (culling), mutta lisäävät klustereiden määrää ja klusterien valolistojen hallinnan yleiskustannuksia. Suuremmat klusterit vähentävät yleiskustannuksia, mutta saattavat johtaa siihen, että useampia valoja harkitaan pikseliä kohden. Kokeilu on avainasemassa optimaalisen klusterikoon löytämisessä omaan näkymääsi.
• Valojen määrityksen optimointi: Valojen määritysprosessin optimointi on olennaista suorituskyvyn kannalta. Spatiaalisten tietorakenteiden (esim. rajaavien tilavuuksien hierarkia tai ruudukko) käyttö voi nopeuttaa merkittävästi prosessia, jossa etsitään, mitkä klusterit valo leikkaa.
• Muistin kaistanleveys: Ole tietoinen muistin kaistanleveydestä, kun käytät G-puskuria ja klusterien valolistoja. Sopivien tekstuuriformaattien ja pakkaustekniikoiden käyttö voi auttaa vähentämään muistinkäyttöä.
• WebGL:n rajoitukset: Vanhemmista WebGL-versioista saattaa puuttua tiettyjä ominaisuuksia (kuten tallennuspuskuriobjektit). Harkitse laajennusten tai vaihtoehtoisten lähestymistapojen käyttöä valolistojen tallentamiseen. Varmista, että toteutuksesi on yhteensopiva kohde-WebGL-version kanssa.
• Mobiilisuorituskyky: Klusteroitu viivästetty valaistus voi olla laskennallisesti raskas, erityisesti mobiililaitteilla. Profiloi koodisi huolellisesti ja optimoi suorituskykyä. Harkitse matalampien resoluutioiden tai yksinkertaistettujen valaistusmallien käyttöä mobiililaitteilla.

Optimointitekniikat

Useita tekniikoita voidaan käyttää klusteroidun viivästetyn valaistuksen optimoimiseksi WebGL:ssä:

• Näkymäkartion karsinta (Frustum Culling): Ennen valojen määrittämistä klustereihin, suorita näkymäkartion karsinta hylätäksesi valot, jotka ovat kokonaan näkymäkartion ulkopuolella.
• Taaksepäin suuntautuvien pintojen karsinta (Backface Culling): Karsi taaksepäin suuntautuvat kolmiot geometriavaiheen aikana vähentääksesi G-puskuriin kirjoitettavan datan määrää.
• Yksityiskohtaisuustasot (Level of Detail, LOD): Käytä malleillesi eri yksityiskohtaisuustasoja niiden etäisyyden perusteella kamerasta. Tämä voi merkittävästi vähentää renderöitävän geometrian määrää.
• Tekstuurinpakkaus: Käytä tekstuurinpakkaustekniikoita (esim. ASTC) pienentääksesi tekstuuriesi kokoa ja parantaaksesi muistin kaistanleveyttä.
• Varjostimien optimointi: Optimoi varjostinkoodisi vähentääksesi käskyjen määrää ja parantaaksesi suorituskykyä. Tähän sisältyy tekniikoita, kuten silmukoiden purkaminen (loop unrolling), käskyjen ajoitus ja haarautumisen minimointi.
• Esilaskettu valaistus: Harkitse esilaskettujen valaistustekniikoiden (esim. valokartat tai palloharmoniset funktiot) käyttöä staattisille objekteille vähentääksesi reaaliaikaisia valaistuslaskelmia.
• Laitteistoinstanssointi (Hardware Instancing): Jos sinulla on useita saman objektin instansseja, käytä laitteistoinstanssointia renderöidäksesi ne tehokkaammin.

Vaihtoehdot ja kompromissit

Vaikka klusteroitu viivästetty valaistus tarjoaa merkittäviä etuja, on tärkeää harkita vaihtoehtoja ja niiden vastaavia kompromisseja:

• Suora renderöinti (Forward Rendering): Vaikka se on tehottomampi monien valojen kanssa, suora renderöinti voi olla yksinkertaisempi toteuttaa ja soveltua näkymiin, joissa on rajoitettu määrä valonlähteitä. Se mahdollistaa myös läpinäkyvyyden helpommin.
• Forward+ -renderöinti: Forward+ -renderöinti on vaihtoehto viivästetylle renderöinnille, joka käyttää laskentavarjostimia (compute shaders) valojen karsintaan ennen suoran renderöinnin vaihetta. Tämä voi tarjota samanlaisia suorituskykyhyötyjä kuin klusteroitu viivästetty valaistus. Sen toteuttaminen voi olla monimutkaisempaa ja se saattaa vaatia tiettyjä laitteisto-ominaisuuksia.
• Laatoitettu viivästetty valaistus (Tiled Deferred Lighting): Laatoitettu viivästetty valaistus jakaa ruudun 2D-laattoihin 3D-klustereiden sijaan. Tämä voi olla yksinkertaisempi toteuttaa kuin klusteroitu viivästetty valaistus, mutta se saattaa olla tehottomampi näkymissä, joissa on merkittävää syvyysvaihtelua.

Renderöintitekniikan valinta riippuu sovelluksesi erityisvaatimuksista. Ota päätöstä tehdessäsi huomioon valonlähteiden määrä, näkymän monimutkaisuus ja kohdelaitteisto.

Yhteenveto

WebGL:n klusteroitu viivästetty valaistus on tehokas tekniikka monimutkaisten valaistustilanteiden hallintaan verkkopohjaisissa grafiikkasovelluksissa. Karsimalla tehokkaasti valoja ja vähentämällä päällepiirtoa se voi merkittävästi parantaa renderöinnin suorituskykyä ja skaalautuvuutta. Vaikka toteutus voi olla monimutkainen, suorituskyvyn ja visuaalisen laadun edut tekevät siitä kannattavan vaativissa sovelluksissa, kuten peleissä, simulaatioissa ja visualisoinneissa. Klusterin koon, valojen määrityksen optimoinnin ja muistin kaistanleveyden huolellinen harkinta on ratkaisevan tärkeää optimaalisten tulosten saavuttamiseksi.

WebGL:n jatkaessa kehittymistään ja laitteistokapasiteetin parantuessa klusteroidusta viivästetystä valaistuksesta tulee todennäköisesti yhä tärkeämpi työkalu kehittäjille, jotka pyrkivät luomaan visuaalisesti upeita ja suorituskykyisiä verkkopohjaisia 3D-kokemuksia.

Lisälähteet

• WebGL-spesifikaatio: https://www.khronos.org/webgl/
• OpenGL Insights: Kirja, joka sisältää lukuja edistyneistä renderöintitekniikoista, mukaan lukien viivästetty renderöinti ja klusteroitu varjostus.
• Tutkimusartikkelit: Etsi akateemisia artikkeleita klusteroidusta viivästetystä valaistuksesta ja siihen liittyvistä aiheista Google Scholarista tai vastaavista tietokannoista.