Přehled Standardů a volných nástrojů pro WebXR

WebXR Device API

WebXR Device API je webový standard pro přístup k funkcím zařízení určených pro provoz virtuální (VR) a rozšířené (AR) reality přímo z prohlížeče. Pro projekty rozšířené reality WebXR poskytuje rozhraní pro použití kamer zařízení, zobrazení virtuálních objektů v reálném světě a interakci s prostorovými informacemi.

WebXR je navrženo tak, aby bylo široce kompatibilní s různými zařízeními s podporou WebXR v prohlížeči.

WebXR Device API dokumentace

A-Frame

A-Frame je open-source webový framework pro vytváření zážitků z virtuální reality. Je spravován vývojáři ze Supermedium a Google. A-Frame je systémový framework entitních komponent pro Three.js, prostřednictvím kterého lze vytvářet 3D a WebXR scény s využitím html struktury.

A-Frame.io

V A-Frame se objekty vkládají a spravují prostřednictvím a-frame specifických html tagů s parametry. A-Frame má nativně i ispekční UI režim přístupný pod klávesovou zkratkou ctrl + alt + i.

Events v A-Frame lze řešit prostřednictvím knihovny Event Set v Superframe.
Pro refreshing lze použít funkce

AFRAME.registerComponent('refresh-obj', {
	init: function(){
		this.el.addEventListener('click', function(){
			var myGBcursor = document.querySelector('#myGBcursor');
			myGBcursor.components.raycaster.refreshObjects();
		});
	}
});

XR Rig ovladače lze přidat prostřednictvím knihovny A-Frame Super Hands component
Aframe extras lze integrovat prostřednictvím A-Frame extras.
Fyzika pro A-Frame: Aframe physics system
A-Frame Handy controls
A-Frame Blink controls

Stereoskopická fotka v A-frame

Stereoskopický pohled, známý také jako stereoskopie, je metoda nebo technika pro vytváření nebo vnímání obrazu, který má iluzi hloubky, což vede k divákovi k vnímání třírozměrného (3D) zobrazení. Tento efekt se dosahuje prezentací dvou mírně odlišných obrazů samostatně každému oku. Tyto dva obrazy se obvykle pořizují z mírně odlišných úhlů pohledu, což odpovídá rozestupu mezi lidskými očima, čímž se napodobuje způsob, jakým naše oči vnímají scény v reálném světě.

A-frame stereo component

&lt;a-assets&gt;
&lt;img id="left" src="imgs/left.jpg"&gt;&lt;/img&gt;
&lt;img id="right" src="imgs/right.jpg"&gt;&lt;/img&gt;
&lt;/a-assets&gt;

Standardní fotka

&lt;a-scene antialias="true"&gt;
	&lt;-- eye: right Default camera for Web View --&gt;
	&lt;a-camera stereocam="eye: right"&gt;&lt;/a-camera&gt;

	&lt;a-image src="#left" height="0.75" position="0 1.5 -1" stereo="eye: left"&gt;&lt;/a-image&gt;
	&lt;a-image src="#right" height="0.75" position="0 1.5 -1" stereo="eye: right"&gt;&lt;/a-image&gt;
&lt;/a-scene&gt;

360° fotka

&lt;a-scene antialias="true"&gt;
	&lt;-- eye: right Default camera for Web View --&gt;
	&lt;a-camera stereocam="eye: right"&gt;&lt;/a-camera&gt;

	&lt;a-sky src="#left" rotation="0 -90 0" stereo="eye: left"&gt;&lt;/a-sky&gt;
	&lt;a-sky src="#right" rotation="0 -90 0" stereo="eye: right"&gt;&lt;/a-sky&gt;
&lt;/a-scene&gt;

Zvuk a pozicování zvuku v Aframe

A-Frame podporuje prostorový zvuk. A-Frame dokumentace pro zvuk.

&lt;a-assets&gt;
&lt;audio id="parasail" src="sounds/parasail.mp3"&gt;&lt;/audio&gt;
&lt;/a-assets&gt;

Element

&lt;a-cylinder color="#0088FF" height="5" position="-2 2.5 0"
					<mark>sound="src: #parasail";on: click; volume: 1; refDistance: 4; rolloffFactor: 4</mark>&gt;
	&lt;a-entity <mark>sound="src: #parasail; autoplay: false"</mark> position="1.339 1.525 0"&gt;&lt;/a-entity&gt;
&lt;/a-cylinder&gt;

