Cara Membina VR di Web Hari Ini

Realiti maya ditetapkan bernilai sehingga $ 7 bilion menjelang 2020. Web pastinya tidak akan kekal sebagai persekitaran 2D eksklusif pada masa ini. Malah, sudah ada beberapa cara mudah untuk membawa VR ke penyemak imbas. Ia juga sangat menyeronokkan untuk bekerja dengan!

Untuk memulakan pengembaraan pembangunan anda ke web maya, terdapat tiga cara yang berpotensi untuk melakukan ini:

javascript, tiga.js dan menonton orientasi peranti
JavaScript, Three.js dan Webvr
• (kaedah pilihan baru saya!)
CSS dan Webvr
• (masih sangat awal hari)

Saya akan pergi ke setiap satu dan menunjukkan ringkasan ringkas bagaimana setiap kerja.

Takeaways Key

Realiti Maya (VR) boleh dimasukkan ke dalam pembangunan web melalui tiga kaedah utama: JavaScript, Three.js dan menonton orientasi peranti; JavaScript, Three.js dan Webvr; dan CSS dan Webvr.
Kaedah orientasi JavaScript, Three.js dan menonton Peranti Peranti Peranti Peranti untuk mengesan putaran dan kecondongan peranti, yang, dalam konteks VR, membolehkan pelarasan kamera mengikuti pandangan penonton.
• JavaScript, Three.js dan WebVR adalah kaedah eksperimen yang paling sesuai untuk mengakses orientasi alat dengar VR seperti Oculus Rift. Ia menggunakan API WebVR untuk memberikan akses kepada maklumat peranti VR.
• Kaedah CSS dan WebVR, yang kini berada di peringkat awal pembangunan, bertujuan untuk mengintegrasikan transformasi CSS 3D dengan mod skrin penuh VR.
• Mencipta pengalaman VR untuk web dilihat sebagai pemacu utama untuk penggunaan teknologi VR, dengan boilerplate webvr dari Boris Smus disyorkan sebagai tempat terbaik untuk memulakan untuk pemaju yang ingin membina pengalaman VR untuk web.
javascript, tiga.js dan menonton orientasi peranti

Salah satu cara yang kebanyakan projek realiti maya berasaskan pelayar berfungsi pada masa ini adalah melalui acara pelayar peranti. Ini memberitahu penyemak imbas bagaimana peranti berorientasikan dan membolehkan penyemak imbas untuk mengambil jika ia telah diputar atau dimiringkan. Fungsi ini dalam perspektif VR membolehkan anda mengesan apabila seseorang melihat -lihat dan menyesuaikan kamera untuk mengikuti pandangan mereka.

Untuk mencapai adegan 3D yang indah dalam penyemak imbas, kami menggunakan tiga.js, rangka kerja JavaScript yang menjadikannya mudah untuk membuat bentuk dan adegan 3D. Ia mengambil sebahagian besar kerumitan daripada menyusun pengalaman 3D dan membolehkan anda memberi tumpuan kepada apa yang anda cuba sediakan di dalam adegan anda.

Saya telah menulis dua demo di sini di SitePoint yang menggunakan kaedah orientasi peranti:

• membawa VR ke web dengan Google Cardboard dan Three.js
• Menggambarkan aliran Twitter di VR dengan tiga.js dan nod

Jika anda baru untuk tiga.js dan bagaimana untuk menyatukan adegan, saya akan mengesyorkan melihat dua artikel di atas untuk pengenalan yang lebih mendalam ke dalam kaedah ini. Saya akan merangkumi konsep utama di sini, namun ia akan berada di tahap yang lebih tinggi.

Komponen utama masing -masing melibatkan fail JavaScript berikut (anda boleh mendapatkan fail -fail ini dari demo contoh di atas dan juga akan menemui mereka dalam contoh tiga.js muat turun):

