Kraj WebGL 1 ere: što znači prelazak na WebGL 2 i WebGPU za 3D web projekte

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:

1. Inventura: popis svih custom shader koda, materijala, post‑processing efekata i third‑party pluginova.
2. Refactoring: zamjena deprecated API poziva, prilagodba komponenti i skripti novim klasama i sučeljima.
3. Shader migracija: usklađivanje GLSL koda s WebGL 2 pravilima (npr. precision kvalifikatori, layout deklaracije, različita ograničenja za samplere i teksture).
4. 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.