Hezké, hezké. A i docela pochopitelné.

No, když jsme u těch sfér, tak všem dodatečně přeji krásný rok 2020. Přání zde: https://www.qcd.cz/ Akce se vyvolá najetím myši doprostřed (hover)

Je to sice "sféra" (294 stěn) jenom ve 3D, ale i tu složit z navazujících čtyřúhelníků (tj. všechny 4 body jsou v jedné rovině) zhruba stejné plochy je (pro nás matematikou nepolíbené) tak trochu problémek. Nějak se mi do těch zde popisovaných integrálů pro výpočet plochy nechtělo (asi jsem si zatím neochočil tu "neúplnou Beta funkci" ). Pro nalezení těchto bodů jsem nakonec použil nějakou soustavu vztahů se šesti koeficienty (je tam 6 stupňů volnosti na 10 různých tvarů lístečků), které jsem cyklicky iteroval (a měnil o stále menší inkrement), počítal plochu těch lístečků a optimalizoval na minimální směrodatnou odchylku těch deseti ploch.

Pro převod prostorových bodů na transformační koeficienty matrix3d (součást CSS 3D) tj. matematicky zřejmě nalezení afinní transformace je použita gaussova eliminace (12 rovnic a 15 neznámých - řešeních každého "lístečku" je zhruba nekonečno na třetí)

Vybrat z nich to "správné" tj., aby se lísteček neotáčel někde mimo zobrazovaný prostor je už pak duchařina nejvyšší úrovně, kterou radši ani nebudu popisovat (Měření průchodu v čase pomocí getBoundingClientRect a následná optimalizace). A pak už to zbývá jen správně načasovat, aby ty přechody v kombinaci s průhledností nezavařily procesor a skládalo se to postupně odspodu. Výsledné rovnice pohybu jednotlivých vrcholů ve 4D (3D + čas) by byly jistě hezké.

Samozřejmě je to čisté HTML bez jakéhokoliv JS. Jo a v IE jsem to radši ani nezkoušel (ani ho tu nemám). Takhle daleko se "prakticky" v CSS 3D zřejmě ještě nikdo nedostal, tak si to užijte.

Fantastická práce! Řekl bych že je to digitální ekvivalent slepování pirátské lodě v lahvi.

Já většinou na "hejbání" v HTML používám javascriptovou knihovnu d3 a pomocí CSS už jenom dolaďuju barvy a fonty. Vůbec jsem nevěděl, že to umí taky věci takhle přemisťovat.

Jestli to chápu správně, tak těch 16 koeficientíků jste si někde předpočítal a pak je do kódu vkopíroval. To tedy klobouk dolů. Vypadá to impozantně.

d3.js (pokud mám na mysli tu samou knihovnu) je trochu k něčemu jinému - k vizualizaci dat.

Pokud chcete mít v prohlížeči "opravdové 3d prostředí" tj. upravovat, rotovat, procházet, atd... 3D scénou, tak se k tomu většinou používá WebGL (založené na OpenGL). Jeho API je ovšem dost složité a proto se s ním většinou nemanipuluje přímo, ale přes JS knihovnu https://threejs.org/ (kde je i spousta hezkých příkladů). Funguje to hezky, ale umí to vytvářet 3D jen v nějakém prvku stránky, takže je to od zbytku HTML stránky oddělené, a neumožňuje používat běžné HTML a CSS postupy a konstrukce. Což je principiálně dáno tím, že WebGL je založené na umisťování Trojúhelníků v prostoru (jako snad každý jiný modelační program) kdežto HTML pracuje s obdélníky (obecněji čtyřúhleníky).

Proto vznikla jiná technologie CSS 3D, která je opravdu součástí HTML a CSS, o které se ovšem traduje, že je spíše na malé efekty na HTML stránce, než na vytváření celých 3D světů (či složitých objektů). Tato technologie (základy) je hezky popsána třeba zde: https://3dtransforms.desandro.com/

Nicméně součástí CSS 3D je i transformace matrix3d, která by podle mne měla umožňovat vytvářet i komplexnější efekty. Ale nikdo tomu nerozuměl, i popis v manuálu (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d) je prachbídný a moc to podle mne nepoužíval. Navíc všichni jsou zvyklí modelovat pomocí trojúhelníků, jsou na to postupy, matematický aparát, atd..., kdežto použít čtyřúhelníky to znamená aspoň částečně vymyslet znovu.

Spíš než to srovnání s lodí v lahvi, bych řekl, že se snažím ukázat, že i s původně lehkou technologií dnes (nárůst výkonu PC, modernizace prohlížečů) lze dnes dělat i větší věci.

Díky za tip. Až budu mít čas tak na to webGL mrknu

Jinak z matematického hlediska má ta konstrukce koule byly dva problémy:

První je namodelovat povrch koule pomocí čtyřúhelníků (určit jejich rohy v kartézských x,y,z souřadnicích), které se jí zevnitř dotýkají a na sebe bez mezer navazují a jsou co "nejvíc čtvercové" (aby moc nedocházelo ke zkreslení textů a obrázků v nich), jsou zhruba stejně velké a samozřejmě ty 4 body čtyřúhelníku leží v jedné rovině (jinak by to nebyl čtyřúhelník, ale trojboký jehlan). To jsem nakonec řešil počítačově iterací, protože ty rovnice na které by to vedlo si ani nedovedu představit. Ale Vy třeba jo . A je to v principu asi hezká a hodně obtížná matematické úloha.

