Aloita WebVR: n käyttö

HYPÄTÄ:

WebVR on JavaScript-sovellusliittymä 3D-virtuaalitodellisuuskokemusten luomiseen selaimessa. Tämä edellyttää matalaa viivettä, korkeaa kuvanopeutta ja erinomaista suorituskykyä. Sen tavoitteena on helpottaa kaikkien kokemusta VR-kokemuksista alentamalla markkinoille pääsyn esteitä.

WebGL antaa kehittäjien luoda rikkaita, konsolilaadukkaita kokemuksia, jotka näkyvät reaaliajassa mobiililaitteilla ja työpöydän selaimilla (varmista vain, että saat sivujen ylläpito paras mahdollinen suorituskyky). Lähes yleinen selain- ja laitetuki tekee siitä täydellisen lähestymistavan web-kehittäjille, jotka haluavat luoda uskomattomia VR-kokemuksia. Tässä näytämme sinulle, miten pääset alkuun WebVR: n kanssa. Tämän artikkelin alaosasta löydät hyödyllisiä resursseja tietosi lisäämiseksi.



Opetusohjelmassa käytämme WebVR: tä yhdessä three.js - monien vaihtoehtojen valinta web-suunnittelutyökalut saatavana 3D: lle ja VR: lle verkossa. Se on ilmainen ja avoimen lähdekoodin, kevyt ja lukemattomat palkitut verkkosivustot käyttävät sitä. Sen lisäksi, että sinulla on JavaScript-tausta, voit sukeltaa tähän opetusohjelmaan ilman ennakkotietoa ja luoda ensimmäisen WebVR-kokemuksen. Tämän opetusohjelman tavoitteena on saada sinut alkuun ja innostaa sinua jatkamaan tämän erittäin jännittävän tekniikan tutkimista. Haluatko jotain yksinkertaisempaa? Kokeile a verkkosivujen rakentaja .



01. Ota WebVR-lippu käyttöön Chromessa

WebVR on edelleen kokeellinen tekniikka, ja se vaatii HTTPS: n suorittamisen palvelimellasi. Se ei toimi mobiililaitteissa ilman polyfill.github.com/immersive-web/webvr-polyfill . Voit kuitenkin käyttää sisältöä paikallisesti Chromessa testausta ja rakentamista varten. Muista ottaa käyttöön Chrome WebVR -lippu. Tyyppi kromi: // flags / enable-webvr URL-selaimeesi ja aktivoi se napsauttamalla Ota käyttöön. Saatat joutua käynnistämään myös Chromen uudelleen.

02. Asenna WebVR API -emulointilaajennus

Testaamiseksi paikallisesti työpöydällä ja laitteen välttämiseksi on loistava laajennus, jota voit käyttää Chromessa napsauttamalla versiota. Laajennus jäljittelee a VR-kuulokkeet sinulle ja antaa sinun siirtää ja kääntää kuulokkeita virtuaalisesti ( tuo se tänne ).



03. Avaa laitteen työkalurivi kehittäjän työkaluissa

Laitteen työkalurivi dev-työkalujen sisällä

Tämä jäljittelee mobiililaitetta tai kuuloketta

Mobiililaitteen tai kuulokemallin jäljittelemiseksi on parasta käyttää laitteen emulointia Chrome-työkaluissa. Avaa kehittäjätyökalut Chromessa ja vaihda laitteen työkaluriviltä nähdäksesi mobiilinäkymän, kiertämällä vaakasuuntaan ja valitsemalla suosikki puhelimen emulointi.

04. Luo HTML-perustiedosto

Seuraavaksi sinun on määritettävä HTML-perustiedosto. Voit asettaa ulkoisia CSS- ja JavaScript-tiedostoja tai sisällyttää tekstin yksinkertaisuuden vuoksi. Three.js: n renderöintiluokka luo elementti sinulle. Lisää seuraava koodi omaan index.html tiedosto:



WebVR Demo html, body { margin: 0; padding:0; overflow: hidden; } // Code will go here

05. Sisällytä kolme.js-luokkaa

Sisällytä linkki three.js-kirjastoon tiedostosi päähän - joko isännöi ulkoisesti tai lataa se three.js-arkistosta. Tarvitset myös uuden WebVR-luokan ja BoxLineGeometry-luokan tätä opetusohjelmaa varten. Löydät kirjaston ja tukikurssit tässä . Huomaa: Tämän opetusohjelman koodi on testattu three.js v99: n uusimmalla versiolla.

06. Lisää yleiset muuttujat

Lisää koodin komentotunnisteiden väliin seuraavat yleiset muuttujat, jotta pääset käsiksi kameraan, kohtaukseen, renderöinteihin, esineisiin ja säteilijään. Lisää myös a OSUMA muuttuja, jotta voit seurata esineitä, jotka kameran katse leikkaa. Tämä osoittaa, kuinka tietää, mitä käyttäjä katsoo VR: ssä.

var clock = new THREE.Clock(); var container, camera, scene, renderer, room, crosshair, HIT; var objects=[]; // collection of objects var num=100; // number of objects var raycaster = new THREE.Raycaster();

07. Luo 3D-kohtaus

Aiot lisätä 3D-peruskuvan, joka on esineidesi säilö. Kohtaus on vaihe, joka renderoidaan kameralla. Kaikissa 3D-esityksissä on kohtaus tai jokin muoto. Käyttäjä näkee, mitä siinä vaiheessa ja kameran edessä on. Lisää kohtaus lisäämällä seuraava koodi:

// create a scene object var scene = new THREE.Scene();

08. Lisää perspektiivikamera

Seuraavaksi sinun on lisättävä kamera. Käytät perspektiivikameraa, joka on tarkoitettu 3D-kohtauksiin. Ensimmäinen attribuutti on kameran näkökenttä. Toinen on kuvasuhde ( leveys korkeus ). Sitten voit ilmoittaa lähellä olevan leikkaustason ja kaukaisen leikkaustason etäisyydet, jotka määrittelevät kameran näkyvän.

// create camera camera = new THREE.PerspectiveCamera ( 70, window.innerWidth/window.innerHeight, 0.1, 1000 ); scene.add( camera );

09. Lisää renderöinti- ja piirtoelementti

Renderöijä käsittelee piirustuksen kohteesi kohteista, jotka näkyvät kameralle. Aseta antialias-ominaisuudeksi true, jotta objektille saadaan sileät reunat. Renderöijä luo domElement , joka on itse asiassa HTML elementti. Voit sitten liittyä vartaloon. Huomaa renderöijän uuden VR-yhteensopivan lipun käyttö.

renderer = new THREE.WebGLRenderer( {antialias:true}); renderer.setPixelRatio( window. devicePixelRatio ); renderer.setSize( window.innerWidth, window. innerHeight ); renderer.vr.enabled = true; document.body.appendChild( renderer. domElement );

10. Lisää kameran hiusristikko

Auta käyttäjiä orientoitumaan kameran tarkennuspisteeseen. On hyvä lisätä kameran eteen hiusristikko tai kohdistuskuvake. Voit lisätä sen suoraan kamerakohteeseen, jotta se on aina siellä, missä sen pitäisi olla.

crosshair = new THREE.Mesh( new THREE.RingBufferGeometry( 0.02, 0.04, 32 ), new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } ) ); crosshair.position.z = - 2; camera.add( crosshair );

11. Luo VR-huoneobjekti (valinnainen)

Luo seuraavaksi yksinkertainen huoneobjekti. Tämä on mukavaa antaa käyttäjälle suuntautumisen VR-maailmassa. Se luo yksinkertaisen huonelaatikon, jossa on viivat seinien, lattian ja katon osoittamiseksi.

room = new THREE.LineSegments( new THREE.BoxLineGeometry( 6, 6, 6, 10, 10, 10 ), new THREE.LineBasicMaterial( { color: 0x808080 } )); room.position.y = 2; scene.add( room );

