WebGL:n Variable Rate Shading -laitteistotuki: Grafiikkasuorittimen kyvykkyyksien tunnistaminen

Variable Rate Shading (VRS) on tehokas renderöintitekniikka, joka antaa kehittäjille mahdollisuuden hallita varjostuksen nopeutta (shading rate) näytön eri alueilla. Vähentämällä varjostuksen nopeutta alueilla, joilla yksityiskohdat ovat vähemmän tärkeitä, VRS voi parantaa merkittävästi renderöintisuorituskykyä ilman havaittavaa laskua visuaalisessa laadussa. Tämä on erityisen tärkeää resursseiltaan rajallisille laitteille ja vaativille sovelluksille, kuten peleille, simulaatioille ja virtuaalitodellisuudelle.

VRS on kuitenkin laitteistosta riippuvainen ominaisuus. Kaikki grafiikkasuorittimet eivät tue sitä, ja jopa niillä, jotka tukevat, voi olla vaihtelevia kyvykkyyksiä. Siksi VRS-laitteistotuen tarkka tunnistaminen on ensimmäinen kriittinen askel tämän teknologian tehokkaassa hyödyntämisessä WebGL-sovelluksissasi. Tämä blogikirjoitus opastaa sinut VRS-tuen tunnistamisprosessin läpi ja auttaa ymmärtämään erilaisia kyvykkyystasoja, joita saatat kohdata.

Mitä on Variable Rate Shading (VRS)?

Perinteisesti jokainen näytön pikseli varjostetaan (eli sen väri lasketaan) yksitellen. Tämä yhtenäinen varjostusnopeus voi olla tuhlailevaa, koska jotkin näytön alueet eivät välttämättä vaadi niin suurta tarkkuutta. Esimerkiksi alueet, joilla on matala kontrasti tai nopea liike, voidaan usein varjostaa hitaammalla nopeudella ilman merkittävää vaikutusta havaittuun visuaaliseen laatuun.

VRS antaa kehittäjille mahdollisuuden määrittää eri varjostusnopeuksia näytön eri alueille. Tämä tehdään tyypillisesti jakamalla näyttö laattoihin tai lohkoihin ja määrittämällä kullekin laatalle oma varjostusnopeus. Hitaampi varjostusnopeus tarkoittaa, että grafiikkasuoritin varjostaa vähemmän pikseleitä kyseisessä laatassa, mikä vähentää tehokkaasti renderöintikuormaa.

VRS:stä on tyypillisesti kaksi päätyyppiä:

• Karkea pikselivarjostus (Coarse Pixel Shading, CPS): Tämän tyyppinen VRS mahdollistaa varjostusnopeuden määrittämisen laattakohtaisesti. Laatan koko on tyypillisesti pieni, kuten 8x8 tai 16x16 pikseliä. CPS on suhteellisen yksinkertainen ja tehokas VRS-muoto.
• Sisältöön mukautuva varjostus (Content Adaptive Shading, CAS): Tämä edistyneempi VRS-muoto säätää dynaamisesti varjostusnopeutta näkymän sisällön perusteella. Esimerkiksi alueet, joilla on paljon yksityiskohtia tai liikettä, voidaan varjostaa nopeammin, kun taas alueet, joilla on vähän yksityiskohtia tai staattista sisältöä, voidaan varjostaa hitaammin. CAS vaatii kehittyneempää näkymän analysointia, mutta se voi tarjota vielä suurempia suorituskykyhyötyjä.

VRS:n käytön edut WebGL:ssä

VRS:n toteuttaminen WebGL-sovelluksissasi tarjoaa useita keskeisiä etuja:

• Parempi suorituskyky: Vähentämällä varjostusnopeutta vähemmän kriittisillä alueilla VRS voi vähentää merkittävästi renderöintikuormaa, mikä johtaa korkeampiin ruudunpäivitysnopeuksiin ja sulavampaan suorituskykyyn erityisesti heikompitehoisilla laitteilla.
• Pidempi akunkesto: Mobiililaitteissa ja kannettavissa tietokoneissa renderöintikuorman vähentäminen voi pidentää akunkestoa, jolloin käyttäjät voivat nauttia sovelluksistasi pidempään.
• Parannettu visuaalinen laatu (joissakin tapauksissa): Vaikka se saattaa tuntua ristiriitaiselta, VRS voi joskus parantaa visuaalista laatua antamalla sinun kohdentaa enemmän renderöintiresursseja visuaalisesti tärkeille alueille. Voit esimerkiksi vähentää varjostusnopeutta taustalla ja käyttää säästyneitä resursseja etualan varjostusnopeuden lisäämiseen, mikä johtaa terävämpiin ja yksityiskohtaisempiin etualan kohteisiin.
• Skaalautuvuus: VRS mahdollistaa sovelluksesi paremman skaalautumisen erilaisilla laitteistokokoonpanoilla. Huippuluokan grafiikkasuorittimilla voit käyttää korkeampaa varjostusnopeutta saavuttaaksesi maksimaalisen visuaalisen laadun, kun taas heikompitehoisilla grafiikkasuorittimilla voit käyttää matalampaa varjostusnopeutta ylläpitääksesi hyväksyttävää suorituskykyä.

VRS-laitteistotuen tunnistaminen WebGL:ssä

Ennen kuin voit alkaa käyttää VRS:ää WebGL-sovelluksessasi, sinun on selvitettävä, tukeeko käyttäjän grafiikkasuoritin sitä. Tämä edellyttää tarvittavien WebGL-laajennusten olemassaolon tarkistamista.

1. `ANGLE_variable_rate_shading` -laajennuksen tarkistaminen

Ensisijainen laajennus, joka mahdollistaa VRS:n WebGL:ssä, on `ANGLE_variable_rate_shading`. Voit tarkistaa sen olemassaolon WebGL-kontekstin `getExtension()` -metodilla:

            const gl = canvas.getContext('webgl2');
if (!gl) {
  console.error('WebGL 2 ei ole tuettu.');
  return;
}

const vrsExtension = gl.getExtension('ANGLE_variable_rate_shading');

if (vrsExtension) {
  console.log('Variable Rate Shading on tuettu!');
} else {
  console.log('Variable Rate Shading ei ole tuettu.');
}

            

              
                Copy
              
            
          

Tärkeä huomautus: `ANGLE_variable_rate_shading` -laajennus on ANGLE (Almost Native Graphics Layer Engine) -projektin tarjoama laajennus. Monet selaimet käyttävät ANGLEa kääntääkseen WebGL-kutsuja eri alustojen natiiveiksi grafiikka-API-kutsuiksi (esim. Direct3D Windowsissa, Metal macOS:ssä ja iOS:ssä, Vulkan Androidissa). Siksi tämän laajennuksen olemassaolo osoittaa, että alla oleva grafiikka-ajuri ja laitteisto tukevat VRS:ää, vaikka natiivi WebGL-toteutus ei suoraan paljastaisikaan VRS-toiminnallisuutta.

2. VRS-kyvykkyyksien tutkiminen

Kun olet varmistanut, että `ANGLE_variable_rate_shading` -laajennus on saatavilla, sinun on tutkittava VRS-toteutuksen erityisiä kyvykkyyksiä. Laajennus tarjoaa useita vakioita ja metodeja, joiden avulla voit kysellä näitä kyvykkyyksiä.

a. Tuetut varjostusnopeudet

Laajennus määrittelee joukon vakioita, jotka edustavat tuettuja varjostusnopeuksia. Nämä vakiot ovat kahden potensseja ja osoittavat, kuinka monta pikseliä varjostetaan fragmenttia kohden.

• `gl.SHADING_RATE_1X1_PIXELS`: Varjosta jokainen pikseli (1x1).
• `gl.SHADING_RATE_1X2_PIXELS`: Varjosta joka toinen pikseli vaakasuunnassa (1x2).
• `gl.SHADING_RATE_2X1_PIXELS`: Varjosta joka toinen pikseli pystysuunnassa (2x1).
• `gl.SHADING_RATE_2X2_PIXELS`: Varjosta joka toinen pikseli molemmissa suunnissa (2x2).
• `gl.SHADING_RATE_4X2_PIXELS`: Varjosta joka neljäs pikseli vaakasuunnassa ja joka toinen pystysuunnassa (4x2).
• `gl.SHADING_RATE_2X4_PIXELS`: Varjosta joka toinen pikseli vaakasuunnassa ja joka neljäs pystysuunnassa (2x4).
• `gl.SHADING_RATE_4X4_PIXELS`: Varjosta joka neljäs pikseli molemmissa suunnissa (4x4).

Määrittääksesi, mitkä varjostusnopeudet ovat todella grafiikkasuorittimen tukemia, voit käyttää laajennuksen `getSupportedShadingRates()` -metodia. Tämä metodi palauttaa boolean-arvojen taulukon, jossa kukin elementti osoittaa, onko vastaava varjostusnopeus tuettu. Elementtien järjestys vastaa yllä lueteltujen vakioiden järjestystä.

            if (vrsExtension) {
  const supportedShadingRates = vrsExtension.getSupportedShadingRates();

  console.log('Tuetut varjostusnopeudet:');
  console.log('  1x1: ' + supportedShadingRates[0]);
  console.log('  1x2: ' + supportedShadingRates[1]);
  console.log('  2x1: ' + supportedShadingRates[2]);
  console.log('  2x2: ' + supportedShadingRates[3]);
  console.log('  4x2: ' + supportedShadingRates[4]);
  console.log('  2x4: ' + supportedShadingRates[5]);
  console.log('  4x4: ' + supportedShadingRates[6]);
}

            

              
                Copy
              
            
          

Tutkimalla `supportedShadingRates` -taulukkoa voit määrittää, mitä varjostusnopeuksia voit turvallisesti käyttää sovelluksessasi.

b. Varjostusnopeuksien yhdistäjien (Combiner) määrä

`shadingRateCombinerCount` -ominaisuus laajennuksessa ilmaisee, kuinka monta varjostusnopeuden yhdistäjää grafiikkasuoritin tukee. Varjostusnopeuden yhdistäjien avulla voit yhdistää useita varjostusnopeutta koskevia tietolähteitä lopullisen varjostusnopeuden tuottamiseksi. Mitä enemmän yhdistäjiä on käytettävissä, sitä joustavammin voit hallita varjostusnopeutta.

            if (vrsExtension) {
  const shadingRateCombinerCount = vrsExtension.shadingRateCombinerCount;
  console.log('Varjostusnopeuksien yhdistäjien määrä: ' + shadingRateCombinerCount);
}

            

              
                Copy
              
            
          

Tyypillisiä arvoja `shadingRateCombinerCount` -ominaisuudelle ovat 1 tai 2. Arvo 0 tarkoittaa, että varjostusnopeuden yhdistäjiä ei tueta.

c. Varjostusnopeuskuvan (Shading Rate Image) tuki

`shadingRateImage` on tekstuuri, jonka avulla voit määrittää varjostusnopeuden laattakohtaisesti. Laajennus tarjoaa vakion, `gl.SHADING_RATE_IMAGE_OES`, joka edustaa varjostusnopeuskuvan tekstuurikohdetta. Tarkistaaksesi, onko `shadingRateImage` tuettu, kysy `MAX_FRAGMENT_UNIFORM_VECTORS` -rajaa. Jos käytettävissä olevien fragmentin uniform-vektoreiden määrä on riittävä, ajuri todennäköisesti tukee `shadingRateImage` -ominaisuutta. Jos maksimimäärä on hyvin alhainen, ominaisuutta ei todennäköisesti tueta.

Vaikka `shadingRateImage` on standarditapa suorittaa karkeaa pikselivarjostusta, VRS:n laitteistototeutukset voivat jättää sen pois, ja tämä tulisi havaita ajon aikana.

3. Tukemattoman VRS:n käsittely

Jos `ANGLE_variable_rate_shading` -laajennus ei ole saatavilla tai jos tuetut varjostusnopeudet ovat rajalliset, sinun tulisi siirtyä sulavasti käyttämään standardia renderöintipolkua. Tämä voi tarkoittaa korkeamman varjostusnopeuden käyttämistä tai VRS:n poistamista käytöstä kokonaan. On erittäin tärkeää välttää luottamasta VRS:ään, jos sitä ei tueta kunnolla, koska se voi johtaa renderöintivirheisiin tai suorituskykyongelmiin.

Esimerkki: VRS:n tunnistaminen ja käyttö WebGL-sovelluksessa

Tässä on täydellisempi esimerkki, joka näyttää, kuinka VRS-tuki tunnistetaan ja kuinka sitä käytetään varjostusnopeuden säätämiseen yksinkertaisessa WebGL-sovelluksessa:

            
// Hae WebGL2-konteksti
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl2');

if (!gl) {
  console.error('WebGL 2 ei ole tuettu.');
  // Siirry VRS:ää tukemattomaan renderöintipolkuun
  return;
}

// Hae ANGLE_variable_rate_shading -laajennus
const vrsExtension = gl.getExtension('ANGLE_variable_rate_shading');

if (!vrsExtension) {
  console.log('Variable Rate Shading ei ole tuettu.');
  // Siirry VRS:ää tukemattomaan renderöintipolkuun
  return;
}

// Tarkista tuetut varjostusnopeudet
const supportedShadingRates = vrsExtension.getSupportedShadingRates();

// Määritä alin tuettu varjostusnopeus (muu kuin 1x1)
let lowestShadingRate = gl.SHADING_RATE_1X1_PIXELS; // Oletusarvo on 1x1
if (supportedShadingRates[1]) {
  lowestShadingRate = gl.SHADING_RATE_1X2_PIXELS;
} else if (supportedShadingRates[2]) {
  lowestShadingRate = gl.SHADING_RATE_2X1_PIXELS;
} else if (supportedShadingRates[3]) {
  lowestShadingRate = gl.SHADING_RATE_2X2_PIXELS;
} else if (supportedShadingRates[4]) {
  lowestShadingRate = gl.SHADING_RATE_4X2_PIXELS;
} else if (supportedShadingRates[5]) {
  lowestShadingRate = gl.SHADING_RATE_2X4_PIXELS;
} else if (supportedShadingRates[6]) {
  lowestShadingRate = gl.SHADING_RATE_4X4_PIXELS;
}

console.log('Alin tuettu varjostusnopeus: ' + lowestShadingRate);

// Aseta varjostusnopeus tietylle alueelle (esim. koko näytölle)
// Tämä vaatisi tyypillisesti varjostusnopeuskuvan luomisen ja sen sitomisen sopivaan tekstuuriyksikköön.
// Seuraava on yksinkertaistettu esimerkki, joka asettaa varjostusnopeuden vain globaalisti.

// Olettaen, että sinulla on ohjelma ja olet aloittamassa piirtämistä...

function drawScene(){
  // Sido sopiva framebuffer (tarvittaessa)

  // Kutsu laajennuksen funktiota asettaaksesi varjostusnopeuden (yksinkertaistettu esimerkki)
  // Oikeassa sovelluksessa tämä vaatisi varjostusnopeuskuvan määrittämistä.
  //vrsExtension.setShadingRate(lowestShadingRate);  //Tämä on hypoteettinen funktio eikä toimi, se on tässä esimerkkinä sen toiminnasta.

  // Piirrä näkymäsi
  //gl.drawArrays(...);
}

// Renderöintisilmukka
function render() {
  // ... päivitä näkymäsi ...
  drawScene();
  requestAnimationFrame(render);
}

requestAnimationFrame(render);


            

              
                Copy
              
            
          

Tärkeitä huomioita:

• Varjostusnopeuskuva (Shading Rate Image): Yllä oleva esimerkki on yksinkertaistettu kuvaus. Todellisessa tilanteessa loisi tyypillisesti varjostusnopeuskuvan (tekstuurin) ja sitoisi sen tekstuuriyksikköön. Tämä kuva sisältäisi varjostusnopeusarvot jokaiselle näytön laatalle. Sitten käyttäisit sopivia WebGL-funktioita tämän kuvan näytteistämiseen fragmenttivarjostimessasi ja soveltaisit vastaavaa varjostusnopeutta. Varjostusnopeuskuvan luomisen ja käytön yksityiskohdat ylittävät tämän johdantoblogikirjoituksen laajuuden, mutta niitä käsitellään tulevissa artikkeleissa.
• Suorituskyvyn mittaaminen: On erittäin tärkeää mitata huolellisesti VRS:n vaikutus suorituskykyyn sovelluksessasi. Vaikka VRS voi usein parantaa suorituskykyä, se voi myös aiheuttaa ylimääräistä kuormitusta varjostusnopeuskuvan hallinnan ja fragmenttivarjostimessa tarvittavien laskutoimitusten vuoksi. Käytä WebGL:n suorituskyvyn analysointityökaluja määrittääksesi optimaaliset varjostusnopeudet sovelluksellesi.

Parhaat käytännöt VRS:n käyttöön WebGL:ssä

Saadaksesi parhaan hyödyn irti VRS:stä WebGL-sovelluksissasi, harkitse seuraavia parhaita käytäntöjä:

• Aseta visuaalinen laatu etusijalle: Kun valitset varjostusnopeuksia, aseta visuaalinen laatu suorituskyvyn edelle. Aloita korkeammalla varjostusnopeudella ja vähennä sitä vähitellen, kunnes huomaat merkittävän laskun visuaalisessa laadussa.
• Käytä sisältöön mukautuvaa varjostusta (jos saatavilla): Jos grafiikkasuorittimesi tukee sisältöön mukautuvaa varjostusta, käytä sitä säätääksesi varjostusnopeutta dynaamisesti näkymän sisällön perusteella. Tämä voi tarjota vielä suurempia suorituskykyhyötyjä ilman havaittavaa vaikutusta visuaaliseen laatuun.
• Harkitse laatan kokoa: Laatan koko vaikuttaa varjostusnopeuden hallinnan tarkkuuteen. Pienemmät laattakoot mahdollistavat tarkemman hallinnan, mutta ne myös lisäävät varjostusnopeuskuvan hallinnasta aiheutuvaa kuormitusta. Kokeile eri laattakokoja löytääksesi optimaalisen tasapainon tarkkuuden ja suorituskyvyn välillä.
• Käytä VRS:ää yhdessä muiden optimointitekniikoiden kanssa: VRS on vain yksi työkalu optimointiarsenaalissasi. Käytä sitä yhdessä muiden tekniikoiden, kuten yksityiskohtaisuustasojen (LOD) skaalauksen, peittävien kohteiden poiston (occlusion culling) ja tekstuurien pakkauksen kanssa saavuttaaksesi maksimaalisen suorituskyvyn.
• Testaa erilaisilla laitteilla: Testaa sovellustasi erilaisilla laitteilla varmistaaksesi, että VRS toimii oikein ja että se tarjoaa odotetut suorituskykyhyödyt. Eri grafiikkasuorittimilla voi olla erilaiset VRS-kyvykkyydet, joten on tärkeää testata edustavalla laitteistojoukolla.

Johtopäätös

Variable Rate Shading on lupaava tekniikka renderöintisuorituskyvyn parantamiseksi WebGL-sovelluksissa. Tunnistamalla huolellisesti VRS-laitteistotuen ja noudattamalla tässä blogikirjoituksessa esitettyjä parhaita käytäntöjä voit hyödyntää VRS:ää luodaksesi tehokkaampia ja visuaalisesti miellyttävämpiä WebGL-kokemuksia. WebGL:n kehittyessä voimme odottaa näkevämme entistä kehittyneempiä VRS-ominaisuuksia ja -tekniikoita, jotka antavat kehittäjille lisää valtaa luoda upeaa ja suorituskykyistä verkkopohjaista grafiikkaa.

Muista aina asettaa visuaalinen laatu etusijalle ja mitata huolellisesti VRS:n vaikutus sovelluksesi suorituskykyyn. Näin toimimalla voit varmistaa, että käytät VRS:ää tehokkaasti saavuttaaksesi parhaat mahdolliset tulokset.