Persiapan dengan WebVR

WebVR adalah API Javascript untuk membuat pengalaman realitas virtual 3D di browser. Ini membutuhkan latensi rendah, frame rate tinggi dan kinerja luar biasa. Tujuannya adalah untuk memudahkan siapa pun untuk masuk ke pengalaman VR dengan menurunkan hambatan untuk masuk.

WebGL memungkinkan pengembang untuk membuat pengalaman berkualitas kaya yang kaya yang membuat secara real time pada perangkat seluler dan browser desktop (pastikan Anda mendapatkan hosting web. hak untuk kemampuan optimal). Hampir browser universal dan dukungan perangkat menjadikannya pendekatan yang sempurna untuk pengembang web yang ingin membuat pengalaman VR yang luar biasa. Di sini, kami menunjukkan kepada Anda cara memulai dengan WebVR. Di bagian bawah artikel ini, Anda akan menemukan beberapa sumber daya yang bermanfaat untuk memajukan pengetahuan Anda.

Dalam tutorial kami, kami akan menggunakan WebVR dalam kombinasi dengan tiga.js. - opsi masuk banyak Alat Desain Web. Tersedia untuk 3D dan VR di web. Ini gratis dan terbuka, ringan, dan situs web pemenang penghargaan yang tak terhitung jumlahnya menggunakannya. Selain memiliki latar belakang JavaScript, Anda dapat menyelam ke tutorial ini tanpa pengetahuan sebelumnya dan membuat pengalaman WebVR pertama Anda. Tujuan dari tutorial ini adalah untuk membantu Anda memulai dan menginspirasi Anda untuk terus mengeksplorasi teknologi yang sangat menarik ini. Ingin sesuatu yang lebih sederhana? Coba A. Pembangun Situs Web .

• Unduh file untuk tutorial ini dari filesilo

01. Aktifkan Bendera WebVR di Chrome

WebVR masih merupakan teknologi eksperimental dan mengharuskan HTTPS untuk dijalankan di server Anda. Itu tidak akan berjalan di perangkat seluler tanpa a polyfill.github.com/immersive-web/webvr-polyfill. . Namun, Anda dapat menjalankan konten secara lokal di Chrome untuk pengujian dan bangunan. Pastikan untuk mengaktifkan bendera Chrome WebVR. Tipe Chrome: // Flags / Enable-WebVR Ke browser URL Anda, dan kemudian klik Aktifkan untuk mengaktifkannya. Anda mungkin perlu me-restart Chrome juga.

02. Instal plugin emulasi API WebVR

Untuk menguji secara lokal di desktop Anda dan menghindari kebutuhan akan perangkat, ada plugin hebat yang dapat Anda gunakan pada Chrome by ClickTorelease. Plugin akan meniru a Vr headset. untuk Anda dan izinkan Anda untuk bergerak dan memutar headset secara virtual ( dapatkan disini ).

03. Buka Toolbar Perangkat di Alat Pengembang

Untuk meniru perangkat seluler atau headset, berfungsi dengan baik untuk menggunakan emulasi perangkat di alat krom. Buka alat pengembang di Chrome, dan beralih pada bilah alat perangkat untuk melihat tampilan seluler, putar ke lansekap dan pilih emulasi telepon favorit.

04. Buat file HTML dasar

Selanjutnya, Anda perlu mengatur file HTML dasar. Anda dapat mengatur file CSS dan JavaScript eksternal atau memasukkan inline untuk kesederhanaan. Kelas renderer three.js akan membuat a & lt; kanvas & gt; elemen untuk Anda. Tambahkan kode berikut ke index.html mengajukan:

 & lt; html lang = "en" & gt;
& lt; head & gt;
& lt; judul & gt; Demo WebVR & lt; / judul & gt;
& lt; meta charset = "UTF-8" & gt;
& lt; meta name = "viewport" konten =
"Lebar = lebar perangkat, skala awal =
1.0, Scalable Pengguna = Tidak "& gt;
& lt; gaya & gt;
html, body {margin: 0; Padding: 0;
Overflow: Tersembunyi; }
& lt; / style & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; script & gt;
// kode akan pergi ke sini
& lt; / skrip & gt;
& lt; / body & gt; 

