Experiment s ShapesXR — RainbowReality

Petr Dušek
DESIGN KISK
Published in
13 min readJan 25, 2024

Rozšířená realita (VR a MR) již nějakou dobu proniká do různých oblastí — světa zábavy, designu, vzdělávání a spolupráce, … V tomto kontextu přišla na scénu aplikace ShapesXR, která se zaměřuje na 3D modelování a design v prostředí rozšířené reality. Název “ShapesXR” kombinuje “Shape” (tvar) s “XR” (Extended Reality, což je souhrnný termín pro rozšířenou realitu, zahrnující virtuální a smíšenou realitu). Tato aplikace představuje další zajímavý krok v používání rozšířené reality pro kreativní a kolaborativní účely.

Historie XR

V oblasti rozšířené reality (XR), která zahrnuje jak virtuální (VR), tak augmentovanou (AR) a smíšenou realitu (MR), bylo napsáno množství literatury mapující její bohatou a fascinující historii. Jeden z významných příspěvků v této oblasti je článek Bernarda Marra s názvem ‘The Fascinating History And Evolution Of Extended Reality (XR) — Covering AR, VR And MR’, který nabízí komplexní pohled na vývoj těchto technologií. Následuje můj modifikovaný překlad tohoto díla, který poskytuje hlubší porozumění dynamickému vývoji XR a jeho dopadu na naši společnost a technologii. [1]:

Rozšířená realita (VR a MR) není novým fenoménem. Její kořeny sahají až do 19. století, kdy v roce 1838 Sir Charles Wheatstone přispěl ke konceptu stereopse (binokulárního vidění), což vedlo k vývoji prvních stereoskopů (zařízení zobrazující trojrozměrné obrázky) a ovlivnilo dnešní VR systémy​​. V roce 1935 Stanley Weinbaum poprvé představil myšlenku VR ve svém díle “Pygmalion’s Spectacles”​​.

V 50. až 70. letech 20. století se objevily první příklady VR a AR technologie, včetně Sensoramy (filmová kabina kombinující 3D, “barevné” stereoskopické video se zvukem, vůněmi, vibračním křeslem) Mortona Heiliga z roku 1956 a navazujícího prvního VR headsetu Headsight s motion trackingem od společnosti Philco v roce 1961 (pro vojenské účely)​​. 1968 Ivan Sutherland vytvořil AR headsets názvem The Sword of Damocles (Damoclův meč) zobrazujícím počítačem generovanou grafiku. V 70. letech MIT přišlo s Aspen Movie Map — počítačově generovanou prohlídkou ulic Aspenu, která byla vytvořena pomocí fotografií pořízených projíždějícím autem.

První společnost, která prodávala brýle a rukavice pro VR, VPL Research Inc, byla založena v roce 1985 — a byl to jeden ze zakladatelů VPL, Jaron Lanier, který v roce 1987 vytvořil termín „virtuální realita“. A v roce 1998 byla prvně použita AR technologie v přenosu NFL hry​​​​ (to byla změna — myšlenka překrytí grafiky přes pohled z reálného světa se rychle rozšířila do dalších sportovních přenosů).

Po roce 2000 vývoj byl trochu nuda, nicméně je dobré uvést alespoň nástup Google Street View v roce 2007 — to také nějak souvisí s VR.

Počínaje rokem 2010, technologie XR prošly výrazným rozvojem. V tomto období byl představen Oculus Rift od osmnáctiletého Palmera Luckeyho, který se stal průlomovým v oblasti VR. V roce 2014 pak Facebook získal Luckeyho společnost Oculus VR za přibližně 2 miliardy dolarů.

V roce 2014 do arény VR vstoupily i další velké technologické společnosti. Sony a Samsung oznámili vývoj vlastních VR headsetů, zatímco Google přinesl na trh cenově dostupný kartonový VR prohlížeč pro smartphony. Google také představil své AR brýle Google Glass, které rozšířily reálný svět o digitální informace a umožnily přístup k některým aplikacím.