• tiga.min.js - Rangka kerja tiga.js kami
• DeviceOrientationControls.js - Ini adalah plugin Three.js yang menyediakan orientasi peranti yang dibincangkan di atas. Ia menggerakkan kamera kami untuk memenuhi pergerakan peranti kami.
• orbitcontrols.js - Ini adalah pengawal sandaran yang membolehkan pengguna memindahkan kamera menggunakan tetikus sebaliknya jika kita tidak mempunyai peranti yang mempunyai akses ke acara orientasi peranti.
• stereoeffect.js - kesan tiga.js yang memisahkan skrin ke dalam imej stereoskopik bersudut sedikit berbeza untuk setiap mata seperti dalam VR. Ini mewujudkan skrin berpecah VR sebenar tanpa kita perlu melakukan sesuatu yang rumit.

Orientasi peranti

kod untuk membolehkan kawalan orientasi peranti kelihatan seperti:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

pendengar acara peranti menyediakan nilai alfa, beta dan gamma apabila ia mempunyai peranti yang serasi. Sekiranya kita tidak mempunyai nilai alfa, ia tidak mengubah kawalan kita untuk menggunakan orientasi peranti supaya kita boleh menggunakan kawalan orbit sebaliknya.

Jika ia mempunyai nilai alfa ini, maka kami membuat kawalan orientasi peranti dan memberikan pembolehubah kamera kami untuk mengawal. Kami juga menetapkannya untuk menetapkan adegan kami ke skrin penuh jika pengguna mengetuk skrin (kami tidak mahu menatap bar alamat penyemak imbas ketika dalam VR).

Kawalan orbit

Jika nilai alfa itu tidak hadir dan kami tidak mempunyai akses peristiwa orientasi peranti peranti, teknik ini sebaliknya menyediakan kawalan untuk menggerakkan kamera melalui menyeretnya dengan tetikus. Ini kelihatan seperti:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

Perkara -perkara utama yang mungkin mengelirukan dari kod di atas adalah Nopan dan Nozoom. Pada asasnya, kami tidak mahu bergerak secara fizikal di sekitar tempat kejadian melalui tetikus dan kami tidak mahu dapat mengezum masuk atau keluar - kami hanya mahu melihat -lihat.

kesan stereo

Untuk menggunakan kesan stereo, kami mentakrifkannya seperti:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Kemudian saiz semula tetingkap, kami mengemas kini saiznya:

effect<span>.setSize(width, height);</span>

Di setiap permintaan

itu adalah asas bagaimana gaya orientasi peranti mencapai kerja VR. Ia boleh menjadi berkesan untuk pelaksanaan yang baik dan mudah dengan Google Cardboard, namun ia tidak begitu berkesan pada Oculus Rift. Pendekatan seterusnya jauh lebih baik untuk Rift.

effect<span>.render(scene, camera);</span>

JavaScript, Three.js dan Webvr

mencari untuk mengakses orientasi alat dengar VR seperti Oculus Rift? WebVR adalah cara untuk melakukannya pada masa ini. WebVR adalah API JavaScript awal dan eksperimen yang menyediakan akses kepada ciri -ciri peranti realiti maya seperti Oculus Rift dan Google Cardboard. Pada masa ini, ia boleh didapati di Firefox setiap malam dan beberapa eksperimen membina krom mudah alih dan kromium. Satu perkara yang perlu diingat ialah spesifikasi masih dalam draf dan tertakluk kepada perubahan, jadi bereksperimen dengannya tetapi tahu bahawa anda mungkin perlu menyesuaikan perkara dari masa ke masa.

secara keseluruhan, API WebVR menyediakan akses kepada maklumat peranti VR melalui:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Saya tidak akan masuk ke banyak butiran teknikal di sini (saya akan menutupi ini dengan lebih terperinci dalam artikel SitePoint masa depannya sendiri!), Jika anda berminat untuk mengetahui lebih lanjut, lihat draf editor WebVR. Sebab saya tidak akan terperinci dengannya adalah bahawa terdapat kaedah yang lebih mudah untuk melaksanakan API.

