V prvním článku jsem se rozhodl udělat převodník z .OBJ do .HTML + .CSS. Ovšem vzniká problém, kdy potřebujeme výsledné prvky scény dále konfigurovat, například potřebujeme nastavit jejich průhlednost, barvu nebo gradient, někdy bychom je chtěli nějak animovat, reagovat na hover, zabudovat do scény třeba nějaké checkboxy a reakce na jejich zatržení a v extrémním případě bychom chtěli třeba do výsledné scény i zapojit nějaký javascript.
Některé z těchto vlastností by asi šlo čerpat z .OBJ či nějakých jiných formátů 3D modelů, ovšem spoustu těchto věcí prostě určují možnosti prohlížeče a dokonce se mohou vyvíjet spolu s možnostmi prohlížečů. Například takový kónický gradient, v jistém okamžiku v prohlížečích nebyl a později se objevil. A náš editor by na takovéto změny měl reagovat.
Takže, rozhodně nemůžeme předpokládat, že bychom všechny informace, které potřebujeme pro naši výslednou scénu dostali z importovaného souboru.
Důsledkem je to, že v naší scéně budeme potřebovat nějakým způsobme vybírat jednotlivé strany či celá tělesa a nastavovat jim celou řadu vlastností. Takže od jednoduchého převodníku míříme někam k následnému editoru po převodu. Otázka je, jestli když už v`našem programu budeme mít celou řadu různých editací, do něj rovnou nemáme naprogramovat i vkládání a editaci vlastních těles, stran a bodů které je definují. Rozhoduji se, že ano. Tím se ovšem původní zadání mění a rozhoduji se naprogramovat 3D editor (t.j. CAD), kde načtení z .OBJ bude jen jednou z funkcí.
Upravené zadání
- Naprogramujte plnohodnotný CAD program
- Scéna, kterou tento CAD bude generovat bude vyžívat CSS 3D
- Tato scéna tvořená .HTML a .CSS půjde též uložit
- Možnosti CADu budou určeny možnostmi prohlížeče
Takovéto zadání nám samozřejmě poskytne ještě více možností pro naší kreativitu. Už jen vytvoření interaktivní aplikace, která se stejným kódem pojede v PHP i v JS bude mimořádně zajímavé. Jak z hlediska fyzického zápisu do stránky, protože v PHP se většinou zapisuje HTML (přes echo), kdežto v JS se buduje DOM, tak i z hlediska architektonického, kdy ze serveru voláme stránky pomocí MVC, kdežto na klientovi se používají zcela jiné návrhové vzory. Toto sloučit bude potřebovat mnoho tvůrčí invence :-).
A samozřejmě vytváření různých grafických operací, typu: průniku 3D těles, jejich zarovnání, rotace, ořezů, spojování atd... skýtá mnoho programátorských lahůdek, kde bude potřeba 3D představivost, ... a kreativita. Svůj mozek tedy budeme moci řádně trénovat.
Pokusil se již někdo o něco takového?
Online (web) 3D Editorů existuje zřejmě celá řada. Ovšem založeny jsou na jsthree (tj. na malování na canvas) Např. threejs.org/editor. Když se podívám na GitHub tak je vidět desetitisíce, možná statisíce řádků JS. Já mám ovšem představu spíše tak tisíců řádků. Lehký 3D editor, kde většinu práce udělá prohlížeč přes CSS 3D. Navíc chci výstup do CSS, aby uživatel nemusel nahrávat JS runtime pro zobrazení 3D formátů.
3D editor založený na CSS 3D zkoušeli asi jen na tridiv.com, bohužel dostali se jen ke kvádru, emulaci válce a dvou speciálním jehlanům. Nepodařilo se jim překonat jistou myšlenkovou mez, která je nutná pro umístění libovolného polygonu do prostoru, kterou Vás naučím překonat.
Je vývoj CADu obtížný?
Ano, vývoj určitě bude obtížnější než jednoduché věci typu webový textový editor (např. TinyMCE), webový tabulkový kalkulátor či jednoduché databázové aplikace typu digitalizace stavebního řízení. Ale nemyslím si, že by to pro jednoho vývojáře za pár večerů bylo nemožné. A důkaz máte před sebou, všechny 3D scény jsou generovány beta verzí tohoto CADu, všechny obrázky jsou screenshoty scén.
Nebojte se velkých projektů, naučí Vás jinému typu myšleníChtěli by jste vědět, jak snadno naprogramovat složitější projekty jako vlastní CAD ve vlastním jazyce? Neváhejte a přihlaste se k odběru a těšte se na další kapitoly tohoto blogu. V nejbližších článcích si představíme jaké všechny funkcionality by náš CAD měl podporovat.