WebVR API

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

WebVR -rajapinta tarjoaa tuen VR-laitteiden — kuten Oculus Rift tai HTC Vive -silmikoiden — käyttämiseen webbisovelluksille, jolloin kehittäjät voivat muuttaa silmikolta saadun sijainti- ja liiketiedon 3D-skenessä liikkumistiedoksi. Tämä mahdollistaa useita kiinnostavia sovellusmahdollisuuksia aina virtuaalisista tuote-esittelyistä ja interaktiivisista treenisovelluksista immersiivisiin FPS-räiskintäpeleihin.

Perusperiaatteet ja käyttö

Metodi Navigator.getVRDisplays() hakee kaikki tietokoneeseen liitetyt VR-laitteet; jokaista näistä vastaa VRDisplay -tyyppinen objekti.

Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"

VRDisplay on perusrajapinta WebVR API:in — sen ominaisuuksien ja metodien avulla voit esimerkiksi:

Hakea tiedot näyttölaitteen tunnistamiseen, sen ominaisuudet ja siihen liitetyt ohjaimet.
Hakea kunkin näytettäväksi tarkoitetun sisältöruudun frame data ja toimittaa ruudut näytölle oikealla taajuudella.
Käynnistää ja pysäyttää näyttämisen.

Tyypillinen (yksinkertainen) WebVR-sovellus toimisi esimerkiksi näin:

Navigator.getVRDisplays() -metodilla haetaan viittaus VR-näyttöön.
VRDisplay.requestPresent() -metodilla käynnistetään näyttäminen.
WebVR:n omalla versiolla VRDisplay.requestAnimationFrame() -methodista suoritetaan sovelluksen renderöintisilmukkaa näytölle sopivalla virkistystaajuudella.
Renderöintisilmukassa haetaan ruudun näyttämiseen tarvittavat tiedot (VRDisplay.getFrameData()) -metodilla, piirretään näytettävä skene kaksi kertaa — siis kerran molemmille silmille, ja sen jälkeen toimitetaan renderöity näkymä näytölle käyttäjälle näytettäväksi metodilla (VRDisplay.submitFrame()).

Tämän lisäksi WebVR 1.1 lisää useita tapahtumia (event) Window -objektiin, jolloin JavaScriptillä voidaan reagoida näytön tilan muutoksiin.

Huom: APIn toiminnasta löytyy paljon lisätietoa artikkeleista Using the WebVR API ja WebVR Concepts.

Ohjaimien käyttö: WebVR:n yhdistäminen Gamepad API:in

Useissa WebVR-laitekokoonpanoissa silmikon mukana on käytettävissä erillinen ohjain. Ohjaimia voidaan käyttää WebVR-sovelluksissa Gamepad API:n kautta, ja erityisesti Gamepad Extensions API:n, joka lisää mukaan ohjaimen asentotiedon (controller pose), tuntoperusteiset laitteet (haptic actuators) ja muita vastaavia.

Huom: Artikkeli Using VR controllers with WebVR selittää perusteet VR-ohjaimien käytöstä WebVR-sovelluksissa.

WebVR rajapinnat

VRDisplay: Edustaa mitä tahnsa APIn tukemaa VR-laitetta. Siinä on mukana yleistiedot laittesta, kuten laitteen tunnisteet (ID) ja kuvaukset sekä metodit VR-skenen esittämisen käynnistämiseen, silmäparametrien ja näytön ominaisuuksien hakemiseen ja muut olennaiset toiminnat.
VRDisplayCapabilities: Esittää VRDisplay:n ominaisuudet — näillä voidaan testata, saako laitteelta esimerkiksi sijaintitietoa.
VRDisplayEvent: Edustaa WebVR-kohtaisen tapahtuman tapahtumaobjektia (kts. window object extensions alempana).
VRFrameData: Vastaa kaikkea tietoa, mitä yksittäisen VR-skenen ruudun renderöintiin tarvitaan; metodi VRDisplay.getFrameData() hakee nämä tiedot.
VRPose: Edustaa tietyllä ajanhetkellä vallitsevaa sijaintitietoa (johon kuuluvat suunta, sijainti, nopeus ja kiihtyvyys.)
VREyeParameters: Tarjoaa pääsyn kaikkeen tietoon, joka tarvitaan skenen renderöintiin oikein kullekin silmälle, esimerkiksi näkökentän laajuuden.
VRFieldOfView: Näkökenttätieto, joka on määritelty keskipisteestä katsottuna neljällä asteluvulla.
VRLayerInit: Tämä on VRDisplay-näytöllä esitettävä kuvan eräs taso (layer).
VRStageParameters: Huoneskaalaa tukevien laitteiden kanssa käytettävissä sovelluksissa "näyttämöalueen" tiedot löytyvät tästä.

Laajennukset muihin rajapintoihin

WebVR API laajentaa joitakin API-rajapintoja lisäten seuraavat ominaisuudet.

Gamepad

Gamepad.displayId Read only: Palauttaa liitetyn VRDisplay tunnisteen VRDisplay.displayId — VRDisplay , jonka skeneä gamepad ohjaa.

Navigator

