Kraj WebGL 1 ere: što se zapravo mijenja
PlayCanvas je nedavnom migracijom Enginea na verziju 2.x jasno povukao crtu: WebGL 1 više nije podržan, a fokus prelazi na WebGL 2 i WebGPU (trenutno u beta režimu). Iako se u Editoru još neko vrijeme može birati između Enginea 1 i 2, novi razvoj, optimizacije i napredne značajke idu isključivo na WebGL 2+ i novu generaciju web grafičkog API‑ja.
To je jasan signal da je vrijeme za planiranje migracije svih projekata koji se još oslanjaju na WebGL 1. Slično se već dogodilo s prelaskom sa starih verzija OpenGL‑a na moderne core profile: API ostaje sličan, ali se mijenja način razmišljanja, struktura pipelinea i očekivanja od GPU‑a.
Širi trend: WebGL 2 kao novi minimum, WebGPU kao cilj
Ovaj trend nije ograničen na jedan engine. Moderni 3D web projekti i showcaseovi sve više koriste kombinaciju Three.js ili sličnih biblioteka s WebGL 2 kao bazom, a gdje je moguće i WebGPU kao napredniju opciju.
Tipični primjeri su:
- interaktivni 3D portfelji s PBR materijalima i HDR rasvjetom
- konfiguratori proizvoda (automobili, namještaj, industrijska oprema) koji traže stabilan frame pacing i 60 FPS
- fizički složene simulacije u pregledniku, npr. čestice, fluidi, soft‑body modeli
- vizualizacije velikih datasetova (point cloudovi, medicinski volumeni, arhitektonski modeli)
Za takve projekte fokus je danas na kvalitetnoj PBR rasvjeti, naprednim shaderima i stabilnom izvođenju pri ciljanim FPS vrijednostima. To je puno lakše postići uz novije API‑je i modernizirani rendering pipeline nego uz ograničenja WebGL‑a 1.
Što konkretno donosi PlayCanvas 2.x
PlayCanvas 2.x donosi niz breaking promjena u API‑ju, uklanja stare komponente i ukida podršku za WebGL 1. To znači da nadogradnja nije samo zamjena engine skripte, nego strukturirani proces refactoringa.
Breaking promjene i uklonjene komponente
U praksi to uključuje:
- uklanjanje zastarjelih komponenti i render pathova vezanih uz WebGL 1
- promjene u načinu definiranja materijala i shader chunkova
- drugačije rukovanje render targetima, frame bufferima i post‑processing lancima
- potrebu za usklađivanjem s WebGL 2 kontekstom (npr. korištenje VAO‑a, nove vrste tekstura, uniform buffer objekti)
Istovremeno, zadržavanje na starijim verzijama enginea znači odricanje od novih optimizacija, bugfixeva i grafičkih mogućnosti. Dugoročno, to stvara tehnički dug i otežava buduće migracije.
Primjer tipičnog migracijskog scenarija
Tipičan tim koji održava postojeću PlayCanvas aplikaciju prolazi nekoliko faza:
- Inventura: popis svih custom shader koda, materijala, post‑processing efekata i third‑party pluginova.
- Refactoring: zamjena deprecated API poziva, prilagodba komponenti i skripti novim klasama i sučeljima.
- Shader migracija: usklađivanje GLSL koda s WebGL 2 pravilima (npr. precision kvalifikatori, layout deklaracije, različita ograničenja za samplere i teksture).
- Testiranje performansi: provjera FPS‑a, frame pacinga i stabilnosti na ciljanim uređajima (desktop, mobilni, VR/AR headseti).
Bez jasno definiranog procesa, migracija se lako pretvara u niz ad‑hoc izmjena koje je teško održavati i testirati.
Prednosti WebGL 2 u odnosu na WebGL 1
S tehničke strane, prelazak na WebGL 2 otvara vrata modernijem GPU modelu. Iako je dio funkcionalnosti bio dostupan u WebGL 1 putem ekstenzija, WebGL 2 ih standardizira i čini predvidljivijima.
Naprednije upravljanje bufferima i teksturama
Ključne prednosti uključuju:
- Vertex Array Objects (VAO) za brže prebacivanje stanja i reduciranje driver overheada
- Transform feedback za GPU‑side obradu geometrije bez vraćanja podataka na CPU
- 3D teksture i array teksture za volumetrijske efekte, atlase i napredne materijale
- Uniform Buffer Objects (UBO) za dijeljenje podataka između više shader programa i smanjenje broja uniform set poziva
Ove značajke omogućuju kompaktnije i učinkovitije scene, posebno kad se radi o većem broju objekata i kompleksnim materijalima.
Instancing i masivne scene
Instancing u WebGL 2 omogućuje renderiranje velikog broja istih meshova s različitim transformacijama i parametrima u jednom draw callu. To je ključno za:
- velike arhitektonske scene s ponavljajućim elementima
- šume, gradove i druge okoliše s tisućama objekata
- simulacije čestica gdje je svaki particle instanca istog geometrijskog modela
Umjesto tisuća pojedinačnih draw callova, render pipeline se svodi na nekoliko masivnih poziva, što drastično smanjuje CPU overhead i poboljšava FPS.
Bolji preduvjeti za PBR i post‑processing
WebGL 2 donosi i bolje preduvjete za moderne grafičke tehnike:
- napredniji formati tekstura (HDR, floating‑point, depth‑stencil kombinacije)
- stabilniji i fleksibilniji framebufferi za višestruke rendering passeve
- učinkovitije implementacije bloom, SSAO, DOF i drugih post‑processing efekata
Rezultat je kvalitetniji vizualni output uz bolju kontrolu nad latencijom i frame pacingom, što je ključno za interaktivna iskustva i XR scenarije.
Uloga WebGPU‑a: sljedeća generacija web renderinga
Dok WebGL 2 postaje novi minimum, WebGPU ulazi u širu upotrebu kao sljedeći korak. Mnogi enginei, uključujući PlayCanvas i Three.js ekosustav, uvode WebGPU backend paralelno s WebGL‑om.
Zašto je WebGPU bitan
WebGPU je dizajniran kao moderan, low‑level API nalik Vulkanu, Metal‑u i Direct3D 12. Donosi:
- precizniju kontrolu nad memorijom i resursima
- efikasnije upravljanje command bufferima i queueovima
- bolje iskorištavanje višestrukih jezgri i modernih GPU arhitektura
- jasniji, eksplicitniji model sinkronizacije i barijera
To omogućuje nove tipove scena i algoritama koji su na WebGL‑u 1 (pa i 2) teško izvedivi ili preskupi.
Novi tipovi scena i use‑caseova
U kombinaciji s WebGPU‑om postaju realni scenariji poput:
- masivnih 3D Gaussian Splat datasetova s milijunima točaka i kompleksnim shadingom
- 4D vizualizacija (npr. vremenske serije volumetrijskih podataka) s dinamičkim streamingom i kompresijom
- naprednih compute shader pipelineova za fiziku, AI i proceduralnu generaciju sadržaja
Za takve projekte ključna je vrlo precizna kontrola nad performansama i memorijom, što je upravo područje gdje WebGPU najviše briljira.
Kako pristupiti migraciji sa WebGL 1
Za timove koji žele ostati u WebGL ekosustavu, poruka je jasna: sada je pravo vrijeme za inventuru koda i postavljanje arhitekture koja podrazumijeva WebGL 2 kao minimum, uz jasan plan kako će se kasnije uključiti i WebGPU.
Korak 1: Inventura i identifikacija ovisnosti
Prvi korak je precizno mapiranje gdje se WebGL 1 koristi:
- custom WebGL pozivi u engineu ili oko njega
- shaderi pisani za WebGL 1 (npr. oslanjanje na određene ekstenzije)
- third‑party biblioteke koje eksplicitno traže WebGL 1 kontekst
Cilj je jasno razdvojiti dijelove koje je moguće jednostavno prilagoditi i one koji traže dublji redizajn.
Korak 2: Refactoring i prilagodba shader koda
Nakon inventure slijedi refactoring:
- zamjena zastarjelih funkcija i API poziva WebGL 2 ekvivalentima
- uvođenje VAO‑a, instancinga i UBO‑a gdje je to korisno za performanse
- prilagodba GLSL koda (verzija, layout deklaracije, ograničenja za samplere)
Preporuka je uvoditi promjene postupno, uz jasne benchmarke prije i poslije, kako bi se vidio stvarni utjecaj na FPS, GPU opterećenje i memoriju.
Korak 3: Plan za WebGPU
Iako prelazak na WebGPU možda nije odmah na rasporedu, dobro je već sada:
- izbjegavati previše specifične WebGL hackove koji otežavaju kasniju apstrakciju
- uvoditi sloj apstrakcije za GPU resurse (bufferi, teksture, pipelineovi)
- razdvojiti logiku igre/aplikacije od renderinga kako bi se backend mogao zamijeniti
Takav pristup smanjuje tehnički dug i otvara put prema idućoj generaciji 3D web iskustava bez radikalnih prekida u budućnosti.
Što znači ostati na WebGL 1
Ostajanje na WebGL 1 kratkoročno može izgledati kao sigurnija opcija, posebno za projekte koji su već u produkciji i rade stabilno. No dugoročno to nosi nekoliko rizika:
- gubitak podrške u engineima i bibliotekama (nema novih značajki, patch‑eva, sigurnosnih zakrpa)
- sve slabija kompatibilnost s modernim preglednicima i uređajima
- nemogućnost korištenja naprednih tehnika za optimizaciju performansi i kvalitete slike
U konačnici, projekt postaje „zamrznut“ u staroj tehnološkoj generaciji, što otežava njegovo održavanje i integraciju s novim sustavima.
Zaključak: WebGL 2 kao temelj, WebGPU kao horizont
Prelazak s WebGL 1 na WebGL 2 i WebGPU nije samo tehnička nadogradnja, nego i strateška odluka. Enginei poput PlayCanvasa jasno komuniciraju smjer: WebGL 2 je novi standard, a WebGPU sljedeći korak.
Timovi koji sada ulože vrijeme u inventuru, refactoring i modernizaciju rendering pipelinea bit će u boljoj poziciji za:
- održavanje stabilnih 60 FPS i dobrog frame pacinga na širokom rasponu uređaja
- uvođenje naprednih PBR materijala, post‑processing efekata i masivnih scena
- postupnu adopciju WebGPU‑a bez potpunog re‑writea koda
Drugim riječima, WebGL 2 treba tretirati kao minimalni standard za nove i održavane 3D web projekte, uz arhitekturu koja je spremna prihvatiti WebGPU čim poslovni i tehnički uvjeti to dopuste.
