// Tehnologija

GLSL shaderi za custom 3D efekte na sajtu

Custom shaderi pišu se u GLSL-u i rade na GPU-u — najbrži način da se napravi efekat koji ne postoji u standardnom materijalu.

Pošalji upit Sve 3D usluge

GLSL (OpenGL Shading Language) je jezik kojim se pišu vertex i fragment shaderi koji se izvršavaju na GPU-u. Standardni Three.js materijali pokrivaju 80% slučajeva — Lambert, Phong, Standard PBR. Preostalih 20% (čestice koje gore kao plamen, metali sa nestandardnim refleksijama, glitch efekti, holograms) zahtevaju custom shader. Pišem ih u tagovima `/* glsl */ \`...\`` direktno u JS kodu, koristeći vite-plugin-glsl za inline kompilaciju. Mali primer čini razliku — particle field sa shader-driven boju u funkciji vremena oseti se kao "živ", isti field sa default materijalom oseti se kao screensaver.

Šta dobijate

Konkretan deliverable: glsl shaderi integrisan u realan produkcijski sajt, ne demo. Integracija ima device-tier detekciju, slabi telefoni dobiju lakšu verziju automatski. Izvorni fajlovi se predaju u originalnim formatima — Blender, GLSL, glTF — pa svaki budući developer može da nastavi tamo gde sam stao.

Kako to radi u praksi

Na tipičnom projektu, glsl shaderi stiže kao samostalni modul: jedan entry-point JS fajl, jedan CSS, asset bundle ispod 1.5MB ukupno. Integracija je sandbox — ostatak sajta ostaje SEO-friendly klasičan HTML. Frame budget: 60 FPS na srednjem Androidu, sa merljivim fallback režimom ispod toga.

Performance budget

Lighthouse mobile cilj: 85+ u svim kategorijama. Merim na realnim uređajima, ne samo emulatoru. Asset kompresija: glTF + Draco za mesh-eve, KTX2 za teksture, Brotli za shaderse. Lazy-load svake glsl shaderi scene koja nije above-the-fold da prvi paint ostane ispod 1.5s.

Kada nije isplativo

Ako je cilj jednostavan e-commerce katalog ili sadržajni blog, pun glsl shaderi setup je prevelik — CSS hero plus statičke slike konvertuju jednako dobro za 1/10 cene. glsl shaderi se isplati kada brand zahteva memorabilan vizuelni momenat, ili kada 3D zaista pomaže razumevanju proizvoda (konfiguratori, ture, demoi).

Često postavljana pitanja

Zašto baš ova tehnologija?

Ima najveći produkcijski ekosistem, najviše dokumentacije, i najviše iskusnih developera. Za sajt koji treba da traje 3+ godine, zrelost ekosistema je važnija od pojedinačnih feature-a.

Šta ako sledeće godine izađe nešto novo?

Pratim novi tooling i migriram kada ima smisla, ali tek pošto novi alat ima 6-9 meseci stable produkcijskih izdanja. Ne pišem klijentske sajtove na bleeding-edge alatima — to je put ka pokvarenim sajtovima.

Koliko traje izrada?

Standardni rok: 4-6 nedelja od potpisa ugovora do live sajta. Veći opseg (konfigurator, multi-scene scrollytelling) ide na 8-12 nedelja. Hitne projekte (2-3 nedelje) primam uz povećanje cene od 30-40%.

Koliko košta?

Hero 3D nadogradnja: 800-1.200 EUR. Kompletan multi-scene 3D sajt: 2.500-4.000 EUR. Konfigurator sa custom shaderima: 4.000-10.000 EUR. Sve fiksne cene, izvorni kod uključen. Plaćanje preko firme sa PDV-om.

Šta sa korisnicima na slabim telefonima?

Sajt detektuje device tier pre prve scene i servira lakšu verziju na slabom hardveru (manje čestica, jednostavniji shaderi). Uređaji bez WebGL-a dobiju statičan fallback koji čuva vizuelni jezik i konverzioni put.

Spremni za 3D iskustvo na vašem sajtu?

Recite mi šta vam treba — fiksna cena, fiksan rok, bez iznenađenja.

Pošalji upit +381 61 224 8989