WebGL Transform Feedback Varying: viršūnių atributų fiksavimas išsamiai

Transform Feedback yra galinga WebGL funkcija, leidžianti fiksuoti viršūnių šešėliavimo programų išvesties duomenis ir juos naudoti kaip įvesties duomenis vėlesniems atvaizdavimo etapams. Ši technika atveria duris įvairiems pažangiems atvaizdavimo efektams ir geometrijos apdorojimo užduotims tiesiogiai GPU. Vienas iš esminių Transform Feedback aspektų yra supratimas, kaip nurodyti, kurie viršūnių atributai turėtų būti fiksuojami, vadinami "varying". Šis vadovas pateikia išsamią WebGL Transform Feedback apžvalgą, daugiausia dėmesio skiriant viršūnių atributų fiksavimui naudojant varying.

Kas yra Transform Feedback?

Tradiciškai WebGL atvaizdavimas apima viršūnių duomenų siuntimą į GPU, jų apdorojimą per viršūnių ir fragmentų šešėliavimo programas ir gautų pikselių rodymą ekrane. Viršūnių šešėliavimo programos išvesties duomenys, po apkirpimo ir perspektyvos padalijimo, paprastai yra atmetami. Transform Feedback keičia šią paradigmą, leisdama perimti ir išsaugoti šiuos po viršūnių šešėliavimo programos gautus rezultatus atgal į buferio objektą.

Įsivaizduokite scenarijų, kuriame norite simuliuoti dalelių fiziką. Galėtumėte atnaujinti dalelių pozicijas CPU ir siųsti atnaujintus duomenis atgal į GPU atvaizdavimui kiekviename kadre. Transform Feedback siūlo efektyvesnį požiūrį, atliekant fizikos skaičiavimus (naudojant viršūnių šešėliavimo programą) GPU ir tiesiogiai fiksuojant atnaujintas dalelių pozicijas atgal į buferį, paruoštą kito kadro atvaizdavimui. Tai sumažina CPU apkrovą ir pagerina našumą, ypač sudėtingoms simuliacijoms.

Pagrindinės Transform Feedback sąvokos

• Viršūnių šešėliavimo programa: Transform Feedback pagrindas. Viršūnių šešėliavimo programa atlieka skaičiavimus, kurių rezultatai yra fiksuojami.
• Varying kintamieji: Tai yra išvesties kintamieji iš viršūnių šešėliavimo programos, kuriuos norite fiksuoti. Jie apibrėžia, kurie viršūnių atributai yra įrašomi atgal į buferio objektą.
• Buferio objektai: Saugykla, kurioje įrašomi fiksuoti viršūnių atributai. Šie buferiai yra priskiriami Transform Feedback objektui.
• Transform Feedback objektas: WebGL objektas, valdantis viršūnių atributų fiksavimo procesą. Jis apibrėžia tikslinius buferius ir varying kintamuosius.
• Primitivų režimas: Nurodo viršūnių šešėliavimo programos generuojamų primityvų tipą (taškai, linijos, trikampiai). Tai svarbu teisingam buferio išdėstymui.

Transform Feedback nustatymas WebGL

Transform Feedback naudojimo procesas apima kelis žingsnius:

1. Sukurkite ir konfigūruokite Transform Feedback objektą:

   Naudokite gl.createTransformFeedback(), kad sukurtumėte Transform Feedback objektą. Tada priskirkite jį naudodami gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback).

2. Sukurkite ir priskirkite buferio objektus:

   Sukurkite buferio objektus naudodami gl.createBuffer(), kad saugotumėte fiksuotus viršūnių atributus. Kiekvieną buferio objektą priskirkite gl.TRANSFORM_FEEDBACK_BUFFER taikiniui naudodami gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, index, buffer). `index` atitinka varying kintamųjų, nurodytų šešėliavimo programoje, tvarką.

