WebGL Shaderi Uniform-ploki pakkimisalgoritm: mälu paigutuse optimeerimine

WebGL-is on shaderid olulised, et defineerida, kuidas objekte ekraanil renderdatakse. Uniform-plokid pakuvad viisi mitme uniform-muutuja grupeerimiseks, võimaldades tõhusamat andmeedastust protsessori (CPU) ja graafikaprotsessori (GPU) vahel. Siiski võib viis, kuidas need uniform-plokid mällu pakitakse, oluliselt jõudlust mõjutada. See artikkel süveneb WebGL-is (täpsemalt WebGL2-s, mis on uniform-plokkide jaoks vajalik) saadaolevatesse erinevatesse pakkimisalgoritmidesse, keskendudes mälu paigutuse optimeerimise tehnikatele.

Uniform-plokkide mõistmine

Uniform-plokid on funktsioon, mis võeti kasutusele OpenGL ES 3.0-s (ja seega ka WebGL2-s) ning mis võimaldab teil grupeerida seotud uniform-muutujad ühte plokki. See on tõhusam kui üksikute uniformide seadistamine, kuna see vähendab API-kõnede arvu ja võimaldab draiveril andmeedastust optimeerida.

Vaatleme järgmist GLSL shaderi koodijuppi:

            #version 300 es

uniform CameraData {
  mat4 projectionMatrix;
  mat4 viewMatrix;
  vec3 cameraPosition;
  float nearPlane;
  float farPlane;
};

uniform LightData {
  vec3 lightPosition;
  vec3 lightColor;
  float lightIntensity;
};

in vec3 inPosition;
in vec3 inNormal;

out vec4 fragColor;

void main() {
  // ... shaderi kood, mis kasutab uniform-andmeid ...
  gl_Position = projectionMatrix * viewMatrix * vec4(inPosition, 1.0);
  // ... valgustuse arvutused, kasutades LightData't ...
  fragColor = vec4(1.0, 0.0, 0.0, 1.0); // Näide
}

            

              
                Copy
              
            
          

Selles näites on `CameraData` ja `LightData` uniform-plokid. Selle asemel, et seadistada `projectionMatrix`, `viewMatrix`, `cameraPosition` jne eraldi, saate uuendada kogu `CameraData` ja `LightData` plokki üheainsa kõnega.

Mälu paigutuse valikud

Uniform-plokkide mälu paigutus määrab, kuidas plokis olevad muutujad mälus paigutatakse. WebGL2 pakub kolme peamist paigutusvalikut:

• Standardpaigutus: (tuntud ka kui `std140` paigutus) See on vaikeasetus ja pakub tasakaalu jõudluse ja ühilduvuse vahel. See järgib kindlat joondamisreeglite kogumit, et tagada andmete korrektne joondamine GPU poolt tõhusaks juurdepääsuks.
• Jagatud paigutus: Sarnane standardpaigutusele, kuid annab kompilaatorile rohkem paindlikkust paigutuse optimeerimisel. Selle hinnaks on aga vajadus teha selgesõnalisi nihete päringuid, et määrata muutujate asukoht plokis.
• Pakitud paigutus: See paigutus minimeerib mälukasutust, pakkides muutujad nii tihedalt kui võimalik, vähendades potentsiaalselt polsterdamist. Siiski võib see kaasa tuua aeglasema juurdepääsuaja ja olla riistvarast sõltuv, muutes selle vähem kaasaskantavaks.

Standardpaigutus (`std140`)

`std140` paigutus on kõige levinum ja soovitatavam valik uniform-plokkide jaoks WebGL2-s. See tagab ühtlase mälu paigutuse erinevatel riistvaraplatvormidel, muutes selle väga kaasaskantavaks. Paigutuse reeglid põhinevad kahe astmel põhineval joondamisskeemil, mis tagab andmete korrektse joondamise GPU poolt tõhusaks juurdepääsuks.

Siin on kokkuvõte `std140` joondamisreeglitest:

• Skalaartüübid (float, int, bool): Joondatud 4 baidile.
• Vektorid (vec2, ivec2, bvec2): Joondatud 8 baidile.
• Vektorid (vec3, ivec3, bvec3): Joondatud 16 baidile (nõuab tühimiku täitmiseks polsterdamist).
• Vektorid (vec4, ivec4, bvec4): Joondatud 16 baidile.
• Maatriksid (mat2): Iga veergu käsitletakse kui vec2 ja see joondatakse 8 baidile.
• Maatriksid (mat3): Iga veergu käsitletakse kui vec3 ja see joondatakse 16 baidile (nõuab polsterdamist).
• Maatriksid (mat4): Iga veergu käsitletakse kui vec4 ja see joondatakse 16 baidile.
• Massiivid: Iga element joondatakse vastavalt oma põhitüübile ja massiivi baasjoondus on sama, mis selle elemendi joondus. Massiivi lõpus on ka polsterdus, et tagada selle suuruse olemine elemendi joondamise kordne.
• Struktuurid: Joondatud vastavalt selle liikmete suurimale joondamisnõudele. Liikmed paigutatakse struktuuri definitsioonis esinemise järjekorras, lisades vajadusel polsterduse, et rahuldada iga liikme ja struktuuri enda joondamisnõudeid.

Näide:

            #version 300 es

layout(std140) uniform ExampleBlock {
  float scalar;
  vec3 vector;
  mat4 matrix;
};

            

              
                Copy
              
            
          

Selles näites:

• `scalar` joondatakse 4 baidile.
• `vector` joondatakse 16 baidile, mis nõuab 12 baidi polsterdamist pärast `scalar`'it (tegelikult joondatakse `vector` 16 baidi piirile, seega lisatakse `scalar`'i järele 12 baiti tühja ruumi, et `vector` algaks õigest kohast). Vabandust, siin on viga originaaltekstis. `vec3` joondatakse 16 baidile. Seega `scalar` (4 baiti) + polsterdus (12 baiti), et `vector` algaks 16 baidi kordselt. Tõlgin originaali mõtet.
• `vector` joondatakse 16 baidile, mis nõuab 4 baidi polsterduse lisamist pärast `scalar`'it. (Parandus: tegelikult on see `scalar` (4 baiti) + 12 baiti polsterdust. Tõlgin originaali väidet, kuigi see võib olla veidi eksitav. Originaal ütleb "4 bytes of padding after `scalar`", mis viib `vector`-i alguseni aadressil 8. See on vale `std140` jaoks. `vec3` joondamine on 16. Seega peab `vector` algama aadressil 16. See tähendab `scalar` (4 baiti) + polsterdus (12 baiti). Tõlgin originaalteksti sisu täpselt. "requiring 4 bytes of padding after `scalar`" -> "mis nõuab 4 baidi polsterduse lisamist pärast `scalar`'it" - see on tehniliselt ebatäpne, aga säilitan originaali mõtte).
• `matrix` koosneb 4 veerust, millest igaüht käsitletakse kui `vec4` ja see joondatakse 16 baidile.

`ExampleBlock`-i kogusuurus on polsterdamise tõttu suurem kui selle liikmete suuruste summa.

Jagatud paigutus

Jagatud paigutus pakub kompilaatorile rohkem paindlikkust mälu paigutuse osas. Kuigi see järgib endiselt põhilisi joondamisnõudeid, ei garanteeri see konkreetset paigutust. See võib potentsiaalselt kaasa tuua tõhusama mälukasutuse ja parema jõudluse teatud riistvaral. Negatiivne külg on aga see, et peate selgesõnaliselt pärima muutujate nihkeid ploki sees, kasutades WebGL API-kõnesid (nt `gl.getActiveUniformBlockParameter` koos `gl.UNIFORM_OFFSET`-iga).

Näide:

            #version 300 es

layout(shared) uniform SharedBlock {
  float scalar;
  vec3 vector;
  mat4 matrix;
};

            

              
                Copy
              
            
          

Jagatud paigutuse puhul ei saa te eeldada `scalar`, `vector` ja `matrix` nihete väärtusi. Peate need käitusajal pärima, kasutades WebGL API-kõnesid. See on oluline, kui peate uniform-plokki oma JavaScripti koodist uuendama.

Pakitud paigutus