V roce 2016 představil Microsoft headset HoloLens, který posunul AR technologie na novou úroveň s větším důrazem na interaktivitu, což vedlo k popularizaci termínu “smíšená realita” (mixed reality). Od roku 2017 se začaly objevovat aplikace jako IKEA Place, které ukazují možnosti AR v praktickém využití. VR a AR technologie se postupně rozšířily do široké škály odvětví včetně výroby, zdravotnictví a vzdělávání.

A přišel ShapesXR!

V roce 2021 přinesl článek na Forbes významný vhled do aplikace ShapesXR, kterou vyvinula společnost Tvori Inc. a uvedla na trh v Quest Store. Tato aplikace umožňuje vývojářům i nevývojářům společně pracovat ve sdíleném VR prostoru. Uživatelé mohou využívat šablony ShapesXR nebo začínat od nuly, vytvářet a nahrávat vlastní 3D modely. Designéři mohou manipulovat s jednoduchými tvary, měnit barvy a materiály, zkoumat uživatelské toky a prototypy jako 3D storyboardy. Navržené designy pak lze importovat do Unity se zachovanými texturami a vlastnostmi pro další zdokonalení.

Zakladatelka a výkonná ředitelka ShapesXR Inga Petryaevskaya zdůraznila, že ShapesXR je mostem pro vývojáře, kteří nejsou designéři, a designéry, kteří nejsou vývojáři. [2] Aplikace řeší známý problém v komunitě XR vývojářů — nedostatek kolaborativních prostředí v herních enginech, které by umožňovaly týmům pracovat současně.

Co ShapesXR nabízí dnes?

Podle oficiálního webu ShapesXR, aplikace slibuje uživatelům intuitivní nástroje pro 3D tvorbu, možnosti spolupráce v reálném čase, a podporu pro import a export různých souborových formátů. Tvůrci aplikace tvrdí, že její funkce jsou navrženy tak, aby byly přístupné i pro ty, kdo nejsou odborníky v 3D modelování, a zároveň poskytují dostatečně sofistikované nástroje pro profesionální použití.

Pro prozkoumání skutečných možností doporučuji prozkoumat výukový tutoriál „Návody pro rychlý začátek s Jeremym Casperem“. Tutoriál obsahuje 11 kapitol (upravený překlad [3]):

  1. Základy: Jeremy představuje základy ShapesXR, vysvětluje funkce ovladačů pro navigaci, výběr a manipulaci s objekty. Ukazuje, jak do prostředí přidávat objekty a pohybovat se v něm.
  2. Vytváření 3D UI: Kapitola se soustředí na význam správného měřítka, používání nástroje Gizmo pro manipulaci, duplikaci objektů a přidávání ikon na tlačítka, stejně jako na význam uzamčení a seskupování prvků.
  3. Tvorba prostředí: Jeremy demonstruje vytváření prostředí v ShapesXR, včetně přidávání barevné oblohy, vytváření podlahy a zdí, používání duplikace a přesného škálování pro vytváření stylizovaných prvků.
  4. Dekorace prostředí: Tato kapitola se zaměřuje na produkční design v ShapesXR, včetně tvorbu stolu, změny pozice uživatele na sezení a pozicování UI prvků.
  5. Základy storyboardingu: Jeremy probírá grayboxing a jak se připravit na interakční prototypování v ShapesXR. Představuje tvorbu a správu více fází (podobně jako snímky aplikace PowerPoint). Ukazuje, jak používat vrstvu pozadí, aby se objekty zobrazovaly na všech fázích, a představuje úhly pohledu, které umožňují ovládat perspektivu uživatele.
  6. Prototypování interakcí: V této lekci vytváříte prototyp s různými interakcemi, například v souvislosti s používáním tlačítek (ale neomezuje se jen na ně).
  7. Sdílení a export scény: Jeremy zdůrazňuje možnosti spolupráce a diskutuje o nahrávání materiálů přes webový portál, exportu 3D souborů a využití pluginu ShapesXR pro Unity.
  8. Interaktivita: Kapitola představuje systém interaktivity ShapesXR, který umožňuje přidávat spouštěče a přechody do XR projektů bez potřeby programování.
  9. Smíšená realita: Video se věnuje systému smíšené reality ShapesXR, včetně režimu průchodu, uzamčení projektu do prostředí a vytváření aplikací pro smíšenou realitu.
  10. Portály: Tato lekce naučí, jak pracovat ve smíšené realitě, vrhat stíny do skutečného světa a vytvářet portály do virtuálních prostředí.
  11. Pohled a “štípnutí” (stisknutí prstů): Jeremy demonstruje, jak využít interakce pohledem a “štípnutím” s Quest Pro, a nabízí různé tipy pro uživatele Quest 2.

