V prvním článku jsem se rozhodl vytvořit převodník z .OBJ do .HTML a .CSS. Rychle se ale ukázalo, že potřebujeme mít možnost výsledné prvky scény dále upravovat — nastavovat průhlednost, barvu, gradient, přidávat animace, reagovat na hover nebo třeba přidávat checkboxy s vlastním chováním. A v některých případech bychom chtěli do scény zapojit i JavaScript.
Některé z těchto vlastností by teoreticky šlo načíst z .OBJ nebo jiných 3D formátů. Jenže většinu určuje spíš to, co dokáže prohlížeč. A to se vyvíjí. Například konický gradient dřív neexistoval, dnes ho umí většina moderních browserů. Náš editor by na tyto změny měl pružně reagovat.
Jinými slovy, nemůžeme spoléhat na to, že veškeré potřebné informace získáme z importovaného souboru.
Z toho plyne, že budeme potřebovat způsob, jak vybírat jednotlivé strany nebo tělesa a nastavovat jim různé vlastnosti. Z jednoduchého převodníku se tak pomalu stává editor. A když už budeme schopni upravovat scény, proč rovnou nenaprogramovat i jejich tvorbu od nuly?
Upravené zadání
- Scéna bude využívat CSS 3D
- Výstupní HTML a CSS bude možné uložit
- Funkce editoru jsou určeny možnostmi prohlížeče
Takhle formulované zadání otevírá spoustu nových možností. Už jen vytvořit interaktivní aplikaci, která bude fungovat jak v PHP, tak v JS, je samo o sobě výzva. V PHP se typicky generuje HTML, v JS se zase pracuje s DOM. I architektura je jiná — server používá MVC, klient jiné návrhové vzory. Spojit to bude chtít hodně tvůrčí invence.
A to jsme ještě nezačali s geometrií! Průniky 3D těles, jejich zarovnání, rotace, ořezy, spojování... To jsou programátorské lahůdky, kde si člověk pořádně procvičí prostorovou představivost i kreativní myšlení.
Pokusil se už někdo o něco podobného?
Webových 3D editorů existuje celá řada. Většina z nich je ale založená na Three.js, tedy kreslení na canvas. Když se podíváte na jejich kód na GitHubu, najdete tam desetitisíce řádků JavaScriptu.
Já mám jinou představu. Lehký 3D editor s pár tisíci řádky kódu, který využívá výkon prohlížeče a vykresluje scénu přes CSS 3D. A výstup? Čisté HTML + CSS bez nutnosti nahrávat JS runtime.
O něco podobného se pokusili autoři Tridivu. Bohužel došli jen ke kvádru, emulaci válce a dvěma speciálním jehlanům. Nepodařilo se jim překonat myšlenkovou hranici, která je klíčem k tomu, jak do prostoru umístit libovolný polygon. Tu vás naučím překonat.
Dalším zástupcem je Toaster — odlehčenější, ale s podobnými limity. Celkově je tahle kategorie nástrojů téměř prázdná. Oba projekty se navíc drží klasické „CAD logiky“ a příliš nevyužívají silné stránky prohlížečů.
Je vývoj CADu obtížný?
Rozhodně bude složitější než třeba webový textový editor (TinyMCE), jednoduchý tabulkový kalkulátor nebo aplikace pro digitalizaci stavebního řízení :-). Ale nemyslím si, že by to bylo nereálné — i pro jednotlivce.
Důkaz máte před sebou: všechny 3D scény v tomto blogu jsou generovány betaverzí tohoto CADu. Všechny obrázky jsou screenshoty scén, které vznikly v něm.
Nebojte se velkých projektů.
Naučí vás jinému způsobu myšlení.
Chcete vědět, jak si naprogramovat vlastní CAD – a rovnou i ve vlastním jazyce? Přihlaste se k odběru a těšte se na další kapitoly.
V příštích článcích si představíme, jaké všechny funkcionality by měl náš CAD podporovat. A šetřit rozhodně nebudeme. :-)