---
title: WebVR API
slug: Web/API/WebVR_API
tags:
  - API
  - Experimental
  - Expérimental(2)
  - Landing
  - NeedsTranslation
  - Reference
  - Référence(2)
  - TopicStub
  - VR
  - Virtual Reality
  - WebVR
translation_of: Web/API/WebVR_API
---
<p>{{SeeCompatTable}}{{APIRef("WebVR API")}}</p>

<p>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.</p>

<h2 id="Perusperiaatteet_ja_käyttö">Perusperiaatteet ja käyttö</h2>

<p>Metodi {{domxref("Navigator.getVRDisplays()")}} hakee kaikki tietokoneeseen liitetyt VR-laitteet; jokaista näistä vastaa {{domxref("VRDisplay")}} -tyyppinen objekti.</p>

<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>

<p>{{domxref("VRDisplay")}} on perusrajapinta WebVR API:in — sen ominaisuuksien ja metodien avulla voit esimerkiksi:</p>

<ul>
	<li>Hakea tiedot näyttölaitteen tunnistamiseen, sen ominaisuudet ja siihen liitetyt ohjaimet.</li>
	<li>Hakea kunkin näytettäväksi tarkoitetun sisältöruudun {{domxref("VRFrameData", "frame data")}} ja toimittaa ruudut näytölle oikealla taajuudella.</li>
	<li>Käynnistää ja pysäyttää näyttämisen.</li>
</ul>

<p>Tyypillinen (yksinkertainen) WebVR-sovellus toimisi esimerkiksi näin:</p>

<ol>
	<li>{{domxref("Navigator.getVRDisplays()")}} -metodilla haetaan viittaus VR-näyttöön.</li>
	<li>{{domxref("VRDisplay.requestPresent()")}} -metodilla käynnistetään näyttäminen.</li>
	<li>WebVR:n omalla versiolla {{domxref("VRDisplay.requestAnimationFrame()")}} -methodista suoritetaan sovelluksen renderöintisilmukkaa näytölle sopivalla virkistystaajuudella.</li>
	<li>Renderöintisilmukassa haetaan ruudun näyttämiseen tarvittavat tiedot ({{domxref("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 ({{domxref("VRDisplay.submitFrame()")}}).</li>
</ol>

<p>Tämän lisäksi WebVR 1.1 lisää useita tapahtumia (event) {{domxref("Window")}} -objektiin, jolloin JavaScriptillä voidaan reagoida näytön tilan muutoksiin.</p>

<p><strong>Huom</strong>: APIn toiminnasta löytyy paljon lisätietoa artikkeleista <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> ja <a href="/en-US/docs/Web/API/WebVR_API/Concepts">WebVR Concepts</a>.</p>

<h3 id="Ohjaimien_käyttö_WebVRn_yhdistäminen_Gamepad_APIin">Ohjaimien käyttö: WebVR:n yhdistäminen Gamepad API:in</h3>

<p>Useissa WebVR-laitekokoonpanoissa silmikon mukana on käytettävissä erillinen ohjain. Ohjaimia voidaan käyttää WebVR-sovelluksissa <a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>:n kautta, ja erityisesti <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API:n</a>, joka lisää mukaan ohjaimen asentotiedon (<a href="/en-US/docs/Web/API/GamepadPose">controller pose</a>), tuntoperusteiset laitteet (<a href="/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>) ja muita vastaavia.</p>

<p><strong>Huom</strong>: Artikkeli <a href="/en-US/docs/Web/API/WebVR_API/Using_VR_controllers_with_WebVR">Using VR controllers with WebVR</a> selittää perusteet VR-ohjaimien käytöstä WebVR-sovelluksissa.</p>

<h2 id="WebVR_rajapinnat">WebVR rajapinnat</h2>

<dl>
	<dt>{{domxref("VRDisplay")}}</dt>
	<dd>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.</dd>
	<dt>{{domxref("VRDisplayCapabilities")}}</dt>
	<dd>Esittää {{domxref("VRDisplay")}}:n ominaisuudet — näillä voidaan testata, saako laitteelta esimerkiksi sijaintitietoa.</dd>
	<dt>{{domxref("VRDisplayEvent")}}</dt>
	<dd>Edustaa WebVR-kohtaisen tapahtuman tapahtumaobjektia (kts. {{anch("Window", "window object extensions")}} alempana).</dd>
	<dt>{{domxref("VRFrameData")}}</dt>
	<dd>Vastaa kaikkea tietoa, mitä yksittäisen VR-skenen ruudun renderöintiin tarvitaan; metodi {{domxref("VRDisplay.getFrameData()")}} hakee nämä tiedot.</dd>
	<dt>{{domxref("VRPose")}}</dt>
	<dd>Edustaa tietyllä ajanhetkellä vallitsevaa sijaintitietoa (johon kuuluvat suunta, sijainti, nopeus ja kiihtyvyys.)</dd>
	<dt>{{domxref("VREyeParameters")}}</dt>
	<dd>Tarjoaa pääsyn kaikkeen tietoon, joka tarvitaan skenen renderöintiin oikein kullekin silmälle, esimerkiksi näkökentän laajuuden.</dd>
	<dt>{{domxref("VRFieldOfView")}}</dt>
	<dd>Näkökenttätieto, joka on määritelty keskipisteestä katsottuna neljällä asteluvulla.</dd>
	<dt>{{domxref("VRLayerInit")}}</dt>
	<dd>Tämä on {{domxref("VRDisplay")}}-näytöllä esitettävä kuvan eräs taso (layer).</dd>
	<dt>{{domxref("VRStageParameters")}}</dt>
	<dd>Huoneskaalaa tukevien laitteiden kanssa käytettävissä sovelluksissa "näyttämöalueen" tiedot löytyvät tästä.</dd>
</dl>

<h3 id="Laajennukset_muihin_rajapintoihin">Laajennukset muihin rajapintoihin</h3>

<p>WebVR API laajentaa joitakin API-rajapintoja lisäten seuraavat ominaisuudet.</p>

<h4 id="Gamepad">Gamepad</h4>

<dl>
	<dt>{{domxref("Gamepad.displayId")}} {{readonlyInline}}</dt>
	<dd>Palauttaa liitetyn {{domxref("VRDisplay")}} tunnisteen {{domxref("VRDisplay.displayId")}} — <code>VRDisplay</code> , jonka skeneä gamepad ohjaa.</dd>
</dl>

<h4 id="Navigator">Navigator</h4>

<dl>
	<dt>{{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt>
	<dd>Palauttaa taulukon, jossa on mukana jokainen {{domxref("VRDisplay")}}, joka esittää parhaillaan ({{domxref("VRDisplay.ispresenting")}} on <code>true</code>).</dd>
	<dt>{{domxref("Navigator.getVRDisplays()")}}</dt>
	<dd>Palauttaa promise-objektin, joka sisältää taulukon {{domxref("VRDisplay")}} objekteja, jotka vastaavat kaikkia tietokoneeseen liitettyjä VR-näyttöjä.</dd>
</dl>

<h4 id="Window-tapahtumat">Window-tapahtumat</h4>

<dl>
	<dt>{{domxref("Window.onvrdisplaypresentchange")}}</dt>
	<dd>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 {{event("vrdisplaypresentchange")}} signaloidaan).</dd>
	<dt>{{domxref("Window.onvrdisplayconnect")}}</dt>
	<dd>Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö on kytketty tietokoneeseen (tapahtuma {{event("vrdisplayconnect")}} ).</dd>
	<dt>{{domxref("Window.onvrdisplaydisconnect")}}</dt>
	<dd>Tämä tapahtumankäsittelijä suoritetaan, kun yhteensopiva VR-näyttö irrotetaan tietokoneesta (kun tapahtuma {{event("vrdisplaydisconnect")}} signaloidaan).</dd>
	<dt>{{domxref("Window.onvrdisplayactivate")}}</dt>
	<dd>Edustaa taphtumaa, joka suoritetaan, kun näyttö on valmis esittämään sisältöä (tapahtuma {{event("vrdisplayactivate")}} ),esimerkiksi kun silmikko aktivoituu virransäästötilasta tai puetaan päälle.</dd>
	<dt>{{domxref("Window.onvrdisplaydeactivate")}}</dt>
	<dd>Tämä tapahtumankäsittelijä suoritetaan, kun näytölle ei voi enää esittää sisältöä (kun tapahtuma {{event("vrdisplaydeactivate")}} signaloidaan), esimerkiksi syystä, että silmikkonäyttö on siirtynyt virransäästötilaan käyttämättömyyden vuoksi.</dd>
</dl>

<h4 id="Windown_tapahtumat_jotka_eivät_ole_käytettävissä">Window:n tapahtumat, jotka eivät ole käytettävissä</h4>

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

<dl>
	<dt>{{domxref("Window.onvrdisplayblur")}}</dt>
	<dd>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 {{event("vrdisplayblur")}} johdosta) — esimerkiksi käytettäessä järjestelmän valikkoa tai selainta. Tarkoitus on estää seurantaa tai VR-kokemuksen menetystä.</dd>
	<dt>{{domxref("Window.onvrdisplayfocus")}}</dt>
	<dd>Tämä tapahtumankäsittelijä suoritetaan, kun esittäminen näytöllä palautuu edellisen tapahtuman jälkeen (tapahtumasta {{event("vrdisplayfocus")}} ).</dd>
</dl>

<h2 id="Esimerkkejä">Esimerkkejä</h2>

<p>Näiltä sivustoilta töydät useita esimerkkejä:</p>

<ul>
	<li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a> — hyvin yksinkertaisia esimerkkejä MDN:n WebVR dokumentaation tueksi.</li>
	<li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — mukavia yksinkertaisia ja hyvin kommentoituja esimerkkejä, jotka tulevat Carmel:in, Facebookin WebVR-selaimen mukana.</li>
	<li><a href="https://webvr.info/samples/">WebVR.info samples</a> — hieman syvemmälle meneviä esimerkkejä lähdekoodeineen</li>
	<li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — demottavia esimerkkejä</li>
	<li><a href="https://aframe.io/">A-Frame homepage</a> — esimerkkejä A-Frame:n käytöstä</li>
</ul>

<h2 id="Spesifikaatiot">Spesifikaatiot</h2>

<table class="standard-table">
	<tbody>
		<tr>
			<th scope="col">Specification</th>
			<th scope="col">Status</th>
			<th scope="col">Comment</th>
		</tr>
		<tr>
			<td>{{SpecName("GamepadExtensions")}}</td>
			<td>{{Spec2("GamepadExtensions")}}</td>
			<td>Määrittää <a href="/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a>.</td>
		</tr>
		<tr>
			<td>{{SpecName('WebVR 1.1')}}</td>
			<td>{{Spec2('WebVR 1.1')}}</td>
			<td>Alkuperäinen</td>
		</tr>
	</tbody>
</table>

<h2 id="Selainyhteensopivuus">Selainyhteensopivuus</h2>

<p>{{CompatibilityTable}}</p>

<table class="compat-table">
	<tbody>
		<tr>
			<th>Ominaisuus</th>
			<th>Chrome</th>
			<th>Edge</th>
			<th>Firefox (Gecko)</th>
			<th>Internet Explorer</th>
			<th>Opera</th>
			<th>Safari (WebKit)</th>
		</tr>
		<tr>
			<td>Perus</td>
			<td>{{CompatNo}}<sup>[1]</sup></td>
			<td>{{CompatVersionUnknown}}</td>
			<td>{{CompatGeckoDesktop(55)}}<sup>[2]</sup></td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
		</tr>
		<tr>
			<td>Gamepad -laajennukset</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}<sup>[4]</sup></td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
		</tr>
	</tbody>
</table>

<table class="compat-table">
	<tbody>
		<tr>
			<th>Feature</th>
			<th>Android</th>
			<th>Edge</th>
			<th>Firefox Mobile (Gecko)</th>
			<th>IE Phone</th>
			<th>Opera Mobile</th>
			<th>Safari Mobile</th>
			<th>Chrome for Android</th>
			<th>Samsung Internet for GearVR</th>
		</tr>
		<tr>
			<td>Basic support</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
			<td>{{CompatVersionUnknown}}<br>
			 </td>
		</tr>
		<tr>
			<td>Gamepad extensions</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}<sup>[4]</sup></td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
			<td>{{CompatNo}}</td>
		</tr>
	</tbody>
</table>

<p>[1] API käytettävissä (Available) kaikilla alustoilla lipulla, mutta tällä hetkellä toimii ainoastaan kokeellisessa työpöytäversiossa (<a href="https://webvr.info/get-chrome/">experimental version of Chrome)</a> (muut versiot eivät palauta yhtään laitetta metodia {{domxref("Navigator.getVRDisplays()")}} kutsuttaessa).</p>

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

<p>[3] Nyt ainoastaan laitteella Google Daydream.</p>

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

<h2 id="Katso_myös">Katso myös</h2>

<ul>
	<li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Mozillan WebVR:n aloitussivu, jossa on demoja, apuohjelmia ja muuta tietoa.</li>
	<li><a href="https://aframe.io/">A-Frame</a> — Open source web-sovelluskehys VR-kokemuksien rakentamiseen.</li>
	<li><a href="https://webvr.info">webvr.info</a> — Ajantasaista tietoa WebVR:stä, selaintuesta ja yhteisöstä.</li>
	<li><a href="http://mozvr.com/">MozVr.com</a> — Demoja, latauslinkkejä ja muuta Mozillan VR-ryhmän tarjoamia resursseja.</li>
	<li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — Käyttökelpoinen mallipohja, jonka päälle WebVR-sovellus on helppo rakentaa.</li>
	<li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript -toteutus WebVR:n toiminnoista.</li>
</ul>