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.
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
tunnisteenVRDisplay.displayId
—VRDisplay
, jonka skeneä gamepad ohjaa.
Navigator
Navigator.activeVRDisplays
Read only- Palauttaa taulukon, jossa on mukana jokainen
VRDisplay
, joka esittää parhaillaan (VRDisplay.ispresenting
ontrue
). 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
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.