WebGL - import modelů

[dzejkob]

Zdravím,

Dostal jsem se k požadavku vytvoření 3d vieweru v prohlížeči založeném na WebGL. Po prozkoumání pár knihoven jsem se rozhodnul pro three.js - je srozumitelné a přehledné. Problémy ovšem nastávají s importem modelů. Ať už to je z čehokoliv kamkoliv:

- import OJB+MTL je prakticky nepoužitelné pro složitější modely (občas chybí faces, model není optimalizovaný, pomalu se načítá atd.)

- import přes collada (.dae) už je o dost použitelnější - jsou ale posunuté textury

Tím prakticky možnosti končí. Je celkem jedno, zda se to exportuje ze sketchupu, blenderu nebo něčeho jiného (možná se mýlím). Model se načíst dá - co se ale týče materiálů, povrchu, průhlednosti aj. tak to je celkem žalostné.

Zeptal bych se - nemáte s tím někdo zkušenosti? Ať už se týká jiného enginu či jiného modelovacího softwaru. Zajímají mě jakékoliv best practices.

Zatím to vypadá tak, že je nezbytné pro to vytvořit nějaké interní nástroje, které budou umožňovat doladit textury, povrchy, materiály atd.

(je skutečně důraz na kvalitu - nestačí holý barevný model)

[mar]

glTF?
https://github.com/KhronosGroup/glTF
three.js by to měl podporovat, podle toho co tam píšou

Jestli to chápu správně, má přímo připravené buffery v binární podobě a k tomu JSON metadata, případně zapečené v jednom binárním souboru.

Já jsem něco podobného nedávno řešil v čistém WebGL a udělal jsem si jednoduchý binární formát (vtx + idx buffery), zkomprimovaný gzipem a přes nějakou js knihovnu jsem to rozbalil.
Co zpomaluje nejvíc je pak načítání textur.

[Ladis]

Gzipem to můžeš komprimovat už webovým serverem, takže odpadne dekomprimace přes JS (udělá za tebe browser v rámci stáhnutí).

[]semo[]

Jak se to bude používat? A na co?
Před časem jsem dělal import pro svůj (desktop) prohlížeč a následně i pro projekt trider.cz. Jde o webový portál pro 3D tisk. Tam import funguje tak, že se nahraje model na server, kde je zkontrolován a zkonvertován mojim C++ toolem do jinýho formátu (právě OBJ), se kterým se dál pracuje.

Výběr nějakého šikovného 3D formátu je smutná záležitost. Mě se nakonec nejvíc osvědčilo FBX přes knihovnu od Autodesku. Každý ji používá, proto je velká šance, že se přenos souboru mezi SW podaří. Podporuje i colladu. Nevím jak to je s colladou teď, ale před pár lety to bylo prakticky tak, že co SW, to uplně jiná collada. To bude i problém tvých posunutých textur. Jiný SW to třeba načte zase dobře, další hodí výjimku, ...atd. S colladou by sis musel hoodně vyhrát a zkoušet nad množinou pokusných souborů vyexportovaných z různých verzí různých programů. Ideálně pak ještě dlouho testovat a zpracovávat každý feedback.


Jak jsem psal na začátku, popiš prosím, co to bude za projekt. Třeba se dá vymyslet nějaký neotřelý přístup.
_________________
Kdo jede na tygru, nesmí sesednout.
---
http://www.inventurakrajiny.cz/sipka/
Aquadelic GT, Mafia II, simulátory

[Kostelnice]

Ahoj dzejkob,

s three.js mám zkušeností poměrně dost. Rozhodně to ale není nic úplně jednoduchého a pro konkrétní věci to chce znát celou řadu triků, jak toho dosáhnou (pokud to vůbec jde). Nicméně pokud tam nepotřebuješ nějaké pokročilé animace, tak ostatní by se mělo dát vymyslet. Pokud chceš napiš mi soukromou zprávu a sejdeme se u nás na Team Speaku.
_________________
Jedinou hrou, kde si určíš pravidla výhradně sám, je tvůj život, tak tu šanci nepropásni .