Každá kapitola nabízí cenné informace a praktické rady pro efektivní využití možností, které ShapesXR přináší — umožňuje uživatelům hlouběji proniknout do světa 3D designu a interakce ve virtuální realitě. Tyto tutoriály nejenže poskytují dobrý návod k ovládání a vytváření v ShapesXR, ale také otevírají dveře k novým možnostem v oblasti XR designu a kolaborace, což je zásadní pro každého, kdo chce plně využít potenciál rozšířené reality ve svých projektech.

Vyzkoušel jsem si designování v ShapesXR na vzorovém projektu

Návrh hypotetického projektu

Rozhodl jsem se ponořit do světa ShapesXR a prakticky vyzkoušet tvorbu návrhu designu nějakého alespoň hypotetického projektu. Konkrétně projektu “RainbowReality” — který by měl sloužit k osvětě a podpoře nejen LGBTQIA+ komunity, možná prostřednictvím simulace zkušeností nebo poskytováním informačních zdrojů. V rámci tohoto projektu se zatím omezím na virtuální expozici realizované v jedné či více místnosti/ech. Virtuální expozice bude informovat o různých LGBTQIA+ vlajkách (je jich hodně, ale zatím se omezím na základní).

Pro naplánování projektu jsem si vytvořil textový storyboard (podobný tradičnímu storyboardu, který je známý z filmového a televizního průmyslu, ale místo ilustrací nebo fotografií použiji stručné textové popisy scén, akcí atp.):

  • 1. scéna: Uvítací prostor — Popis: Uživatel se objeví v prostorné, světlé místnosti s interaktivním uvítacím panelem. Na stěnách jsou projekce duhových barev a vítací zpráva, která oslavuje různorodost a inkluzi. Interakce: Uživatelé mohou interagovat s panelem, který jim poskytne základní informace o expozici a jejím účelu, případně ovládání.
  • 2. scéna: Duhová cesta — Popis: Návštěvníci jdou po cestě obklopené různými LGBTQIA+ vlajkami (každá vlastní sekci). Interakce: Při přiblížení k vlajce se aktivuje popisek s informacemi o vlajce a příslušné komunitě, včetně historie a významu.
  • 3. scéna: Příběhy a historie (podle možností ShapesXR) — Popis: Speciální sekce s multimediálními prezentacemi příběhů a historických momentů spojených s každou vlajkou. Interakce: Návštěvníci mohou kliknout na různé obrazovky nebo projekce, aby zhlédli příběhy nebo historické dokumenty.
  • 4. scéna: Interaktivní zóna (asi příliš velký rozsah) — Popis: Prostor s interaktivními prvky, jako jsou kvízy nebo hry, které pomáhají návštěvníkům lépe porozumět a empaticky se vcítit do zkušeností LGBTQIA+ lidí. Interakce: Návštěvníci se mohou zapojit do těchto aktivit, učit se a zároveň se bavit.
  • 5. scéna: Diskusní a reflexní zóna (podle možností ShapesXR) — Popis: Klidný prostor s pohodlným sezením, kde se návštěvníci mohou setkat, diskutovat a sdílet své myšlenky a pocity. Interakce: Možnost pro návštěvníky zanechat zprávu na virtuální nástěnce nebo se zapojit do diskusí s ostatními.
  • 6. Scéna: Závěr — Popis: Při odchodu se objeví závěrečná zpráva s poděkováním návštěvníkům za účast a s odkazy na další zdroje a informace. (Inter)akce: Uživatel je povzbuzen k dalšímu prozkoumávání a angažmá v LGBTQIA+ komunitě.