Navigator.activeVRDisplays Read only: Palauttaa taulukon, jossa on mukana jokainen VRDisplay, joka esittää parhaillaan (VRDisplay.ispresenting on true).
Navigator.getVRDisplays(): Palauttaa promise-objektin, joka sisältää taulukon VRDisplay objekteja, jotka vastaavat kaikkia tietokoneeseen liitettyjä VR-näyttöjä.

Window-tapahtumat

Window.onvrdisplaypresentchange: Edustaa tapahtumankäsittelijää (event handler), joka suoritetaan, kun VR_näytön esittämistila muuttuu — esimerkiksi tilasta 'esittää' tilaan 'ei esitä' tai päinvastoin (kun tapahtuma vrdisplaypresentchange signaloidaan).
Window.onvrdisplayconnect: Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö on kytketty tietokoneeseen (tapahtuma vrdisplayconnect ).
Window.onvrdisplaydisconnect: Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö irrotetaan tietokoneesta (kun tapahtuma vrdisplaydisconnect signaloidaan).
Window.onvrdisplayactivate: Edustaa taphtumaa, joka suoritetaan, kun näyttö on valmis esittämään sisältöä (tapahtuma vrdisplayactivate ),esimerkiksi kun silmikko aktivoituu virransäästötilasta tai puetaan päälle.
Window.onvrdisplaydeactivate: Tämä tapahtumankäsittelijä suoritetaan, kun näytölle ei voi enää esittää sisältöä (kun tapahtuma vrdisplaydeactivate signaloidaan), esimerkiksi syystä, että silmikkonäyttö on siirtynyt virransäästötilaan käyttämättömyyden vuoksi.

Window:n tapahtumat, jotka eivät ole käytettävissä

Seuraavat tapahtumat löytyvät APIn määrittelystä, mutta niiden toteutusta ei tunnu vielä löytyvän mistään selaimista.

Window.onvrdisplayblur: Edustaa tapahtumankäsittelijää, joka suoritetaan kun selain, käyttöjärjestelmä tai VR-laitteisto on keskeyttänyt esittämisen näytölle jostain syystä (tapahtuman vrdisplayblur johdosta) — esimerkiksi käytettäessä järjestelmän valikkoa tai selainta. Tarkoitus on estää seurantaa tai VR-kokemuksen menetystä.
Window.onvrdisplayfocus: Tämä tapahtumankäsittelijä suoritetaan, kun esittäminen näytöllä palautuu edellisen tapahtuman jälkeen (tapahtumasta vrdisplayfocus ).

Esimerkkejä

Näiltä sivustoilta töydät useita esimerkkejä:

webvr-tests — hyvin yksinkertaisia esimerkkejä MDN:n WebVR dokumentaation tueksi.
Carmel starter kit — mukavia yksinkertaisia ja hyvin kommentoituja esimerkkejä, jotka tulevat Carmel:in, Facebookin WebVR-selaimen mukana.
WebVR.info samples — hieman syvemmälle meneviä esimerkkejä lähdekoodeineen
WebVR.rocks Firefox demos — demottavia esimerkkejä
A-Frame homepage — esimerkkejä A-Frame:n käytöstä

Spesifikaatiot

Specification	Status	Comment
Gamepad Extensions	Editor's Draft	Määrittää Experimental Gamepad extensions.
WebVR 1.1	Draft	Alkuperäinen

Selainyhteensopivuus

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Ominaisuus	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Perus	No support^[1]	(Yes)	55 (55)^[2]	No support	No support	No support
Gamepad -laajennukset	No support	No support	No support^[4]	No support	No support	No support

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android	Samsung Internet for GearVR
Basic support	No support	No support	No support	No support	No support	No support	(Yes)^[3]	(Yes)
Gamepad extensions	No support	No support	No support^[4]	No support	No support	No support	No support	No support

[1] API käytettävissä (Available) kaikilla alustoilla lipulla, mutta tällä hetkellä toimii ainoastaan kokeellisessa työpöytäversiossa (experimental version of Chrome) (muut versiot eivät palauta yhtään laitetta metodia Navigator.getVRDisplays() kutsuttaessa).

[2] Tällä hetkellä ainoastaan Windows ja Mac OSX tuki on oletuksena päällä.

[3] Nyt ainoastaan laitteella Google Daydream.

[4] Päällä Firefox Nightly ja Beta -versioissa 55 ja uudempi. Käytetään valinnalla dom.gamepad-extensions.enabled.

Katso myös

vr.mozilla.org — Mozillan WebVR:n aloitussivu, jossa on demoja, apuohjelmia ja muuta tietoa.
A-Frame — Open source web-sovelluskehys VR-kokemuksien rakentamiseen.
webvr.info — Ajantasaista tietoa WebVR:stä, selaintuesta ja yhteisöstä.
MozVr.com — Demoja, latauslinkkejä ja muuta Mozillan VR-ryhmän tarjoamia resursseja.
threejs-vr-boilerplate — Käyttökelpoinen mallipohja, jonka päälle WebVR-sovellus on helppo rakentaa.
Web VR polyfill — JavaScript -toteutus WebVR:n toiminnoista.