05. Sertakan kelas tiga.js

Sertakan tautan ke pustaka threen.js di kepala file Anda - baik di-host secara eksternal, atau unduh dari repositori Tiga.js. Anda juga akan memerlukan kelas WebVR baru dan kelas BoxlineGeometry untuk tutorial ini. Anda dapat menemukan kelas perpustakaan dan pendukung sini . Catatan: Kode dalam tutorial ini telah diuji pada rilis terbaru three.js v99.

 & lt; script src = "libs / threen.min.js" & gt; & lt; / script & gt;
& lt; script src = "libs / webvr.js" & gt; & lt; / script & gt;
& lt; script src = "libs / boxlinegeometry.js" & gt;
& lt; / script & gt; 

06. Tambahkan variabel global

Antara tag script untuk kode, tambahkan variabel global berikut untuk mengakses kamera, adegan, render, objek, dan raycaster secara global. Juga tambahkan A. MEMUKUL Variabel untuk melacak objek yang berpotongan dengan tatapan kamera. Ini akan menunjukkan bagaimana mengetahui apa yang dilihat pengguna di VR.

 var clock = baru tiga.clock ();
var wadah, kamera, adegan, renderer, kamar,
Crosshair, hit;
objek var = []; // koleksi objek
var num = 100; // jumlah objek
var raycaster = baru tiga.raycaster (); 

07. Buat adegan 3D

Anda akan menambahkan adegan 3D dasar, yang akan menjadi wadah untuk objek Anda. Adegan adalah panggung yang akan membuat dengan kamera. Semua presentasi 3D akan memiliki adegan atau tahap dari beberapa bentuk. Apa yang ada di tahap itu dan mengingat kamera adalah apa yang akan dilihat pengguna. Tambahkan kode berikut untuk menambahkan adegan:

 // Buat objek adegan
var adegan = baru tiga.Scene (); 

08. Tambahkan kamera perspektif

Selanjutnya, Anda perlu menambahkan kamera. Anda akan menggunakan kamera perspektif, dimaksudkan untuk adegan 3D. Atribut pertama adalah bidang tampilan kamera. Yang kedua adalah rasio aspek ( lebar tinggi ). Kemudian Anda dapat menunjukkan bidang kliping di dekat dan jarak pesawat kliping jauh, yang mendefinisikan apa yang harus dilihat oleh kamera.

 // Buat Kamera
Kamera = Tiga Baru. PUTPEPTIVECAMERA
(70, window.innerwidth / window.innerHeight,
0,1, 1000);
adegan.add (kamera); 

09. Tambahkan elemen renderer dan kanvas

Renderer menangani gambar benda-benda di tempat kejadian Anda yang terlihat oleh kamera. Setel properti antialias menjadi benar untuk mendapatkan tepi yang halus pada objek. Renderer menciptakan a domelement. , yang sebenarnya adalah html & lt; kanvas & gt; elemen. Anda kemudian dapat menambahkan ke dalam tubuh. Perhatikan penggunaan bendera renderer yang diaktifkan VR baru.

 Renderer = New Three.webgrenderer (
{antialias: true});
renderer.setpixelratio (jendela.
deviceepixelratio);
renderer.Setsize (window.innerwidth, jendela.
innerHeight);
renderer.vr.Enabled = Benar;
dokumen.body.appendchild (Renderer.
domelement); 

10. Tambahkan Crosshair Camera

Untuk membantu pengguna mengarahkan ke titik fokus kamera, itu adalah praktik yang baik untuk menambahkan crosshair atau menargetkan ikon di depan kamera. Anda dapat menambahkannya langsung ke objek kamera sehingga selalu di mana seharusnya.

 Crosshair = Tiga Baru. (
Baru tiga.RingBufferGeometry (0,02, 0,04, 32),
baru tiga.meshbasicmaterial ({
Warna: 0xffffff,
Opacity: 0,5,
Transparan: Benar
})
);
crosshair.position.z = - 2;
camera.add (crosshair); 

11. Buat objek ruang VR (opsional)

Selanjutnya, buat objek ruang sederhana. Ini bagus untuk memberi pengguna rasa orientasi di dunia VR. Ini menciptakan kotak kamar sederhana dengan garis-garis untuk menunjukkan dinding, lantai dan langit-langit.

 Room = New Three.Linesegments (
Baru tiga.boxlinegeometry (6, 6, 6, 10, 10, 10),
New Three.LocalBasicmaterial ({Warna:
0x808080})));
room.position.y = 2;
adegan.add (kamar); 

12. Tambahkan lampu ke tempat kejadian

Untuk menyalakan adegan, kami akan menggunakan lampu belahan sederhana dan cahaya terarah. Ini akan memberikan visibilitas ambient yang bagus dan naungan realistis dari sumber cahaya yang seragam juga.

 Scene.Add (New Three.Hemispherelight
(0x806060, 0x404040));
var light = baru tiga.directionGight
(0xffffff);
Light.Position.Set (1, 1, 1) .Normalkan ();
adegan.add (cahaya); 

13. Buat beberapa objek

Anda akan mengisi ruangan dengan objek selanjutnya. Oleskan secara acak di sekitar ruangan. Anda juga akan mengatur rotasi dan skala secara acak untuk variasi. Anda dapat menambahkan sedikit lebih banyak kode di langkah berikutnya, di mana dikatakan Buat atribut orbit untuk mengaktifkan beberapa jalur orbit khusus.

 var geometry = New Three.boxBufferGeometry