[dzejkob]

Díky všem za info,

glTF vypadá zajímavě, ale patrně to neumí sketchup (nebo blbě hledám), ale snad to bude umět blender. Three js pro to má loader sice v nějaké dev verzi, ale za pokus to stojí.

Požadavek je v podstatě jednoduchý a možná naivní. Potřebuju, aby to z nějakého softu dokázalo zobrazit model (resp. celou scénu) as it is s aspekty podle priorit:

- struktura modelu (meshe, skupiny)
- textury (správě napasované)
- materiály (konfigurace materálů, odlesky, bumpmap a další vychytávky)
- světla a osvětlení
- stíny

Současné modely jsou tak nějak různé - některé poměrně kvalitní, jiné bídné. Je jasné, že pro daný účel to bude potřebovat nějaký post processing - bylo by ale vhodné, aby to šlo na jednom místě.

Ta collada splňuje tak jedině tu strukturu modelu. Obecně toho ale umí dost.

Popis projektu je v tuhle chvíli dost vágní - prostě prezentace specifického sortimentu s důrazem na design. Což může být od prostého rotujícího produktu na webu po nějaký konfigurátor.

Zatím mě napadá spíš postup export holého modelu do collady + dodělat editor materiálů a všeho ostatního, co bude ukládat metadata vedle modelu.

Co se týče transferu formátů, tak tam není problém, nic takového potřeba nebude - dá se na začátku nastavit nějaká funkční kombinace editor + formát + webgl engine - jenom aby to všechno umělo.

[]semo[]

glTF jsem neznal, rozhodně ho prozkoumej. I kdyby to třeba ani blender neuměl, určitě půjde napsat nějaký skript, který to z blendru vyexportuje třeba jako tmp do jinýho formátu a následně spustí nějaký cmdline tool pro konverzi. Nebo si můžeš rovnou napsat exporter.

Collada by mohla taky posloužit. Věřím, že i bez metadat, protože třeba co se týče materiálů, umí toho hodně - formát tě omezovat rozhodně nebude. Omezení bude pravděpodobně hlavně na straně exporteru z toho 3D SW a na straně importeru v three.js. Stoprocentně narazíš na to, že materiály nebudou kompatibilní. Ale místo programování editoru bys mohl věnovat čas napsání vlastního exporteru collady, nebo nějakých podpůrných skriptů, které ji trochu umravní.


Jo a jedna technická poznámka: jak nan colladu, tak na glTF lze stáhnout schéma (XSD, JSON). Exportery a skripty se pak píšou mnohem snáz, protože výsledek vždycky můžeš ověřit pár kliknutíma.
_________________
Kdo jede na tygru, nesmí sesednout.
---
http://www.inventurakrajiny.cz/sipka/
Aquadelic GT, Mafia II, simulátory

[dzejkob]

No co se toho editoru týče, tak výsledek musí být takový, že připravit model zvládne běžný uživatel bez jakéhokoliv komplexnějšího knowhow (např. ovládání blenderu) - a neexistuje nějaké "základní ovládání blenderu se naučíš za pár hodin" - musí to být skutečně jednoduché.

Tedy možnost definovat u modelu orientaci, rozměry, join pointy, materiály a osvětlení scény. Nic víc, nic méně.

Další výhoda může být, že pokud se textury budou definovat na jednom místě, tak se může ušetřit traffic, než když se budou načítat opakovaně mapované na každý model znovu.

Nicméně sleduju, že blender si s three js údajně docela rozumí, tak si s tím budu ještě hrát.

[dzejkob]

Kostelnice: díky. Zatím by mě stačilo nějak stručně popsat jakým způsobem do three js načítáš modely ty.

Možná bych měl jeden konkrétnější dotaz. Zkoušel jsem u objektů cashShadow a recieve shadow. Cast shadow funguje celkem ok. Nicméně stíny, které objekt vrhá sám na sebe vypadají divně. Představoval bych si to nějak takhle:
https://www.youtube.com/watch?v=XxKzE8hd3LM
(jasně, ten model je mnohem složitější)