Vlastní atribut

AFRAME.registerComponent('play', {
	init: function(){
		var myEl = document.querySelector('#yellow');
		this.el.addEventListener('click', function(){
			myEl.components.sound.playSound();
		});
	}
});
AFRAME.registerComponent('stop', {
	init: function(){
		var myEl = document.querySelector('#yellow');
		this.el.addEventListener('click', function(){
			myEl.components.sound.stopSound();
		});
	}
});

Nyní lze používat start a stop jako atribut v A-Frame elementech

&lt;a-box id="yellow" color="#FFAA00" position="1.5 0.5 0.5" <mark>sound="src: #parasail"</mark>&gt;
	&lt;a-sphere color="#00AA00" radius="0.25" position="-0.5 1 0" <mark>play</mark>&gt;&lt;/a-sphere&gt;
	&lt;a-sphere color="#AA0000" radius="0.25" position="0.5 1 0" <mark>stop</mark>&gt;&lt;/a-sphere&gt;
&lt;/a-box&gt;

Nelokalizovaný

&lt;a-assets&gt;
&lt;img id="panorama" src="imgs/panorama.jpg"&gt;&lt;/img&gt;
&lt;audio id="park-ambience" src="sounds/park.mp3"&gt;&lt;/audio&gt;
&lt;/a-assets&gt;

// 360° Panorama
&lt;a-sky src="#panorama" <mark>sound="src: #park-ambience; autoplay: true; loop: true; positional: false"</mark>&gt;

Video


&lt;a-assets&gt;
	&lt;img id="play" src="imgs/play.png"&gt;&lt;/img&gt;
	&lt;img id="pause" src="imgs/pause.png"&gt;&lt;/img&gt;
	&lt;video id="standardVideo" src="videos/standardVideo.mp4" loop="true"&gt;&lt;/video&gt;
	&lt;video id="360video" src="videos/360video.mp4" loop="true"&gt;&lt;/video&gt;
&lt;/a-assets&gt;

Standardní video

A-Frame a-video dokumentace

AFRAME.registerComponent('play-pause', {
	init: function(){
		var video = document.querySelector('<mark>#standardVideo</mark>');
		var videoControls = document.querySelector('#videoControls');
		this.el.addEventListener('click', function(){
			if(video.paused){
				video.play();
				videoControls.setAttribute('src', '#pause');
			} else {
				video.pause();
				videoControls.setAttribute('src', '#play');
			}
		});
	}
});

&lt;a-scene&gt;
	&lt;a-camera&gt;
		&lt;a-cursor&gt;&lt;/a-cursor&gt;
	&lt;/a-camera&gt;

	&lt;a-video src="#standardVideo" width="8" height="4.5" position="0 3 -9"&gt;
		&lt;a-image id="videoControls" src="#play" position="0 -3 0" scale="0.5 0.5 1" play-pause&gt;&lt;/a-image&gt;
	&lt;/a-video&gt;
&lt;/a-scene&gt;

360° video

A-Frame a-videosphere dokumentace

AFRAME.registerComponent('play-pause', {
	init: function(){
		var video = document.querySelector('<mark>#360Video</mark>');
		var videoControls = document.querySelector('#videoControls');
		this.el.addEventListener('click', function(){
			if(video.paused){
				video.play();
				videoControls.setAttribute('src', '#pause');
			} else {
				video.pause();
				videoControls.setAttribute('src', '#play');
			}
		});
	}
});

&lt;a-scene&gt;
	&lt;a-camera&gt;
		&lt;a-cursor&gt;&lt;/a-cursor&gt;
	&lt;/a-camera&gt;

	&lt;a-videosphere src="#360video" rotation="0 -90 0"&gt;&lt;/a-videosphere&gt;

	&lt;a-image id="videoControls" src="#play" position="0 1 -2" scale="0.2 0.2 1" play-pause&gt;&lt;/a-image&gt;
&lt;/a-scene&gt;

AR.js - Rozšířená realita na webu

AR.js je odlehčená knihovna pro rozšířenou realitu na webu, která zahrnuje funkce jako sledování obrazu, umístění založené na AR a sledování značek.

AR.js používá ke sledování jsartoolkit5, ale může zobrazovat rozšířený obsah buď pomocí three.js nebo A-Frame.

Poznámka: Na githubu je velmi nízká aktivita

MindAR

Open-source javascriptová knihovna, zcela zdarma k použití.

WebXR Frameworky, knihovny a nástroje