WebGL klasterizētā atliktā apgaismojuma tehnika: uzlabota apgaismojuma pārvaldība

Reāllaika 3D grafikas jomā apgaismojumam ir galvenā loma reālistisku un vizuāli pievilcīgu ainu veidošanā. Lai gan tradicionālās tiešās renderēšanas (forward rendering) pieejas var kļūt skaitļošanas ziņā dārgas ar lielu gaismas avotu skaitu, atliktā renderēšana (deferred rendering) piedāvā pārliecinošu alternatīvu. Klasterizētā atliktā apgaismojuma tehnika iet soli tālāk, nodrošinot efektīvu un mērogojamu risinājumu sarežģītu apgaismojuma scenāriju pārvaldībai WebGL lietojumprogrammās.

Izpratne par atlikto renderēšanu

Pirms iedziļināties klasterizētajā atliktajā apgaismojumā, ir svarīgi izprast atliktās renderēšanas pamatprincipus. Atšķirībā no tiešās renderēšanas, kas aprēķina apgaismojumu katram fragmentam (pikselim) tā rasterizācijas brīdī, atliktā renderēšana atdala ģeometrijas un apgaismojuma posmus. Lūk, kā tas darbojas:

1. Ģeometrijas posms (G-bufera izveide): Pirmajā posmā ainas ģeometrija tiek renderēta vairākos renderēšanas mērķos, kas kopā pazīstami kā G-buferis. Šis buferis parasti glabā tādu informāciju kā:
   • Dziļums: Attālums no kameras līdz virsmai.
   • Normāles: Virsmas orientācija.
   • Albedo: Virsmas pamatkrāsa.
   • Spoguļatspīdums (Specular): Spoguļatspīduma krāsa un intensitāte.
2. Apgaismojuma posms: Otrajā posmā G-buferis tiek izmantots, lai aprēķinātu apgaismojuma ietekmi uz katru pikseli. Tas ļauj mums atlikt skaitļošanas ziņā dārgos apgaismojuma aprēķinus, līdz mums ir visa nepieciešamā informācija par virsmām.

Atliktā renderēšana piedāvā vairākas priekšrocības:

• Samazināta pārklāšanās (Overdraw): Apgaismojuma aprēķini tiek veikti tikai vienu reizi katram pikselim, neatkarīgi no to ietekmējošo gaismas avotu skaita.
• Vienkāršoti apgaismojuma aprēķini: Visa nepieciešamā virsmas informācija ir viegli pieejama G-buferī, kas vienkāršo apgaismojuma vienādojumus.
• Atdalīta ģeometrija un apgaismojums: Tas nodrošina elastīgākus un modulārākus renderēšanas konveijerus.

Tomēr standarta atliktā renderēšana joprojām var saskarties ar izaicinājumiem, strādājot ar ļoti lielu gaismas avotu skaitu. Šeit talkā nāk klasterizētā atliktā apgaismojuma tehnika.

Iepazīstinām ar klasterizēto atlikto apgaismojumu

Klasterizētā atliktā apgaismojuma tehnika ir optimizācijas paņēmiens, kura mērķis ir uzlabot atliktās renderēšanas veiktspēju, īpaši ainās ar daudziem gaismas avotiem. Galvenā ideja ir sadalīt kameras redzamības piramīdu (view frustum) 3D klasteru režģī un piešķirt gaismas avotus šiem klasteriem, pamatojoties uz to telpisko atrašanās vietu. Tas ļauj mums efektīvi noteikt, kuri gaismas avoti ietekmē kurus pikseļus apgaismojuma posmā.

Kā darbojas klasterizētā atliktā apgaismojuma tehnika

1. Redzamības piramīdas sadalīšana: Redzamības piramīda tiek sadalīta 3D klasteru režģī. Šī režģa izmēri (piemēram, 16x9x16) nosaka klasterizācijas detalizāciju.
2. Gaismas avotu piešķiršana: Katrs gaismas avots tiek piešķirts klasteriem, kurus tas šķērso. To var izdarīt, pārbaudot gaismas avota norobežojošo tilpumu (bounding volume) attiecībā pret klasteru robežām.
3. Klastera gaismas avotu saraksta izveide: Katram klasterim tiek izveidots saraksts ar gaismas avotiem, kas to ietekmē. Šo sarakstu var glabāt buferī vai tekstūrā.
4. Apgaismojuma posms: Apgaismojuma posma laikā katram pikselim mēs nosakām, kuram klasterim tas pieder, un pēc tam iterējam cauri gaismas avotiem šī klastera gaismas sarakstā. Tas ievērojami samazina gaismas avotu skaitu, kas jāņem vērā katram pikselim.

