WebVR dan Revolusi Komputasi Tepi Peramban

Gelombang teknologi besar telah tiba - Virtual Reality (VR). Apa pun yang Anda rasakan saat pertama kali memegang smartphone, pengalaman VR untuk pertama kalinya memberikan pengalaman emosional yang lebih substansial dalam setiap aspek komputasi. Sudah 12 tahun sejak iPhone pertama. Sebagai sebuah konsep, VR telah ada lebih lama lagi, tetapi teknologi yang dibutuhkan untuk membawa VR ke pengguna rata-rata tidak tersedia hingga saat ini.

Oculus Quest adalah platform game konsumen Facebook untuk VR. Fitur utamanya adalah tidak memerlukan PC. Ini memberikan pengalaman VR seluler nirkabel. Anda dapat memberikan headset VR kepada seseorang di kedai kopi untuk berbagi model 3D dengan kecanggungan yang hampir sama dengan mencari sesuatu dalam percakapan di Google, namun hasil dari pengalaman bersama jauh lebih menarik.

VR akan mengubah cara kita bekerja, berbelanja, menikmati konten, dan banyak lagi.

Dalam seri ini, kita akan mengeksplorasi teknologi browser saat ini yang memungkinkan WebVR dan komputasi tepi browser. Posting pertama ini menyoroti teknologi dan arsitektur untuk simulasi kami.

Dalam artikel berikut, kami akan menyoroti beberapa tantangan dan peluang unik dalam kode. Untuk menjelajahi teknologi ini, saya membuat demo Canvas dan WebVR dan memublikasikan kode di GitHub.

Apa Arti VR untuk UX

Sebagai Pengembang Toptal, saya membantu bisnis mendapatkan proyek dari ide hingga uji beta dengan pengguna. Jadi bagaimana VR relevan dengan aplikasi web bisnis?

Konten hiburan akan memimpin penggunaan Virtual Reality (seperti yang terjadi di ponsel). Namun, begitu VR menjadi mainstream seperti seluler, "desain VR-first" akan menjadi pengalaman yang diharapkan (mirip dengan "mobile-first").

"Mobile-first" adalah perubahan paradigma, "Offline-first" adalah perubahan paradigma saat ini, dan "VR-first" ada di depan mata. Ini adalah waktu yang sangat menyenangkan untuk menjadi seorang desainer dan pengembang, karena VR adalah paradigma desain yang sama sekali berbeda (kita akan membahasnya di artikel terakhir dari seri ini). Anda bukan desainer VR jika Anda tidak bisa menggenggam.

VR dimulai pada revolusi Personal Computing (PC) tetapi tiba sebagai langkah berikutnya dalam revolusi seluler. Oculus Quest Facebook dibangun di atas Google Cardboard menggunakan Qualcomm Snapdragon 835 System-on-Chip (SoC), pelacakan headset (menggunakan kamera ponsel), dan berjalan di Android - semuanya dikemas untuk dipasang dengan nyaman di organ indera lembut wajah Anda.

Oculus Quest seharga $400 memiliki pengalaman luar biasa yang dapat saya bagikan dengan teman-teman saya. IPhone baru seharga $1.000 tidak mengesankan siapa pun lagi. Kemanusiaan tidak akan meludahkan kait VR.

Aplikasi Industri VR

VR mulai membuat kehadirannya terasa di berbagai industri dan bidang komputasi. Selain konsumsi konten dan game, yang cenderung mendapatkan banyak liputan pers, VR perlahan mengubah industri mulai dari arsitektur hingga perawatan kesehatan.

