PlayCanvas 2.14: hotspotovi, anotacije i Gaussian splats u praksi
PlayCanvas Engine v2.14.0 donosi skup novosti koje vrlo konkretno mijenjaju način na koji gradimo interaktivni 3D web. Najvidljivije su tri stvari: sustav hotspotova i anotacija, unaprijeđeni LOD za 3D Gaussian splats te novi primjer compute edge detecta koji koristi WebGPU.
Hotspotovi i anotacije ciljaju tipične 3D konfiguratore, virtualne obilazak prostora i tehničku dokumentaciju. Umjesto da se interaktivne točke ručno „lijepi” na scenu kroz ad-hoc skripte, engine sada nudi strukturirani sustav. Hotspot se veže na objekt ili poziciju u prostoru, ima vlastiti UI prikaz (ikonica, panel, tooltip) i reagira na događaje kamere i korisnika.
Za timove koji rade konfiguratore automobila, industrijske prikaze strojeva ili edukativne 3D vodiče, to znači manje custom koda i pouzdaniji pipeline. Hotspotovi se mogu vezati na podatke iz backend sustava (npr. opis komponente, cijena, servisni interval), a frontend ostaje fokusiran na rendering i UX. U praksi, to skraćuje vrijeme razvoja i olakšava održavanje velikih 3D kataloga.
Druga značajka su poboljšani LOD mehanizmi za 3D Gaussian splats. Gaussian splatting koristi oblake „točkica” (splats) za prikaz kompleksnih scena, posebno onih dobivenih iz fotogrametrije ili LiDAR skeniranja. U PlayCanvasu 2.14 LOD sustav omogućuje agresivno smanjivanje broja splatova s udaljenošću, bez vidljivog gubitka kvalitete u daljini.
To je važno za projekte koji žele prikazati masivne point-cloud ili skenirane lokacije u pregledniku: muzeji, arhitektonski studiji, građevinski nadzor, digitalni tvornici. Bez LOD-a, takve scene vrlo brzo nailaze na ograničenja GPU memorije i bandwidtha. S LOD-om, isti dataset postaje upotrebljiv na prosječnom laptopu ili tabletu, uz stabilan FPS i prihvatljiv frame pacing.
Compute edge detect: WebGPU kao motor za obradu slike
Treći element PlayCanvas 2.14 izravno gleda u budućnost: primjer compute edge detecta. Iako engine i dalje cilja WebGL2 kao osnovu kompatibilnosti, ovaj primjer koristi WebGPU compute shadere za obradu slike u stvarnom vremenu.
Edge detect je klasičan filter ruba. U WebGL1/2 svijetu obično se implementira kroz fragment shader u post-process passu: tekstura framebuffera se uzorkuje više puta, računa se gradijent i naglašavaju se rubovi. U WebGPU pristupu, isti problem rješava se compute shaderom koji radi na general-purpose bufferima, s većom kontrolom nad paralelizmom i pristupom memoriji.
Zašto je to bitno? Zato što isti pristup otvara vrata puno težim zadacima: denoising za ray tracing, napredni temporalni filteri, rekonstrukcija detalja iz niže rezolucije, prilagođeni algoritmi za kompresiju ili streaming tekstura. Compute pipeline više nije ograničen na „rendering”, već postaje opći alat za obradu podataka unutar preglednika.
U PlayCanvasu, ovaj primjer služi kao referenca za timove koji planiraju hibridne arhitekture: jezgra renderinga i dalje radi na WebGL2, dok se specifični, compute-intenzivni zadaci prebacuju u WebGPU kada je dostupan. Time se dobiva progresivno poboljšanje – aplikacija radi svugdje, ali na modernim preglednicima dobiva dodatne efekte i bolju kvalitetu slike.
Multi-draw: manje draw callova, više FPS-a
Još jedna značajna novost u PlayCanvasu je podrška za multi-draw, i to i u WebGL2 i u WebGPU modu. Multi-draw omogućuje da se više geometrija nacrta jednim pozivom crtanju, umjesto da se svaki objekt renderira kroz zaseban draw call.
U tipičnoj 3D web sceni CPU često postaje usko grlo, ne zbog same težine shader koda, nego zbog tisuća draw callova koje JavaScript mora pripremiti i poslati GPU-u. Svaki draw call ima svoj overhead: postavljanje uniformi, binding buffera, promjena statea. Multi-draw pakira više instanci istog mesh formata ili više patch-eva terena u jedan poziv.
Primjeri gdje je dobit najvidljivija:
- renderiranje terena po patch-evima, gdje se desetci ploha s istim materijalom mogu nacrtati jednim multi-draw pozivom
- instancirani objekti poput drveća, rasvjete, prometnih znakova ili sjedala u stadionu
- veliki gradski blokovi sastavljeni od ponavljajućih modula fasada
Na WebGL2 projektima, multi-draw smanjuje CPU opterećenje i broj JavaScript-GPU prijelaza bez radikalnih promjena u arhitekturi. Često je dovoljno prilagoditi postojeći batching i instancing sustav kako bi se više objekata grupiralo u jedan draw call. U praksi to znači stabilniji FPS na slabijim uređajima i više „prostora” za dodatne efekte poput sjena, SSAO-a ili naprednijeg post-processa.
U WebGPU modu, multi-draw se nadovezuje na veću fleksibilnost pipelinea. Uz compute shadere koji mogu pripremati draw parametre na GPU-u, otvara se mogućnost potpuno GPU-vođenog renderinga: culling, LOD odabir i sortiranje mogu se rješavati bez vraćanja na CPU. To je smjer u kojem idu moderni enginei, a PlayCanvasove promjene pokazuju da se isti koncepti sele i u web okruženje.
Showcase projekti: od Medusae do WebGPU raymarchinga
Tehničke mogućnosti enginea najbolje se vide kroz konkretne showcase projekte. U WebGL svijetu, jedan od recentnih primjera je Medusae – simulacija meduze temeljena na Three.js-u, GLSL-u i prilagođenom fizikalnom solveru.
Medusae koristi kombinaciju vertex i fragment shader logike za simulaciju mekog tijela, valova i dinamike vode. Umjesto klasične fizike na CPU-u, većina izračuna odvija se u shaderima: deformacija mreže, oscilacije, reakcija na korisnički input. Rezultat je vrlo fluidna animacija koja radi i na standardnim WebGL2 preglednicima, bez WebGPU-a.
Ovaj projekt jasno pokazuje da se i u „klasičnom” WebGL okruženju mogu postići impresivni rezultati uz pažljivo pisane shadere, dobro dizajnirane teksture i optimiziranu geometriju. Za mnoge produkcijske timove to je važna poruka: nije nužno čekati punu WebGPU dostupnost da bi se radili vizualno napredni projekti.
Na drugom kraju spektra nalaze se WebGPU showcaseovi. Primjeri uključuju raymarchane crne rupe, volumetrijske efekte i portfolije koji kombiniraju React, Three.js i WebGPU. U tim projektima granica između „web aplikacije” i „real-time renderera” gotovo nestaje.
Raymarching crnih rupa koristi WebGPU compute i napredne fragment shadere za simulaciju gravitacijskog savijanja svjetla. Zbog boljeg pristupa bufferima i većeg broja radnih niti, moguće je izvesti više iteracija po pikselu i složenije fizikalne modele nego u standardnom WebGL fragment shaderu, bez dramatičnog pada FPS-a.
Moderni portfoliji pak spajaju klasičan React UI (navigacija, forme, sadržaj) s 3D scenom koja se renderira preko Three.js-a na WebGPU backendu. Aplikacijska logika, state management i mrežni sloj ostaju u „standardnom” web svijetu, dok se rendering ponaša kao samostalan engine. To je praktični prikaz kako će izgledati iduća generacija poslovnih 3D aplikacija: konfiguratori, nadzorne ploče za IoT, digitalne tvornice i edukativne platforme.
WebGL2 kao baza, WebGPU kao akcelerator
Za timove koji planiraju nove 3D web projekte, slika je sve jasnija. WebGL2 ostaje temelj kompatibilnosti i širokog dosega: radi na većini desktop i mobilnih preglednika, dobro je dokumentiran i provjeren u produkciji. Istovremeno, enginei poput PlayCanvasa i biblioteke poput Three.js-a sve češće isporučuju značajke dizajnirane s WebGPU-om na umu.
To se vidi u nekoliko trendova:
- multi-draw pipeline koji je kompatibilan s WebGL2, ali se lako širi na GPU-vođeni rendering u WebGPU-u
- compute primjeri (edge detect, simulacije) koji se mogu prebaciti s fragment shader post-processa na WebGPU compute
- napredni LOD sustavi za Gaussian splatting i slične tehnike koje traže fleksibilniji pristup memoriji
Praktičan pristup je graditi rendering sloj tako da maksimalno iskoristi WebGL2 optimizacije: instancing, batchevi, multi-draw, pažljivo dizajnirani shaderi, minimalni broj state promjena. Istovremeno, arhitektura bi trebala biti modularna: jasno odvojeni rendering passovi, apstrakcija nad bufferima i teksturama, mogućnost zamjene post-process lanca WebGPU compute modulima kada su dostupni.
Primjer takve arhitekture u praksi:
- osnovni renderer: WebGL2, s podrškom za instancing, multi-draw i standardne post-process efekte
- detekcija WebGPU-a: na podržanim preglednicima inicijalizira se paralelni WebGPU kontekst
- compute modul: specifične zadaće (denoising, napredni edge detect, simulacija fluida) preuzimaju WebGPU compute shadere
- fallback putanja: kada WebGPU nije dostupan, isti efekt se izvodi kroz optimizirani fragment shader ili se jednostavno isključuje
Takav dizajn daje najbolji omjer: stabilna baza koja radi danas i jasan put prema budućim poboljšanjima performansi bez ponovnog pisanja cijelog renderera. WebGL2 ostaje „lowest common denominator”, dok WebGPU funkcionira kao akcelerator za zahtjevnije efekte i veće datasetske skupove.
Što to znači za sljedeću generaciju 3D weba
PlayCanvas 2.14 i recentni showcase projekti jasno pokazuju smjer razvoja. WebGL2 neće nestati preko noći, ali će se sve više koristiti kao stabilna baza, dok će WebGPU preuzimati ulogu za compute-intenzivne zadatke, masivne point-cloudove, napredne simulacije i integraciju s modernim web stackom.
Za developere i produkcijske timove to znači nekoliko konkretnih koraka:
- uložiti vrijeme u optimizaciju WebGL2 pipelinea: smanjenje draw callova, korištenje multi-draw i instancinga, profiliranje shader koda
- planirati arhitekturu tako da se ključni algoritmi (fizika, obrada slike, streaming) mogu kasnije prebaciti u WebGPU compute
- pratiti engine updateove: PlayCanvas, Three.js i slični alati sve češće nude gotove module za Gaussian splats, LOD i compute efekte
- razmišljati o 3D webu ne samo kao o „vizualizaciji”, već kao o sastavnom dijelu aplikacijskog pipelinea – s integracijom s backend servisima, IoT senzorima i poslovnom logikom
U tom kontekstu, novosti poput hotspotova, multi-drawa i compute edge detecta nisu samo „featurei” u changelogu. One su signali da se 3D web sve više ponaša kao ozbiljan real-time rendering ekosustav, u kojem WebGL2 i WebGPU surađuju umjesto da se međusobno isključuju.
