Get best of the week

Buat Pengalaman VR Audiovisual Menggunakan A-Frame dan Tone.js

Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel “Menciptakan Pengalaman Audio / Visual VR di Web dengan A-Frame dan Tone.js” oleh Sean Sullivan.

Realitas Firefox di Oculus Go

A-Frame adalah kerangka kerja untuk menciptakan realitas virtual di web. Hanya dengan menggunakan tautan, siapa pun dengan helm VR atau smartphone yang mendukung VR dapat membenamkan diri dalam ruang 3D. Tone.js adalah pustaka JavaScript untuk membuat suara. Mari kita lihat apa yang terjadi jika mereka digabungkan.

Untuk memulainya, kita akan menciptakan lingkungan, dengan A-frame itu sangat sederhana. Dengan hanya menggunakan HTML biasa, kita dapat membuat ruang 3D secara keseluruhan, untuk ini kita perlu komponen-lingkungan-aframe . Di bawah ini adalah markup dasar untuk tujuan kita.

<!DOCTYPE html>
<html>
<head>
  <title>Basic Scene with Environment - A-Frame</title>
  <meta name="description" content="Basic Scene with Environment - A-Frame">
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js">  </script>
  <script src="https://unpkg.com/aframe-environment-component@1.1.0/dist/aframe-environment-component.min.js"></script>
</head>
<body>
  <a-scene environment="preset: starry">
    <a-camera>
      <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
      </a-entity>    
    </a-camera>
  </a-scene>
</body>
</html>

Perhatikan elemen:
<a-entity cursor>
Itu ada di dalam sel kita. Beberapa saat kemudian, dia akan memungkinkan Anda untuk berkomunikasi dengan synthesizer kami. Tetapi sebelum Anda mulai, Anda harus memastikan bahwa proyek dimuat dengan benar.

Membuka halaman, Anda akan melihat langit tiga dimensi, bintang-bintang, dan sebuah kotak di bumi. Semua ini dibuat oleh aframe-environment-komponen ketika kita mendefinisikan lingkungan:

<a-scene environment=”preset: starry”>

Jika diinginkan, lingkungan dapat diubah, cukup tambahkan templat lain. Pada saat penulisan ini, ada 16 templat lingkungan pilihan Anda.

Langit berbintang

Saya suka synthesizer kami ada di ruang, ruang itu keren. Mari kita menjadikan lingkungan kita lebih seperti permukaan planet.

Pertama, kami akan menghapus grid dan menambahkan tekstur bumi, mengubah:

<a-scene environment="preset: starry">

di

<a-scene environment="preset: starry; grid: none; groundTexture: walkernoise">

Setelah memulai halaman sekarang, kita akan melihat bahwa planet kita masih terlalu gelap untuk melihat sesuatu di bumi. Perbaiki ini dengan menambahkan sumber cahaya ke adegan kami.

<a-entity light="type: ambient; color: #CCC"></a-entity>

Dengan itu, pemandangannya akan terlihat seperti ini:

Adegan dengan cahaya

Sekarang kita sudah mengetahui lingkungan sekitar, mari kita mulai mengembangkan synthesizer.

Pembuatan Komponen


A-Frame dibangun pada sistem entitas-komponen . Ini memungkinkan Anda untuk membuat komponen dan menambahkannya ke entitas dalam adegan kami.

Mari kita buat file synth.js untuk komponen kita.

AFRAME.registerComponent('synth', {
  schema: {
    //   .
  },

  init: function () {
    //     .
  },

  update: function () {
    //     .
  },

  remove: function () {
    //       .
  },
  tick: function (time, timeDelta) {
    //     ()  .
  }
});

Seperti yang Anda lihat, metode siklus hidup dibangun dalam A-Frame, ini membuatnya mudah untuk menambahkan interaktivitas ke proyek WebVR kami. Basis komponen sudah siap, mari kita lihat proses pembuatan synthesizer dengan Tone.js.

Tone.js


Tone.js - kerangka kerja untuk membuat musik interaktif di browser, adalah pembungkus untuk API Audio Web. Membuat synthesizer dengan tone.js sederhana - cukup tulis baris:

var synth = new Tone.Synth().toMaster()

Tetapi kami akan membuat osilator dan menambahkan beberapa parameter untuk mempermudah penyesuaian lebih lanjut:

const synth = new Tone.Synth({
  volume: -15, // -15dB
  oscillator: {
    type: 'triangle' //   -  ""
  },
  envelope: {
    attack: 0.05, //  -  
    release: 2 //   - 
  }
}).toMaster()