Též jsem se snažil zhotovit základní vizualizace — ať obecnou nebo jednotlivých scén:

Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …
Jak by RainbowReality mohla vypadat (vytvořeno AI)? Moodboard — zachycení vizuální inspirace, možný referenční bod, …

První zkušeností jsem se nedostal k původní vizi projektu

Můj první pokus o design v ShapesXR byl nesmírně obohacující a poučný zážitek, přestože jsem se zcela nedostal k původní vizi mého projektu “RainbowReality”. Při práci s tímto nástrojem jsem narazil na několik výzev, které jsou běžné pro každého, kdo se učí pracovat s novým softwarem, zvláště v oblasti virtuální reality.

  • Křivka učení: Každý nástroj má svou specifickou křivku učení — ShapesXR není výjimkou. Počáteční seznámení s funkcemi a možnostmi softwaru vyžaduje čas a trpělivost.
  • Technická omezení: Musel jsem pochopit a přizpůsobit se technickým omezením ShapesXR. Některé z mých ambiciózních nápadů byly nad rámec toho, co software mohl snadno zpracovat.
  • Čas a zdroje: Realizace komplexního projektu vyžaduje více času a zdrojů, než jsem původně očekával. Bylo důležité zaměřit se nejdříve na jednu scénu.
  • Detailnost návrhu: Můj původní návrh byl velmi detailní, což mě při prvním pokusu ztěžovalo jeho plné provedení.
  • Vizuální a interaktivní design: Práce s virtuální a rozšířenou realitou vyžaduje specifické dovednosti v oblasti vizuálního a interaktivního designu, které se rozvíjejí postupně.

I přes tyto výzvy byl tento experiment s ShapesXR nesmírně hodnotný. Ukázal mi, co je možné v oblasti virtuálního designu, a poskytl mi cenné lekce pro budoucí projekty — nebo rozvinutí RainbowReality.

Další cíle

Jako někdo, kdo má zkušenosti s návrhem 3D modelů budov pro zrakově postižené, jsem byl zvědavý, jak lze tyto dovednosti uplatnit při tvorbě scén v měřítku 1:1 v ShapesXR. Mé dosavadní práce v této oblasti mi poskytla hluboké porozumění pro detail a funkčnost, což je klíčové pro vytváření přístupných a uživatelsky přívětivých virtuálních prostorů. Chtěl jsem prozkoumat, jak mohu tyto zkušenosti transformovat do nového, dynamického světa virtuální reality, s důrazem na přesnost a přístupnost designu.

Jako milovník expozic, které navozují pocit pohody a estetického potěšení, jsem byl zvědavý, zda lze tento pocit úspěšně přenést do virtuálního světa. Mé cíle zahrnovaly nejen technickou přesnost, ale také vytvoření prostředí, které by bylo vizuálně lákavé a emočně přitažlivé. Chtěl jsem zjistit, zda se virtuální podoba může přiblížit k reálnému zážitku z návštěvy fyzické expozice a zda se v ní budu cítit stejně pohodlně a příjemně.

Jedním z hlavních zjištění je, že ShapesXR skutečně umožňuje detailní přiblížení se k popisu ve storyboardu, což je velmi povzbudivé pro budoucí projekty. Nicméně, proces dosažení této úrovně detailu a realismu vyžaduje významný časový závazek a rozšíření praktických zkušeností s ShapesXR. Jak jsem se naučil, křivka učení může být strmá a přístup k technickým aspektům návrhu se může lišit v závislosti na komplexitě projektu.

Z mého experimentu také vyplývá, že přenášení realistických měřítek a rozměrů do VR může být náročné a v některých případech dokonce nepohodlné pro uživatele. Toto zjištění mě přivedlo k závěru, že tvorba scén, které jsou sice méně realistické, ale ve virtuální realitě pohodlnější, může být efektivnější pro určité typy projektů. To mě však neodrazuje od dalšího zkoumání možností tvorby budov v měřítku 1:1 v budoucích projektech, kde by mohly být přínosné, zejména pokud jde o přesnost a detailnost návrhu.

