Virtual Reality Berbasis Website (VRVIEW) Menggunakan API Google

Jujur sebenernya gue gatau ini api atau apa bahasanya, tapi yang jelas aplikasi vrview google ini bisa nge embed gambar panorama dijadiin aplikasi kaya google street gini loh yang bisa di geser geser


kaya google street khann, yaiyalah wong ini emang dari google :p btw kalo dibuka lewat android/ipon itu bisa di tilt lho untuk gesernya.
. nah kita sebut saja API VRVIEW ya biar gampang, gue jelasin step stepnya untuk bisa embed gambar apapun yang lu mau dijadikan 360 view

1. Fork API Google VRVIEW di github
2. upload gambar apapun yang lo mau
3. selesai, tinggal embed via Iframe

API Google VRVIEW

singkat cerita api ini dibikin oleh google, dan api nya ini dibikin cuma pakai JS tjuy so pastinya dibanding plugin third party kaya WebGL, ini lebih ringan sih (sotoi bgt). karna api ini dibuat pakai JS jadi ndak perlu server sprt apache, nginx buat ngecompile. dan penggunaan api ini juga cukup simpel, tinggal taro api nya di local/hosting anda dan upload image yang mau dijadiin kaya google street, terus tinggal dipanggil aja via url. dalam kasus ini gue hosting api nya di github, jadi nanti gambar gambar yang mau di embed pun bakalan gue upload di github.

Step 1 Hosting API di github

2017 developer gatau github ? kayak dokter yang gatau sama jarum suntik, kayanya minimum requirement untuk bisa kerja sebagai developer apapun itu butuh pengetahuan tentang version control (git,scm)so harusnya ini harga mati brur untuk dipahami sbg dev, tapi github disini gak berfungsi sebagai version control, lebih kaya tempat hosting aja sich. langsung aja fork api nya dari repositori google https://github.com/googlevr/vrview 

yaelah harusnya ini gua gausah ngejelasin cara fork elah!

Jadi Fork ini kaya duplikat semua file, branch pada suatu repositori dan mentransfer isinya ke repositori milik kalian singkatnya gitu CMIIW.

Step 2 Upload Gambar Ke Repositori GITHUB

kalo udah di fork, langsung aja menuju ke repositori akun kalian dan lihat isi API nya dari yang kalian barusan fork.

Disini ada banyak folder dan file yang gausah kita utak atik karna emang ini udah dijadiin kaya framework yak ._. yang perlu diperhatiin disini itu adalah branching (sumpah gua gamau jelasin detail apa itu branching). 

singkat cerita Github itu punya fitur yang namanya static pages. kita bisa bikin static pages di setiap repositori yang kita bikin dengan membuat branch dengan nama "gh-pages", nah semua repositori yang ada branch gh-pages itu bisa diakses sebagai halaman HTML, jadi bukan sebagai file raw, di akses sebagai HTML!!!

contoh nih, gua punya repositori bernama "clean-bootstrap" yang isinya template sampahan yg gua buat untuk belajar, nah disitu gua bikin branch bernama "gh-pages" supaya bisa diakses sebagai html, nih silahkan visit: https://squalvj.github.io/clean-bootstrap . nah index.html nya ini gue hosting di github pada branch "gh-pages" makanya bisa diakses.
disini gua jelasin pattern static pages url github, yaitu

https://<nama_akun_github>.github.io/<nama_repository> 

biar gua gak ngebahas kemana mana, gua anggep udah ngerti static pages nya github, lanjut kita upload gambar, disitu ada folder images yang gunanya buat nampung file image untuk nanti bisa di embed dimana saja (iframe), sebelum upload file gambar, pastiin dulu kalian upload gambar di branch "gh-pages" ya karna kalo tidak, nanti gabisa diakses static pagesnya. silahkan pastiin dulu samain kaya gambar dibawah ini

pastiin gh-pagesnya yang ke checklist dipilihan branch di kiri atas brur.
kalo udah silahkan upload image nya ke dalam folder image, gatau juga caranya ? *astaghfirulloh.
masuk ke folder image > create new file > upload dah image yang mau lu upload
nih gua kasih contoh gambar panorama nya ya kek gini

Step 3 Akses URL Api nya

contoh lu udah ngupload gambar bernama "pemandangan.jpg" 

nah karna branch gh-pages udah dibuat dan repositori ini bisa diakses sebagai html maka api ini udah bisa jalan brur, monggo diakses via url sebagai format kaya gini nih 

https://<nama_akun_github>.github.io/<nama_repository>/?image/<nama_gambar_buat_dijadiin_vrview>

sebagai contoh ya gua pake akun github gua ya

https://squalvj.github.io/vrview/?image=images/pemandangan.jpg

nih iframe dibawah yang manggil gambar yang udah berhasil kita upload tadi

kalian bisa mengupload gambar sebanyak yang kalian mau asal gak ngelebihi 1gb karna github hanya memperbolehkan setiap repositori free user hanya sebesar 1gb, tinggal ganti aja parameter "image" nya pada url sesuai dengan nama gambarnya, mudah kan.
Ini berguna buat mahasiswa yang ambil tugas akhir judul tentang virtual reality berbasis web nihh, semoga bermanfaat. Support me dengan mengetikan angka 5 dikomentar dan lihat apa yg terjadi ?! :D

credit: Patrick Catanzariti, Google vrview