Tambahkan kode ini langsung di atas komponen kami di file synth.js . Sekarang kami memiliki synthesizer, tetapi kami perlu menyediakan komponen kami dengan cara untuk mengaksesnya. Ingat <kursor-entitas> yang kami tambahkan ke kamera? Kursor ini memiliki parameter fuse = "true" . Ini akan memungkinkan kami melacak bagaimana kursor berinteraksi dengan entitas. Tambahkan EventListener ke komponen untuk sekering.

Kami akan membuat EventListener dalam metode init dari siklus hidup dan membuat metode baru yang disebut pemicu yang menyalakan Tone.js.

...
init: function () {
  //  EventListener     fuse
  this.el.addEventListener('fusing', this.trigger.bind(this))
},
//  ,  tone.js
trigger: function () {
  //tone.js ,     
  synth.triggerAttackRelease(this.data.note, this.data.duration)
},
...

Tambahkan komponen synthesizer ke adegan.


Kami menciptakan komponen, saatnya menambahkannya ke adegan A-Frame.

Untuk memulai, saya menambahkan Tone.js dan komponen synthesizer ke markup kami. Perhatikan urutan menghubungkan file - synth.js dimuat setelah Tone.js.

...
<script src="https://unpkg.com/tone@13.8.25/build/Tone.js"></script>
<script src="synth.js"></script>
</head>
...

Kami juga membutuhkan beberapa entitas yang akan kami lampirkan komponennya. Tambahkan beberapa bentuk A-Frame standar untuk digunakan dalam adegan kami.

<a-scene>
...
<a-box synth="note: E4" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere synth="note: C4" position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder synth="note: G4" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
...

Perhatikan atribut synth . Ini adalah komponen yang kami buat. 'Synth' adalah nama yang kami daftarkan
AFRAME.registerComponent ('synth', {})
dan kami menyatakan "note" dalam diagram komponen. Ada juga properti "durasi" - kita dapat menggunakannya untuk mengubah panjang catatan. Contohnya:
synth = "note: E4; Durasi: 8n »
akan memainkan 1/8 dari keseluruhan not, bukan standar 1/4.

Sekarang, setelah membuka adegan di browser, kita akan melihat angka-angka kami, dan ketika Anda mengarahkannya, catatan dari komponen synthesizer kami harus diputar.

Tokoh musik

Menggunakan Pengontrol Oculus Go


Sekarang adegan kami berfungsi seperti ini - kursor ditetapkan di tengah layar. Pada helm VR, ini disebut kontrol "visual". Memutar kepala, kursor akan bergerak ke arah gerakan pengguna. Ini adalah pengalaman yang sangat normal dan bekerja dengan baik untuk banyak proyek. Tetapi bagaimana jika kita ingin mengontrol synthesizer menggunakan pengontrol VR? Gerakkan tangan Anda dan buat musik terdengar menyenangkan, jadi mari kita ubah adegan kami untuk menggunakan pengontrol Oculus Go.

Pertama, tambahkan beberapa entitas ke adegan kami - controller dan raycaster.

...
<a-entity oculus-go-controls>
<a-entity laser-controls raycaster="far: 200; interval: 100"></a-entity>
...

Di sini kita memiliki entitas kita sendiri untuk mengendalikan Oculus Go, serta satu untuk raycaster, yang akan berjalan setiap 100 milidetik.

Sekarang mari kita modifikasi komponen synthesizer untuk mengontrol Oculus. Kami melakukan ini dengan menambahkan raycaster tergantung pada komponen kami.

AFRAME.registerComponent('synth', {
  dependencies: ['raycaster'],
...

Kemudian, dalam metode init , ubah EventListener - itu harus melacak acara:
persimpangan raycaster


init: function () {
  this.el.addEventListener('raycaster-intersection', this.trigger.bind(this))
},
...

Awal adegan di Oculus Go sekarang harus menunjukkan controller Anda - dan kontrol laser akan memulai synthesizer memainkan catatan ketika Anda mengarahkan kursor ke angka-angka.

Oculus pergi

Jika Anda ingin melihat lebih dekat pada proyek, Anda dapat menjalankannya dan melihat kode sumber di sini - glitch.com/ ~ spasi - synth - vr

Dalam pengawasan


Sekarang kami memiliki adegan sederhana dengan synthesizer VR dan ada banyak peluang untuk memperbaikinya. Kita dapat menambahkan lebih banyak objek untuk interaksi, lebih banyak synthesizer dan efek untuk komponen. Kita dapat menghidupkan objek berdasarkan beberapa peristiwa. Saat adegan tumbuh, Anda harus memikirkan kinerja. Untungnya, A-Frame memiliki banyak fitur bawaan yang dapat membantu mengatasi masalah ini.

Berikut adalah beberapa tautan yang berguna Interaksi

Komponen
Raycaster
dan Kontrol
Tone.js
Kode Sumber Proyek

Terima kasih telah membaca.

More articles:


All Articles