Kraj 2025.: gdje je zapravo WebGL u eri WebGPU-a?
Krajem 2025. niz zapaženih 3D web projekata pokazuje da WebGL i dalje ostaje temelj većine vrhunskih iskustava u pregledniku. WebGPU je napokon dostupan u svim glavnim preglednicima, ali u praksi produkcijski timovi još uvijek najčešće biraju WebGL kao glavni render backend. Razlog je jednostavan: stabilnost, široka podrška uređaja i ogroman ekosustav alata.
Umjesto teorijskih rasprava o API-jima, novi showcase projekti jasno demonstriraju kako se WebGL kombinira s modernim JavaScript frameworkovima, WebAssemblyjem i optimiziranim asset pipelineom. Fokus je na isporuci kompleksnih scena uz stabilan FPS i prihvatljive performanse na širokom rasponu uređaja, od srednje klase mobitela do high-end desktopa.
Gen-02: 3D portfolio kao navigabilan prostor, ne kao klasična stranica
Jedan od najupečatljivijih primjera je 3D portfolio „Gen-02”, nagrađen na Awwwardsu. Projekt koristi prilagođeni WebGL renderer u kombinaciji s Vue.js-om i GSAP-om. Umjesto standardnog „scroll + fade” layouta, cijela web stranica funkcionira kao navigabilan 3D prostor s više soba.
Arhitektura: WebGL kao render sloj, SPA kao logika
Gen-02 ilustrira tipičan hibridni pristup koji se sve češće viđa u produkciji:
- Vue.js preuzima ulogu SPA okvira za rute, stanje aplikacije i UI komponente.
- GSAP upravlja animacijama, time-lineovima i prijelazima između scena.
- Prilagođeni WebGL renderer brine o shaderima, materijalima i render pipelineu.
Ovakav razdvojeni dizajn olakšava održavanje. Poslovna logika, forme i sadržaj žive u poznatom frontend ekosustavu, dok je WebGL izoliran na jasno definiran sloj. Timovi mogu neovisno razvijati UI i 3D dio, uz manje rizika da promjene u jednom sloju razbiju drugi.
Tranzicije, kamera i post-proces: koreografija u stvarnom vremenu
Ključni dojam u Gen-02 portfoliju dolazi iz načina na koji su riješene tranzicije. Umjesto naglih promjena scena, korisnik prolazi kroz prostor. Kamera se kreće kroz „sobe”, a promjene sadržaja izgledaju kao dio kontinuiranog 3D svijeta.
Tehnički, to znači kombinaciju više tehnika:
- animirane kamere s preciznim kontrolama easing funkcija u GSAP-u,
- GPU-akcelerirani post-proces efekti (blur, bloom, color grading) u zasebnim rendering passovima,
- kontrola frame pacinga kako bi tranzicije ostale glatke i na slabijim uređajima.
Primjerice, prelazak iz jedne „sobe” u drugu uključuje kratki fade, promjenu fokusa, lagani motion blur i promjenu ekspozicije. Sve se to događa u WebGL pipelineu, uz brigu o tome da broj draw callova i veličina tekstura ostanu pod kontrolom.
Što timovi mogu naučiti iz Gen-02 pristupa
Gen-02 pokazuje nekoliko obrazaca koji se već pretvaraju u de facto standard:
- koristiti WebGL kao render sloj, ne kao cjelokupni framework,
- osloniti se na provjerene SPA alate za rute, stanje i sadržaj,
- planirati 3D navigaciju kao UX obrazac, a ne samo kao vizualni efekt,
- ranije u procesu dizajnirati post-proces pipeline (ton mapping, bloom, DOF) umjesto da se dodaje na kraju.
Fizikalne simulacije u pregledniku: WebGL kao GPGPU sloj
Druga linija showcase projekata su browser-bazirane fizikalne simulacije. Novi primjeri s realističnim simulacijama vode, „fluffy” čestica i spregnutih cloth-fluid sustava pokazuju da WebGL, u kombinaciji s WebAssemblyjem, može postići rezultate bliske nativnim aplikacijama.
WebAssembly + WebGL: numerika i prikaz
Tipična arhitektura takvih projekata izgleda ovako:
- jezgra fizikalnog enginea napisana je u C++-u ili Rustu i kompajlirana u WebAssembly,
- WebAssembly modul upravlja strukturama podataka (mreže, čestice, polja sila),
- WebGL se koristi kao univerzalni GPGPU i render sloj.
Dio proračuna odvija se na CPU-u (u WebAssemblyju), ali teži dijelovi se prebacuju u GPU putem WebGL-a. To se postiže pametnim korištenjem render targeta i floating-point tekstura, gdje se fizikalna stanja pohranjuju kao teksture, a shaderi postaju „compute” jezgre.
GPGPU tehnike u WebGL-u: od efekata do simulacija
Mnoge tehnike koje su nastale za vizualne efekte sada se koriste i za numeričke proračune:
- depth-based blur i screen-space sile za simulacije fluida i mekih tijela,
- tiled pristupi u fragment shaderima koji oponašaju compute shadere,
- višestruki rendering passovi gdje svaki pass ažurira dio stanja simulacije.
Primjer: simulacija vode koristi višestruke render targete za pohranu brzine, tlaka i visine površine. Svaki frame prolazi kroz niz shader petlji koje ažuriraju te vrijednosti. Rezultat se zatim koristi i za fiziku i za vizualni rendering (refleksije, lom svjetlosti, pjena).
Uz pažljivo podešavanje rezolucije tekstura i broja iteracija po frameu, moguće je zadržati stabilan FPS i na mobilnim uređajima. Showcase projekti često nude „quality preset” izbornik koji mijenja rezoluciju simulacije i broj iteracija, umjesto da mijenja samu geometriju.
Zašto i dalje WebGL, a ne odmah WebGPU?
Iako bi WebGPU teoretski bio prirodniji izbor za ovakve workloadove, praksa je drugačija. Produkcijski timovi žele:
- pokriti starije preglednike i uređaje bez WebGPU podrške,
- izbjeći dvostruko održavanje koda (WebGPU + fallback),
- iskoristiti postojeće WebGL biblioteke i alate.
Zato WebGL često ostaje zajednički nazivnik. WebGPU se koristi kao opcionalni ubrzivač za korisnike s modernim uređajima, dok WebGL osigurava da iskustvo ostane dostupno većini publike.
Neural-rendering i WebGL: Gaussian Splatting, 4D svjetovi i fallback slojevi
Treći smjer razvoja su projekti koji spajaju WebGL s novim neural-rendering tehnikama, poput Gaussian Splattinga, neuralnih polja i 4D svjetova. Istraživačka zajednica sve više koristi WebGPU za trening i inferenciju, no u produkcijskim web iskustvima WebGL i dalje igra ključnu ulogu.
Tipičan pipeline: WebGPU za računanje, WebGL za prikaz
Uobičajen obrazac izgleda ovako:
- model se trenira offline ili u pregledniku uz pomoć WebGPU-a,
- iz modela se generira 3D struktura (splatovi, volumetrijske mreže, mesh),
- finalni podaci se isporučuju kroz WebGL viewer na produkcijskom webu.
Razlog je jasan: korisnici ne moraju imati WebGPU podršku niti snažan GPU za inferenciju. Viewer samo prikazuje već pripremljene podatke. WebGL renderer se fokusira na efikasan prikaz velikog broja splatova ili volumetrijskih elemenata, uz agresivni culling i LOD sustave.
Fallback i progresivno učitavanje
Showcase projekti u ovom području često nude višeslojni pristup:
- ako je WebGPU dostupan, dio inferencije se može odvijati u pregledniku,
- ako nije, koristi se unaprijed izračunata verzija i WebGL viewer,
- u krajnjem slučaju, prikazuje se statična verzija (screenshot, video, pojednostavljeni mesh).
Progresivno učitavanje je ključno. Prvo se prikazuje grubi LOD ili manji broj splatova, a zatim se u pozadini učitavaju detaljniji slojevi. To omogućuje brzi „time to first interaction” čak i na sporijim vezama.
Što ovi showcase primjeri znače za nove 3D web projekte?
Za timove koji planiraju nove 3D web projekte, poruka je pragmatična. WebGL nije „zastarjeli” API koji treba hitno zamijeniti. Naprotiv, showcase projekti potvrđuju da je on i dalje nosivi stup produkcijskih 3D iskustava, dok se WebGPU uvodi postupno i ciljano.
1. WebGL kao stabilna osnova za široku publiku
Za javne, široko dostupne projekte WebGL ostaje najsigurniji izbor. Podržavaju ga gotovo svi preglednici i uređaji, a problemi s driverima i kompatibilnošću danas su znatno rjeđi nego prije nekoliko godina.
To je posebno važno za:
- brand experience kampanje koje ciljaju globalnu publiku,
- edukativne 3D alate i vizualizacije,
- portfolije i kreativne showcase stranice.
2. Hibridni pristupi: WebGL + WebAssembly + WebGPU
Najzanimljiviji projekti ne biraju isključivo jedan API. Umjesto toga kombiniraju:
- WebGL kao glavni render sloj,
- WebAssembly za numerički intenzivne dijelove logike,
- WebGPU kao opcionalni ubrzivač za specifične taskove (inferencija, offline bakeanje podataka).
Ovakav pristup smanjuje rizik. Projekt može krenuti s WebGL-om i WebAssemblyjem, a kasnije dodati WebGPU kao dodatni sloj bez potpunog prepisivanja koda.
3. Fokus na asset pipeline, LOD i interakcijski dizajn
Showcase primjeri iz 2025. pokazuju da se ključne bitke više ne vode samo na razini API-ja. Umjesto toga, odlučuju:
- kvaliteta asset pipelinea (kompresija tekstura, optimizacija meshova, baking svjetla),
- dobro dizajnirani LOD sustavi i culling (što se uopće renderira po frameu),
- interakcijski obrasci koji poštuju ograničenja uređaja (kontrole, UI, pristupačnost).
Primjerice, mnogi noviji projekti koriste:
- GPU-kompresirane teksture (Basis, KTX2) kako bi smanjili bandwidth,
- instancing i batching za smanjenje broja draw callova,
- diferencirane profile kvalitete za mobilne i desktop uređaje.
Upravo na tim razinama – asset pipelineu, LOD-u i dizajnu interakcije – vjerojatno će se u 2026. odvijati najzanimljivije inovacije u WebGL ekosustavu. API izbor ostaje važan, ali nije više jedina ni glavna priča.
Zaključak: WebGL i WebGPU kao partneri, ne suparnici
Novi WebGL showcase projekti krajem 2025. jasno pokazuju da se ekosustav kreće prema hibridnim rješenjima. WebGL ostaje stabilna baza za prikaz, dok WebGPU sve češće preuzima ulogu specijaliziranog akceleratora za najzahtjevnije zadatke.
Za razvojne timove to znači da je najbolja strategija danas:
- planirati WebGL kao primarni render sloj,
- graditi oko njega moderan frontend stack (SPA, state management, UI),
- koristiti WebAssembly i, gdje ima smisla, WebGPU za teške proračune,
- ulagati u asset pipeline, LOD i UX umjesto u čistu API „egzotiku”.
Ekosustav se time ne polarizira, nego širi. WebGL i WebGPU postaju komplementarni dijelovi iste priče – priče u kojoj je cilj isporučiti bogata, interaktivna 3D iskustva koja rade pouzdano, brzo i na što većem broju uređaja.