• Arsitektur dan Real Estat menciptakan nilai realitas fisik dengan biaya yang luar biasa (dibandingkan dengan digital), sehingga wajar bagi arsitek dan agen real estat untuk membawa klien melalui realitas virtual untuk menunjukkan pengalaman. VR menawarkan "uji beta" stadion senilai $200 juta Anda, atau penelusuran virtual melalui telepon.
• Pembelajaran dan Pendidikan dalam VR menyampaikan pengalaman yang tidak mungkin ditiru dengan gambar atau video.
• Perusahaan otomotif mendapat manfaat dari VR, mulai dari desain dan keamanan hingga pelatihan dan pemasaran.
• Profesional perawatan kesehatan di Rumah Sakit Anak Lucile Packard Stanford telah menggunakan VR untuk merencanakan operasi jantung, memungkinkan mereka untuk memahami anatomi pasien sebelum membuat sayatan tunggal. VR juga menggantikan obat-obatan untuk menghilangkan rasa sakit.
• Ritel, Pemasaran, dan Perhotelan sudah menawarkan tur virtual produk dan tempat. Ketika pengecer mulai memahami betapa menariknya pengalaman berbelanja mereka, inovator ritel akan menempatkan paku terakhir di peti mati belanja batu bata dan mortir.

Seiring kemajuan teknologi, kita akan melihat peningkatan adopsi di berbagai industri. Pertanyaannya sekarang adalah seberapa cepat pergeseran ini akan terjadi dan industri mana yang paling terpengaruh.

Apa Arti VR untuk Web dan Edge Computing

"Edge Computing" memindahkan komputasi dari cluster server aplikasi utama Anda dan lebih dekat ke pengguna akhir Anda. Ada desas-desus pemasaran karena perusahaan hosting tidak sabar untuk menyewakan Anda server berlatensi rendah di setiap kota.

Contoh komputasi edge B2C adalah layanan Stadia Google, yang menjalankan beban kerja game intensif CPU/GPU di server Google, lalu mengirimkan game ke perangkat seperti Netflix. Chromebook Netflix bodoh apa pun tiba-tiba dapat memainkan game seperti komputer game kelas atas. Ini juga menciptakan opsi arsitektur baru dari game multipemain monolitik yang terintegrasi erat.

Contoh komputasi edge B2B adalah GRID Nvidia, yang menyediakan workstation jarak jauh virtual berkemampuan GPU Nvidia ke perangkat kelas Netflix yang murah.

Pertanyaan: Mengapa tidak memindahkan edge computing dari pusat data ke browser?

Kasus penggunaan untuk komputasi tepi browser adalah "pertanian render animasi" komputer yang membuat film 3D dengan memecah proses sepanjang hari menjadi beberapa bagian yang dapat diproses oleh ribuan komputer dalam beberapa menit.

Teknologi seperti Electron dan NW.js membawa pemrograman web ke aplikasi desktop. Teknologi browser baru (seperti PWA) membawa model distribusi aplikasi web (SaaS adalah tentang distribusi) kembali ke komputasi desktop. Contohnya termasuk proyek seperti SETI@Home, Folding@Home (pelipat protein), atau berbagai render farm. Daripada harus mengunduh penginstal, sekarang dimungkinkan untuk bergabung dengan peternakan komputasi hanya dengan mengunjungi situs web.

Pertanyaan: Apakah WebVR adalah "hal yang nyata" atau akankah konten VR dimasukkan ke dalam "toko aplikasi" dan taman bertembok?

Sebagai freelancer dan teknolog Toptal, adalah tugas saya untuk mengetahuinya. Jadi saya membangun prototipe teknologi untuk menjawab pertanyaan saya sendiri. Jawaban yang saya temukan sangat menarik, dan saya menulis seri blog ini untuk membagikannya kepada Anda.

Spoiler: Ya, WebVR adalah hal yang nyata. Dan ya, komputasi tepi browser dapat menggunakan API yang sama untuk mengakses daya komputasi yang memungkinkan WebVR.

Sangat Menyenangkan Untuk Menulis! Mari Membangun Bukti Konsep

Untuk menguji ini, kami akan membuat simulasi astrofisika dari masalah n-tubuh.

