3D internetne aplikacije so 3D interaktivne vizualizacije in so razmeroma nov način prezentacije produktov, kjer ima stranka možnost izdelek poljubno obračati okoli osi, si ga približati, odpreti njegove sestavne dele, preizkusiti njegove funkcije, spreminjati barve ali dodatno opremo. Izdelamo lahko aplikacijo, kot 3D konfigurator izdelkov, 3D prezentacijo / predstavitev in/ali VR interaktivno 3D aplikacijo.
Ker je tovrstna spletna aplikacija za 3D predsetavitev produktov še razmeroma nova, smo bili pri izdelavi nekoliko omejeni z zahtevnostjo 3D modela, velikostjo tekstur, sencami in ozadjem. Vse smo optimizirali do te mere, da se na sodobnem računalniku in brskalniku naloži v manj kot 1 sekundi, na mobilnih napravah pa pod 3 sekundami. 3D model je bil optimiziran do samo 20.000 poligonov, na njem sta samo dva materiala, prav tako sta uporabljeni samo dve teksturi. Spletna stran s spletno 3d aplikacijo se tako lahko naloži prav tako hitro, kot klasične 2D internetne strani.
POSTOPEK IZDELAVE INTERAKTIVNE SPLETNE 3D APLIKACIJE
0. PRIDOBIVANJE PODATKOV O OBJEKTU, 3D MODELU
- Pošljete nam tlorise in prereze ali tehnične risbe, skice. Sestanemo pa se glede funkcionalne zasnove spletne aplikacije ter glede uporabniškega vmesnika aplikacije in gibov, premikov in animacij 3d modela.
1. MODELIRANJE ALI OPTIMIZACIJA 3D MODELA
- V koliko 3D model ne obstaja, ga zmodeliramo že optimiziranega. Če 3D model že obstaja pa ga moramo optimizirati do željene mere, da kar se da pohitrimo nalaganje in delovanje aplikacije. Zmodeliran volumen skupaj še preverimo in nato potrdimo. Način kako doseči 3d model objekta ali izdelka s čim manj poligoni / trikotniki ter hkrati obdržati oblikovne lastnosti je zeli različen. Pri nekaterih 3d mrežo kar se da oskubimo odvečnih poligonov / trikotnikov, pri drugih pa tudi ponavljajoče se 3D elemente modela izbrišemo in jih kasneje programersko vstavimo na prava mesta.
V vmesni fazi se doda osnovno osvetlitev za namen testiranja.
2. TEKSTURIRANJE IN MATERIALIZIRANJE 3D MODELA
- V tej fazi se na 3D volumen začne nalagati materiale, ki jih skupaj skrbno izberemo in uskladimo. Teksture materialov se mapira ali pozicionira na 3D volumen tako, da usmerjenost npr. letnic pri lesu sledi strukturni in arhitekturni logiki. Večinoma zelo zamuden postopek, ki 3D objektu doda realističen končni izgled. Fotorealističen tu zaenkrat še ne pride v upoštev. V tej fazi se izdela testne 3d aplikacije v nižji kvaliteti, da skupaj z vami preverimo korektnost materialov.
3. OSVETLITEV
- Sledi postavitev ambienta in osvetlitve 3D volumnov. Možen je 3D model za ozadje, kot tudi 360° HDRI panorama, ki je z vidika nalaganja spletne aplikacije bolj optimalna. Možno je vidno kot tudi nevidno (prozorno) ozadje, pri slednjem aplikacija dopušča vidnost ozadja spletne strani.
4. PROGRAMIRANJE UPORABNIŠKEGA VMESNIKA
- Po navodilih oblikovalcev ali po dogovorih se sprogramira uporabniški vmesnik, ki lahko zajema informacijska polja, oblačke ali točke, navigacijske gumbe, interaktivna izbirna polja ipd. To fazo se prav tako potrjuje pri naročniku.
5. PROGRAMIRANJE CELOTNE APLIKACIJE
- Ko imamo 3d model izdelan ga opremimo še z animiranimi gibi, premiki, potem pa nadaljujemo na vprogramiranje tako pripravljenega 3d modela v aplikacijo. Tu s kodo povezujemo različne funkcije uporabniškega vmesnika s 3d modelom in njegovimi animacijami. Po potrjenih funkcionalnih operacijah vse skupaj sprogramiramo v delujočo celoto primerno za spletne strani.
6. TESTIRANJE
- V tej fazi so vse zadeve potrjene in izvedemo testiranje na različnih računalnikih in njihovih operacijskih sistemih ter na različnih prenosnih napravah in njihovih internetnih brskalnikih. Morebitne napake odpravimo.
7. SEO OPTIMIZACIJA
- Že celotno dosedajšnje programiranje upošteva metode SEO, vendar končano aplikacijo dopolnimo še z dodatno SEO vsebino, ki doprinese k boljši uvrščenosti na spletnih iskalnikih.
8. NALAGANJE APLIKACIJE NA SPLETIŠČE
- Tako pripravljeno aplikacijo nato vgradimo v spletno stran, ki je lahko v katerem koli CMS sistemu (Joomla, Wordpress, Drupal,...) ali pa v surovem HTML5 "formatu."