Webová rozšířená realita

Prezentace

Popis: AR.js je open-source knihovna postavená na Three.js a umožňuje markerless AR pomocí WebXR API
Funkce:
- podpora markerless AR (detekce rovinných povrchů pomocí WebXR)
- renderování 3D objektů ve scéně pomocí Three.js
- dobře zdokumentované a snadné použití
- podporuje marker-based AR (fiduciální markery, jako jsou vzory typu Hiro nebo custom AR markery)
- podpora image tracking (rozpoznání a sledování 2D obrazů).
Výhody:
- rychlost
- funguje na většině moderních zařízení podporujících WebXR
Použití: hodí se pro jednoduché AR projekty přímo v prohlížeči

Popis: A-Frame je framework založený na HTML a Three.js pro tvorbu VR/AR aplikací, který podporuje WebXR
Funkce:
- jednoduchý zápis AR scény pomocí HTML značek (<a-scene>)
- podpora markerless AR pomocí WebXR
Výhody:
- snadná integrace pro vývojáře s minimálními znalostmi JavaScriptu
- rozšiřitelné pomocí komponent
Použití: skvělé pro rychlé prototypování a vizuálně orientované AR aplikace

Popis: Babylon.js je výkonná 3D grafická knihovna, která podporuje AR přes WebXR
Funkce:
- robustní podpora WebXR pro markerless AR (detekce rovinných povrchů)
- pokročilé renderovací možnosti pro složité scény
Výhody:
- vhodné pro složitější projekty s většími nároky na grafiku
Použití: pro pokročilé aplikace AR a VR s pokročilým interaktivním obsahem

Popis: komerční platforma pro AR aplikace, která nabízí markerless AR přímo v prohlížeči bez nutnosti použití WebXR
Funkce:
- podpora různých typů AR na široké škále zařízení (včetně iOS bez WebXR)
- vestavěné nástroje pro detekci povrchů, odhad hloubky a přizpůsobení světelným podmínkám
Výhody:
- nejlepší výkon na trhu díky optimalizacím
- široká podpora zařízení
Použití: pro profesionální a komerční AR aplikace

Popis: nenáročná knihovna zaměřená na markerless AR
Funkce:
- podpora detekce 2D obrazů a povrchů
- kompatibilní s Three.js i A-Frame
Výhody:
- nenáročnost a rychlost
- snadno použitelná pro jednoduché AR aplikace
Použití: pro vývoj aplikací s nízkými nároky na výkon

WebXR (Web Extended Reality) je API pro webové prohlížeče, které umožňuje vytvářet aplikace využívající rozšířenou (AR) a virtuální realitu (VR) přímo na webu
Hlavní vlastnosti:
- rozšířená podpora zařízení:
  - podporuje VR headsety (např. Meta Quest, HTC Vive, Valve Index)
  - umožňuje využít AR funkce na mobilních zařízeních, která podporují detekci povrchů (např. iOS a Android)
  - funguje také na chytrých brýlích (např. HoloLens) nebo AR zařízeních
- umístění 3D objektů ve skutečném prostoru pomocí GPS nebo detekce okolí
- cross-platform řešení:
  - WebXR funguje na různých zařízeních a operačních systémech, pokud má uživatel moderní webový prohlížeč (Chrome, Edge, Firefox apod.)
- jednotný přístup:
  - nabízí jednotné API pro interakci s VR i AR technologiemi, což vývojářům zjednodušuje práci

<model-viewer> je webová komponenta vyvinutá Googlem, která umožňuje snadné zobrazování 3D modelů a integraci rozšířené reality (AR) do webových stránek
je navržena tak, aby byla jednoduchá na použití a zároveň poskytovala pokročilé možnosti renderování a interakce
tato technologie využívá WebGL pro vykreslování 3D grafiky a WebXR (pokud je dostupné) pro funkce AR, což umožňuje uživatelům snadno zobrazovat a manipulovat s 3D objekty ve webovém prohlížeči
Hlavní vlastnosti:
- Používá se jako HTML značka (podobně jako <img>), což umožňuje vložit 3D model do webové stránky bez potřeby pokročilého programování
- ukázka: <model-viewer src="model.glb" alt="3D model" auto-rotate camera-controls ar></model-viewer>
- podpora formátu GLTF/GLB
- interaktivní ovládání - rotace, zoom, posun
- zobrazení modelu v mobilu i v AR

ze stránky model-vieweru se zkopíruje Quick Start
instalace komponentu se vloží ke skriptu
zobrazení modelu do body
výměna cesty k modelu src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
odstranění enviroment image

připravený model ve formátu .glb se importuje do složky Assets v Glitch
po uploadu modelu se zkopíruje jeho URL a ve skriptu se nahradí původní model astronauta

vytvoření nového skripu (např. kostel.html) a překopírování současného html kódu do něj
z původního skriptu odmazat součásti body a vložit dvě tlačítka
dále se vytvoří nový skript mapa.html se základní strukturou pro druhou úlohu
tlačítka se upraví pomocí css

instalace A-Frame Image Tracking z odkazu https://hiukim.github.io/mind-ar-js-doc/installation
vložení startovacího skriptu https://hiukim.github.io/mind-ar-js-doc/quick-start/overview
nutno opravit ukončení tagu </a-gltf-model>
odstranění části připojující css skript (není potřeba)
nyní lze otestovat zkušební vizitku z odkazu výše

z rastru mapy, která slouží jako podklad pro uchycení AR se vytvoří Image Target s využitím nástroje https://hiukim.github.io/mind-ar-js-doc/tools/compile
pro podkladovou mapu i vizualizované vrsty je nutné zachovat stejný rozsah (velikost) a poměr stran - nunto připravit v GIS dopředu
pomocí nástroje Image Targets Compiler se vytvořila příprava pro uchycení AR v několika měřítkách včetně zobrazení ukotvujích bodů

následně se stáhne zkompilovaný soubor targets.mind, který se využije v dalším kroku
značka se nahraje do složky Assets do Glitche

nastavení cesty pro nový Image Target -> při vyzkoušení se přes mapu zobrazí defaultní model v AR

odstranění nepotřebného kódu:
- výměna obrázku img (mapové vrsty) v <a-assets>
- do <a-assets> vložit pouze řádek připojující mapu "mapa-rozvoj-1830-1929-v4.png" - ten je nahraný ve složce Assets
- <a-camera> zůstane beze změny
- do <a-entity> se vloží informace o zobrazovatelné vrstvě, opacity=1

Užitečné odkazy