Kaedah yang lebih mudah disebutkan di atas ini untuk melaksanakan API WebVR adalah dengan menggunakan boilerplate webvr dari Boris Smus. Ia menyediakan tahap fungsi asas yang baik yang melaksanakan WebVR dan dengan anggun merendahkan pengalaman untuk peranti yang berbeza. Ia kini merupakan pelaksanaan Web VR yang paling baik yang saya lihat. Jika anda ingin membina pengalaman VR untuk web, ini adalah tempat terbaik untuk bermula!

Untuk mula menggunakan kaedah ini, muat turun boilerplate webvr pada github.

Anda boleh memberi tumpuan kepada mengedit index.html dan menggunakan semua fail dalam set up, atau anda boleh melaksanakan plugin tertentu ke dalam projek anda sendiri dari awal. Jika anda ingin membandingkan perbezaan dalam setiap pelaksanaan, saya telah berhijrah saya memvisualisasikan aliran Twitter dalam VR dengan tiga.js dan contoh nod dari atas ke dalam aliran Twitter yang berkuasa WebVR dalam VR.

Untuk memasukkan projek ini ke dalam diri anda dari awal, fail yang anda inginkan ialah:

• tiga.min.js - rangka kerja tiga.js kami tentu saja
• vrcontrols.js - Plugin tiga.js untuk kawalan VR melalui WebVR (ini boleh didapati dalam bower_components/threejs/contoh/js/controls/vrcontrols.js dalam projek boilerplate)
• vreffect.js - plugin tiga.js untuk kesan VR itu sendiri yang memaparkan adegan untuk rift oculus (ini boleh didapati dalam bower_components/threejs/contoh/js/kesan/vreffect.js dalam projek boilerplate)
• webvr-polyfill.js-Ini adalah polyfill untuk penyemak imbas yang tidak menyokong sepenuhnya WebVR (ini boleh didapati di GitHub dan juga di Bower_Components/WebVR-Polyfill/Build/Webvr-Polyfill.js dalam BoilerPlate kod)
• webvr-manager.js-Ini adalah sebahagian daripada kod boilerplate yang menguruskan segala-galanya untuk anda, termasuk menyediakan cara untuk memasuki dan keluar mod VR (ini boleh didapati di Build/Webvr-Manager.js)

Melaksanakannya hanya memerlukan beberapa pelarasan dari kaedah orientasi peranti. Berikut adalah gambaran keseluruhan bagi mereka yang ingin mencuba kaedah ini:

Kawalan

Kawalan VR agak mudah untuk ditubuhkan. Kami hanya boleh menetapkan objek VRControls baru kepada pemboleh ubah kawalan yang kami gunakan sebelum ini. Kawalan orbit dan kawalan orientasi peranti tidak perlu kerana boilerplate kini harus menjaga pelayar tanpa keupayaan VR. Ini bermakna adegan anda masih berfungsi dengan baik di Google Cardboard juga!

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

kesan vr

kesannya sangat serupa dengan pelaksanaan seperti stereoeffect. Gantikan kesan itu dengan vreffect baru kami:

controls <span>= new THREE<span>.OrbitControls</span>(camera, element);
</span>controls<span>.target.set(
</span>  camera<span>.position.x,
</span>  camera<span>.position.y,
</span>  camera<span>.position.z
</span><span>);
</span>controls<span>.noPan = true;
</span>controls<span>.noZoom = true;</span>

Walau bagaimanapun, kami tidak memberikan kesan tersebut dalam kaedah ini. Sebaliknya, kami memberikan pengurus VR kami.

VR Manager

Pengurus VR menjaga semua VR kami memasuki/keluar dan sebagainya, jadi ini adalah tempat kejadian kami akhirnya diberikan. Kami pada mulanya menetapkannya melalui yang berikut:

effect <span>= new THREE<span>.StereoEffect</span>(renderer);</span>

Pengurus VR menyediakan butang yang membolehkan pengguna memasukkan mod VR jika mereka berada di pelayar yang serasi, atau skrin penuh jika penyemak imbas mereka tidak mampu VR (skrin penuh adalah apa yang kita mahu untuk mudah alih). Parameter HideButton mengatakan sama ada kita mahu menyembunyikan butang itu atau tidak. Kami pasti tidak mahu menyembunyikannya!

