Bagaimana untuk berbagi foto-foto Panorama 360 dengan WebVR dan A-Frame

() translation by (you can also view the original English article)

Dalam beberapa kali kami telah melihat lonjakan popularitas dan kemampuan teknis virtual reality. Biasanya, ketika kita berpikir VR kita berpikir perangkat lunak desktop game dan berdedikasi. Namun hal ini tidak hanya ruang di mana realitas virtual tumbuh.

Melalui kekuatan WebGL yang semakin kuat, realitas virtual kini juga masuk ke dalam browser dalam bentuk WebVR, dan bersamaan dengan itu muncul cara-cara baru untuk berbagi fotografi dengan cara yang lebih imersif.

Dengan foto dalam format yang tepat dan perangkat VR seperti Google kardus, HTC Vive atau sejenisnya, seseorang dapat dibuat untuk merasa mereka sedang berdiri di tempat yang tepat kamera pada waktu foto itu diambil, dengan kemampuan untuk melihat seluruh lingkungan , mengintip ke dalam kedalaman ruang 3D simulasi.

Dan bahkan tanpa perangkat VR, orang yang menjelajahi web masih dapat menggeser seluruh gambar panorama bola menggunakan mouse, juga pengalaman yang meningkatkan pengalaman.

Membuat Panorama 360 Anda Sendiri

Dalam tutorial ini kami akan menyiapkan panorama 360 derajat bertenaga WebVR dalam tiga cara berbeda, menggunakan alat yang bertujuan untuk membuat WebVR dapat diakses dan langsung ke depan untuk menggunakan:

Untuk melihat apa yang kita sedang bekerja menuju, memeriksa demo dari masing-masing alat di atas, menampilkan jenis gambar 360 kami akan membuat:

Cara untuk melihat gambar-gambar 360

Ada dua cara panorama 360 derajat yang dapat berinteraksi dengan dan melihat.

VR stereoskopis

Ketika orang melihat WebVR 360 derajat foto melalui perangkat VR yang sesuai, seperti Google karton atau HTC Vive, misalnya, gambar akan dibagi menjadi dua gambar dan diproses sedemikian rupa bahwa headset dapat menggunakannya untuk menghasilkan ilusi kedalaman.

Dalam hal ini orang terlihat di sekitar adegan hanya dengan mengubah di tempat dan tampak naik dan turun. Perangkat accelerometer akan memperbarui tampilan gambar untuk melacak dengan arah pengguna mencari.

Klik & Drag (mundur)

Ketika orang melihat melalui perangkat yang tidak mampu VR gambar 360 derajat akan jatuh kembali untuk menampilkan sebagai sebuah file citra yang dapat menyorot di sekitar dengan mengeklik dan menyeret.

Dukungan browser

WebVR masih agak kurang sehingga beberapa aspek tidak didukung secara luas. Namun: panorama 360 derajat hanya memerlukan sebagian kecil kemampuan WebVR sehingga dukungan untuk setidaknya tingkat tampilan mundur sebenarnya cukup luas.

Desktop Browser

Selama sebagai browser yang mendukung WebGL penampil akan melihat "klik dan seret" mundur untuk foto 360. WebGL kini berfungsi penuh di semua browser utama.

Untuk memeriksa jika browser yang Anda gunakan mendukung WebGL kunjungi get.webgl.org. Jika Anda melihat sebuah kubus berputar WebGL adalah berdiri dan berjalan.

Telepon berbasis VR

Beberapa telepon mendukung WebVR ketika dikombinasikan dengan headset seperti Google Cardboard atau Daydream. Mengingat dorongan Google baru-baru ini di WebVR, tidak mengherankan bahwa versi iOS dan Android dari Chrome mendukung WebVR di luar kotak.

Jika Anda memiliki headset Samsung Gear VR di sisi lain, Anda harus menggunakan browser milik Samsung sendiri.

Kepala penuh Mount Display

Cara untuk pergi tentang mendapatkan setup untuk melihat WebVR melalui desktop penuh bertenaga kepala dipasang layar akan tergantung pada unit tersebut.

Untuk Oculus Rift atau HTC Vive/SteamVR Anda dapat menggunakan build eksperimental Chromium atau Firefox Nightly. Chromium WebVR build hanya tersedia untuk Windows, sementara Firefox Nightly juga tersedia untuk MacOS dan Linux.

Saat ini Oculus keretakan hanya mendukung Windows dengan tidak melaporkan rencana untuk lintas platform mendukung browser begitu baik sangat cocok. Namun cross platform dukungan untuk HTC wakil / SteamVR dilaporkan datang segera jadi jika Anda memiliki perangkat ini dan berpikir Anda dapat memilih untuk membuat Anda panorama MacOS atau Linux pada waktu Anda mungkin ingin memilih Firefox malam sebagai peramban pengujian utama sekarang.

Untuk petunjuk lengkap di mendirikan salah satu browser ini untuk WebVR kunjungi: https://mozvr.com/

Firefighters battle forest fire in desert conditions — Bert api, 2016. Petugas pemadam kebakaran membersihkan daerah pada akhir api. Williams Ranger District, Utara Taman, AZ. 6-21-16. Foto oleh Dyan tulang. Kredit Dinas Kehutanan Amerika, Southweste rn Region, Kaibab National Forest. CC OLEH SA.

Persiapan

Hal pertama yang Anda perlukan adalah foto dalam format yang cocok untuk panorama WebVR, yang dapat Anda lihat secara bergantian disebut sebagai foto 360 °, bulat atau equirectangular. Anda dapat mengambil sendiri dengan:

Menggunakan kamera 360 derajat.
Menggunakan sebuah aplikasi yang memungkinkan kamera telepon Anda untuk membuat gambar bulat.
Jahitan beberapa gambar, bersama dengan menggunakan perangkat lunak setelah fakta.

Kami memiliki beberapa besar artikel yang meliputi beberapa teknik yang dapat Anda gunakan:

Atau Anda dapat sumber yAnda gambar via Flickr. Kita akan menggunakan gambar dari hutan Nasional Kaibab untuk tutorial ini.

Buat sebuah direktori untuk rumah Panorama Anda akan menciptakan, download file di atas ke dalamnya, kemudian mengubah nama gambar untuk "fire.jpg".

Jika Anda berencana untuk melihat panorama Anda dalam penuh WebVR bukan hanya sebagai klik dan seret gambar dalam desktop browser, Anda mungkin ingin men-download versi "Ukuran asli" di 10240 x 5120 untuk maksimum kesetiaan visual. Menyadari, bagaimanapun, pengguna dapat melihat layar putih kosong sementara Load gambar besar ini, tergantung pada koneksi internet mereka. Jika ini akan berpotensi menjadi masalah memilih salah satu ukuran yang lebih kecil.

NB: nanti jika Anda melihat sebuah lubang hitam di bagian bawah Panorama Anda membuat dengan gambar ini berarti file tidak lengkap dan Anda akan perlu men-download ulang.

Remote melihat pratinjau

Jika Anda ingin menguji panorama pada perangkat jarak jauh / sekunder, seperti pada ponsel berkemampuan Cardboard, Anda juga akan menginginkan cara untuk melihat file Anda melalui jaringan lokal Anda. Namun Anda dapat melakukan hal ini, tetapi dua opsi yang mungkin ingin Anda gunakan adalah:

HTML dasar

Setiap contoh akan duduk di halaman web sendiri sehingga Anda hanya perlu sebuah dokumen HTML yang sangat dasar untuk memulai dengan setiap contoh:

<!DOCTYPE html>
<html>
  <head>
    <title>360 Panorama Photos</title>
  </head>
  <body>

  </body>
</html>

Dalam direktori proyek Anda membuat tiga file HTML:

webvrstarterkit.html
aframe.html
gurivr.html

Kemudian paste kode starter ke setiap file, perubahan konten<title>...</title>Tag jika Anda inginkan.

WebVR Starter Kit 360 gambar

Jika Anda sedang menciptakan WebVR panorama dari awal itu akan cukup kompleks, memerlukan pengkodean yang cukup luas. Namun dengan sangat baik kerangka seperti WebVR Starter Kit proses direbus ke dua langkah.

Semua pengalaman VR Anda dapat membuat dengan WebVR Starter Kit yang didukung oleh satu file JavaScript. Jadi untuk memulai Anda hanya perlu memuat file JS ke<head>...</head>Bagian file "webvrstarterkit.html" oleh paste di potongan berikut:

1	<script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"></script>

Jika Anda lebih suka untuk tidak memuat JS file dari sumber eksternal, Anda dapat mengunduh proyek WebVR dari repositori di https://github.com/povdocs/webvr-starter-kit. Anda akan menemukan file "vr.js" di dalam direktori "build".

Dengan WebVR JavaScript load halaman ini sekarang siap untuk memiliki unsur-unsur VR yang ditambahkan ke dalamnya. Untuk membuat 360 derajat panorama sisipkan kode berikut di bagian<body>...</body>:

1	<script type="text/javascript">
2	VR.panorama('fire.jpg');
3	</script>

Dan itu dia! Panorama 360 derajat Anda sekarang siap digunakan.

Perhatikan bahwa nilai di antara tanda kurung adalah jalur ke gambar equirectangular kami. Ini juga dapat diatur untuk memuat gambar eksternal dengan memasukkan URL sebagai gantinya.

Ketika Anda melihat pratinjau file "webvrstarterkit.html" Anda sekarang seharusnya terlihat seperti ini: https://tutsplus.github.io/VR_Panoramas/webvrstarterkit.html

Gambar bingkai 360

Bingkai adalah kerangka WebVR yang berbeda, tapi alat untuk menciptakan 360 panorama sangat mirip dengan apa yang Anda menyelesaikan di atas. Seperti dengan WebVR Starter Kit, bingkai ini didukung oleh satu file JavaScript. Memuat file ke<head>...</head>Bagian file "aframe.html" dengan kode ini:

1	<script src="//aframe.io/releases/0.4.0/aframe.min.js"></script>

Jika Anda lebih suka untuk tidak memuat JS file dari sumber eksternal, Anda dapat mengunduh repositori Aframe dari https://github.com/aframevr/aframe/. Dari folder "dist", Anda harus menggunakan the minified versi script untuk versi saat ini dari proyek, misalnya "aframe-v0.4.0.min.js".

Daripada menggunakan tag script yang di dalam tubuh halaman, bingkai menggunakan elemen HTML kustom sendiri. Elemen pertama yang akan ditambahkan adalah selalu <a-scene>untuk menciptakan konteks untuk unsur-unsur VR disisipkan.

<a-sky>Elemen digunakan untuk mensimulasikan langit dalam skenario tertentu, tetapi ia melakukannya dengan sekitar penampil dengan gambar bulat, yang membuatnya sempurna untuk panorama 360.

Maka untuk menambahkan gambar 360 derajat Anda memasukkan kode berikut dalam bagian<body>...</body>:

1	<a-scene>
2	<a-sky src="fire.jpg"></a-sky>
3	</a-scene>

Hasil Anda akan terlihat seperti ini: https://tutsplus.github.io/VR_Panoramas/aframe.html

Gambar GuriVR 360

Di bawah kap, GuriVR sebenarnya adalah perpustakaan A-Frame. Apa yang ingin dilakukan adalah memberikan cara langsung yang intuitif untuk mengatur pengalaman VR melalui antarmuka editor.

Menggunakan GuriVR kepala ke: https://gurivr.com/stories/create

Dalam antarmuka pengeditan, Anda cukup memasukkan kata panorama diikuti dengan URL ke gambar bulat dan GuriVR akan mengurus sisanya untuk Anda.

Setelah Anda telah melakukan hal itu, klik "Save" di bagian bawah layar, kemudian klik tombol "Berbagi Link" dan Anda akan diberikan sebuah link yang dapat Anda berikan kepada orang lain untuk menunjukkan off gambar panorama.

Atau, Anda dapat menanamkan panorama ke sebuah halaman web yang menggunakan elemen iframe. Memperbarui file "gurivr.html" dengan kode berikut, pastikan untuk menambahkan Anda sendiri URL GuriVR ke dalam iframe's src atribut:

<!DOCTYPE html>
<html>
  <head>
    <title> GuriVR 360 Image Demo</title>
    <style>
      html {height:100%}
      body {height:100%; margin:0}
      iframe {height:100%; width:100%; border:0}
    </style>
  </head>
  <body>
    <iframe src="https://s3.amazonaws.com/gurivr/s/5878958fc01dc09b02494b46.html" frameborder="none"></iframe>
  </body>
</html>

Ketika Anda sudah selesai di atas, Anda harus mendapatkan panorama 360 seperti ini:

https://tutsplus.GitHub.io/VR_Panoramas/gurivr.html

Membungkus

Anda sekarang memiliki tiga cara yang berbeda untuk menciptakan panorama berbasis WebVR dan memungkinkan orang untuk berhubungan dengan fotografi Anda dalam cara baru. Mari kita cepat rekap apa yang kita bahas:

WebVR Starter Kit - load file JS kerangka, menambahkan script tag, kemudian di dalamnya menggunakan VR.panorama() untuk membuat gambar Anda 360.
Aframe - load file JS kerangka, tambahkan <a-scene>elemen, maka dalam hal ini menggunakan <a-sky>untuk membuat gambar Anda 360.
GuriVR - kepala ke web berbasis editor, menambahkan kata panorama maka URL foto Anda untuk membuat gambar Anda 360. Opsional menanamkan URL yang diberikan ke dalam laman web melalui iframe.

Sekarang setelah Anda melihat seberapa cepat Anda dapat membuat pengalaman WebVR dari photo sphere, saya harap Anda terinspirasi untuk keluar dan menjepret dunia dalam tiga dimensi!