Geomeetria vallandamine: süvauuring WebGL-i võrgusilmavarjundi ülesannete võimendamise torustikku

Veeb ei ole enam staatiline, kahemõõtmeline meedium. See on arenenud elavaks platvormiks rikkalike, kaasahaaravate 3D-kogemuste jaoks, alates hingematvatest tootekonfiguraatoritest ja arhitektuursetest visualiseeringutest kuni keerukate andmemudelite ja täieõiguslike mängudeni. See areng aga esitab graafikaprotsessorile (GPU) enneolematuid nõudmisi. Aastaid on standardne reaalajas graafikatorustik, olles küll võimas, näidanud oma vanust, toimides sageli pudelikaelana geomeetrilise keerukuse jaoks, mida kaasaegsed rakendused nõuavad.

Sisenege võrgusilmavarjundi torustikku, paradigma muutvasse funktsiooni, mis on nüüd veebis kättesaadav laienduse WEBGL_mesh_shader kaudu. See uus mudel muudab põhjalikult seda, kuidas me mõtleme geomeetriast ja töötleme seda GPU-s. Selle südames on võimas kontseptsioon: Ülesannete võimendamine. See ei ole lihtsalt järkjärguline uuendus; see on revolutsiooniline hüpe, mis viib planeerimis- ja geomeetria genereerimise loogika protsessorilt otse GPU kõrgelt paralleelsele arhitektuurile, vabastades võimalused, mis olid veebibrauseris varem ebapraktilised või võimatud.

See põhjalik juhend viib teid sügavale võrgusilmavarjundi geomeetria torustikku. Me uurime selle arhitektuuri, mõistame ülesannete ja võrgusilmavarjundite erinevaid rolle ning avastame, kuidas ülesannete võimendamist saab kasutada järgmise põlvkonna visuaalselt vapustavate ja suure jõudlusega veebirakenduste loomiseks.

Kiire tagasikerimine: traditsioonilise geomeetria torustiku piirangud

Et tõeliselt hinnata võrgusilmavarjundite uuenduslikkust, peame kõigepealt mõistma torustikku, mida nad asendavad. Aastakümneid on reaalajas graafikat domineerinud suhteliselt fikseeritud funktsioonidega torustik:

1. Tipuvarjund: töötleb üksikuid tippe, teisendades need ekraaniruumi.
2. (Valikuline) Tessellatsioonivarjundid: jagavad geomeetria plaastreid peenemate detailide loomiseks.
3. (Valikuline) Geomeetria varjund: saab primitiive (punkte, jooni, kolmnurki) lennult luua või hävitada.
4. Rasteriseerija: teisendab primitiivid piksliteks.
5. Fragmenteerimisvarjund: arvutab iga piksli lõpliku värvi.

See mudel on meid hästi teeninud, kuid sellel on omased piirangud, eriti kui stseenid muutuvad keerukamaks:

• Protsessoriga seotud joonistamiskutsungid: protsessoril on tohutu ülesanne välja selgitada, mida täpselt on vaja joonistada. See hõlmab koonusekujulist kärpimist (eemaldab objektid väljaspool kaamera vaatevälja), oklusioonikärpimist (eemaldab teiste objektide poolt varjatud objektid) ja detailitaseme (LOD) süsteemide haldamist. Miljonite objektidega stseeni puhul võib see viia selleni, et protsessorist saab peamine pudelikael, mis ei suuda näljast GPU-d piisavalt kiiresti toita.
• Jäik sisendstruktuur: torustik on üles ehitatud jäigale sisendi töötlemise mudelile. Sisendkoostaja toidab tippe ükshaaval ja varjundid töötlevad neid suhteliselt piiratud viisil. See ei ole ideaalne kaasaegsete GPU arhitektuuride jaoks, mis paistavad silma sidusa, paralleelse andmetöötluse poolest.
• Ebatõhus võimendus: kuigi geomeetria varjundid võimaldasid geomeetria võimendamist (uute kolmnurkade loomist sisendprimitiivist), olid need kurikuulsalt ebatõhusad. Nende väljundkäitumine oli riistvara jaoks sageli ettearvamatu, mis põhjustas jõudlusprobleeme, mis muutsid need paljude suuremahuliste rakenduste jaoks mittekäivitajaks.
• Raistatud töö: kui saadate traditsioonilises torustikus kolmnurga renderdamisele, käivitatakse tipuvarjund kolm korda, isegi kui see kolmnurk lõpuks kärbitakse või on tagaküljega piksliõhuke killuke. Suur osa töötlemisvõimsusest kulutatakse geomeetriale, mis ei aita kaasa lõplikule pildile.

Paradigma muutus: võrgusilmavarjundi torustiku tutvustamine

Võrgusilmavarjundi torustik asendab tipu-, tessellatsiooni- ja geomeetria varjundietapid uue, paindlikuma kaheastmelise mudeliga:

1. Ülesande varjund (valikuline): kõrgetasemeline juhtimisetapp, mis määrab, kui palju tööd on vaja teha. Tuntud ka kui võimendusvarjund.
2. Võrgusilmavarjund: tööloomietapp, mis töötab andmepakettidega, et genereerida väikeseid, iseseisvaid geomeetriapakette, mida nimetatakse "võrgusilmadeks".

See uus lähenemisviis muudab põhjalikult renderdamise filosoofiat. Selle asemel, et protsessor mikrohalduseks iga objekti iga joonistamiskutsungit, saab see nüüd väljastada ühe võimsa joonistamiskäsu, mis sisuliselt ütleb GPU-le: "Siin on keeruka stseeni kõrgetasemeline kirjeldus; teie selgitate üksikasjad välja."

GPU, kasutades ülesannete ja võrgusilmavarjundeid, saab seejärel teostada kärpimist, LOD-i valimist ja protseduurilist genereerimist kõrgelt paralleelsel viisil, käivitades ainult vajaliku töö tegelikult nähtava geomeetria genereerimiseks. See on GPU-põhise renderdamise torustiku olemus ja see muudab jõudlust ja skaleeritavust.

Dirigent: ülesannete (võimendamise) varjundi mõistmine

Ülesannete varjund on uue torustiku aju ja selle uskumatute jõudude võti. See on valikuline etapp, kuid see on koht, kus toimub "võimendamine". Selle peamine roll ei ole tippude või kolmnurkade genereerimine, vaid töö saatjana.

Mis on ülesande varjund?

Mõelge ülesande varjundile kui tohutu ehitusprojekti projektijuhile. Protsessor annab juhile kõrgetasemelise eesmärgi, näiteks "ehitage linnaosa". Projektijuht (ülesande varjund) ei laota ise telliseid. Selle asemel hindab see üldist ülesannet, kontrollib jooniseid ja määrab, milliseid ehitusmeeskondi (võrgusilmavarjundi töörühmi) on vaja ja kui palju. See võib otsustada, et teatud hoonet pole vaja (kärpimine) või et teatud piirkond vajab kümmet meeskonda, samas kui teine vajab ainult kahte.

Tehnilises mõttes töötab ülesande varjund arvutusteenuse sarnase töörühmaga. See pääseb juurde mälule, teostab keerukaid arvutusi ja, mis kõige tähtsam, otsustab, mitu võrgusilmavarjundi töörühma käivitada. See otsus on selle võimsuse tuum.

Võimendamise jõud

Mõiste "võimendus" tuleneb ülesande varjundi võimest võtta oma töörühm ja käivitada null, üks või palju võrgusilmavarjundi töörühmi. See võime on muutev:

• Käivitage null: kui ülesande varjund määrab, et objekt või stseeni tükk ei ole nähtav (nt väljaspool kaamera koonust), võib see lihtsalt otsustada käivitada null võrgusilmavarjundi töörühmi. Kogu selle objektiga seotud potentsiaalne töö kaob ilma edasise töötlemiseta. See on uskumatult tõhus kärpimine, mida teostatakse täielikult GPU-s.
• Käivitage üks: see on sirgjooneline läbipääs. Ülesande varjundi töörühm otsustab, et on vaja ühte võrgusilmavarjundi töörühma.
• Käivitage palju: see on koht, kus protseduurilise genereerimise maagia juhtub. Üks ülesande varjundi töörühm saab analüüsida mõningaid sisendparameetreid ja otsustada käivitada tuhandeid võrgusilmavarjundi töörühmi. Näiteks võib see käivitada töörühma iga rohulible jaoks põllul või iga asteroidi jaoks tihedas klastris, kõik ühest väljastamiskäsust protsessorist.

Kontseptuaalne pilk ülesande varjundi GLSL-ile

Kuigi üksikasjad võivad muutuda keeruliseks, on GLSL-i (WebGL-i laienduse jaoks) peamine võimendusmehhanism üllatavalt lihtne. See keerleb funktsiooni `EmitMeshTasksEXT()` ümber.

Märkus: see on lihtsustatud, kontseptuaalne näide.

#version 310 es #extension GL_EXT_mesh_shader : require layout(local_size_x = 32, local_size_y = 1, local_size_z = 1) in; // Protsessorist edastatud ühtlased uniform mat4 u_viewProjectionMatrix; uniform uint u_totalObjectCount; // Puhver, mis sisaldab paljude objektide piirdekerasid struct BoundingSphere { vec4 centerAndRadius; }; layout(std430, binding = 0) readonly buffer ObjectBounds { BoundingSphere bounds[]; } objectBounds; void main() { // Iga töörühma lõim saab kontrollida erinevat objekti uint objectIndex = gl_GlobalInvocationID.x; if (objectIndex >= u_totalObjectCount) { return; } // Teostage selle objekti piirdekeraga GPU-s koonusekujuline kärpimine BoundingSphere sphere = objectBounds.bounds[objectIndex]; bool isVisible = isSphereInFrustum(sphere.centerAndRadius, u_viewProjectionMatrix); // Kui see on nähtav, käivitage selle joonistamiseks üks võrgusilmavarjundi töörühm. // Märkus: see loogika võib olla keerulisem, kasutades nähtavate // objektide loendamiseks atomaarseid elemente ja lastes ühel lõimel // need kõik välja saata. if (isVisible) { // See ütleb GPU-le võrgusilma ülesande käivitamist. Parameetreid saab kasutada // teabe edastamiseks võrgusilmavarjundi töörühmale. // Lihtsuse huvides kujutame ette, et iga ülesande varjundi kutse saab otse kaardistada võrgusilma ülesandele. // Realistlikum stsenaarium hõlmab grupeerimist ja väljastamist ühest lõimest. // Lihtsustatud kontseptuaalne väljastus: // Teeme näo, et iga nähtav objekt saab oma ülesande, kuigi tegelikkuses // haldaks üks ülesande varjundi kutse mitme võrgusilmavarjundi väljastamist. EmitMeshTasksEXT(1u, 0u, 0u); // See on peamine võimendusfunktsioon } // Kui see pole nähtav, ei tee me midagi! Objekt kärbitakse ilma GPU-kuludeta peale selle kontrolli. }

Reaalses stsenaariumis võib teil olla üks lõim töörühmas, mis koondab tulemused ja teeb ühe `EmitMeshTasksEXT` kutse kõigi nähtavate objektide jaoks, mille eest töörühm vastutab.

Tööjõud: võrgusilmavarjundi roll geomeetria genereerimisel

Kui ülesande varjund on ühe või mitu töörühma välja saatnud, võtab võrgusilmavarjund üle. Kui ülesande varjund on projektijuht, on võrgusilmavarjund kvalifitseeritud ehitusmeeskond, mis tegelikult geomeetriat ehitab.

Töörühmadest võrgusilmadeni

Sarnaselt ülesande varjundiga töötab võrgusilmavarjund lõimede koostöölise töörühmaga. Kogu selle töörühma ühine eesmärk on toota üks väike geomeetriapartii, mida nimetatakse võrgusilmaks. Võrgusilm on lihtsalt tippude kogum ja primitiivid (kolmnurgad), mis neid ühendavad. Tavaliselt sisaldab võrgusilm väikest arvu tippe (nt kuni 128) ja kolmnurki (nt kuni 256), mis on kaasaegsetele GPU vahemäludele ja töötlemismudelitele väga sõbralik suurus.

See on põhiline kõrvalekalle tipuvarjundist, millel polnud oma naabrite kohta mingit arusaama. Võrgusilmavarjundis saavad kõik töörühma lõimed jagada mälu ja koordineerida oma jõupingutusi võrgusilma tõhusaks ehitamiseks.

Tippude ja primitiivide genereerimine

Selle asemel, et tagastada üks `gl_Position`, täidab võrgusilmavarjundi töörühm väljundmassiivid oma võrgusilma täielike andmetega. Lõimed teevad koostööd, et kirjutada tipu asukohad, normaalsed, UV-koordinaadid ja muud atribuudid nendesse massiividesse. Samuti määratlevad nad primitiivid, määrates, millised tipud moodustavad iga kolmnurga.

Viimane samm võrgusilmavarjundis on kutsuda funktsioon, näiteks `SetMeshOutputsEXT()`, et deklareerida täpselt, mitu tippu ja primitiivi see on genereerinud. Riistvara võtab seejärel selle võrgusilma ja edastab selle otse rasteriseerijale.

Kontseptuaalne pilk võrgusilmavarjundi GLSL-ile

Siin on kontseptuaalne näide võrgusilmavarjundist, mis genereerib lihtsa nelinurga. Pange tähele, kuidas lõimed teevad koostööd, lähtudes oma `gl_LocalInvocationID`-st.

#version 310 es #extension GL_EXT_mesh_shader : require // Määrake meie võrgusilma maksimaalsed väljundid layout(max_vertices = 4, max_primitives = 2) out; layout(triangles) out; layout(local_size_x = 4, local_size_y = 1, local_size_z = 1) in; // Me kirjutame tipu andmed nendesse sisseehitatud väljundmassiividesse out gl_MeshVerticesEXT { vec4 position; vec2 uv; } vertices[]; // Me kirjutame kolmnurga indeksid sellesse massiivi out uint gl_MeshPrimitivesEXT[]; uniform mat4 u_modelViewProjectionMatrix; void main() { // Selle võrgusilma jaoks genereeritavad tipud ja primitiivid kokku const uint vertexCount = 4; const uint primitiveCount = 2; // Ütle riistvarale, mitu tippu ja primitiivi me tegelikult väljastame SetMeshOutputsEXT(vertexCount, primitiveCount); // Määrake nelinurga tipu asukohad ja UV-d vec4 positions[4] = vec4[4]( vec4(-0.5, 0.5, 0.0, 1.0), vec4(-0.5, -0.5, 0.0, 1.0), vec4(0.5, 0.5, 0.0, 1.0), vec4(0.5, -0.5, 0.0, 1.0) ); vec2 uvs[4] = vec2[4]( vec2(0.0, 1.0), vec2(0.0, 0.0), vec2(1.0, 1.0), vec2(1.0, 0.0) ); // Laske igal töörühma lõimel genereerida üks tipp uint id = gl_LocalInvocationID.x; if (id < vertexCount) { vertices[id].position = u_modelViewProjectionMatrix * positions[id]; vertices[id].uv = uvs[id]; } // Laske kahel esimesel lõimel genereerida nelinurga kaks kolmnurka if (id == 0) { // Esimene kolmnurk: 0, 1, 2 gl_MeshPrimitivesEXT[0] = 0u; gl_MeshPrimitivesEXT[1] = 1u; gl_MeshPrimitivesEXT[2] = 2u; } if (id == 1) { // Teine kolmnurk: 1, 3, 2 gl_MeshPrimitivesEXT[3] = 1u; gl_MeshPrimitivesEXT[4] = 3u; gl_MeshPrimitivesEXT[5] = 2u; } }

Praktiline maagia: ülesannete võimendamise kasutusjuhud

Selle torustiku tõeline jõud avaldub siis, kui rakendame seda keerukatele, reaalsetele renderdamise väljakutsetele.

Kasutusjuht 1: tohutu protseduurilise geomeetria genereerimine

Kujutage ette tiheda asteroidide välja renderdamist sadade tuhandete ainulaadsete asteroididega. Vana torustikuga peaks protsessor genereerima iga asteroidi tipuandmed ja väljastama igaühe jaoks eraldi joonistamiskutsungi, mis on täiesti jätkusuutmatu lähenemisviis.

Võrgusilmavarjundi töövoog:

1. Protsessor väljastab ühe joonistamiskutsungi: `drawMeshTasksEXT(1, 1)`. See edastab ka mõningaid kõrgetasemelisi parameetreid, nagu välja raadius ja asteroidide tihedus, ühtlases puhvris.
2. Käivitatakse üks ülesande varjundi töörühm. See loeb parameetreid ja arvutab, et vaja on näiteks 50 000 asteroidi. Seejärel kutsub see `EmitMeshTasksEXT(50000, 0, 0)`.
3. GPU käivitab paralleelselt 50 000 võrgusilmavarjundi töörühma.
4. Iga võrgusilmavarjundi töörühm kasutab oma unikaalset ID-d (`gl_WorkGroupID`) seemnena ühe unikaalse asteroidi tippude ja kolmnurkade protseduuriliseks genereerimiseks.

Tulemuseks on tohutu, keeruline stseen, mis on genereeritud peaaegu täielikult GPU-s, vabastades protsessori teiste ülesannete, nagu füüsika ja AI, käsitlemiseks.

Kasutusjuht 2: GPU-põhine kärpimine suures ulatuses

Mõelge üksikasjalikule linnavaatele miljonite üksikute objektidega. Protsessor lihtsalt ei saa kontrollida iga objekti nähtavust igal kaadril.

Võrgusilmavarjundi töövoog:

1. Protsessor laadib üles suure puhvri, mis sisaldab iga stseeni iga üksiku objekti piirdemahte (nt kerad või kastid). See juhtub üks kord või ainult siis, kui objektid liiguvad.
2. Protsessor väljastab ühe joonistamiskutsungi, käivitades piisavalt ülesande varjundi töörühmi, et töödelda paralleelselt kogu piirdemahtude loendit.
3. Igale ülesande varjundi töörühmale määratakse tükk piirdemahtude loendist. See itereerib läbi oma määratud objektide, teostab igaühe jaoks koonusekujulise kärpimise (ja potentsiaalselt oklusioonikärpimise) ja loendab, kui palju on nähtavaid.
4. Lõpuks käivitab see täpselt nii palju võrgusilmavarjundi töörühmi, edastades nähtavate objektide ID-d.
5. Iga võrgusilmavarjundi töörühm saab objekti ID, otsib oma võrgusilma andmed puhvrist ja genereerib renderdamiseks vastavad võrgusilmad.

See viib kogu kärpimisprotsessi GPU-sse, võimaldades stseene keerukusega, mis halvataks CPU-põhise lähenemisviisi koheselt.

Kasutusjuht 3: dünaamiline ja tõhus detailitase (LOD)

LOD-süsteemid on jõudluse jaoks kriitilised, lülitudes lihtsamate mudelite juurde objektide jaoks, mis on kaugel. Võrgusilmavarjundid muudavad selle protsessi granuleeritumaks ja tõhusamaks.

Võrgusilmavarjundi töövoog:

1. Objekti andmed on eelnevalt töödeldud võrgusilmade hierarhiasse. Jämedamad LOD-id kasutavad vähem, suuremaid võrgusilmi.
2. Selle objekti ülesande varjund arvutab selle kauguse kaamerast.
3. Kauguse põhjal otsustab see, milline LOD-tase on sobiv. Seejärel saab see teostada kärpimist selle LOD-i iga võrgusilma kohta. Näiteks suure objekti puhul saab see kärpida objekti tagaküljel olevaid võrgusilmi, mis pole nähtavad.
4. See käivitab ainult valitud LOD-i nähtavate võrgusilmade võrgusilmavarjundi töörühmad.

See võimaldab peeneteralist, lennult LOD-i valimist ja kärpimist, mis on palju tõhusam kui protsessori kogu mudelite vahetamine.

Alustamine: laienduse `WEBGL_mesh_shader` kasutamine

Kas olete valmis katsetama? Siin on praktilised sammud võrgusilmavarjunditega WebGL-is alustamiseks.

Toe kontrollimine

Esiteks on see tipptasemel funktsioon. Peate veenduma, et kasutaja brauser ja riistvara seda toetavad.

const gl = canvas.getContext('webgl2'); const meshShaderExtension = gl.getExtension('WEBGL_mesh_shader'); if (!meshShaderExtension) { console.error("Teie brauser või GPU ei toeta WEBGL_mesh_shader-it."); // Tagasipöördumine traditsioonilise renderdamise tee juurde }

Uus joonistamiskutsung

Unustage `drawArrays` ja `drawElements`. Uus torustik kutsutakse esile uue käsu abil. Laienduse objekt, mille saate funktsioonist `getExtension`, sisaldab uusi funktsioone.

// Käivitage 10 ülesande varjundi töörühma. // Igal töörühmal on varjundis määratletud local_size. meshShaderExtension.drawMeshTasksEXT(0, 10);

Argument `count` määrab, mitu ülesande varjundi kohalikku töörühma käivitada. Kui te ei kasuta ülesande varjundit, käivitab see otse võrgusilmavarjundi töörühmad.

Varjundi kompileerimine ja linkimine

Protsess on sarnane traditsioonilisele GLSL-ile, kuid loote varjundeid tüübiga `meshShaderExtension.MESH_SHADER_EXT` ja `meshShaderExtension.TASK_SHADER_EXT`. Lingite need programmi kokku nii, nagu teeksite seda tipu- ja fragmenteerimisvarjundiga.

Oluline on see, et mõlema varjundi GLSL-i lähtekood peab algama laienduse lubamise direktiiviga:

#extension GL_EXT_mesh_shader : require

Jõudluskaalutlused ja parimad tavad

• Valige õige töörühma suurus: teie varjundi `layout(local_size_x = N)` on kriitiline. Suurus 32 või 64 on sageli hea lähtepunkt, kuna see on hästi kooskõlas aluseks olevate riistvara arhitektuuridega, kuid profileerige alati, et leida oma konkreetse töökoormuse jaoks optimaalne suurus.
• Hoidke oma ülesande varjund lahjana: ülesande varjund on võimas tööriist, kuid see on ka potentsiaalne pudelikael. Kärpimine ja loogika, mida siin teostate, peaksid olema võimalikult tõhusad. Vältige aeglaseid, keerulisi arvutusi, kui neid saab eelnevalt arvutada.
• Optimeerige võrgusilma suurust: võrgusilma iga tipu ja primitiivi arvu jaoks on riistvarast sõltuv magus koht. Deklareeritavad `max_vertices` ja `max_primitives` tuleks hoolikalt valida. Liiga väike ja töörühmade käivitamise üldkulud domineerivad. Liiga suur ja kaotate paralleelsuse ja vahemälu tõhususe.
• Andmete sidusus on oluline: kui teostate ülesande varjundis kärpimist, korraldage oma piirdemahtude andmed mälus, et soodustada sidusaid juurdepääsumustreid. See aitab GPU vahemäludel tõhusalt töötada.
• Teage, millal neid vältida: võrgusilmavarjundid ei ole maagiline kuul. Paari lihtsa objekti renderdamiseks võib võrgusilmatorustiku üldkulu olla aeglasem kui traditsiooniline tiputorustik. Kasutage neid seal, kus nende tugevused paistavad: tohutu objektide arv, keeruline protseduuriline genereerimine ja GPU-põhised töökoormused.

Järeldus: reaalajas graafika tulevik veebis on nüüd

Ülesannete võimendusega võrgusilmavarjundi torustik on üks olulisemaid edusamme reaalajas graafikas viimase kümnendi jooksul. Nihutades paradigmat jäigast, protsessori hallatavast protsessist paindlikuks, GPU-põhiseks protsessiks, purustab see varasemad barjäärid geomeetrilise keerukuse ja stseeniskaala jaoks.

See tehnoloogia, mis on kooskõlas kaasaegsete graafika API-dega, nagu Vulkan, DirectX 12 Ultimate ja Metal, ei piirdu enam tipptasemel omarakendustega. Selle saabumine WebGL-i avab ukse uuele veebipõhiste kogemuste ajastule, mis on detailsemad, dünaamilisemad ja kaasahaaravamad kui kunagi varem. Arendajatele, kes on valmis seda uut mudelit omaks võtma, on loomingulised võimalused praktiliselt piiramatud. Võime genereerida terveid maailmu lennult on esimest korda sõna otseses mõttes teie käeulatuses, otse veebibrauseris.