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:

  1. Navigator.getVRDisplays() -metodilla haetaan viittaus VR-näyttöön.
  2. VRDisplay.requestPresent() -metodilla käynnistetään näyttäminen.
  3. WebVR:n omalla versiolla VRDisplay.requestAnimationFrame() -methodista suoritetaan sovelluksen renderöintisilmukkaa näytölle sopivalla virkistystaajuudella.
  4. 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.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ä:

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!

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.