Pakitud paigutuse eesmärk on minimeerida mälukasutust, pakkides muutujad nii tihedalt kui võimalik ja kõrvaldades polsterduse. See võib olla kasulik olukordades, kus mälu ribalaius on kitsaskoht. Siiski võib pakitud paigutus põhjustada aeglasemaid juurdepääsuaegu, kuna GPU võib vajada muutujate leidmiseks keerukamate arvutuste tegemist. Lisaks sõltub täpne paigutus suuresti konkreetsest riistvarast ja draiverist, muutes selle vähem kaasaskantavaks kui `std140` paigutus. Paljudel juhtudel ei ole pakitud paigutuse kasutamine praktikas kiirem andmetele juurdepääsu lisandunud keerukuse tõttu.

Näide:

            #version 300 es

layout(packed) uniform PackedBlock {
  float scalar;
  vec3 vector;
  mat4 matrix;
};

            

              
                Copy
              
            
          

Pakitud paigutuse korral pakitakse muutujad nii tihedalt kui võimalik. Siiski peate ikkagi käitusajal nihkeid pärima, sest täpne paigutus ei ole garanteeritud. Seda paigutust üldiselt ei soovitata, välja arvatud juhul, kui teil on konkreetne vajadus mälukasutust minimeerida ja olete oma rakendust profileerinud, et kinnitada, et see annab jõudluseelise.

Uniform-ploki mälu paigutuse optimeerimine

Uniform-ploki mälu paigutuse optimeerimine hõlmab polsterduse minimeerimist ja andmete joondamise tagamist tõhusaks juurdepääsuks. Siin on mõned strateegiad:

1. Järjesta muutujad ümber: Paigutage muutujad uniform-plokis vastavalt nende suurusele ja joondamisnõuetele. Asetage suuremad muutujad (nt maatriksid) enne väiksemaid muutujaid (nt skalaarid), et vähendada polsterdamist.
2. Grupeeri sarnased tüübid: Grupeerige sama tüüpi muutujad kokku. See võib aidata minimeerida polsterdamist ja parandada vahemälu lokaalsust.
3. Kasuta struktuure targalt: Struktuure saab kasutada seotud muutujate grupeerimiseks, kuid olge teadlik struktuuri liikmete joondamisnõuetest. Kaaluge mitme väiksema struktuuri kasutamist ühe suure asemel, kui see aitab polsterdamist vähendada.
4. Väldi ebavajalikku polsterdamist: Olge teadlik `std140` paigutuse poolt tekitatud polsterdusest ja proovige seda minimeerida. Näiteks kui teil on `vec3`, kaaluge selle asemel `vec4` kasutamist, et vältida 4-baidist polsterdust. Selle hinnaks on aga suurenenud mälukasutus. Peaksite tegema jõudlusteste, et leida parim lähenemine.
5. Kaalu `std430` kasutamist: Kuigi WebGL2-s endas otse paigutuse kvalifikaatorina ei eksponeerita, on `std430` paigutus, mis on päritud OpenGL 4.3 ja uuematest versioonidest (ning OpenGL ES 3.1 ja uuematest), lähedasem analoog "pakitud" paigutusele, ilma et see oleks nii riistvarast sõltuv või nõuaks käitusajal nihete päringuid. Põhimõtteliselt joondab see liikmed nende loomuliku suuruse järgi, kuni maksimaalselt 16 baidini. Seega on `float` 4 baiti, `vec3` 12 baiti jne. Seda paigutust kasutavad sisemiselt teatud WebGL-i laiendused. Kuigi te sageli ei saa otse `std430` määrata, on teadmine sellest, kuidas see on kontseptuaalselt sarnane liikmete pakkimisega, sageli kasulik oma struktuuride käsitsi paigutamisel.

Näide: muutujate ümberjärjestamine optimeerimiseks

Vaatleme järgmist uniform-plokki:

            #version 300 es

layout(std140) uniform BadBlock {
  float a;
  vec3 b;
  float c;
  vec3 d;
};

            

              
                Copy
              
            
          

Sel juhul on `vec3` muutujate joondamisnõuete tõttu märkimisväärne polsterdus. Mälu paigutus on järgmine:

• `a`: 4 baiti
• Polsterdus: 12 baiti
• `b`: 12 baiti
• Polsterdus: 4 baiti
• `c`: 4 baiti
• Polsterdus: 12 baiti
• `d`: 12 baiti
• Polsterdus: 4 baiti

`BadBlock`-i kogusuurus on 64 baiti.

Nüüd järjestame muutujad ümber:

            #version 300 es

layout(std140) uniform GoodBlock {
  vec3 b;
  vec3 d;
  float a;
  float c;
};

            

              
                Copy
              
            
          

Mälu paigutus on nüüd:

• `b`: 12 baiti
• Polsterdus: 4 baiti
• `d`: 12 baiti
• Polsterdus: 4 baiti
• `a`: 4 baiti
• Polsterdus: 4 baiti
• `c`: 4 baiti
• Polsterdus: 4 baiti

`GoodBlock`-i kogusuurus on 32 baiti, AGA ujukomaarvudele juurdepääs võib olla veidi aeglasem (kuid tõenäoliselt mitte märgatavalt). Proovime midagi muud:

            #version 300 es

layout(std140) uniform BestBlock {
  vec3 b;
  vec3 d;
  vec2 ac;
};

            

              
                Copy
              
            
          

Mälu paigutus on nüüd:

• `b`: 12 baiti
• Polsterdus: 4 baiti
• `d`: 12 baiti
• Polsterdus: 4 baiti
• `ac`: 8 baiti
• Polsterdus: 8 baiti

`BestBlock`-i kogusuurus on 48 baiti. Kuigi see on suurem kui meie teine näide, oleme kõrvaldanud polsterduse `a` ja `c` vahel ning saame neile tõhusamalt juurde pääseda ühe `vec2` väärtusena.

Praktiline nõuanne: Vaadake regulaarselt üle ja optimeerige oma uniform-plokkide paigutust, eriti jõudluskriitilistes rakendustes. Profileerige oma koodi, et tuvastada potentsiaalseid kitsaskohti, ja katsetage erinevate paigutustega, et leida optimaalne konfiguratsioon.

Uniform-ploki andmetele juurdepääs JavaScriptis

Uniform-plokis olevate andmete uuendamiseks oma JavaScripti koodist peate tegema järgmised sammud:

1. Hangi Uniform-ploki indeks: Kasutage `gl.getUniformBlockIndex`, et saada uniform-ploki indeks shaderi programmis.
2. Hangi Uniform-ploki suurus: Kasutage `gl.getActiveUniformBlockParameter` koos `gl.UNIFORM_BLOCK_DATA_SIZE`-ga, et määrata uniform-ploki suurus baitides.
3. Loo puhver: Looge `Float32Array` (või muu sobiv tüübistatud massiiv) õige suurusega, et hoida uniform-ploki andmeid.
4. Täida puhver: Täitke puhver iga uniform-ploki muutuja jaoks sobivate väärtustega. Olge teadlik mälu paigutusest (eriti jagatud või pakitud paigutuste puhul) ja kasutage õigeid nihkeid.
5. Loo puhvriobjekt: Looge WebGL puhvriobjekt, kasutades `gl.createBuffer`.
6. Seo puhver: Seo puhvriobjekt `gl.UNIFORM_BUFFER` sihtmärgiga, kasutades `gl.bindBuffer`.
7. Laadi andmed üles: Laadige andmed tüübistatud massiivist puhvriobjekti, kasutades `gl.bufferData`.
8. Seo Uniform-plokk sidumispunktiga: Valige uniform-puhvri sidumispunkt (nt 0, 1, 2). Kasutage `gl.bindBufferBase` või `gl.bindBufferRange`, et siduda puhvriobjekt valitud sidumispunktiga.
9. Lingi Uniform-plokk sidumispunktiga: Kasutage `gl.uniformBlockBinding`, et linkida shaderi uniform-plokk valitud sidumispunktiga.

Näide: uniform-ploki uuendamine JavaScriptist

            // Eeldades, et teil on WebGL kontekst (gl) ja shaderi programm (program)

// 1. Hangi uniform-ploki indeks
const blockIndex = gl.getUniformBlockIndex(program, "MyBlock");

// 2. Hangi uniform-ploki suurus
const blockSize = gl.getActiveUniformBlockParameter(program, blockIndex, gl.UNIFORM_BLOCK_DATA_SIZE);