Kdežto moje stíny jsou divné (pračka je testovací model):
http://imgur.com/a/Guhm6
http://imgur.com/a/Pj2K7
http://imgur.com/a/nSsix

zatím jsem všechno vyzkoumal, jenom ty stíny nevím. Světla jsou jedno spot light z vrchu a druhé directional light z pohledu kamery. Úhel a dopad a typ světel na to nemá vliv. Shadow mapSize na to nějaký vliv má, ale vypadá to furt stejně divně. Shadow bias, near, far atd. na to vliv nemá.

Prostě nevím, co mám blbě - nebo zda je ten model špatný - chovají se tak ale všechny modely - některé hůře, některé lépe. Nevím, zda to prostě nejde, nebo to chce složitější model. Rovné plochy nejsou zastíněny rovnoměrně.

[]semo[]

shadow acne
_________________
Kdo jede na tygru, nesmí sesednout.
---
http://www.inventurakrajiny.cz/sipka/
Aquadelic GT, Mafia II, simulátory

[Kostelnice]

Ahoj, ohledně tech stínů to není moc růžový. Asi nejvíc je o tom tady v tý diskuzi: https://github.com/mrdoob/three.js/issues/7359

Každopádně se zdá, že tam jsou stále nějaké problémy.

Co se týče importu, tak máme určitou verzi Blendru, která spolupracuje s určitou verzí exporteru, kterej nám přijde po mnoha zkoušeních asi nejlepší, ale i tak to má řadu problémů. Myslím, že scénu obecně to exportovat neumí. Jediné na co to používáme je exportování modelů (ne světel atd.). Co se týká textur, tak tam sice jdou nějak namapovat, ale my to řešíme tak, že UV mapujeme v Blendru, ale textury (bitmapy) pak mapujeme zvlášť přímo v tree atd . Stíny, odlesky, opacita atd. to je dlouhá kapitola sama pro sebe .
_________________
Jedinou hrou, kde si určíš pravidla výhradně sám, je tvůj život, tak tu šanci nepropásni .

[satik]

Ty stíny se řešej přes bias, musíš si s tím víc pohrát a vyzkoušet víc hodnot, můžou bejt i záporný.

[dzejkob]

Jo, už jsem na to přišel - měl jsem to nastavené blbě.

Bohužel to ale má zase efekt, jak píšou, "Peter panning" - tj. stíny částečně mizí, nebo zmizí úplně.

Další řešení je pousouvat normály:
https://www.gamedev.net/blog/515/entry-2260845-me-and-my-shadow/
https://www.gamedev.net/topic/665740-cant-fix-shadow-acne-with-bias/
http://digitalrune.github.io/DigitalRune-Documentation/html/3f4d959e-9c98-4a97-8d85-7a73c26145d7.htm

Zda to nejak jde v three js netuším

[Vilem Otte]

Nejčastější řešení (pokud máš closed-model - tj. neobsahuje díry v geometrii) je renderovat pouze back-faces do shadow mapy (tím pádem nebudeš mít acne na front části modelu, ale jen na okraji (což může být viditelné) a odvrácených stran od světla (což lze snadno zamaskovat)).

Vedle toho je třeba správně spočítat přesnost - ideální je dát near plane k prvnímu shadow casteru ve scéně a far plane k poslednímu.

Dále, pokud můžeš použij R16F formát pro shadow mapu (místo R8/R16/D24/...), nebo případně R32F/RGBA8 (kdy 32-bit float zabalíš a rozbalíš pak při čtení).

Tímto problémem méně trpí jiné metody - např. VSM (a jeho varianty), jenže zase mají jiné problémy (potřebují RG16F surface, light bleeding) - které nejsou založeny na porovnání hloubky.
_________________
Should array indices start at 0 or 1? My compromise of 0.5 was rejected without, I thought, proper consideration.