Druhý problém je z daných 4 vstupních a 4 výstupních bodů (v prostoru) zjistit tu transformační matici. To vyžadovalo pochopit princip těch afiních transformací a vedlo k té soustavě rovnic z které zjistím ty koeficienty po matrix3x (samozřejmě pro každý čtyřúhelník jiné). Což je v podstatě "jenom práce", ale kupodivu to až doteď nikdo pro to CSS3D neudělal. Nebo aspoň já to nenašel.

Ano, ty jsou předpočítané transformace jsou pak pro každý čtyřúhelník staticky uložené v té stránce.

Ta afinní matice je zobecnění bežných transformačních matic 3x3 (rotace, dilatace). Důvod proč je 4x4 spočívá v tom, že používá homogenní souřadnice (x,y,z,1) aby mohla popsat i translaci.

https://en.wikipedia.org/wiki/Transformation_matrix#Other_kinds_of_transformations

a tady je jeden příklad

https://math.stackexchange.com/questions/296794/finding-the-transform-matrix-from-4-projected-points-with-javascript

Jinak tou obdélníkovou triangulací jste si na sebe celkem upletl bič. Většina standardních triangulací jsou trojúhelníky, kde si člověk s tou plošností nemusí lámat hlavu - ale možná by ty trojúhelníky nebyly tak hezké. A hůř by se do nich vpisovalo jméno.

Ty sférické souřadnice jsou s těmi kartézskými notoricky nekompatibilní, proto se jakékoliv pravoúhlé objekty do té sféry těžko vpisují. Možná by se dala vymyslet nějaká verze Delauneyho triangulace...

https://en.wikipedia.org/wiki/Delaunay_triangulation

jj, ten odkaz na wiki jsem hodně studoval, ten je výborný. Ano, pokud si tu matici 4x4 rozložím, na 3x3 (vlevo nahoře) tak ta je o rotaci a zkosení (a úhlopříčné prvky o scale). Ta řádka dole je o translaci a ten sloupec vpravo je o zmenšení (perspektivě) ve směru dané osy.

Ten příklad jsem také zkoumal, ale ten není správný. Tam se jedná jen o 2D transformaci, která je udělaná tak, aby to jakoby odpovídalo danému pohledu z 3D. Je to vidět na té matici s těmi prvky C11 až C33. Ten třetí sloupec a třetí řádek je nulový ty právě odpovídají transformaci "Z" souřadnice.

Já mám opravdu 3D transformaci. Těžko ten rozdíl vysvětlit a ještě hůř ukázat jen na dvourozměrné obrazovce. K tomu si musím na dvourozměrné obrazovce udělat 3D objekt s kterým otáčím. Ukázku jsem dal sem http://www.qcd.cz/3d/rot.php ta to osvětlí. Já to mám fakt v prostoru, oni změřili jak to má vypadat pro jeden směr a to nakreslili ve 2D. A kdybych to jejich otočil tak to jsou vše čtyřúhelníky v jedné rovině (Z=0).

Souhlas, že triangulace pomocí čtyřúhelníků (už to slovní spojení je fakt vtipné) je obtížná. A je logické se ptát proč to dělat? No, ono totiž nejde ani tak o písmena, já do toho transformovaného prvku mohu dát libovolný HTML prvek. Zase nejlepší bude příklad: http://www.qcd.cz/3d/yt.php.

Pro Vás jako pro matematika by možná byla možná zajímavá třeba aplikace, která by byla schopná vygenerovat, třeba 3D graf, nad kterým byste mohl "létat" (translace), dívat se z různých úhlů (rotace) a přitom jej mít úplně standardně popsaný, tj. v jeho stěnách mít třeba linky, samozřejmě popisky, animace, atd... (prostě vše co html dovede)

No musím uznat, že to php dokáže s věcma hejbat velmi zručně a co se kódu týče i docela úsporně. A vypadá to, že ani nepotřebuje žádnou knihovnu. Jsem si ten váš html stáhl, abych si s tím mohl pohrát a hejbalo se to i v lokální verzi. Časem se na to podívám blíže.

Z aplikací bych si někdy chtěl naprogamovat průlet 3D grafem. Většina realistických grafů (s řádově stovkami uzlů) je příliš hustá, takže je lepší je zobrazit ve 3D. Ale dřív než v důchodu se k tomu asi nedostanu...

Php s tím nemá celkem nic společného. To jenom spočítalo ty transformační matice. Ale ty by šly spočítat i v čemkoliv jiném. Pak už je to jenom věc prohlížeče.

Průlet grafem. No to ve WegGL určitě půjde, akorát nevím jaký graf myslíte. Uzlový, jako tady: https://vasturiano.github.io/3d-force-graph/example/large-graph/ ? Nebo takový "klasický" jako zde: http://stemkoski.github.io/Three.js/Graphulus-Function.html ? S oběma lze otáčet, (myší levé) posouvat (myší pravé, kolečko). Ten pohyb by se určitě dal automatizovat nějakým scriptem. Otázka je jak by se zadávala ta dráha kamery. Ručně? Nebo by se nějak počítala automaticky dle grafu? Má se zabránit kolizi kamery s grafem?

Vlastně teď i já programuji "průlet" 3D grafem, ale asi trochu jiným než máte na mysli .

Aha, já myslel, že to hejbání dělá PHP, protože jsem koukal v kódu je jen ta transformační matice a něco musí ten pohyb rozepsat do jednotlivých "políček" filmu. Vidíte, že do webové grafiky moc nevidím...