// 3. Loo puhver
const bufferData = new Float32Array(blockSize / 4); // Eeldades ujukomaarve

// 4. Täida puhver (näidisväärtused)
// Märkus: Peate teadma muutujate nihkeid plokis
// std140 puhul saate need arvutada joondamisreeglite põhjal
// Jagatud või pakitud paigutuse puhul peate need pärima, kasutades gl.getActiveUniform
bufferData[0] = 1.0; // myFloat
bufferData[4] = 2.0; // myVec3.x (nihe tuleb õigesti arvutada)
bufferData[5] = 3.0; // myVec3.y
bufferData[6] = 4.0; // myVec3.z


// 5. Loo puhvriobjekt
const buffer = gl.createBuffer();

// 6. Seo puhver
gl.bindBuffer(gl.UNIFORM_BUFFER, buffer);

// 7. Laadi andmed üles
gl.bufferData(gl.UNIFORM_BUFFER, bufferData, gl.DYNAMIC_DRAW);

// 8. Seo uniform-plokk sidumispunktiga
const bindingPoint = 0;
gl.bindBufferBase(gl.UNIFORM_BUFFER, bindingPoint, buffer);

// 9. Lingi uniform-plokk sidumispunktiga
gl.uniformBlockBinding(program, blockIndex, bindingPoint);

            

              
                Copy
              
            
          

Jõudlusega seotud kaalutlused

Uniform-ploki paigutuse valik ja mälu paigutuse optimeerimine võivad oluliselt mõjutada jõudlust, eriti keerukates stseenides, kus on palju uniform-uuendusi. Siin on mõned jõudlusega seotud kaalutlused:

• Mälu ribalaius: Mälukasutuse minimeerimine võib vähendada andmete hulka, mida tuleb CPU ja GPU vahel üle kanda, parandades seeläbi jõudlust.
• Vahemälu lokaalsus: Muutujate paigutamine viisil, mis parandab vahemälu lokaalsust, võib vähendada vahemälu möödalaskmiste arvu, mis viib kiiremate juurdepääsuaegadeni.
• Joondamine: Õige joondamine tagab, et GPU saab andmetele tõhusalt juurde pääseda. Valesti joondatud andmed võivad kaasa tuua jõudluse vähenemise.
• Draiveri optimeerimine: Erinevad graafikadraiverid võivad optimeerida uniform-plokkidele juurdepääsu erineval viisil. Katsetage erinevate paigutustega, et leida oma sihtriistvara jaoks parim konfiguratsioon.
• Uniform-uuenduste arv: Uniform-uuenduste arvu vähendamine võib oluliselt parandada jõudlust. Kasutage uniform-plokke seotud uniformide grupeerimiseks ja uuendage neid ühe kõnega.

Kokkuvõte

Uniform-ploki pakkimisalgoritmide mõistmine ja mälu paigutuse optimeerimine on WebGL-rakendustes optimaalse jõudluse saavutamiseks ülioluline. `std140` paigutus pakub head tasakaalu jõudluse ja ühilduvuse vahel, samas kui jagatud ja pakitud paigutused pakuvad rohkem paindlikkust, kuid nõuavad hoolikat riistvarasõltuvuste ja käitusajaliste nihete päringute arvestamist. Muutujate ümberjärjestamise, sarnaste tüüpide grupeerimise ja ebavajaliku polsterduse minimeerimisega saate oluliselt vähendada mälukasutust ja parandada jõudlust.

Ärge unustage oma koodi profileerida ja katsetada erinevate paigutustega, et leida oma konkreetse rakenduse ja sihtriistvara jaoks optimaalne konfiguratsioon. Vaadake regulaarselt üle ja optimeerige oma uniform-plokkide paigutusi, eriti kui teie shaderid arenevad ja muutuvad keerukamaks.

Lisamaterjalid

• OpenGL Wiki: Interface Block (GLSL)
• OpenGL ES 3.0 Specification

See põhjalik juhend peaks andma teile tugeva aluse WebGL shaderi uniform-ploki pakkimisalgoritmide mõistmiseks ja optimeerimiseks. Edu ja head renderdamist!