Dom v prehliadači
Interaktívny 3D model, na ktorom sa učím pracovať s 3D na webe.
Prehľad
Osobný projekt po večeroch: model domu, ktorým sa dá prejsť priamo v prehliadači. Geometria, interiér aj záhrada vychádzajú zo spoločného dátového modelu. Predlohou je dom, ktorý si staviam, ale projekt je hlavne o tom, čo sa na ňom naučím.
Rozsah
- Interaktívny 3D model v prehliadači
- Dátový model geometrie a rozmerov
- Interiér, kolízie a prechod priestorom
- Vizualizácie v Blenderi
01 /Kontext
Tento projekt vznikol ako cvičenie. Chcel som si vyskúšať, čo všetko unesie 3D scéna v prehliadači, a potreboval som k tomu zadanie, ktoré dobre poznám — dom, na ktorom zároveň pracujem.
Nie je to zákazka ani produkt. Je to miesto, kde si môžem skúšať veci bez klienta a bez termínu, a preto sa na ňom naučím najviac.
02 /Moja rola a zodpovednosť
Model aj celú webovú scénu vyvíjam sám. Riešim geometriu, materiály, ovládanie kamery, prechod interiérom aj veľkosť dát, s ktorou sa scéna ešte rozumne načíta.
Predlohou je dom, ktorý si staviam, takže pracujem so skutočnými rozmermi. Model sa potom vracia späť do návrhu — pomáha mi premýšľať o priestore a súvislostiach medzi jeho časťami.
03 /Kľúčové rozhodnutia
Priestor, ktorým sa dá prejsť
Model sa dá otočiť, preletieť alebo doň vojsť. Má interiér, ovládateľné dvere a kolízie, takže si priestor skúšam aj z pohľadu človeka, ktorý ním prechádza.
Jeden dátový model
Geometria, rozmery a technické pohľady vychádzajú z rovnakých dát. Zmena na jednom mieste sa prepíše do celej scény, namiesto toho, aby sa ručne dohľadávala.
Cvičisko bez termínu
Projekt zámerne nemá klienta ani deadline. Môžem v ňom skúšať postupy, ktoré by som v platenej práci nasadzoval opatrnejšie, a ďalej si odniesť len to overené.
04 /Architektúra
Interaktívny model vyvíjam v TypeScripte s Babylon.js. Geometria, rozmery a technické pohľady vychádzajú zo spoločného dátového modelu.
Na webovú scénu nadväzuje Blender a Cycles na vizualizácie. Pripravené 3D modely a materiály sa vracajú do prehliadača, kde zostáva zachované otáčanie, prelet aj chôdza interiérom.
05 /Technológie
Babylon.js, TypeScript, React, Blender, Cycles, glTF
06 /Výsledok
Model sa dá prejsť priamo v prehliadači: otáčanie, prelet aj chôdza interiérom a po záhrade. Odkaz vedie vždy k jeho aktuálne publikovanej podobe.
Stále na ňom pracujem. To, čo sa na ňom naučím o 3D na webe, o výkone a o práci s dátami, používam aj mimo tohto projektu.