3. Nurodykite Varying kintamuosius:

   Tai yra esminis žingsnis. Prieš susiejant šešėliavimo programą, jums reikia nurodyti WebGL, kurie išvesties kintamieji (varying kintamieji) iš viršūnių šešėliavimo programos turėtų būti fiksuojami. Naudokite gl.transformFeedbackVaryings(program, varyings, bufferMode).

   • program: Šešėliavimo programos objektas.
   • varyings: Eilučių masyvas, kuriame kiekviena eilutė yra varying kintamojo pavadinimas viršūnių šešėliavimo programoje. Šių kintamųjų tvarka yra svarbi, nes ji lemia buferio priskyrimo indeksą.
   • bufferMode: Nurodo, kaip varying kintamieji yra įrašomi į buferio objektus. Įprastos parinktys yra gl.SEPARATE_ATTRIBS (kiekvienas varying eina į atskirą buferį) ir gl.INTERLEAVED_ATTRIBS (visi varying kintamieji yra persipinami viename buferyje).
4. Sukurkite ir kompiliuokite šešėliavimo programas:

   Sukurkite viršūnių ir fragmentų šešėliavimo programas. Viršūnių šešėliavimo programa turi išvesti varying kintamuosius, kuriuos norite fiksuoti. Fragmentų šešėliavimo programa gali būti reikalinga arba ne, priklausomai nuo jūsų programos. Ji gali būti naudinga derinimui.

5. Susiekite šešėliavimo programą:

   Susiekite šešėliavimo programą naudodami gl.linkProgram(program). Svarbu iškviesti gl.transformFeedbackVaryings() *prieš* susiejant programą.

6. Pradėkite ir baikite Transform Feedback:

   Norėdami pradėti fiksuoti viršūnių atributus, iškvieskite gl.beginTransformFeedback(primitiveMode), kur primitiveMode nurodo generuojamų primityvų tipą (pvz., gl.POINTS, gl.LINES, gl.TRIANGLES). Po atvaizdavimo, iškvieskite gl.endTransformFeedback(), kad sustabdytumėte fiksavimą.

7. Nupieškite geometriją:

   Naudokite gl.drawArrays() arba gl.drawElements(), kad atvaizduotumėte geometriją. Bus įvykdyta viršūnių šešėliavimo programa, o nurodyti varying kintamieji bus užfiksuoti buferio objektuose.

Pavyzdys: dalelių pozicijų fiksavimas

Pailiustruokime tai paprastu dalelių pozicijų fiksavimo pavyzdžiu. Tarkime, turime viršūnių šešėliavimo programą, kuri atnaujina dalelių pozicijas atsižvelgiant į greitį ir gravitaciją.

Viršūnių šešėliavimo programa (particle.vert)

#version 300 es

in vec3 a_position;

in vec3 a_velocity;

uniform float u_timeStep;

out vec3 v_position;

out vec3 v_velocity;

void main() {
 vec3 gravity = vec3(0.0, -9.8, 0.0);
 v_velocity = a_velocity + gravity * u_timeStep;
 v_position = a_position + v_velocity * u_timeStep;

 gl_Position = vec4(v_position, 1.0);
}

Ši viršūnių šešėliavimo programa priima a_position ir a_velocity kaip įvesties atributus. Ji apskaičiuoja naują kiekvienos dalelės greitį ir poziciją, išsaugodama rezultatus v_position ir v_velocity varying kintamuosiuose. `gl_Position` nustatoma į naują poziciją atvaizdavimui.

JavaScript kodas

// ... WebGL konteksto inicializavimas ...

// 1. Sukurti Transform Feedback objektą
const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);

// 2. Sukurti buferio objektus pozicijai ir greičiui
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particlePositions, gl.DYNAMIC_COPY); // Pradinės dalelių pozicijos

const velocityBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.bufferData(gl.ARRAY_BUFFER, particleVelocities, gl.DYNAMIC_COPY); // Pradiniai dalelių greičiai

// 3. Nurodyti Varying kintamuosius
const varyings = ['v_position', 'v_velocity'];
gl.transformFeedbackVaryings(program, varyings, gl.SEPARATE_ATTRIBS);  // Turi būti iškviesta *prieš* susiejant programą.

// 4. Sukurti ir kompiliuoti šešėliavimo programas (praleista dėl trumpumo)
// ...

// 5. Susieti šešėliavimo programą
gl.linkProgram(program);

// Priskirti Transform Feedback buferius
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, positionBuffer);  // 0 indeksas skirtas v_position
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 1, velocityBuffer);  // 1 indeksas skirtas v_velocity

