Što WebGPU „kritična masa” znači za WebGL performanse u stvarnim projektima

Što WebGPU „kritična masa” znači za WebGL performanse u stvarnim projektima

WebGPU u svim preglednicima: novi kontekst za WebGL

Krajem 2025. WebGPU je napokon stigao u sve glavne preglednike: Chrome, Edge, Firefox i Safari. Time je web dobio prvi moderni, niskorazinski GPU API koji se po mogućnostima približava Vulkanu, Metalu i DirectX 12. No, za većinu postojećih 3D projekata to ne znači trenutačni prelazak na novi API, nego promjenu konteksta u kojem WebGL djeluje.

WebGL više nije jedini ozbiljan GPU sloj na webu, ali ostaje glavni radni konj. Tisuće produkcijskih aplikacija u Three.js, Babylon.js i PlayCanvas ekosustavu i dalje renderiraju preko WebGL 2, čak i kada engine nudi WebGPU backend. U praksi, WebGPU je danas dodatni „brzi trak”, dok je WebGL i dalje osnovna prometnica.

Ovaj suživot ima direktne posljedice na performanse. Većina optimizacijskog rada još uvijek cilja WebGL pipeline, ali pod pritiskom WebGPU-a mijenjaju se standardi: očekuju se veći FPS, stabilniji frame pacing i efikasniji rad sa shaderima i memorijom.

„WebGPU-first, WebGL-fallback”: novi standard u engineima

Najveća promjena za developere nije nestanak WebGL-a, nego promjena prioriteta. Moderni enginei uvode strategiju „WebGPU-first, WebGL-fallback”. To znači da, kad god je WebGPU dostupan, engine ga pokušava koristiti kao primarni backend, a WebGL služi kao sloj kompatibilnosti za stariji ili ograničen hardver.

PlayCanvas 2.x je jasan primjer. Projekt je u potpunosti izbacio WebGL 1, čime su nestale stare ekstenzije i workaroundi. Fokus je prebačen na WebGL 2 i eksperimentalni WebGPU backend. Timovi koji nadograđuju starije projekte prisiljeni su modernizirati shader kod, uskladiti se s novim ograničenjima i razmišljati o pipelineu kao o dugoročno održivom, a ne samo „da radi na svemu”.

Slično se događa i u Three.js ekosustavu. WebGPU renderer je promoviran u „prvog građanina” koda, iako WebGL renderer ostaje zadani put na većini uređaja. U praksi, to znači da će novi featurei često prvo biti dizajnirani s WebGPU-om na umu, a zatim spušteni na WebGL 2 gdje je to moguće.

Za WebGL performanse to ima dvosjekli učinak. S jedne strane, WebGL više nije meta za „najluđe” efekte; oni se sele u WebGPU-only profile. S druge strane, osnovni WebGL pipeline postaje čišći, moderniji i lakši za optimizaciju jer se više ne vuče teret WebGL 1 kompatibilnosti.

Kako WebGPU obrasci ulaze u WebGL 2 optimizaciju

WebGPU je dizajniran oko eksplicitnog upravljanja resursima, jasnog razdvajanja compute i graphics pasa i minimiziranja driver magije. Iako WebGL ne može u potpunosti preuzeti taj model, mnogi obrasci iz WebGPU svijeta sve češće se primjenjuju u WebGL 2 projektima.

Aggresivno instanciranje i batchiranje

Instancing više nije „napredna tehnika”, nego osnovni alat. Umjesto tisuća pojedinačnih draw callova za objekte istog tipa, ozbiljni WebGL 2 projekti standardno koriste instanced rendering. To smanjuje CPU overhead i stabilizira FPS, pogotovo na slabijim mobilnim uređajima.

Batchiranje materijala i geometrije postaje norma. Umjesto desetaka varijacija shadera za slične materijale, uvodi se jedan fleksibilniji shader s parametrima. Time se smanjuje broj shader prebacivanja, što je ključno za održavanje konzistentnog frame pacinga.

Pakiranje uniformnih podataka

Iz WebGPU svijeta dolazi disciplina oko layouta podataka. U WebGL 2 projektima sve se više koriste uniform buffer objekti (UBO) i pažljivo pakiranje uniformi u blokove koji se rijetko mijenjaju. Statički podaci (npr. parametri scene, svjetla) grupiraju se u jedan UBO, dok se dinamički (animacije, per-frame parametri) drže odvojeno.

Ovakav pristup smanjuje broj uniform updatea po okviru i rasterećuje CPU. U većim scenama to često donosi veću dobit od samog smanjenja draw callova, posebno kada je aplikacija CPU-bound.

Manje draw callova, ali pametnije

Klasični savjet „smanjite broj draw callova” i dalje vrijedi, ali se nadograđuje. Umjesto slijepog spajanja svega u jedan mega-mesh, uvodi se granularno batchiranje po materijalu, LOD razini i tipu objekta. Cilj je naći balans: dovoljno malo draw callova da CPU ne bude usko grlo, ali dovoljno fleksibilno da se može gasiti i paliti efekte, LOD-ove i varijante materijala bez lomljenja pipelinea.

Hibridni pipelineovi: compute u WebGPU, rendering u WebGL

Najzanimljiviji trend u 2026. su hibridni pipelineovi. Umjesto „ili WebGL ili WebGPU”, sve više projekata koristi kombinaciju: WebGPU za compute-intenzivne zadatke, WebGL 2 za sam rendering.

Tipični scenariji uključuju:

  • fiziku čestica ili krutih tijela izračunatu u WebGPU compute shaderima,
  • GPU sortiranja (npr. za transparentnost, LOD ili particles) na WebGPU strani,
  • generiranje ili filtriranje tekstura visoke rezolucije prije renderiranja u WebGL-u.

