WebVR Bagian 5: Desain dan Implementasi

Saya suka mendapatkan proyek untuk "selesai." Kami telah tiba di akhir perjalanan kami - dan kelahiran simulasi gravitasi langit kami di WebVR.

Dalam posting terakhir ini, kami akan memasukkan kode simulasi kinerja tinggi kami (Pasal 1,2,3) ke visualizer WebVR berdasarkan visualisator kanvas (Pasal 4).

1. "Masalah n-tubuh" Intro dan Arsitektur
2. Pekerja Web memberi kami utas browser tambahan
3. WebAssembly dan AssemblyScript untuk kode kemacetan kinerja O(n²) kami
4. Visualisasi Data Kanvas
5. Visualisasi Data WebVR

Ini adalah artikel yang lebih panjang, jadi kami akan melewatkan beberapa detail teknis yang dibahas sebelumnya. Periksa posting sebelumnya jika Anda ingin orientasi, atau membaca berbahaya.

Kami telah menjelajahi perubahan paradigma browser dari runtime JavaScript single-threaded ke run-time kinerja tinggi multi-thread (pekerja web) (WebAssembly). Fitur komputasi desktop kinerja ini tersedia di Progressive Web Apps dan model distribusi SaaS.

VR akan menciptakan lingkungan penjualan dan pemasaran bebas gangguan yang menarik untuk berkomunikasi, membujuk, dan mengukur keterlibatan (pelacakan mata dan interaksi). Data akan tetap nol dan satu, tetapi ringkasan eksekutif dan pengalaman konsumen yang diharapkan adalah WebVR - sama seperti kami membangun pengalaman dasbor seluler untuk web datar hari ini.

Teknologi ini juga memungkinkan komputasi tepi browser terdistribusi. Misalnya, kami dapat membuat aplikasi berbasis web untuk menjalankan komputasi WebAssembly kami untuk jutaan bintang dalam simulasi. Contoh lain adalah aplikasi animasi yang merender kreasi pengguna lain saat Anda mengedit kreasi Anda sendiri.

Konten hiburan memimpin penggunaan Realitas Virtual, seperti halnya hiburan yang dipimpin di ponsel. Namun, begitu VR normal (seperti desain mobile-first saat ini), itu akan menjadi pengalaman yang diharapkan (desain VR-first). Ini adalah waktu yang sangat menyenangkan untuk menjadi seorang desainer dan pengembang - dan VR adalah paradigma desain yang sama sekali berbeda.

Anda bukan desainer VR jika Anda tidak bisa menggenggam. Itu adalah pernyataan yang berani, dan hari ini adalah penyelaman mendalam ke dalam desain VR. Bidang ini sedang ditemukan saat Anda membaca ini. Tujuan saya adalah untuk berbagi pengalaman saya dalam perangkat lunak dan film untuk menjadi primadona dalam percakapan "desain VR-pertama". Kita semua belajar dari satu sama lain.

Dengan mempertimbangkan prediksi muluk itu, saya ingin menyelesaikan proyek ini sebagai demo teknologi profesional - WebVR adalah pilihan tepat untuk itu!

WebVR dan Google A-Frame

Repo git WebVR adalah cabang dari versi kanvas karena beberapa alasan. Itu membuat hosting proyek di halaman Github lebih mudah, dan WebVR memerlukan beberapa perubahan yang akan mengacaukan versi kanvas dan artikel ini.

Jika Anda ingat posting pertama kami tentang arsitektur, kami mendelegasikan seluruh simulasi ke nBodySimulator .

