diff options
Diffstat (limited to 'files/fi/web/api/webvr_api/index.html')
| -rw-r--r-- | files/fi/web/api/webvr_api/index.html | 250 |
1 files changed, 250 insertions, 0 deletions
diff --git a/files/fi/web/api/webvr_api/index.html b/files/fi/web/api/webvr_api/index.html new file mode 100644 index 0000000000..e3b73598f2 --- /dev/null +++ b/files/fi/web/api/webvr_api/index.html @@ -0,0 +1,250 @@ +--- +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> |