Takav pristup omogućuje projektima da iskoriste paralelni compute potencijal WebGPU-a, ali da zadrže široku kompatibilnost WebGL renderera. Kada WebGPU nije dostupan, isti se zadaci spuštaju na CPU ili jednostavnije GPU trikove u WebGL-u, uz prihvatljiv pad kvalitete ili FPS-a.

Za performanse to znači da WebGL više nije sam u borbi protiv teških efekata. Compute-heavy dijelovi pipelinea mogu se odvojiti i optimizirati odvojeno, što otvara prostor za složenije simulacije bez potpunog prelaska na WebGPU-only rješenje.

WebGL kao „baseline”, WebGPU kao „ultra” profil

Showcase projekti i marketinške kampanje često definiraju percepciju tehnologije. U novim demonstracijama sve češće se pojavljuje dvostruki pristup: WebGL verzija kao baseline, WebGPU verzija kao „ultra” profil.

U praksi to izgleda ovako:

  • WebGL 2 profil: stabilan FPS, ograničen broj svjetala, standardni PBR materijali, niža rezolucija render targeta, manje post-process efekata.
  • WebGPU profil: viša interna rezolucija, kompleksniji PBR modeli (clear coat, sheen, anisotropija), volumetrijski oblaci, global illumination kroz napredne probe ili voxel cone tracing, masivan broj instanci.

WebGL verzija brine se da iskustvo radi „svugdje”, uključujući starije laptope i mid-range mobitele. WebGPU verzija koristi dodatne resurse na modernim GPU-ovima i daje „wow efekt” za high-end publiku.

Ovakav dvostruki dizajn zahtijeva disciplinu u kodnoj bazi. Jezgra materijala i dalje se piše tako da se može kompajlirati u GLSL za WebGL, dok se paralelno održavaju WGSL varijante za WebGPU. Često se uvodi zajednički opisni sloj (npr. JSON ili vlastiti DSL) iz kojeg se generiraju obje verzije shadera. Time se smanjuje rizik razilaženja vizualnog izgleda između WebGL i WebGPU profila.

Što „kritična masa” WebGPU-a znači za odluke u 2026.

Kada WebGPU dosegne kritičnu masu podrške u preglednicima, timovi više ne mogu ignorirati njegov utjecaj, ali ni napustiti WebGL preko noći. Najrazumnija strategija u 2026. sastoji se od nekoliko jasnih odluka.

1. WebGL 2 kao stabilna baza

WebGL 2 ostaje „lowest common denominator” za rendering. Kod novih projekata WebGL 1 više nema smisla osim u vrlo specifičnim enterprise okruženjima. Fokus treba biti na čistom WebGL 2 pipelineu, bez naslijeđenih hackova iz ere WebGL 1.

To podrazumijeva:

  • od samog početka dizajnirati scenu i materijale s WebGL 2 ograničenjima na umu,
  • standardizirati korištenje UBO-a, instancinga i batchiranja,
  • mjeriti performanse na mobilnim uređajima, ne samo na desktopu.

2. WebGPU kao akcelerator, ne kao zamjena

Umjesto da se WebGPU promatra kao direktna zamjena za WebGL, praksa pokazuje da je učinkovitije tretirati ga kao akcelerator za najzahtjevnije dijelove. To uključuje:

  • compute-intenzivne simulacije (fizika, fluidi, massive particles),
  • napredne PBR pipelineove i global illumination tehnike,
  • prethodnu obradu i baking podataka (lightmape, distance fieldovi, LUT-ovi).

Takav pristup omogućuje postepeno uvođenje WebGPU-a bez rizika da veliki dio publike ostane bez funkcionalnog iskustva. WebGL ostaje sigurna mreža, WebGPU donosi dodatni sloj kvalitete.

3. Planiranje dugoročnog održavanja

Održavanje dvostrukog pipelinea (WebGL + WebGPU) ima cijenu. Potrebno je od početka definirati gdje se povlači granica: koji dijelovi koda moraju imati obje implementacije, a što može biti ekskluzivno za WebGPU profil.

Primjer dobre prakse:

  • jezgra gameplaya i UI-a radi jednako u oba profila,
  • napredni vizualni efekti i dodatni rendering passovi (npr. volumetrija, specijalni post-process) mogu biti WebGPU-only,
  • fallback putovi za WebGL su jednostavniji, ali dobro optimizirani.

Time se izbjegava situacija u kojoj se WebGL tretira kao „drugi razred” i ostaje neoptimiziran. U stvarnim projektima, upravo WebGL profil i dalje nosi većinu prometa i prihoda.

Zaključak: hibridni web 3D kao nova normalnost

Ulazak WebGPU-a u sve glavne preglednike ne znači kraj WebGL-a, nego početak nove faze u kojoj oba API-ja koegzistiraju. WebGL 2 ostaje stabilna baza i ključni sloj kompatibilnosti, dok WebGPU sve više preuzima ulogu akceleratora za najzahtjevnije dijelove pipelinea.

Za timove koji danas donose odluke, ključno je:

  • modernizirati WebGL 2 pipeline prema praksama inspiriranim WebGPU-om,
  • planirati hibridne arhitekture koje koriste compute mogućnosti WebGPU-a gdje to ima smisla,
  • tretirati WebGL i WebGPU kao suradnike, a ne konkurente.

Praksa u 2026. pokazuje da upravo ovaj hibridni pristup donosi najbolje rezultate: WebGL osigurava da aplikacija radi svugdje, a WebGPU omogućuje da na modernom hardveru izgleda i ponaša se kao nativna AAA produkcija.

Natrag na vrh