Postingan web worker menunjukkan nBodySimulator memiliki fungsi step() yang dipanggil setiap 33ms simulasi. step() memanggil calcForces calculateForces() untuk menjalankan kode simulasi WebAssembly O(n²) kami (artikel 3), lalu memperbarui posisi dan mengecat ulang. Dalam posting kami sebelumnya membuat visualisasi kanvas, kami menerapkan ini dengan elemen kanvas, mulai dari kelas dasar ini:

 /** * Base class that console.log()s the simulation state. */ export class nBodyVisualizer { constructor(htmlElement) { this.htmlElement = htmlElement this.resize() this.scaleSize = 25 // divided into bodies drawSize. drawSize is log10(mass) // This could be refactored to the child class. // Art is never finished. It must be abandoned. } resize() {} paint(bodies) { console.log(JSON.stringify(bodies, null, 2)) } }

Definisikan Tantangan Integrasi

Kami punya simulasinya. Sekarang, kami ingin berintegrasi dengan WebVR - tanpa merancang ulang proyek kami. Penyesuaian apa pun yang kami lakukan pada simulasi terjadi setiap 33 md di thread UI utama dalam fungsi paint(bodies) .

Ini adalah bagaimana kita akan mengukur "selesai." Saya senang - ayo mulai bekerja!

Cara Membuat Realitas Virtual

Pertama, kita membutuhkan desain:

• VR terbuat dari apa?
• Bagaimana desain WebVR diungkapkan ?
• Bagaimana kita bisa berinteraksi dengannya?

Virtual Reality kembali ke awal waktu. Setiap cerita api unggun adalah dunia virtual kecil yang dilebih-lebihkan yang ditutupi oleh detail sepele.

Kita bisa 10x cerita api unggun kita dengan menambahkan visual dan audio stereoskopik 3D. Instruktur penganggaran produksi film saya pernah berkata, “Kami hanya membayar posternya. Kami tidak sedang membangun realitas.”

Jika Anda terbiasa dengan DOM browser, Anda akan tahu bahwa itu membuat struktur hierarki seperti pohon.

Tersirat dalam desain web adalah pemirsa yang melihat dari "depan". Melihat dari samping akan mengungkapkan elemen DOM sebagai garis, dan dari belakang, kita hanya akan melihat tag <body> karena mengaburkan anak-anaknya.

Bagian dari pengalaman VR yang imersif adalah membiarkan pengguna mengontrol sudut pandang, gaya, kecepatan, dan urutan interaksi mereka. Mereka tidak perlu memperhatikan sesuatu secara khusus. Jika Anda secara terprogram memindahkan atau memutar kamera, mereka akan benar- benar muntah karena penyakit VR.

Harap dicatat bahwa penyakit VR bukanlah lelucon. Baik mata dan telinga bagian dalam kita mendeteksi gerakan. Ini sangat penting untuk hewan yang berjalan tegak. Ketika sensor gerak itu tidak setuju, otak kita secara alami menganggap mulut kita telah makan omong kosong lagi dan muntah. Kita semua pernah menjadi anak-anak. Banyak yang telah ditulis tentang naluri bertahan hidup ini di VR. Judul "Epic Fun" gratis di Steam, dan rollercoaster adalah demo penyakit VR terbaik yang pernah saya temukan.

Realitas Virtual dinyatakan sebagai "grafik pemandangan." Grafik pemandangan memiliki pola seperti pohon yang sama dengan DOM untuk menyembunyikan detail dan kerumitan lingkungan 3D yang meyakinkan. Namun, alih-alih menggulir dan merutekan, kami memposisikan penampil di tempat mereka ingin menarik pengalaman ke arah mereka.

Berikut adalah grafik adegan Hello World dari Kerangka WebVR A-Frame Google:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>

Dokumen HTML ini membuat DOM di browser. Tag <a-*> adalah bagian dari kerangka A-Frame, dan <a-scene> adalah akar dari grafik adegan. Di sini, kita melihat empat primitif 3D ditampilkan di tempat kejadian.

Pertama, perhatikan bahwa kita sedang melihat pemandangan dari browser web datar. Topeng kecil di kanan bawah mengundang pengguna untuk beralih ke mode stereoskopik 3D.

Secara teori, Anda harus dapat:

1. Buka ini di ponsel Anda
2. Dekatkan ponsel Anda ke wajah Anda
3. Nikmati kemegahan realitas baru!

Saya tidak pernah membuatnya bekerja tanpa lensa mewah dari headset VR. Anda bisa mendapatkan headset VR untuk ponsel Android dengan harga murah (perangkat dasar berbasis Google Cardboard), namun, untuk mengembangkan konten, saya menyarankan HMD (Head Mounted Display) yang berdiri sendiri seperti Oculus Quest.

Sama seperti Scuba diving atau skydiving, Virtual Reality adalah olahraga peralatan.

“Tebing” Pembelajaran Desainer VR

Perhatikan adegan A-Frame Hello World memiliki pencahayaan dan kamera default:

• Wajah kubus memiliki warna yang berbeda - kubus itu membayangi diri.
• Kubus melemparkan bayangan di pesawat - ada cahaya terarah.
• Tidak ada celah antara kubus dan bidang - ini adalah dunia dengan gravitasi.

Ini adalah isyarat penting yang mengatakan kepada pemirsa, "Tenang, benda di wajah Anda ini benar-benar normal."

Perhatikan juga pengaturan default ini tersirat dalam kode adegan Hello World di atas. A-Frame dengan bijak memberikan default yang masuk akal, tetapi perhatikan - kamera dan pencahayaan adalah jurang yang harus dilewati oleh desainer web datar untuk membuat VR.

Kami menerima pengaturan pencahayaan default begitu saja. Misalnya, tombol:

Perhatikan betapa meresapnya pencahayaan implisit ini dalam desain dan fotografi. Bahkan tombol "desain datar" tidak dapat lepas dari pencahayaan default web - itu membuat bayangan ke bawah dan ke kanan.

Merancang, mengomunikasikan, dan menerapkan pengaturan pencahayaan dan kamera adalah tebing pembelajaran desainer WebVR. "Bahasa Film" adalah kumpulan norma budaya - dinyatakan sebagai kamera dan pengaturan pencahayaan yang berbeda - yang mengomunikasikan cerita secara emosional kepada penonton. Para profesional dalam film yang mendesain/menggerakkan lampu dan kamera di sekitar adegan adalah departemen pegangan.

Kembali ke Realitas Virtual Kami

Sekarang, mari kita kembali bekerja. Adegan WebVR surgawi kami memiliki pola yang serupa:

 <!DOCTYPE> <html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> <script src="main.js"></script> </head> <body> <a-scene> <a-sky color="#222"></a-sky> <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity> <a-entity></a-entity> <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!..."> </a-entity> <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity> </a-scene> </body> </html>

Dokumen HTML ini memuat kerangka kerja A-Frame dan plugin interaksi. Adegan kami dimulai pada <a-scene> .

Di dalam, kita mulai dengan elemen <a-sky color="#222"></a-sky> untuk mewarnai latar belakang semua yang tidak kita definisikan dalam adegan.

Selanjutnya, kami membuat "pesawat orbit" bagi pemirsa untuk "berpegangan" saat mereka terbang melalui dunia kami yang aneh dan tidak dikenal. Kami membuat ini sebagai disk dan bola hitam kecil di (0,0,0). Tanpa ini, belokan terasa “tidak berdasar” bagi saya:

 <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity>

Selanjutnya, kita mendefinisikan sebuah koleksi di mana kita dapat menambahkan/menghapus/memposisikan ulang entitas A-Frame.

 <a-entity></a-entity>

Ini adalah pembersihan untuk paint(bodies) nBodyVisualizer untuk melakukan tugasnya.

Kemudian, kita menciptakan hubungan antara penonton dan dunia ini. Sebagai demo teknologi, tujuan dunia ini adalah membiarkan pemirsa menjelajahi WebVR dan teknologi browser yang memungkinkannya. Narasi "astronot" sederhana menciptakan rasa bermain, dan rambu bintang ini adalah titik referensi lain untuk navigasi.

 <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!\n ..."> </a-entity>

Itu melengkapi grafik adegan kami. Akhirnya, saya ingin semacam interaksi pada demo telepon antara pengguna dan dunia yang berputar-putar ini. Bagaimana kita bisa membuat ulang tombol "Lempar Puing-puing" di VR?

Tombol adalah elemen utama dari semua desain modern - di mana tombol VR?

Interaksi di WebVR

Virtual Reality memiliki "paro atas" dan "paro bawah" sendiri. Interaksi pertama pemirsa adalah melalui avatar atau kamera mereka. Ini semua kontrol untuk memperbesar.

Jika Anda membaca ini di desktop, Anda dapat menggunakan WASD untuk menggerakkan dan mouse untuk memutar kamera. Eksplorasi ini mengungkapkan informasi tetapi tidak mengungkapkan keinginan Anda.

Reality memiliki beberapa fitur yang sangat penting yang tidak sering ditemukan di web:

• Perspektif - objek menjadi tampak lebih kecil saat menjauh dari kita.
• Oklusi - objek disembunyikan dan terungkap berdasarkan posisi.

VR mensimulasikan fitur-fitur ini untuk menciptakan efek 3D. Mereka juga dapat digunakan dalam VR untuk mengungkapkan informasi dan antarmuka - dan untuk mengatur suasana hati sebelum menyajikan interaksi. Saya telah menemukan kebanyakan orang hanya perlu satu menit untuk menikmati pengalaman sebelum bergerak maju.

Di WebVR, kita berinteraksi dalam ruang 3D. Kami memiliki dua alat dasar untuk ini:

• Collision - peristiwa 3D pasif yang dipicu ketika dua objek berbagi ruang yang sama.
• Proyeksi - panggilan fungsi 2D aktif yang mencantumkan semua objek yang berpotongan dengan garis.

Tabrakan Adalah Interaksi Yang Paling “Seperti VR”

Di VR, "tabrakan" persis seperti yang terdengar: Ketika dua objek berbagi ruang yang sama, A-Frame membuat acara.

Agar pengguna "menekan" tombol, kita harus memberi mereka pion dan sesuatu untuk menekan tombol itu.

Sayangnya, WebVR belum dapat menggunakan pengontrol - banyak orang akan melihat versi web datar di desktop atau ponsel mereka, dan banyak yang akan menggunakan headset seperti Google Cardboard atau Gear VR Samsung untuk menampilkan versi stereoskopik.

Jika pengguna tidak memiliki pengontrol, mereka tidak dapat menjangkau dan "menyentuh" ​​sesuatu, sehingga setiap benturan harus dengan "ruang pribadi" mereka.

Kami dapat memberikan pemain pion berbentuk astronot untuk bergerak, tetapi memaksa pengguna ke dalam pusaran racun planet tampaknya sedikit tidak menyenangkan dan bertentangan dengan luasnya desain kami.

Proyeksi Adalah Klik "Seperti Web" 2D di Ruang 3D

Selain "tabrakan", kita juga dapat menggunakan "proyeksi". Kita dapat memproyeksikan garis melalui adegan kita dan melihat apa yang disentuhnya. Contoh paling umum adalah "sinar teleportasi."

Sinar teleportasi menelusuri garis di dunia untuk menunjukkan di mana seorang pemain dapat bergerak. “Proyeksi” ini mencari tempat untuk mendarat. Ini mengembalikan satu atau lebih objek di jalur proyeksi. Berikut adalah contoh teleport ray:

Perhatikan sinar sebenarnya diimplementasikan sebagai parabola yang mengarah ke bawah. Ini berarti secara alami bersinggungan dengan "tanah" seperti benda yang dilempar. Ini juga secara alami menetapkan jarak teleportasi maksimum. Batas adalah pilihan desain terpenting dalam VR. Untungnya, kenyataan memiliki banyak keterbatasan alam.

Proyeksi "meratakan" dunia 3D menjadi 2D sehingga Anda dapat menunjuk sesuatu untuk diklik seperti mouse. Penembak orang pertama adalah permainan rumit "klik 2D" pada tombol yang sangat membuat frustrasi - seringkali dengan cerita yang rumit untuk menjelaskan mengapa itu tidak baik, tombol-tombol sialan itu "mengklik" Anda kembali.

Ada begitu banyak senjata di VR karena senjata telah disempurnakan sebagai mouse 3D yang akurat dan andal - dan mengklik adalah hal yang konsumen ketahui bagaimana melakukannya tanpa belajar.

Proyeksi juga menawarkan keamanan jarak dalam hubungan dengan pemandangan. Ingat, semakin dekat dengan sesuatu di VR secara alami akan menutup semua hal lain yang kepentingannya mungkin belum terungkap.

Proyeksi Tanpa Pengendali Menggunakan “Gaze”

Untuk membuat interaksi primitif ini di WebVR tanpa pengontrol, kita dapat memproyeksikan "pandangan" pemirsa sebagai "kursor" garis pandang. Kursor ini dapat digunakan secara terprogram untuk berinteraksi dengan objek dengan "sekering". Ini dikomunikasikan kepada pemirsa sebagai lingkaran biru kecil. Sekarang kita mengklik!

Jika Anda ingat cerita api unggun, semakin besar kebohongannya, semakin sedikit detail yang dibutuhkan untuk menjualnya. Interaksi "pandangan" yang jelas dan tidak masuk akal adalah menatap matahari. Kami menggunakan "tatapan" ini untuk memicu penambahan planet "puing" baru ke simulasi kami. Tidak ada pemirsa yang pernah mempertanyakan pilihan ini - VR cukup menawan ketika tidak masuk akal.

Dalam A-Frame, kami mengekspresikan kamera (pion tak terlihat pemain) dan "kursor" garis pandang ini sebagai perlengkapan kamera kami. Menempatkan <a-cursor> di dalam <a-camera> menyebabkan transformasi kamera juga diterapkan ke kursor. Ketika pemain menggerakkan/memutar pion mereka ( a-camera ), itu juga menggerakkan/memutar pandangan mereka ( a-cursor ).

 // src/index.html <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity>

“Sekring” kursor menunggu hingga satu detik penuh “tatapan” telah berlalu sebelum memancarkan suatu peristiwa.

Saya menggunakan pencahayaan default sehingga Anda mungkin melihat ada "belakang" matahari yang tidak terang. Sementara saya belum berada di luar bidang orbit, saya tidak berpikir begitulah cara kerja matahari. Namun, ini berfungsi untuk poster demo teknologi realitas kami.

Pilihan alternatif adalah menempatkan pencahayaan di dalam elemen kamera, sehingga bergerak bersama pengguna. Ini akan menciptakan pengalaman penambang asteroid yang lebih intim - dan mungkin menakutkan. Ini adalah pilihan desain yang menyenangkan.

Kami Memiliki Rencana Integrasi

Dengan itu, kami sekarang memiliki titik integrasi antara A-Frame <a-scene> dan simulasi JavaScript kami:

A-Frame <a-scene> :

• Koleksi bernama untuk badan: <a-entity></a-entity>

• Kursor yang akan memancarkan peristiwa proyeksi: <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor>

Simulasi JavaScript kami:

• nBodyVisWebVR.paint(bodies) - menambah/menghapus/memposisikan ulang entitas VR dari badan simulasi

• addBodyArgs(name, color, x, y, z, mass, vX, vY, vZ) untuk menambahkan badan puing baru ke simulasi

index.html memuat main.js , yang menginisialisasi simulasi kami seperti versi kanvas:

 // src/main.js import { nBodyVisualizer, nBodyVisWebVR } from ."/nBodyVisualizer" import { Body, nBodySimulator } from ."/nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // this Visualizer manages the UI sim.addVisualization(new nBodyVisWebVR(document.getElementById("a-bodies"), sim)) // making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 1, 1e9)) sim.addBody(new Body("hot-jupiter", "red", -1, -1, 1, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold-jupiter", "purple", 4, 4, .5, 1e4, -.07, 0.04, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) }

Anda akan melihat di sini kami menyetel htmlElement dari visualizer ke koleksi a-bodies untuk menampung body.

Mengelola Objek A-Frame secara Terprogram dari JavaScript

Setelah mendeklarasikan scene kita di index.html , sekarang kita siap untuk mengkode visualizer.

Pertama, kita menyiapkan nBodyVisualizer untuk membaca dari daftar isi nBodySimulation dan membuat/memperbarui/menghapus objek A-Frame dalam koleksi <a-entity></a-entity> .

 // src/nBodyVisualizer.js /** * This is the WebVR visualizer. * It's responsible for painting and setting up the entire scene. */ export class nBodyVisWebVR extends nBodyVisualizer { constructor(htmlElement, sim) { // HTML Element is a-collection#a-bodies. super(htmlElement) // We add these to the global namespace because // this isn't the core problem we are trying to solve. window.sim = sim this.nextId = 0 } resize() {}

Di konstruktor, kami menyimpan koleksi A-Frame kami, menetapkan variabel global untuk acara tatapan kami untuk menemukan simulasi, dan menginisialisasi penghitung id yang akan kami gunakan untuk mencocokkan badan antara simulasi kami dan adegan A-Frame.

 paint(bodies) { let i // Create lookup table: lookup[body.aframeId] = body const lookup = bodies.reduce( (total, body) => { // If new body, give it an aframeId if (!body.aframeId) body.aframeId = `a-sim-body-${body.name}-${this.nextId++}` total[body.aframeId] = body return total }, {}) // Loop through existing a-sim-bodies and remove any that are not in // the lookup - this is our dropped debris const aSimBodies = document.querySelectorAll(."a-sim-body") for (i = 0; i < aSimBodies.length; i++) { if (!lookup[aSimBodies[i].id]) { // if we don't find the scene's a-body in the lookup table of Body()s, // remove the a-body from the scene aSimBodies[i].parentNode.removeChild(aSimBodies[i]); } } // loop through sim bodies and upsert let aBody bodies.forEach( body => { // Find the html element for this aframeId aBody = document.getElementById(body.aframeId) // If html element not found, make one. if (!aBody) { this.htmlElement.innerHTML += ` <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>` aBody = document.getElementById(body.aframeId) } // reposition aBody.object3D.position.set(body.x, body.y, body.z) }) }

Pertama, kita mengulang melalui badan sim untuk memberi label dan/atau membuat tabel pencarian untuk mencocokkan entitas A-Frame dengan badan simulasi.

Selanjutnya, kami mengulang melalui badan A-Frame yang ada dan menghapus semua yang dipangkas oleh simulasi untuk bepergian ke luar batas. Ini meningkatkan kinerja pengalaman yang dirasakan.

Terakhir, kita mengulang melalui badan sim untuk membuat <a-sphere> baru untuk badan yang hilang dan untuk memposisikan ulang yang lain dengan aBody.object3D.position.set(body.x, body.y, body.z)

Kita dapat secara terprogram mengubah elemen dalam adegan A-Frame menggunakan fungsi DOM standar. Untuk menambahkan elemen ke adegan, kami menambahkan string ke innerHTML penampung. Kode ini terasa aneh bagi saya tetapi berhasil, dan saya tidak menemukan yang lebih baik.

Anda akan melihat ketika kami membuat string untuk ditambahkan, kami memiliki operator ternary di dekat "bintang" untuk mengatur atribut.

 <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>`

Jika tubuh adalah "bintang", kami menambahkan beberapa atribut tambahan yang menjelaskan peristiwanya. Berikut tampilan bintang kita saat dipasang di DOM:

 <a-sphere class="a-sim-body" dynamic-body="" debris-listener="" event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" position="0 0 0" radius="0.36" color="yellow" material="" geometry=""></a-sphere>

Tiga atribut, debris-listener , event-set__enter dan event-set__leave , mengatur interaksi kami dan merupakan putaran terakhir dari integrasi kami.

Mendefinisikan Peristiwa dan Interaksi A-Frame

Kami menggunakan paket NPM "aframe-event-set-component" di atribut entitas untuk mengubah warna matahari saat pemirsa "melihatnya".

"Tatapan" ini adalah proyeksi dari posisi dan rotasi pemirsa, dan interaksi memberikan umpan balik yang diperlukan bahwa tatapan mereka melakukan sesuatu.

Bola bintang kami sekarang memiliki dua peristiwa singkat yang diaktifkan oleh plugin, event-set__enter dan event-set__leave :

 <a-sphere ... event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" … ></a-sphere>

Selanjutnya, kita menghias bola bintang kita dengan debris-listener akan kita terapkan sebagai komponen A-Frame kustom.

 <a-sphere ... debris-listener="" … ></a-sphere>

Komponen A-Frame didefinisikan di tingkat global:

 // src/nBodyVisualizer.js // Component to add new bodies when the user stares at the sun. See HTML AFRAME.registerComponent('debris-listener', { init: function () { // Helper function function rando(scale) { return (Math.random()-.5) * scale } // Add 10 new bodies this.el.addEventListener('click', function (evt) { for (let x=0; x<10; x++) { // name, color, x, y, z, mass, vx, vy, vz window.sim.addBodyArgs("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1)) } }) } })

Komponen A-Frame ini bertindak seperti pendengar 'klik' yang dapat dipicu oleh kursor tatapan untuk menambahkan 10 objek acak baru ke adegan kita.

Untuk meringkas:

1. Kami mendeklarasikan adegan WebVR dengan A-Frame dalam HTML standar.
2. Kami secara terprogram dapat menambah/menghapus/memperbarui entitas A-Frame dalam adegan dari JavaScript.
3. Kita dapat membuat interaksi dalam JavaScript dengan event handler melalui plugin dan komponen A-Frame.

WebVR: Veni, Vidi, Vici

Saya harap Anda mendapatkan sebanyak mungkin dari demo teknologi ini seperti yang saya lakukan. Di mana kami telah menerapkan fitur ini (pekerja web dan WebAssembly) ke WebVR, fitur ini juga dapat diterapkan pada komputasi tepi browser.

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 10x lipat di setiap aspek komputasi. Sudah 12 tahun sejak iPhone pertama.

VR telah ada lebih lama, tetapi teknologi yang dibutuhkan untuk membawa VR ke pengguna rata-rata telah hadir melalui revolusi seluler dan Oculus Quest Facebook - bukan revolusi PC.

Internet dan sumber terbuka adalah salah satu keajaiban terbesar umat manusia di dunia. Untuk semua orang yang menciptakan internet datar - Saya bersulang untuk keberanian dan rasa petualangan Anda.

Manifesto! Kami akan membangun dunia, karena kami memiliki kekuatan untuk menciptakan.