Některá specifika mé tvorby

Ve svém projektu jsem využil řadu různých nástrojů a technik k vytvoření komplexního virtuálního prostředí v ShapesXR. Pro návrh budovy jsem vycházel z modelu vytvořeného ve SketchUp, který jsem následně exportoval ve formátu .obj pro použití v ShapesXR. Tento proces umožnil přesné a detailní reprezentace architektonických prvků v mé virtuální scéně.

3D model budovy vytvořený ve SketchUp — importovaný do ShapesXR.

LGBTQIA+ vlajky, klíčový prvek mého projektu, byly původně získány jako .avif soubory. Tyto jsem poté v GIMP převedl na formát .png, aby byly kompatibilní s požadavky ShapesXR. Tento krok byl nezbytný pro zajištění vizuální kvality a správného zobrazení vlajek ve virtuálním prostředí.

Nebinární vlajka — ShapesXR zatím přijímá pouze PNG obrázky.

Pro zařízení scén jsem čerpal nábytek ze SketchUp 3D Warehouse, který jsem importoval také ve formátu .obj. Nicméně jsem narazil na určité problémy s deformací některých prvků, například křesla, což ukázalo na možné komplikace při převodu a integraci externích modelů do ShapesXR.

Původně krásná křesla pořízená ve SketchUp 3D Warehouse po importu do ShapesXR scény byla relativně ošklivě deformována

Zajímavou součástí projektu byl také pokus o import sochy “Nymfa a Eros” získané ze Sketchfab. Tento model byl importován v .zip s .glb. Zde jsem narazil na výzvy, jelikož se s objektem těžce manipulovalo a pokusy o import jiných soch často vedly k technickým problémům v ShapesXR, jako je nepříjemné rychlé blikání nebo přeskakování obrazu, vyžadující restart headsetu. Toto naznačuje možné problémy se zdroji nebo kompatibilitou některých komplexnějších modelů ve ShapesXR. Práci s importovanými 3D objekty by tvůrci ShapesXR jistě měli zdokonalit.

Socha Nymfa a Erós importována do scény

Konečně, pro zobrazení osob ve scéně jsem využil předdefinované postavy dostupné v ShapesXR, a také jednu postavu vytvořenou ve SketchUp, která sloužila jako měřítko pro budovu. Tento prvek byl klíčový pro zajištění správných proporcí a realistického pocitu z virtuálního prostoru.

Celkově tyto zkušenosti ukazují na složitost a výzvy spojené s tvorbou detailních a funkčních virtuálních prostředí, a na důležitost porozumění různým softwarovým nástrojům a formátům pro úspěšnou integraci různorodých prvků do jednoho soudržného virtuálního zážitku.

Interakce

V mé tvorbě jsem klíčový důraz kladl na interakci uživatelů s virtuálním prostředím, zejména co se týče významu barev na jednotlivých LGBTQIA+ vlajkách. Cílem bylo poskytnout návštěvníkům nejen vizuální zážitek, ale také edukativní obsah, který by jim umožnil hlubší pochopení symboliky a zastoupených komunit.

Jako příklad jsem použil nebinární vlajku. U této vlajky jsem vytvořil interaktivní prvky, které by uživatelům umožnily dozvědět se více o jejím významu. Když uživatel najede kurzorem (ve VR prostředí tedy například rukou nebo ukazovátkem) na tlačítko umístěné na vlajce, tlačítko se zvýrazní. Tento efekt “on hover enter/exit” je běžnou praxí ve webovém a interaktivním designu, ale v prostředí VR nabízí dodatečnou úroveň imerze a intuitivní navigace.

Po zmačknutí tlačítka dané barvy na vlajce se aktivuje další interakce — “on click”. Tato akce způsobí, že se zobrazí text popisující význam této konkrétní barvy na vlajce. Například uživatel může stisknout tlačítko odpovídající žluté barvě na nebinární vlajce, což vyvolá zobrazení informací o tom, co tato barva symbolizuje v kontextu nebinární identity.

