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.
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.
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 funkceAFRAME.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
<a-assets>
<img id="left" src="imgs/left.jpg"></img>
<img id="right" src="imgs/right.jpg"></img>
</a-assets>Standardní fotka
<a-scene antialias="true">
<-- eye: right Default camera for Web View -->
<a-camera stereocam="eye: right"></a-camera>
<a-image src="#left" height="0.75" position="0 1.5 -1" stereo="eye: left"></a-image>
<a-image src="#right" height="0.75" position="0 1.5 -1" stereo="eye: right"></a-image>
</a-scene>360° fotka
<a-scene antialias="true">
<-- eye: right Default camera for Web View -->
<a-camera stereocam="eye: right"></a-camera>
<a-sky src="#left" rotation="0 -90 0" stereo="eye: left"></a-sky>
<a-sky src="#right" rotation="0 -90 0" stereo="eye: right"></a-sky>
</a-scene>Zvuk a pozicování zvuku v Aframe
A-Frame podporuje prostorový zvuk. A-Frame dokumentace pro zvuk.
<a-assets>
<audio id="parasail" src="sounds/parasail.mp3"></audio>
</a-assets>Element
<a-cylinder color="#0088FF" height="5" position="-2 2.5 0"
sound="src: #parasail";on: click; volume: 1; refDistance: 4; rolloffFactor: 4>
<a-entity sound="src: #parasail; autoplay: false" position="1.339 1.525 0"></a-entity>
</a-cylinder>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();
});
}
});start a stop jako atribut v A-Frame elementech
<a-box id="yellow" color="#FFAA00" position="1.5 0.5 0.5" sound="src: #parasail">
<a-sphere color="#00AA00" radius="0.25" position="-0.5 1 0" play></a-sphere>
<a-sphere color="#AA0000" radius="0.25" position="0.5 1 0" stop></a-sphere>
</a-box>Nelokalizovaný
<a-assets>
<img id="panorama" src="imgs/panorama.jpg"></img>
<audio id="park-ambience" src="sounds/park.mp3"></audio>
</a-assets>
// 360° Panorama
<a-sky src="#panorama" sound="src: #park-ambience; autoplay: true; loop: true; positional: false">Video
<a-assets>
<img id="play" src="imgs/play.png"></img>
<img id="pause" src="imgs/pause.png"></img>
<video id="standardVideo" src="videos/standardVideo.mp4" loop="true"></video>
<video id="360video" src="videos/360video.mp4" loop="true"></video>
</a-assets>Standardní video
- A-Frame a-video dokumentace
AFRAME.registerComponent('play-pause', {
init: function(){
var video = document.querySelector('#standardVideo');
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');
}
});
}
});<a-scene>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-video src="#standardVideo" width="8" height="4.5" position="0 3 -9">
<a-image id="videoControls" src="#play" position="0 -3 0" scale="0.5 0.5 1" play-pause></a-image>
</a-video>
</a-scene>360° video
- A-Frame a-videosphere dokumentace
AFRAME.registerComponent('play-pause', {
init: function(){
var video = document.querySelector('#360Video');
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');
}
});
}
});<a-scene>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
<a-videosphere src="#360video" rotation="0 -90 0"></a-videosphere>
<a-image id="videoControls" src="#play" position="0 1 -2" scale="0.2 0.2 1" play-pause></a-image>
</a-scene>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