Klasterizētās atliktās apgaismojuma tehnikas priekšrocības

• Uzlabota veiktspēja: Samazinot katram pikselim apskatāmo gaismas avotu skaitu, klasterizētā atliktā apgaismojuma tehnika var ievērojami uzlabot renderēšanas veiktspēju, īpaši ainās ar lielu gaismas avotu skaitu.
• Mērogojamība: Veiktspējas ieguvumi kļūst izteiktāki, palielinoties gaismas avotu skaitam, padarot to par mērogojamu risinājumu sarežģītiem apgaismojuma scenārijiem.
• Samazināta pārklāšanās: Līdzīgi kā standarta atliktā renderēšana, klasterizētā atliktā apgaismojuma tehnika samazina pārklāšanos, veicot apgaismojuma aprēķinus tikai vienu reizi katram pikselim.

Klasterizētās atliktās apgaismojuma tehnikas ieviešana WebGL

Klasterizētās atliktās apgaismojuma tehnikas ieviešana WebGL ietver vairākus soļus. Lūk, augsta līmeņa pārskats par procesu:

1. G-bufera izveide: Izveidojiet G-bufera tekstūras, lai glabātu nepieciešamo informāciju par virsmām (dziļums, normāles, albedo, spoguļatspīdums). Parasti tas ietver vairāku renderēšanas mērķu (MRT) izmantošanu.
2. Klasteru ģenerēšana: Definējiet klasteru režģi un aprēķiniet klasteru robežas. To var izdarīt JavaScript vai tieši ēnotājā (shader).
3. Gaismas avotu piešķiršana (CPU pusē): Iterējiet cauri gaismas avotiem un piešķiriet tos attiecīgajiem klasteriem. Parasti to dara CPU pusē, jo tas jāaprēķina tikai tad, kad gaismas avoti pārvietojas vai mainās. Apsveriet telpiskās paātrināšanas struktūras (piemēram, norobežojošo tilpumu hierarhijas vai režģa) izmantošanu, lai paātrinātu gaismas avotu piešķiršanas procesu, īpaši ar lielu skaitu gaismas avotu.
4. Klastera gaismas avotu saraksta izveide (GPU pusē): Izveidojiet buferi vai tekstūru, lai glabātu gaismas avotu sarakstus katram klasterim. Pārsūtiet katram klasterim piešķirtos gaismas avotu indeksus no CPU uz GPU. To var panākt, izmantojot tekstūras bufera objektu (TBO) vai glabāšanas bufera objektu (SBO), atkarībā no WebGL versijas un pieejamajiem paplašinājumiem.
5. Apgaismojuma posms (GPU pusē): Ieviesiet apgaismojuma posma ēnotāju, kas nolasa datus no G-bufera, nosaka klasteri katram pikselim un iterē cauri gaismas avotiem klastera gaismas sarakstā, lai aprēķinātu gala krāsu.

Koda piemēri (GLSL)

Šeit ir daži koda fragmenti, kas ilustrē galvenās ieviešanas daļas. Piezīme: šie ir vienkāršoti piemēri, un tiem var būt nepieciešami pielāgojumi atbilstoši jūsu konkrētajām vajadzībām.

G-bufera fragmentu ēnotājs

#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); // Piemēra spoguļatspīduma krāsa un spīdīgums
}

Apgaismojuma posma fragmentu ēnotājs

#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 //Piemērs, jādefinē un jāsaglabā konsekvence

// Funkcija pasaules pozīcijas rekonstrukcijai no dziļuma un ekrāna koordinātām
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;
}