Astronavigator dapat menggunakan persamaan untuk menghitung gaya gravitasi antara dua benda. Namun, tidak ada persamaan untuk sistem dengan tiga atau lebih benda, yang tidak nyaman untuk setiap sistem di alam semesta yang dikenal. Sains!

Sementara masalah n-tubuh tidak memiliki solusi analitik (persamaan), ia memiliki solusi komputasi (algoritma), yaitu O(n²). O(n²) adalah kasus terburuk yang mungkin terjadi, tetapi ini adalah cara untuk mendapatkan apa yang kita inginkan, dan jenis alasan mengapa notasi O Besar ditemukan sejak awal.

Gambar 2: “Ke atas dan ke kanan? Yah, saya bukan insinyur, tetapi kinerjanya terlihat bagus bagi saya! ”

Jika Anda menghilangkan keterampilan Big O Anda, ingatlah bahwa notasi Big O mengukur bagaimana "skala" kerja suatu algoritme berdasarkan ukuran data yang dioperasikannya.

Koleksi kami adalah semua tubuh dalam simulasi kami. Menambahkan tubuh baru berarti menambahkan perhitungan gravitasi dua tubuh baru untuk setiap tubuh yang ada di set.

Sementara loop dalam kita adalah < n, itu bukan <= O(log n), jadi keseluruhan algoritmanya adalah O(n²). Itu adalah istirahat, tidak ada kredit tambahan.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

Solusi n-body juga menempatkan kita tepat di dunia mesin fisika/game dan eksplorasi teknologi yang dibutuhkan untuk WebVR.

Untuk prototipe kami, setelah kami membuat simulasi, kami akan membuat visualisasi 2D.

Terakhir, kita akan menukar visualisasi Canvas dengan versi WebVR.

Jika Anda tidak sabar, Anda dapat langsung menuju ke kode proyek.

Pekerja Web, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Bersiaplah untuk kejar-kejaran penuh aksi dan menyenangkan melalui sekelompok teknologi baru yang telah tiba di browser seluler modern Anda (maaf, bukan Safari):

• Kami akan menggunakan Pekerja Web untuk memindahkan simulasi ke utas CPU-nya sendiri - meningkatkan kinerja yang dirasakan dan yang sebenarnya.
• Kami akan menggunakan WebAssembly untuk menjalankan algoritme O(n²) dalam kode yang dikompilasi berkinerja tinggi (C/C++/Rust/AssemblyScript/etc.) di utas baru tersebut.
• Kami akan menggunakan Canvas untuk memvisualisasikan simulasi kami dalam 2D.
• Kami akan menggunakan Rollup dan Gulp sebagai alternatif ringan untuk Webpack.
• Terakhir, kami akan menggunakan WebVR dan Aframe untuk membuat Realitas Virtual untuk ponsel Anda.

Arsitektur Back-of-the-napkin Sebelum Menyelam ke dalam Kode

Kami akan mulai dengan versi Canvas karena Anda mungkin membaca ini di tempat kerja.

Dalam beberapa posting pertama, kami akan menggunakan API browser yang ada untuk mengakses sumber daya komputasi yang diperlukan untuk membuat simulasi intensif CPU tanpa menurunkan pengalaman pengguna.

Kemudian, kita akan memvisualisasikannya di browser menggunakan Canvas, akhirnya menukar visualisasi Canvas kita dengan WebVR menggunakan Aframe.

Desain API dan Simulasi Loop

Simulasi n-tubuh kami memprediksi posisi benda langit menggunakan gaya gravitasi. Kita dapat menghitung gaya yang tepat antara dua benda dengan persamaan, tetapi untuk menghitung gaya antara tiga atau lebih benda, kita perlu memecah simulasi menjadi segmen waktu kecil dan mengulanginya. Target kami adalah 30 frame/detik (kecepatan film) atau ~33 ms/frame.

Untuk mendapatkan orientasi, berikut adalah ikhtisar singkat kode:

1. Peramban GET's index.html
2. Yang menjalankan main.js sebagai kode di bawah ini. import s ditangani dengan Rollup, sebuah alternatif untuk Webpack.
3. Yang membuat nBodySimulator() baru
4. Yang memiliki API eksternal:
   1. sim.addVisualisasi()
   2. sim.addBody()
   3. sim.mulai()

 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

Kedua asteroid tersebut memiliki massa nol sehingga tidak terpengaruh oleh gravitasi. Mereka menjaga visualisasi 2D kami diperkecil setidaknya 30x30. Kode terakhir adalah tombol "kekacauan" kami untuk menambahkan 10 planet dalam kecil untuk bersenang-senang!

Berikutnya adalah "loop simulasi" kami - setiap 33 md, hitung ulang dan cat ulang. Jika Anda sedang bersenang-senang, kami bisa menyebutnya sebagai "loop permainan". Hal paling sederhana yang mungkin berhasil untuk mengimplementasikan loop kami adalah setTimeout() - dan itu memenuhi tujuan saya. Alternatifnya bisa requestAnimationFrame().

sim.start() memulai aksi dengan memanggil sim.step() setiap 33ms (sekitar 30 frame per detik).

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

Hore! Kami memindahkan desain masa lalu ke implementasi. Kami akan menerapkan perhitungan fisika di WebAssembly dan menjalankannya di utas Web Worker terpisah.

nBodySimulator membungkus kompleksitas implementasi itu dan membaginya menjadi beberapa bagian:

1. calculateForces() berjanji untuk menghitung kekuatan yang akan diterapkan.
   1. Ini sebagian besar adalah operasi floating point dan dilakukan di WebAssembly.
   2. Perhitungan ini adalah O(n²) dan kemacetan kinerja kami.
   3. Kami menggunakan Web Worker untuk memindahkan mereka dari utas utama untuk kinerja aktual dan persepsi yang lebih baik.
2. trimDebris() menghapus semua kotoran yang tidak lagi menarik (dan akan memperkecil visualisasi kita). Di)
3. applyForces() menerapkan gaya terhitung ke badan. Di)
   1. Kami menggunakan kembali kekuatan lama jika kami melewatkan calcForces() karena pekerja sudah sibuk. Ini meningkatkan kinerja yang dirasakan (menghilangkan jitter) dengan mengorbankan akurasi.
   2. Utas UI utama dapat melukiskan kekuatan lama bahkan jika perhitungannya memakan waktu lebih lama dari 33 md.
4. visualize() meneruskan larik badan ke setiap visualizer untuk dilukis. Di)

Dan itu semua terjadi dalam 33 ms! Bisakah kita meningkatkan desain ini? Ya. Penasaran atau punya saran? Periksa komentar di bawah. Jika Anda mencari desain dan implementasi modern yang canggih, lihat Matter.js sumber terbuka.

Ledakan!

Saya sangat senang membuat ini dan saya bersemangat untuk membaginya dengan Anda. Sampai jumpa setelah lompat!

1. Intro - halaman ini
2. Pekerja Web - mengakses banyak utas
3. WebAssembly - komputasi browser tanpa JavaScript
4. Rollup dan Gulp - alternatif untuk WebPack
5. Canvas - Menggambar ke Canvas API dan "sim loop"
6. WebVR - Mengganti visualisator Kanvas kami dengan WebVR dan Aframe

Hiburan akan memimpin konten di Virtual Reality (seperti seluler), tetapi begitu VR normal (seperti seluler), itu akan menjadi pengalaman konsumen dan produktivitas yang diharapkan (seperti seluler).

Kami tidak pernah lebih diberdayakan untuk menciptakan pengalaman manusia. Tidak pernah ada waktu yang lebih menyenangkan untuk menjadi seorang desainer dan pengembang. Lupakan halaman web - kami akan membangun dunia.

Perjalanan kami dimulai dengan Web Worker yang sederhana, jadi nantikan bagian selanjutnya dari seri WebVR kami.