Toto uspořádání interakcí bylo záměrně navrženo tak, aby bylo intuitivní a přívětivé pro uživatele, bez ohledu na jejich předchozí zkušenosti s VR technologií. Chtěl jsem, aby se návštěvníci cítili pohodlně při prozkoumávání expozice a zároveň získávali vzdělávací informace de forma zábavná a zapojená. Tento přístup k interakci zdůrazňuje význam přístupnosti a uživatelské přívětivosti v designu virtuálních prostředí.

“Jednoduchá” interakce — Nebinární vlajka — po stisknutí konkrétního barevného tlačítka se zobrazí popis významu barevného pruhu.
“Jednoduchá” interakce — Nebinární vlajka — stisknuto žluté tlačítko — zobrazen text ve žlutém pruhu vlajky: Lidé, jejichž pohlaví existuje mimo binární.
“Jednoduchá” interakce — Nebinární vlajka — stisknuto bílé tlačítko — zobrazen text v bílém pruhu vlajky: Lidé s mnoha nebo všemi pohlavími.
“Jednoduchá” interakce — Nebinární vlajka — stisknuto fialové tlačítko — zobrazen text ve fialovém pruhu vlajky: Lidé s pohlavím považovaným za kombinaci muže a ženy.
“Jednoduchá” interakce — Nebinární vlajka — stisknuto černé tlačítko — zobrazen text v černém pruhu vlajky: Lidé, kteří se identifikují bez pohlaví.

Závěr

Při svém dobrodružství s aplikací ShapesXR, která se svými 3D modelovacími a designovými možnostmi začíná získávat pozornost ve světě rozšířené reality, jsem se ponořil do vytváření hypotetického projektu “RainbowReality”. Cílem bylo nejen podpořit a osvětlit LGBTQIA+ komunitu, ale také prozkoumat a využít potenciál rozšířené reality pro design a vzdělávání.

Video — ukázka mého prvního experimentu v ShapesXR (MP4, 68,2 MB)

V průběhu práce s ShapesXR jsem narazil na řadu výzev typických pro práci s novým softwarem. Křivka učení byla strmá a technická omezení softwaru mi ukázala důležitost flexibility v designu. Vytváření komplexních scén vyžadovalo více času a zdrojů, než jsem původně očekával.

Můj experiment s ShapesXR byl bezpochyby hodnotný. Aplikace ukázala, že má obrovský potenciál pro budoucí vývoj v oblasti virtuálního designu. I když se v současné době může jevit jako nedokonalý hype, jeho potenciál pro kreativní a kolaborativní účely v rozšířené realitě je těžko zpochybnitelný. S dalším rozvojem a zdokonalením může ShapesXR skvěle posloužit jak designérům, tak nevývojářům, kteří hledají efektivní a intuitivní způsob, jak pracovat ve virtuální realitě.

Projekt RainbowReality byl prvním krokem na cestě k hlubšímu pochopení a využití možností rozšířené reality, a i přes některé překážky jsem nadšený z budoucích příležitostí, které ShapesXR a podobné nástroje nabízejí pro svět designu a interaktivity.

Na závěr bych rád vyjádřil svůj hluboký dík vyučujícím předmětu “Design uživatelských rozhraní pro VR” na KISK, Masarykově univerzitě, Markétě Kučerové a Vojtěchovi Brůžovi. Jejich odborné vedení, cenné rady a inspirativní přístup k výuce byly klíčové pro můj rozvoj v oblasti designu pro virtuální realitu. Jejich podpora a motivace mi pomohly lépe porozumět komplexitě a možnostem, které rozšířená realita nabízí, a umožnily mi úspěšně se pustit do tohoto experimentálního projektu. Jejich vědomosti a zkušenosti jsou nepostradatelné a velmi oceňuji jejich přínos k mému akademickému a profesnímu růstu.

Zdroje

--

--