panggilan kami kemudian kelihatan seperti demikian, ia menggunakan pembolehubah cap waktu yang berasal dari Fungsi Tiga.js kami () Fungsi:

effect<span>.setSize(width, height);</span>

Dengan semua itu, anda harus mempunyai pelaksanaan VR yang berfungsi yang diterjemahkan ke dalam pelbagai format bergantung pada peranti.

Adakah Renderer.getSize () mengembalikan ralat? Ini mendorong saya marah selama beberapa jam tetapi semua yang anda perlu lakukan untuk membetulkannya adalah - kemas kini tiga.js!

apa yang kelihatan seperti webvr boilerplate dalam tindakan

inilah pandangan contoh Twitter saya seperti pada penyemak imbas yang menyokong VR:

inilah dalam pandangan Oculus Rift yang muncul apabila anda mengklik ikon VR:

Ini adalah apa yang kelihatan seperti pada telefon pintar, orientasi peranti masih membolehkan kita melihat sekitar tempat kejadian dan kita tidak mempunyai skrin berpecah. Pandangan yang responsif mengenai kandungan:

Jika kita mengklik ikon VR di telefon bimbit, kami mendapat paparan skrin penuh untuk peranti gaya kadbod Google:

css dan webvr

Mozilla bertujuan untuk membawa keupayaan tontonan VR ke pelayarnya dalam versi Firefox malam juga, namun ia adalah hari -hari awal! Saya tidak mempunyai banyak nasib untuk bekerja di Mac dan Oculus saya. Jenis konvensyen yang Vladimir Vukićević dari Firefox telah disebutkan termasuk mengintegrasikan transformasi CSS 3D dengan mod skrin penuh VR.

Sebagai contoh dari catatan blog Vladimir, dia mengatakan bahawa unsur-unsur dengan gaya transform: Preserve-3D harus diberikan dua kali dari dua pandangan untuk membawanya ke VR:

<span>function setOrientationControls(e) {
</span>  <span>if (!e.alpha) {
</span>    <span>return;
</span>  <span>}
</span>
  controls <span>= new THREE<span>.DeviceOrientationControls</span>(camera, true);
</span>  controls<span>.connect();
</span>  controls<span>.update();
</span>
  element<span>.addEventListener('click', fullscreen, false);
</span>
  <span>window.removeEventListener('deviceorientation', setOrientationControls, true);
</span><span>}
</span><span>window.addEventListener('deviceorientation', setOrientationControls, true);
</span>
<span>function fullscreen() {
</span>  <span>if (container.requestFullscreen) {
</span>    container<span>.requestFullscreen();
</span>  <span>} else if (container.msRequestFullscreen) {
</span>    container<span>.msRequestFullscreen();
</span>  <span>} else if (container.mozRequestFullScreen) {
</span>    container<span>.mozRequestFullScreen();
</span>  <span>} else if (container.webkitRequestFullscreen) {
</span>    container<span>.webkitRequestFullscreen();
</span>  <span>}
</span><span>}</span>

Jika anda tahu mana -mana demo menggunakan VR dan CSS, sila beritahu saya! Saya tidak dapat mengesan apa -apa. Idea untuk membawa bahagian HTML dan CSS dari Web ke VR adalah tanpa keraguan konsep yang sangat menarik. Tidak dapat dielakkan bahawa web akan memasuki alam VR seperti ini pada satu ketika kerana kita semua perlahan -lahan beralih ke peranti VR!

Kesimpulan

Dunia teknologi perlahan -lahan tetapi pasti akan memeluk realiti maya pada tahun -tahun akan datang kerana keupayaan teknologi kita sesuai dengan aspirasi liar kita! Satu perkara yang akan mendorong penggunaan VR dan nilainya adalah kandungan. Kami perlu mendapatkan kandungan VR di luar sana untuk pengguna VR untuk menikmati! Apa cara yang lebih baik dan lebih mudah di sana daripada melalui web?

Jika anda mengambil risiko dan membina demo VR menggunakan kod ini, sila kongsi dalam komen atau berhubung dengan saya di Twitter (@ThatpatrickGuy). Saya suka memakai Oculus Rift atau Google Cardboard saya dan mengambilnya untuk putaran!

Saya mempunyai satu set pautan curated pada VR dan AR melalui JavaScript untuk mereka yang mencari rujukan cepat. Teruskan ke Dev Diner dan periksa Dev Diner VR dan AR dengan Panduan Pemaju JavaScript, penuh dengan kedua -dua pautan yang disebutkan dalam artikel ini, artikel SitePoint yang hebat dan banyak lagi. Jika anda mempunyai sumber -sumber hebat lain yang saya tidak telah disenaraikan - sila beritahu saya juga!

soalan yang sering ditanya mengenai membina VR di web

Apakah prasyarat untuk membina VR di web? Anda juga harus biasa dengan WebGL, API JavaScript untuk memberikan grafik 2D dan 3D. Pengetahuan Tiga.js, perpustakaan JavaScript yang popular untuk mewujudkan grafik 3D, juga bermanfaat. Di samping itu, anda harus mempunyai alat dengar VR untuk menguji pengalaman VR anda. digunakan untuk mencipta pengalaman VR. Tiga.js memudahkan proses bekerja dengan WebGL, sementara A-Frame membolehkan anda membina adegan VR menggunakan sintaks seperti HTML. Anda boleh membuat objek 3D, menambah tekstur dan pencahayaan, dan mengawal pergerakan kamera menggunakan alat ini. Ini memberikan sokongan untuk pelbagai peranti realiti maya, seperti Oculus Rift, HTC Vive, dan Google Cardboard, dalam pelayar web. Ia membolehkan pemaju membuat pengalaman VR yang mendalam di web yang boleh diakses oleh sesiapa sahaja dengan peranti VR dan penyemak imbas yang serasi. 🎜> JavaScript adalah bahasa utama untuk pembangunan web, termasuk VR. Walau bagaimanapun, anda boleh menggunakan bahasa yang disusun kepada JavaScript, seperti TypeScript atau Coffeescript. Di samping itu, WebAssembly membolehkan anda menjalankan kod yang ditulis dalam bahasa seperti C pada kelajuan berhampiran asli dalam penyemak imbas. Web melibatkan mengurangkan latensi, menguruskan memori dengan cekap, dan mengoptimumkan rendering. Anda boleh menggunakan teknik seperti pemuatan asynchronous, mampatan tekstur, dan tahap terperinci (LOD) untuk meningkatkan prestasi. Juga, pertimbangkan batasan perkakasan dan keadaan rangkaian pengguna.

Bagaimana saya boleh membuat pengalaman VR saya dapat diakses oleh pengguna tanpa peranti VR? Sebagai contoh, anda boleh menggunakan API DeviceOrientation untuk membolehkan pengguna meneroka adegan VR dengan menggerakkan peranti mudah alih mereka. Anda juga boleh memberikan pandangan 360 darjah bahawa pengguna boleh menavigasi dengan tetikus atau sentuhan mereka. Headset VR. Jika anda tidak mempunyai alat dengar, anda boleh menggunakan pelanjutan emulator WebVR untuk Chrome dan Firefox. Alat ini menyerupai API WebVR dan memberikan pandangan 3D adegan VR. Dalam tiga.js untuk mengeksport model 3D anda dalam format yang boleh dibaca oleh A-Frame. GLTF (format penghantaran GL) adalah format fail standard untuk adegan dan model 3D.

Apakah beberapa cabaran yang mungkin saya hadapi ketika membina VR di web? Di samping itu, mewujudkan grafik 3D yang realistik dan animasi boleh menjadi kompleks. Dokumentasi WebVR Mozilla adalah titik permulaan yang hebat. Anda juga boleh menyemak tutorial dan contoh di laman web Three.js dan A-Frame. Di samping itu, terdapat banyak komuniti dalam talian di mana anda boleh bertanya dan berkongsi kerja anda.

Atas ialah kandungan terperinci Cara Membina VR di Web Hari Ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!