Projekt augmented reality, trackování a identifikace obličeje ve webovém prohlížeči

Verze z 30. 5. 2016, 21:00, kterou vytvořil Jakub.Ferenc (diskuse | příspěvky) (Přidání sekce Seznam zdrojů)

Členové projektu

Jakub Ferenc, Studia nových médií, e-mail: jakubferenc1911@gmail.com

Motivace vzniku projektu a jeho význam

Snímání pohybu hlavy, identifikace obličeje v real-time video datech a na nich založené interakce jsou dnes již běžně viditelné v nativních aplikacích nejen mobilních platforem jako jsou Android, Windows Phone či Apple iOS. Taková řešení mají smysl, neboť nativní aplikace poskytují programátorovi jednak stabilní, odzkoušené aplikační rozhraní, které může využít pro svůj projekt, jednak také dostatečný výkon zajišťující plynulý chod.

Přesně tyto vlastnosti nativních řešení chybí tvůrci, který si pro svůj projekt vybral webovou platformu: moderní aplikačních rozhraní, tak jak je definuje webové konsorcium W3C, jsou jen zřídkakdy plně implementována dodavateli webových prohlížečů; někdy naopak rychlé přijetí nových funkcionalit má za následek, že takový prohlížeč sice funkci podporuje, ale jelikož je API pod vedením W3C stále vyvíjeno, hrozí, že se API změní nebo zcela zavrhne ve prospěch jiného řešení. Zmiňme také, že webová platforma se zatím také nemůže nativním řešením rovnat v plynulosti a rychlosti. To jsou tedy jen některá omezení, se kterými se vývojář pro webovou platformu setkává, pokud chce navrhovat interakce s netradičními vstupními zařízeními jako je web kamera a pohyb hlavy.

Ale jelikož experimentování v nestabilních a neprozkoumaných vodách je jádrem hackerství, rozhodl jsem se pro svůj projekt vytěžit co nejvíce z moderních aplikačních rozhraní a funkcionalit současné webové platformy. Konkrétně to znamenalo vytvořit webovou aplikaci, která by v datovém streamu z webkamery (nebo obecně kamery zařízení) našla obličej, tento obličej pak na základě databáze fotografií s určitou pravděpodobností identifikovala, a nakonec u hlavy správně identifikovaného obličeje zobrazila 3D objekt, který by real-time následoval pozici hlavy.

K vedlejší, přesto přítomné motivaci ke tvorbě svého projektu mohu dodat stav aktuálního vývoje virtuální a rozšířené reality jako nadcházejícího dominantního paradigmatu počítačových interakcí. Přestože se s VR (virtual reality) a AG (augmented reality) dnes setkáváme především v průmyslu počítačových her, designové patterny i teoretický výzkum na nich založený se může lehce aplikovat pro tvorbu nových uživatelských zážitků (user experiences) i v jiných, komerčních doménách jako je např. sektor služeb.

Tvůrci webů by tyto nová paradigmata interakcí a digitálního designu měli taktéž přijmout a využívat. A to nejen v experimentálních prototypech. Webová platforma tu s námi ještě nějakou dobu bude. Spíše než její zánik lze v blízké době předpokládat její metamorfózu do platformy využívající dosavadní technologickou infrastrukturu (nebo její budoucí vylepšení), ale poskytující (právě díky integraci VR a AG) zcela nové zážitky. Navrhovat pro AG a VR znamená pro (web) designéry výzvu, neboť kromě přizpůsobení kreativní exprese je třeba seznámení s novým médiem, neboli kreativním materiálem. Materiálem, jímž je technologie, konkrétněji software.

Jakožto web designér s funkční znalostí javascriptu jsem tento projekt pojmul právě jako první seznámení s materiálem pro tvorbu VR/AG.

Použitý materiál a software

Hardware

  • Mobilní zařízení s kamerou


Software

  • Google Chrome (s podporou WebGL a datového streamu z webkamery)
  • THREE.js
  • Headtrackr.js
  • Mashape + Lamdal API (pro identifikaci obličeje)

Popis vývoje a konečné verze vlastního produktu

Koncept

Koncept projektu se vyvíjel postupně. Již od začátku jsem věděl, že se zaměřím na webovou platformu a VR nebo AG. První nápadem bylo si vyzkoušet a případně rozšířit tutoriál z webu sitepoint.com[1], který kombinuje moderní webové technologie, populární Google Cardboard pro aplikování virtuální reality za pomoci těchto 3D brýlí od Google a mobilního telefonu, který, vložený před čočkami brýlí, generuje obraz ve stereo efektu, a nakonec WebGL webové grafiky. Hlavním konceptem tutoriálu bylo vytvořit VR prostředí, kde zářicí bubliny generované ve WebGL budou měnit svůj vzhled v závislosti na počasí na zvolených místech světa.

Tento nápad jsem nakonec zavrhl, neboť jsem měl v plánu pracovat nejen s virtuální realitou, ale také s realitou rozšířenou. V ideálním případě jsem chtěl, aby projekt obsahoval oba prvky. Proto mě zaujal další tutoriál[2], který tyto prvky kombinoval, avšak celkový koncept spočíval “pouze” v tom, že datový stream z videokamery bude filtrován skrze vlastní filtr, jež by měly manipulovat s atributy jednotlivých pixelů obrazů tak, aby se dosáhl zajímavého filtru-efektu. I tento nápad jsem zavrhl.

Výsledek této průzkumné práce ale nebyl nulový. Studium podkladů pro tutoriály mi pomohlo získat lepší přehled nejen o tom, co je na webové platformě možné, ale také jsem pochopil, jak jednotlivé VR/AG prvky konkrétně implementovat v javascript kódu. S těmito nově nabytými znalostmi se mi mnohem lépe přemýšlelo o vlastním konceptu projektu.

Ten byl následující: z datového videostreamu webová aplikace rozpozná obličej, který následně identifikuje na základě porovnání daného obličeje s předpřipravenou databází fotografií. Pokud se osoba nachází v databázi, skládající se z fotek studentů či vyučujících oboru SNM, webová aplikace zobrazí jméno rozpoznané osoby, u jejíž hlavy zobrazí levitující 3D element, konkrétně krychli otexturovanou logem oboru SNM. Jednoduše řečeno, cílem webové aplikace je rozpoznat podle obličeje, zda daná osoba je součástí Studia nových médií.

Tento vlastní koncept od začátku počítal s tím, že bude používán s brýlemi Google Cardboard, jak ale ukáži dále, od takového řešení jsem ustoupil, jelikož příliš snižoval výkon a responzivitu (ve smyslu odezvy, nikoli adaptace) webu. Je potřeba říci, že stereo efektu lze dosáhnout několika řádky kódu, tudíž se jedná spíše o „sugar code“, nežli nepostradatelnou část konceptu.

Implementace

Finální produkt

Zhodnocení

Fotodokumentace

Videodokumentace

Seznam zdrojů

  1. PATRICK, Catanzariti. Bringing VR to the Web with Google Cardboard and Three.js. 2015. Dostupné také z: https://www.sitepoint.com/bringing-vr-to-web-google-cardboard-three-js
  2. PATRICK, Catanzariti. Filtering Reality with JavaScript and Google Cardboard. 2015. Dostupné také z: [https://www.sitepoint.com/filtering-reality-with-javascript-google-cardboard/]