// Gauti atributų vietas
const positionLocation = gl.getAttribLocation(program, 'a_position');
const velocityLocation = gl.getAttribLocation(program, 'a_velocity');

// --- Atvaizdavimo ciklas --- 
function render() {
 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

 gl.useProgram(program);

 // Įjungti atributus
 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLocation);

 gl.bindBuffer(gl.ARRAY_BUFFER, velocityBuffer);
gl.vertexAttribPointer(velocityLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(velocityLocation);

 // 6. Pradėti Transform Feedback
 gl.enable(gl.RASTERIZER_DISCARD); // Išjungti rasterizaciją
gl.beginTransformFeedback(gl.POINTS);

 // 7. Nupiešti geometriją
 gl.drawArrays(gl.POINTS, 0, numParticles);

 // 8. Baigti Transform Feedback
 gl.endTransformFeedback();
gl.disable(gl.RASTERIZER_DISCARD); // Vėl įjungti rasterizaciją

 // Sukeisti buferius (pasirinktinai, jei norite atvaizduoti taškus)
 // Pavyzdžiui, iš naujo atvaizduoti atnaujintą pozicijų buferį.

 requestAnimationFrame(render);
}

render();

Šiame pavyzdyje:

• Suriame du buferio objektus: vieną dalelių pozicijoms, kitą – greičiams.
• Nurodome v_position ir v_velocity kaip varying kintamuosius.
• Pozicijų buferį priskiriame 0-ajam, o greičių buferį – 1-ajam Transform Feedback buferių indeksui.
• Išjungiame rasterizaciją naudodami gl.enable(gl.RASTERIZER_DISCARD), nes norime tik fiksuoti viršūnių atributų duomenis; šiame etape nenorime nieko atvaizduoti. Tai svarbu našumui.
• Iškviečiame gl.drawArrays(gl.POINTS, 0, numParticles), kad įvykdytume viršūnių šešėliavimo programą kiekvienai dalelei.
• Atnaujintos dalelių pozicijos ir greičiai yra užfiksuojami buferio objektuose.
• Po Transform Feedback etapo galėtumėte sukeisti įvesties ir išvesties buferius ir atvaizduoti daleles pagal atnaujintas pozicijas.

Varying kintamieji: detalės ir aspektai

varyings parametras funkcijoje gl.transformFeedbackVaryings() yra eilučių masyvas, reprezentuojantis išvesties kintamųjų pavadinimus iš jūsų viršūnių šešėliavimo programos, kuriuos norite fiksuoti. Šie kintamieji privalo:

• Būti deklaruoti kaip out kintamieji viršūnių šešėliavimo programoje.
• Turėti atitinkamą duomenų tipą tarp viršūnių šešėliavimo programos išvesties ir buferio objekto saugyklos. Pavyzdžiui, jei varying kintamasis yra vec3, atitinkamas buferio objektas turi būti pakankamai didelis, kad saugotų vec3 reikšmes visoms viršūnėms.
• Būti teisinga tvarka. Tvarka varyings masyve nulemia buferio priskyrimo indeksą. Pirmasis varying bus įrašytas į buferio indeksą 0, antrasis – į indeksą 1 ir t. t.

Duomenų lygiavimas ir buferio išdėstymas

Duomenų lygiavimo supratimas yra labai svarbus teisingam Transform Feedback veikimui. Fiksuotų viršūnių atributų išdėstymas buferio objektuose priklauso nuo bufferMode parametro funkcijoje gl.transformFeedbackVaryings():

• gl.SEPARATE_ATTRIBS: Kiekvienas varying kintamasis įrašomas į atskirą buferio objektą. Buferio objektas, priskirtas 0 indeksui, saugos visas pirmojo varying reikšmes, buferio objektas, priskirtas 1 indeksui, saugos visas antrojo varying reikšmes ir t. t. Šį režimą paprastai lengviau suprasti ir derinti.
• gl.INTERLEAVED_ATTRIBS: Visi varying kintamieji yra persipinami viename buferio objekte. Pavyzdžiui, jei turite du varying kintamuosius, v_position (vec3) ir v_velocity (vec3), buferyje bus seka: vec3 (pozicija), vec3 (greitis), vec3 (pozicija), vec3 (greitis) ir t. t. Šis režimas gali būti efektyvesnis tam tikrais atvejais, ypač kai fiksuoti duomenys bus naudojami kaip persipynę viršūnių atributai vėlesniame atvaizdavimo etape.

Duomenų tipų atitikimas

Varying kintamųjų duomenų tipai viršūnių šešėliavimo programoje turi būti suderinami su buferio objektų saugojimo formatu. Pavyzdžiui, jei deklaruojate varying kintamąjį kaip out vec3 v_color, turėtumėte užtikrinti, kad buferio objektas būtų pakankamai didelis, kad saugotų vec3 reikšmes (paprastai slankiojo kablelio reikšmes) visoms viršūnėms. Neatitinkantys duomenų tipai gali sukelti netikėtus rezultatus ar klaidas.

Rasterizacijos atmetimo (Discard) valdymas

Naudojant Transform Feedback tik viršūnių atributų duomenims fiksuoti (o ne kažką atvaizduoti pradiniame etape), labai svarbu išjungti rasterizaciją naudojant gl.enable(gl.RASTERIZER_DISCARD) prieš iškviečiant gl.beginTransformFeedback(). Tai neleidžia GPU atlikti nereikalingų rasterizacijos operacijų, o tai gali žymiai pagerinti našumą. Nepamirškite vėl įjungti rasterizacijos naudojant gl.disable(gl.RASTERIZER_DISCARD) po gl.endTransformFeedback() iškvietimo, jei ketinate kažką atvaizduoti vėlesniame etape.

Transform Feedback panaudojimo atvejai

Transform Feedback turi daugybę pritaikymų WebGL atvaizdavime, įskaitant:

• Dalelių sistemos: Kaip parodyta pavyzdyje, Transform Feedback idealiai tinka atnaujinti dalelių pozicijas, greičius ir kitus atributus tiesiogiai GPU, leidžiant efektyvias dalelių simuliacijas.
• Geometrijos apdorojimas: Galite naudoti Transform Feedback geometrinėms transformacijoms, tokioms kaip tinklelio deformacija, skaidymas ar supaprastinimas, atlikti visiškai GPU. Įsivaizduokite veikėjo modelio deformavimą animacijai.
• Skysčių dinamika: Skysčių srauto simuliavimas GPU gali būti pasiektas naudojant Transform Feedback. Atnaujinkite skysčio dalelių pozicijas ir greičius, o tada naudokite atskirą atvaizdavimo etapą skysčiui vizualizuoti.
• Fizikos simuliacijos: Apskritai, bet kokia fizikos simuliacija, reikalaujanti viršūnių atributų atnaujinimo, gali pasinaudoti Transform Feedback privalumais. Tai gali apimti audinio simuliaciją, kietųjų kūnų dinamiką ar kitus fizika paremtus efektus.
• Taškų debesų apdorojimas: Fiksuokite apdorotus duomenis iš taškų debesų vizualizacijai ar analizei. Tai gali apimti filtravimą, glotninimą ar savybių išskyrimą GPU.
• Individualūs viršūnių atributai: Apskaičiuokite individualius viršūnių atributus, tokius kaip normalių vektoriai ar tekstūros koordinatės, remdamiesi kitais viršūnių duomenimis. Tai gali būti naudinga procedūrinės generacijos technikoms.
• Atidėtojo šešėliavimo (Deferred Shading) parengiamieji etapai: Fiksuokite pozicijos ir normalių duomenis į G-buferius atidėtojo šešėliavimo konvejeriams. Ši technika leidžia atlikti sudėtingesnius apšvietimo skaičiavimus.

Našumo aspektai

Nors Transform Feedback gali pasiūlyti reikšmingų našumo pagerinimų, svarbu atsižvelgti į šiuos veiksnius:

• Buferio objekto dydis: Užtikrinkite, kad buferio objektai būtų pakankamai dideli, kad saugotų visus fiksuotus viršūnių atributus. Paskirkite teisingą dydį atsižvelgiant į viršūnių skaičių ir varying kintamųjų duomenų tipus.
• Duomenų perdavimo pridėtinės išlaidos: Venkite nereikalingų duomenų perdavimų tarp CPU ir GPU. Naudokite Transform Feedback, kad kuo daugiau apdorojimo būtų atlikta GPU.
• Rasterizacijos atmetimas: Įjunkite gl.RASTERIZER_DISCARD, kai Transform Feedback naudojamas tik duomenims fiksuoti.
• Šešėliavimo programos sudėtingumas: Optimizuokite viršūnių šešėliavimo programos kodą, kad sumažintumėte skaičiavimo sąnaudas. Sudėtingos šešėliavimo programos gali paveikti našumą, ypač dirbant su dideliu viršūnių skaičiumi.
• Buferių sukeitimas: Naudojant Transform Feedback cikle (pvz., dalelių simuliacijai), apsvarstykite dvigubos buferizacijos (sukeičiant įvesties ir išvesties buferius) naudojimą, kad išvengtumėte skaitymo po rašymo pavojų.
• Primitivo tipas: Primitivo tipo pasirinkimas (gl.POINTS, gl.LINES, gl.TRIANGLES) gali paveikti našumą. Pasirinkite tinkamiausią primityvo tipą savo programai.

Transform Feedback derinimas

Transform Feedback derinimas gali būti sudėtingas, tačiau štai keletas patarimų:

• Tikrinkite klaidas: Naudokite gl.getError(), kad patikrintumėte WebGL klaidas po kiekvieno Transform Feedback nustatymo žingsnio.
• Patikrinkite buferių dydžius: Užtikrinkite, kad buferio objektai būtų pakankamai dideli, kad saugotų fiksuotus duomenis.
• Patikrinkite buferio turinį: Naudokite gl.getBufferSubData(), kad nuskaitytumėte buferio objektų turinį atgal į CPU ir patikrintumėte fiksuotus duomenis. Tai gali padėti nustatyti problemas, susijusias su duomenų lygiavimu ar šešėliavimo programos skaičiavimais.
• Naudokite derintuvą: Naudokite WebGL derintuvą (pvz., Spector.js), kad patikrintumėte WebGL būseną ir šešėliavimo programos vykdymą. Tai gali suteikti vertingų įžvalgų apie Transform Feedback procesą.
• Supaprastinkite šešėliavimo programą: Pradėkite nuo paprastos viršūnių šešėliavimo programos, kuri išveda tik kelis varying kintamuosius. Palaipsniui didinkite sudėtingumą, tikrindami kiekvieną žingsnį.
• Patikrinkite Varying tvarką: Dar kartą patikrinkite, ar varying kintamųjų tvarka varyings masyve atitinka jų rašymo tvarką viršūnių šešėliavimo programoje ir buferių priskyrimo indeksus.
• Išjunkite optimizacijas: Laikinai išjunkite šešėliavimo programų optimizacijas, kad palengvintumėte derinimą.

Suderinamumas ir plėtiniai

Transform Feedback palaikomas WebGL 2 ir OpenGL ES 3.0 bei naujesnėse versijose. WebGL 1 versijoje OES_transform_feedback plėtinys suteikia panašų funkcionalumą. Tačiau WebGL 2 įgyvendinimas yra efektyvesnis ir turtingesnis funkcijomis.

Plėtinio palaikymą patikrinkite naudodami:

const transformFeedbackExtension = gl.getExtension('OES_transform_feedback');
if (transformFeedbackExtension) {
 // Use the extension
}

Išvada

WebGL Transform Feedback yra galinga technika, skirta fiksuoti viršūnių atributų duomenis tiesiogiai GPU. Suprasdami varying kintamųjų, buferio objektų ir Transform Feedback objekto sąvokas, galite panaudoti šią funkciją kurdami pažangius atvaizdavimo efektus, atlikdami geometrijos apdorojimo užduotis ir optimizuodami savo WebGL programas. Įgyvendindami Transform Feedback, nepamirškite atidžiai apsvarstyti duomenų lygiavimo, buferių dydžių ir našumo pasekmių. Kruopščiai planuodami ir derindami, galite atskleisti visą šios vertingos WebGL galimybės potencialą.