12. Lisää valot kohtaukseen

Kohtauksen valaisemiseksi käytämme yksinkertaista pallonpuoliskon valoa ja suunnattua valoa. Se antaa mukavan ympäristönäkyvyyden ja realistisen varjostuksen myös yhtenäisestä valonlähteestä.

scene.add( new THREE.HemisphereLight ( 0x806060, 0x404040 ) ); var light = new THREE.DirectionalLight ( 0xffffff ); light.position.set( 1, 1, 1 ).normalize(); scene.add( light );

13. Luo joitain esineitä

Seuraavaksi täytät huoneen esineillä. Levitä niitä satunnaisesti ympäri huonetta. Voit myös asettaa kierron ja asteikon satunnaisesti lajikkeelle. Voit lisätä hieman enemmän koodia seuraavassa vaiheessa, jossa se sanotaan luoda kiertoradan määritteitä joidenkin mukautettujen kiertoratojen ottamiseksi käyttöön.

aloitusopas luonnosteluun: hahmot, olennot ja käsitteet
var geometry = new THREE.BoxBufferGeometry ( 0.15, 0.15, 0.15 ); for (i=0;i<=num;i++){ var material =new THREE.MeshLambertMaterial ( { color: Math.random() * 0xffffff } ) ; var object = new THREE.Mesh ( geometry, material ); object.position.set(Math.random()*4.0 - 2.0,Math.random()*4.0 - 2.0,Math. random()*4.0 - 2.0 ); object.scale.set(Math.random()+.5,Math. random()+.5,Math.random()+.5 ); object.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math. random() * 2 * Math.PI ); // create orbit attributes }

14. Lisää kiertoradan attribuutit esineisiin

Mahdollistamaan hienon satunnaisen kiertoradan liikkeen ja estämään esineitä pääsemästä huoneesta, osoitamme alkukulmatiedot (radiaaneina) ja etäisyyden. Se mahdollistaa yksinkertaisen tavan animoida renderöintisilmukan objektit sen jälkeen.

// create orbit attributes // calc distance as constant and assign to object var a = new THREE.Vector3( 0, 0, 0 ); var b = object.position; var d = a.distanceTo( b ); object.distance = d; object.radians = Math.random()*360 * Math. PI/180; // initial angle object.radians2 = Math.random()*360 * Math. PI/180; // initial angle object.radians3 = Math.random()*360 * Math. PI/180; // initial angle room.add( object ); objects.push( object );

15. Lisää ikkunan koon käsittelijä

Testatessamme WebVR-sovellustamme muutamme näytön kokoa, siirrämme sitä tms. On hyvä saada käsittelijä, joka säätää renderointialueen mittoja ja päivittää asioita, jotta se täyttää ruudun kunnolla ja näyttää hyvältä.

window.addEventListener( ‘resize’, onWindowResize, false ); function onWindowResize() { camera.aspect = window.innerWidth / window. innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); }

16. Luo WebVR-painike

Kuva 1/2

Ei VR-tila

Ei VR-tila
Kuva 2/2

VR-tilassa

VR-tilassa

Three.js: n uusi WebVR-luokka sisältää WebVR-painikkeen, joka hoitaa VR-tilassa vaihtamista meille. Se käsittelee myös, jos laite ei tue VR-tilaa. Voit sisällyttää sen tähän yksinkertaiseen koodiin:

// three.js webvr button to enter/ exit vr mode document.body.appendChild( WEBVR.createButton ( renderer ) );

17. Aloita VR-animaatiosilmukka

Yleensä käytät requestAnimationFrame renderöintisilmukan käsittelemiseksi, mutta VR: ssä sinun on käytettävä toista silmukan käsittelijää varmistaaksesi, että kaikki on valmis renderöimään ja että vältät viive- ja renderointiongelmat. Käytä sen sijaan uutta setAnimationLoop ja välitä render-toiminto.