(0,15, 0,15, 0,15);
untuk (i = 0; i & lt; = num; i ++) {
var material = baru tiga.meshlambertmaterial
({color: math.random () * 0xffffff});
objek var = baru tiga.mesh
(geometri, bahan);
objek.position.set (math.random () * 4.0
- 2.0, Math.Random () * 4.0 - 2.0, Matematika.
Acak () * 4.0 - 2.0);
objek.scale.set (math.random () +. 5, matematika.
acak () +. 5, Math.Random () +. 5);
objek.rotation.set (math.random () * 2 *
Math.pi, math.random () * 2 * math.pi, matematika.
acak () * 2 * math.pi);
// buat atribut orbit} 

14. Tambahkan atribut orbit ke objek

Untuk mengaktifkan gerakan mengorbit acak yang bagus, dan untuk menjaga objek dari 'melarikan diri dari ruangan' kami akan menetapkan beberapa data sudut awal (dalam Radians) dan jarak. Ini memungkinkan cara sederhana untuk menghidupkan objek dalam loop render setelah.

// Buat atribut orbit
// calc jarak sebagai konstan dan ditugaskan untuk
obyek
var a = baru tiga.vector3 (0, 0, 0);
var b = objek.posisi;
var d = a.distanceto (b);
objek.distance = d;
Object.radians = math.random () * 360 * matematika.
PI / 180; // sudut awal
objek.radians2 = math.random () * 360 * matematika.
PI / 180; // sudut awal
objek.radians3 = math.random () * 360 * matematika.
PI / 180; // sudut awal
room.add (objek);
objek.push (objek); 

15. Tambahkan ubah ukuran jendela

Saat kami menguji aplikasi webvr kami, kami akan mengubah ukuran layar, memindahkannya, dan sebagainya. Adalah ide yang baik untuk memiliki pawang yang menyesuaikan dimensi area render dan memperbarui hal-hal untuk membuatnya mengisi layar dengan benar dan terlihat bagus.

 window.addeventlistener ('Ubah Ukuran',
onwindowresize, false);
Fungsi OnWindowResize () {
camera.aspect = window.innerwidth / window.
Innerheight;
camera.updateProjedMatrix ();
renderer.setsize (window.innerwidth,
window.innerheight);
} 

16. Buat tombol WebVR

Kelas webvr baru three.js menyertakan tombol WebVR, yang menangani masuk dan keluar dari mode VR untuk kami. Ini juga menangani jika perangkat tidak mendukung mode VR. Anda dapat memasukkannya dengan kode sederhana ini:

 // three.js tombol WebVR untuk masuk /
Keluar dari mode VR.
document.body.appendchild (webvr.createbutton.
(Renderer)); 

17. Mulai loop animasi VR

Biasanya, Anda akan menggunakan PermintaanMasiFrame. Untuk menangani render loop, tetapi dalam VR Anda harus menggunakan loop handler yang berbeda untuk memastikan semuanya siap untuk dirender dan Anda menghindari masalah latensi dan memberikan masalah. Sebaliknya, gunakan yang baru setanimationloop. dan meneruskan fungsi render Anda.

 // Mulai vr animation loop
renderer.setanimationloop (render); 

18. Buat fungsi render

Selanjutnya, buat fungsi render. Jika Anda tidak ingin menghidupkan objek atau tes Anda untuk kamera / crosshair berpotongan dengan objek, Anda bisa menggunakan kode berikut:

 Fungsi Render () {
// cari persimpangan
// Animasi objek
// render adegan
renderer.render (adegan, kamera);
} 

19. Tes untuk persimpangan

Untuk mengaktifkan pengujian objek berpotongan ray ditelusuri dari kamera ke dalam ruang Z, tambahkan kode berikut ke loop render Anda di mana Anda berkomentar di langkah terakhir:

 Raycaster.SetfromCamera ({x: 0, Y: 0},
kamera);
var intersects = raycaster.intersectObjects
(room.children);
if (intersects.length & gt; 0) {
Jika (hit! = berpotongan 
 .Object) {
if (hit) {hit.material.emissive.
Sethex (hit.curenthex); }
Hit = berpotongan 
 .Object;
Hit.curententex = hit.bahan.emissive.
gethex ();
Hit.material.emissive.sethex (0x00ff00);
}
} lain {
if (hit) {hit.material.emissive.sethex
(Hit.curenthex); }
Hit = tidak terdefinisi;
} 

20. Menghidupkan objek di sepanjang orbit

Selanjutnya, Anda dapat menghidupkan objek Anda di sepanjang jalur orbit mereka menggunakan kode ini:

 Untuk (i = 0; i & lt; = num; i ++) {
var o = objek [i];
oRotation.y + =. 01;
If (i% 2 == 0) {
o.radian + =. 004;
oRadians2 + =. 005;
o.radians3 + =. 008;
} lain {
o.radians - =. 006;
oRadians2 - =. 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. Render adegan WebVR

Akhirnya, Anda dapat membuat adegan Anda menggunakan fungsi render yang biasa. Jika Anda belum menambahkan baris ini, lakukan sekarang. Setelah Anda menambahkan ini, Anda dapat mengujinya semuanya dan akan melihat rendering adegan WebVR di browser Anda. Anda juga dapat memeriksanya di perangkat seluler atau headset VR Anda.

 // render adegan
renderer.render (adegan, kamera); 

Sumber Daya WebVR.

Memulai WebVR dapat berlebihan. Kami telah mengumpulkan beberapa contoh situs menggunakan WebVR dan sumber daya untuk membantu Anda bergulir.

Sketchfab.
Anda mungkin sudah tahu situs ini karena galeri asetnya yang luar biasa, tetapi juga memiliki mode WebVR yang memungkinkan Anda menavigasi dalam VR.

Sebuah bingkai
Ini adalah kerangka kerja rock-solid untuk AR dan VR. Ini menangani rasa sakit dari fallbacks dan dukungan perangkat untuk Anda, termasuk memungkinkan Anda untuk membuat di browser Anda untuk pengujian. Bahkan mengabaikan penciptaan objek 3D umum.

Tiga.js.
Perpustakaan ini memiliki banyak Contohnya Dengan kode sumber untuk membantu Anda untuk pergi dengan WebVR. Ini adalah titik awal yang sempurna.

WebVR.
Karena WebVR adalah teknologi yang muncul, itu adalah ide yang baik untuk mengikuti perkembangan terbaru. Anda perlu tahu perangkat mana yang didukung dan dalam kondisi apa. Situs ini akan membantu Anda tetap up to date. Ada Halaman yang didedikasikan untuk contoh , juga.

Dan selalu membantu memiliki hak penyimpanan awan , juga.

Artikel ini awalnya diterbitkan dalam edisi 283 dari Majalah Desain Web Kreatif Desainer web . Beli Masalah 283. atau langganan .

Baca lebih lajut:

• 7 Bonkers VR Tren menuju jalan Anda
• Mulailah dengan Redux Thunk
• 11 tren web panas sekarang