// Funkcija klastera indeksa aprēķināšanai, pamatojoties uz pasaules pozīciju
int calculateClusterIndex(vec3 worldPosition) {
    // Pārveido pasaules pozīciju uz skata telpu
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Aprēķina normalizētās ierīces koordinātas (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspective divide

    //Pārveido uz [0, 1] diapazonu
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Ierobežo, lai izvairītos no piekļuves ārpus robežām
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Aprēķina klastera indeksu
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Aprēķina 1D indeksu
    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; // vienkāršota spoguļatspīduma intensitāte


  // Rekonstruē pasaules pozīciju no dziļuma
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Aprēķina klastera indeksu
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Nosaka sākuma un beigu indeksus gaismas avotu sarakstam šim klasterim
    int lightListOffset = clusterIndex * 2; // Pieņemot, ka katrs klasteris glabā sākuma un beigu indeksus
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalizē gaismas avotu indeksus uz [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Uzkrāj apgaismojuma ietekmi
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Drošības pārbaude, lai novērstu piekļuvi ārpus robežām

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

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

        //Vienkāršs izkliedētais apgaismojums
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Vienkāršs spoguļatspīduma apgaismojums
        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); // Vienkāršs vājinājums


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

  outColor = vec4(finalColor, 1.0);
}

Svarīgi apsvērumi

• Klastera izmērs: Klastera izmēra izvēle ir ļoti svarīga. Mazāki klasteri nodrošina labāku atsijāšanu (culling), bet palielina klasteru skaitu un pieskaitāmās izmaksas, kas saistītas ar klasteru gaismas avotu sarakstu pārvaldību. Lielāki klasteri samazina pieskaitāmās izmaksas, bet var novest pie tā, ka katram pikselim tiek apsvērts vairāk gaismas avotu. Eksperimentēšana ir atslēga, lai atrastu optimālo klastera izmēru jūsu ainai.
• Gaismas avotu piešķiršanas optimizācija: Gaismas avotu piešķiršanas procesa optimizēšana ir būtiska veiktspējai. Telpisko datu struktūru (piemēram, norobežojošo tilpumu hierarhijas vai režģa) izmantošana var ievērojami paātrināt procesu, lai atrastu, kurus klasterus gaismas avots šķērso.
• Atmiņas joslas platums: Pievērsiet uzmanību atmiņas joslas platumam, piekļūstot G-buferim un klasteru gaismas avotu sarakstiem. Atbilstošu tekstūru formātu un saspiešanas metožu izmantošana var palīdzēt samazināt atmiņas patēriņu.
• WebGL ierobežojumi: Vecākām WebGL versijām var trūkt noteiktas funkcijas (piemēram, glabāšanas bufera objekti). Apsveriet paplašinājumu vai alternatīvu pieeju izmantošanu gaismas avotu sarakstu glabāšanai. Pārliecinieties, ka jūsu implementācija ir saderīga ar mērķa WebGL versiju.
• Veiktspēja mobilajās ierīcēs: Klasterizētā atliktā apgaismojuma tehnika var būt skaitļošanas ziņā intensīva, īpaši mobilajās ierīcēs. Rūpīgi profilējiet savu kodu un optimizējiet veiktspēju. Apsveriet zemāku izšķirtspēju vai vienkāršotu apgaismojuma modeļu izmantošanu mobilajās ierīcēs.

Optimizācijas tehnikas

Var izmantot vairākas tehnikas, lai vēl vairāk optimizētu klasterizēto atlikto apgaismojumu WebGL:

• Redzamības piramīdas atsijāšana (Frustum Culling): Pirms gaismas avotu piešķiršanas klasteriem, veiciet redzamības piramīdas atsijāšanu, lai atmestu gaismas avotus, kas pilnībā atrodas ārpus redzamības piramīdas.
• Aizmugurējo šķautņu atsijāšana (Backface Culling): Atsijājiet aizmugurējās šķautnes trīsstūrus ģeometrijas posmā, lai samazinātu G-buferī ierakstīto datu apjomu.
• Detalizācijas līmenis (LOD): Izmantojiet dažādus detalizācijas līmeņus saviem modeļiem, atkarībā no to attāluma no kameras. Tas var ievērojami samazināt renderējamās ģeometrijas daudzumu.
• Tekstūru saspiešana: Izmantojiet tekstūru saspiešanas tehnikas (piemēram, ASTC), lai samazinātu tekstūru izmēru un uzlabotu atmiņas joslas platumu.
• Ēnotāja optimizācija: Optimizējiet savu ēnotāja kodu, lai samazinātu instrukciju skaitu un uzlabotu veiktspēju. Tas ietver tādas tehnikas kā ciklu atritināšana (loop unrolling), instrukciju plānošana un sazarojumu minimizēšana.
• Iepriekš aprēķināts apgaismojums: Apsveriet iepriekš aprēķināta apgaismojuma tehniku (piemēram, gaismas karšu vai sfērisko harmoniku) izmantošanu statiskiem objektiem, lai samazinātu reāllaika apgaismojuma aprēķinus.
• Aparatūras instancēšana (Hardware Instancing): Ja jums ir vairākas viena un tā paša objekta instances, izmantojiet aparatūras instancēšanu, lai tās renderētu efektīvāk.

Alternatīvas un kompromisi

Lai gan klasterizētā atliktā apgaismojuma tehnika piedāvā ievērojamas priekšrocības, ir svarīgi apsvērt alternatīvas un to attiecīgos kompromisus:

• Tiešā renderēšana (Forward Rendering): Lai gan tā ir mazāk efektīva ar daudziem gaismas avotiem, tiešā renderēšana var būt vienkāršāk ieviešama un piemērota ainām ar ierobežotu gaismas avotu skaitu. Tā arī vieglāk nodrošina caurspīdīgumu.
• Forward+ renderēšana: Forward+ renderēšana ir alternatīva atliktajai renderēšanai, kas izmanto skaitļošanas ēnotājus (compute shaders), lai veiktu gaismas avotu atsijāšanu pirms tiešās renderēšanas posma. Tas var piedāvāt līdzīgus veiktspējas ieguvumus kā klasterizētā atliktā apgaismojuma tehnika. To var būt sarežģītāk ieviest, un tas var prasīt specifiskas aparatūras funkcijas.
• Sadalītā atliktā apgaismojuma tehnika (Tiled Deferred Lighting): Šī tehnika sadala ekrānu 2D flīzēs, nevis 3D klasteros. To var būt vienkāršāk ieviest nekā klasterizēto atlikto apgaismojumu, bet tā var būt mazāk efektīva ainām ar ievērojamām dziļuma variācijām.

Renderēšanas tehnikas izvēle ir atkarīga no jūsu lietojumprogrammas specifiskajām prasībām. Pieņemot lēmumu, apsveriet gaismas avotu skaitu, ainas sarežģītību un mērķa aparatūru.

Noslēgums

WebGL klasterizētā atliktā apgaismojuma tehnika ir spēcīgs paņēmiens sarežģītu apgaismojuma scenāriju pārvaldībai tīmekļa grafikas lietojumprogrammās. Efektīvi atsijājot gaismas avotus un samazinot pārklāšanos, tā var ievērojami uzlabot renderēšanas veiktspēju un mērogojamību. Lai gan ieviešana var būt sarežģīta, ieguvumi veiktspējas un vizuālās kvalitātes ziņā padara to par vērtīgu risinājumu prasīgām lietojumprogrammām, piemēram, spēlēm, simulācijām un vizualizācijām. Lai sasniegtu optimālus rezultātus, ir ļoti svarīgi rūpīgi apsvērt klastera izmēru, gaismas avotu piešķiršanas optimizāciju un atmiņas joslas platumu.

Tā kā WebGL turpina attīstīties un aparatūras iespējas uzlabojas, klasterizētā atliktā apgaismojuma tehnika, visticamāk, kļūs par arvien svarīgāku rīku izstrādātājiem, kas vēlas radīt vizuāli satriecošu un veiktspējīgu 3D pieredzi tīmeklī.

Papildu resursi

• WebGL specifikācija: https://www.khronos.org/webgl/
• OpenGL Insights: Grāmata ar nodaļām par uzlabotām renderēšanas tehnikām, ieskaitot atlikto renderēšanu un klasterizēto ēnošanu.
• Zinātniskie raksti: Meklējiet akadēmiskos rakstus par klasterizēto atlikto apgaismojumu un saistītām tēmām Google Scholar vai līdzīgās datubāzēs.