// start the VR animation loop renderer.setAnimationLoop( render );

18. Luo renderöintitoiminto

Luo sitten renderöintitoiminto. Jos et halunnut animoida esineitäsi tai testata kameran / ristikon leikkaamista esineiden kanssa, voit käyttää vain seuraavaa koodia:

function render() { // find intersections // animate the objects // render the scene renderer.render( scene, camera ); }

19. Testi risteyksistä

Ota käyttöön testaus kohteille, jotka leikkaavat kamerasta Z-tilaan jäljitetyn säteen, lisäämällä seuraava koodi renderöintisilmukkaasi, jossa kommentoit sitä viimeisessä vaiheessa:

raycaster.setFromCamera( { x: 0, y: 0 }, camera ); var intersects = raycaster.intersectObjects ( room.children ); if ( intersects.length > 0 ) { if ( HIT != intersects[ 0 ].object ) { if ( HIT ) { HIT.material.emissive. setHex( HIT.currentHex ); } HIT = intersects[ 0 ].object; HIT.currentHex = HIT.material.emissive. getHex(); HIT.material.emissive.setHex( 0x00ff00 ); } } else { if ( HIT ){ HIT.material.emissive.setHex ( HIT.currentHex ); } HIT = undefined; }

20. Animoi esineitä kiertoradoilla

Seuraavaksi voit animoida kohteesi kiertoradallaan käyttämällä tätä koodia:

for (i=0;i<=num;i++){ var o = objects[i]; o.rotation.y+=.01; if( i % 2 == 0) { o.radians+=.004; o.radians2+=.005; o.radians3+=.008; } else { o.radians-=.006; o.radians2-=.005; o.radians3-=.003; } o.position.x = (Math.cos(o.radians) * o.distance); o.position.z = (Math.sin(o.radians3) * o.distance); o.position.y = (Math.sin(o.radians2) * o.distance*.5); }

21. Tee WebVR-kohtaus

Lopuksi voit renderöidä kohtauksen käyttämällä renderöintitoimintoja. Jos et ole vielä lisännyt tätä riviä, tee se nyt. Kun olet lisännyt tämän, voit testata kaiken ja sinun pitäisi nähdä WebVR-kohtaus renderöimällä selaimessasi. Voit tarkistaa sen myös mobiililaitteellasi tai VR-kuulokkeillasi.

// render the scene renderer.render( scene, camera );

WebVR-resurssit

WebVR: n aloittaminen voi olla ylivoimaista. Olemme koonneet joitain esimerkkejä sivustoista, jotka käyttävät WebVR: ää ja resursseja.

SketchFab-kotisivu

SketchFab
Luultavasti tunnet jo tämän sivuston hämmästyttävän omaisuusgalleriansa vuoksi, mutta sillä on myös WebVR-tila, jonka avulla voit navigoida VR: ssä.

Kehys
Tämä on kova vankka kehys AR: lle ja VR: lle. Se huolehtii varautumisista ja laitetukesta sinulle, mukaan lukien mahdollistaa renderoinnin selaimessasi testausta varten. Se jopa tiivistää tavallisten 3D-objektien luomisen pois.

Three.js
Tässä kirjastossa on lukuisia esimerkkejä lähdekoodilla, joka auttaa sinua pääsemään WebVR: n kanssa. Se on täydellinen lähtökohta.

WebVR
Koska WebVR on kehittyvä tekniikka, on hyvä pysyä mukana viimeisimmässä kehityksessä. Sinun on tiedettävä, mitä laitteita tuetaan ja missä olosuhteissa. Tämä sivusto auttaa sinua pysymään ajan tasalla. Siellä esimerkkeille omistettu sivu myös.

Ja se auttaa aina saamaan oikeuden pilvitallennus myös.

Tämä artikkeli julkaistiin alun perin luovan web-lehden numerossa 283 Nettisivujen suunnittelija . Osta numero 283 tai tilaa .

Lue lisää: