HoloLens (generasi pertama) Input 210: Tatapan

Penting

Tutorial Mixed Reality Academy dirancang dengan ingat HoloLens (generasi ke-1), Unity 2017, dan Mixed Reality Immersive Headsets. Dengan demikian, kami merasa penting untuk meninggalkan tutorial ini di tempat bagi pengembang yang masih mencari panduan dalam mengembangkan untuk perangkat tersebut. Tutorial ini tidak akan diperbarui dengan toolset atau interaksi terbaru yang digunakan untuk HoloLens 2 dan mungkin tidak kompatibel dengan versi Unity yang lebih baru. Mereka akan dipertahankan untuk terus bekerja pada perangkat yang didukung. Serangkaian tutorial baru telah diposting untuk HoloLens 2.

Tatapan adalah bentuk input pertama dan mengungkapkan niat dan kesadaran pengguna. MR Input 210 (alias Project Explorer) adalah penyelaman mendalam tentang konsep terkait tatapan untuk Windows Mixed Reality. Kami akan menambahkan kesadaran kontekstual ke kursor dan hologram kami, memanfaatkan sepenuhnya apa yang diketahui aplikasi Anda tentang tatapan pengguna.

Kami memiliki astronot yang ramah di sini untuk membantu Anda mempelajari konsep tatapan. Dalam MR Basics 101, kami memiliki kursor sederhana yang hanya mengikuti tatapan Anda. Hari ini kita memindahkan langkah di luar kursor sederhana:

  • Kami membuat kursor dan hologram kami sadar tatapan: keduanya akan berubah berdasarkan di mana pengguna mencari - atau di mana pengguna tidak mencari. Ini membuat mereka sadar konteks.
  • Kami akan menambahkan umpan balik ke kursor dan hologram kami untuk memberi pengguna lebih banyak konteks tentang apa yang ditargetkan. Umpan balik ini bisa berupa audio dan visual.
  • Kami akan menunjukkan teknik penargetan untuk membantu pengguna mencapai target yang lebih kecil.
  • Kami akan menunjukkan kepada Anda cara menarik perhatian pengguna ke hologram Anda dengan indikator terarah.
  • Kami akan mengajari Anda teknik untuk mengambil hologram Anda dengan pengguna saat dia bergerak di seluruh dunia Anda.

Penting

Video yang disematkan di setiap bab di bawah ini direkam menggunakan versi Unity dan Mixed Reality Toolkit yang lebih lama. Meskipun instruksi langkah demi langkah akurat dan terkini, Anda mungkin melihat skrip dan visual dalam video yang sesuai yang sudah kedaluarsa. Video tetap disertakan untuk posteritas dan karena konsep yang dibahas masih berlaku.

Dukungan perangkat

Kursus HoloLens Headset imersif
MASUKAN MR 210: Tatapan ✔️ ✔️

Sebelum memulai

Prasyarat

File proyek

  • Unduh file yang diperlukan oleh proyek. Memerlukan Unity 2017.2 atau yang lebih baru.
  • Batalkan arsip file ke desktop Anda atau lokasi lain yang mudah dijangkau.

Catatan

Jika Anda ingin melihat melalui kode sumber sebelum mengunduh, kode tersebut tersedia di GitHub.

Errata dan Catatan

  • Di Visual Studio, "Just My Code" perlu dinonaktifkan (tidak dicentang) di bawah Tools-Options-Debugging>> untuk mencapai titik henti dalam kode Anda.

Bab 1 - Penyiapan Unity

Tujuan

  • Optimalkan Unity untuk pengembangan HoloLens.
  • Impor aset dan siapkan adegan.
  • Lihat astronaut di HoloLens.

Petunjuk

  1. Mulai Unity.
  2. Pilih Proyek Baru.
  3. Beri nama proyek ModelExplorer.
  4. Masukkan lokasi sebagai folder Tatapan yang sebelumnya tidak Anda arsipkan.
  5. Pastikan proyek diatur ke 3D.
  6. Klik Buat Project.

Pengaturan unity untuk HoloLens

Kita perlu memberi tahu Unity bahwa aplikasi yang kita coba ekspor harus membuat tampilan imersif alih-alih tampilan 2D. Kami melakukannya dengan menambahkan HoloLens sebagai perangkat realitas virtual.

  1. Buka Edit > Pemutar Pengaturan > Proyek.
  2. Di Panel Inspektur untuk Pengaturan Pemutar, pilih ikon Bursa Windows .
  3. Luaskan grup Pengaturan XR.
  4. Di bagian Merender, centang kotak Didukung Virtual Reality untuk menambahkan daftar SDK Virtual Reality baru.
  5. Pastikan bahwa Windows Mixed Reality muncul dalam daftar. Jika tidak, pilih tombol + di bagian bawah daftar dan pilih Windows Holographic.

Selanjutnya, kita perlu mengatur backend scripting ke .NET.

  1. Buka Edit > Pemutar Pengaturan > Proyek (Anda mungkin masih memiliki ini dari langkah sebelumnya).
  2. Di Panel Inspektur untuk Pengaturan Pemutar, pilih ikon Bursa Windows .
  3. Di bagian Konfigurasi Pengaturan Lainnya , pastikan bahwa Backend Scripting diatur ke .NET

Terakhir, kami akan memperbarui pengaturan kualitas kami untuk mencapai performa cepat di HoloLens.

  1. Buka Edit > Kualitas Pengaturan > Proyek.
  2. Klik panah menunjuk ke bawah di baris Default di bawah ikon Bursa Windows.
  3. Pilih Sangat Rendah untuk Aplikasi Windows Store.

Mengimpor aset proyek

  1. Klik kanan folder Aset di panel Proyek .
  2. Klik Impor Paket Kustom Paket>.
  3. Navigasikan ke file proyek yang Anda unduh dan klik ModelExplorer.unitypackage.
  4. Klik Buka.
  5. Setelah paket dimuat, klik tombol Impor .

Menyiapkan adegan

  1. Di Hierarki, hapus Kamera Utama.
  2. Di folder HoloToolkit , buka folder Input , lalu buka folder Prefabs .
  3. Seret dan letakkan prefab MixedRealityCameraParent dari folder Prefabs ke hierarki.
  4. Klik kanan Cahaya Arah di Hierarki dan pilih Hapus.
  5. Di folder Hologram , seret dan letakkan aset berikut ke akar Hierarki:
    • AstroMan
    • Lampu
    • SpaceAudioSource
    • SpaceBackground
  6. Mulai Mode ▶ Putar untuk melihat astronaut.
  7. Klik Lagi Mode ▶ Putar untuk Berhenti.
  8. Di folder Hologram , temukan aset Fitbox dan seret ke akar Hierarki.
  9. Pilih Fitbox di panel Hierarki .
  10. Seret koleksi AstroMan dari Hierarki ke properti Koleksi Hologram dari Fitbox di panel Pemeriksa .

Simpan proyek

  1. Simpan adegan baru: Simpan Adegan Sebagai File>.
  2. Klik Folder Baru dan beri nama folder Adegan.
  3. Beri nama file "ModelExplorer" dan simpan di folder Adegan .

Membangun proyek

  1. Di Unity, pilih Pengaturan Build File>.
  2. Klik Tambahkan Adegan Terbuka untuk menambahkan adegan.
  3. Pilih Platform Windows Universal di daftar Platform dan klik Beralih Platform.
  4. Jika Anda secara khusus mengembangkan untuk HoloLens, atur Perangkat target ke HoloLens. Jika tidak, biarkan di perangkat apa pun.
  5. Pastikan Jenis Build diatur ke D3D dan SDK diatur ke Terbaru diinstal (yang seharusnya SDK 16299 atau yang lebih baru).
  6. Klik Bangun.
  7. Buat Folder Baru bernama "Aplikasi".
  8. Klik tunggal folder Aplikasi .
  9. Tekan Pilih Folder.

Ketika Unity selesai, jendela File Explorer akan muncul.

  1. Buka folder Aplikasi .
  2. Buka Solusi Visual Studio ModelExplorer.

Jika menyebarkan ke HoloLens:

  1. Menggunakan toolbar atas di Visual Studio, ubah target dari Debug ke Rilis dan dari ARM ke x86.
  2. Klik panah drop-down di samping tombol Komputer Lokal, dan pilih Komputer Jarak Jauh.
  3. Masukkan alamat IP perangkat HoloLens Anda dan atur Mode Autentikasi ke Universal (Protokol Tidak Terenkripsi). Klik Pilih. Jika Anda tidak mengetahui alamat IP perangkat Anda, lihat di Pengaturan > Jaringan & Opsi Tingkat Lanjut Internet>.
  4. Di bilah menu atas, klik Debug -> Mulai Tanpa penelusuran kesalahan atau tekan Ctrl + F5. Jika ini pertama kalinya menyebarkan ke perangkat Anda, Anda harus memasangkannya dengan Visual Studio.
  5. Saat aplikasi telah disebarkan, tutup Fitbox dengan gerakan tertentu.

Jika menyebarkan ke headset imersif:

  1. Menggunakan toolbar atas di Visual Studio, ubah target dari Debug ke Rilis dan dari ARM ke x64.
  2. Pastikan target penyebaran diatur ke Komputer Lokal.
  3. Di bilah menu atas, klik Debug -> Mulai Tanpa penelusuran kesalahan atau tekan Ctrl + F5.
  4. Saat aplikasi telah disebarkan, tutup Fitbox dengan menarik pemicu pada pengontrol gerakan.

Bab 2 - Kursor dan umpan balik target

Tujuan

  • Desain dan perilaku visual kursor.
  • Umpan balik kursor berbasis tatapan.
  • Umpan balik hologram berbasis tatapan.

Kita akan mendasarkan pekerjaan kita pada beberapa prinsip desain kursor, yaitu:

  • Kursor selalu ada.
  • Jangan biarkan kursor terlalu kecil atau besar.
  • Hindari menghalangi konten.

Petunjuk

  1. Di folder HoloToolkit\Input\Prefabs , temukan aset InputManager .
  2. Seret dan letakkan InputManager ke Hierarki.
  3. Di folder HoloToolkit\Input\Prefabs , temukan aset Kursor .
  4. Seret dan letakkan Kursor ke Hierarki.
  5. Pilih objek InputManager di Hierarki.
  6. Seret objek Kursor dari Hierarki ke bidang KursorSimpleSinglePointerSelector InputManager, di bagian bawah Pemeriksa.

Pengaturan Pemilih Penunjuk Tunggal Sederhana

Membangun dan Menyebarkan

  1. Bangun ulang aplikasi dari Pengaturan Build File>.
  2. Buka folder Aplikasi.
  3. Buka Solusi Visual Studio ModelExplorer.
  4. Klik Debug -> Mulai Tanpa penelusuran kesalahan atau tekan Ctrl + F5.
  5. Amati bagaimana kursor digambar, dan bagaimana perubahannya terlihat jika menyentuh hologram.

Petunjuk

  1. Di panel Hierarki, perluas objek AstroMan-GEO_G-Back_Center>.>
  2. Klik dua kali pada Interactible.cs untuk membukanya di Visual Studio.
  3. Hapus komentar baris di panggilan balik IFocusable.OnFocusEnter() dan IFocusable.OnFocusExit() di Interactible.cs. Ini dipanggil oleh InputManager Mixed Reality Toolkit ketika fokus (baik dengan tatapan atau pengontrol menunjuk) memasuki dan keluar dari collider GameObject tertentu.
/* TODO: DEVELOPER CODING EXERCISE 2.d */

void IFocusable.OnFocusEnter()
{
    for (int i = 0; i < defaultMaterials.Length; i++)
    {
        // 2.d: Uncomment the below line to highlight the material when gaze enters.
        defaultMaterials[i].EnableKeyword("_ENVIRONMENT_COLORING");
    }
}

void IFocusable.OnFocusExit()
{
    for (int i = 0; i < defaultMaterials.Length; i++)
    {
        // 2.d: Uncomment the below line to remove highlight on material when gaze exits.
        defaultMaterials[i].DisableKeyword("_ENVIRONMENT_COLORING");
    }
}

Catatan

Kami menggunakan EnableKeyword dan DisableKeyword di atasnya. Untuk menggunakannya di aplikasi Anda sendiri dengan shader Standar Toolkit, Anda harus mengikuti panduan Unity untuk mengakses materi melalui skrip. Dalam hal ini, kami telah menyertakan tiga varian bahan yang disorot yang diperlukan dalam folder Sumber Daya (cari tiga bahan dengan sorotan dalam nama).

Membangun dan Menyebarkan

  1. Seperti sebelumnya, bangun proyek dan sebarkan ke HoloLens.
  2. Amati apa yang terjadi ketika tatapan ditujukan pada objek dan ketika tidak.

Bab 3 - Teknik Penargetan

Tujuan

  • Membuatnya lebih mudah untuk menargetkan hologram.
  • Stabilkan gerakan kepala alami.

Petunjuk

  1. Di panel Hierarki , pilih objek InputManager .
  2. Di panel Inspektur , temukan skrip Gaze Stabilizer . Klik untuk membukanya di Visual Studio, jika Anda ingin melihat.
    • Skrip ini mengulangi sampel data Raycast dan membantu menstabilkan tatapan pengguna untuk penargetan presisi.
  3. Di Inspektur, Anda dapat mengedit nilai Sampel Stabilitas Tersimpan . Nilai ini menunjukkan jumlah sampel yang diulang oleh stabilizer untuk menghitung nilai yang distabilkan.

Bab 4 - Indikator arah

Tujuan

  • Tambahkan indikator arah pada kursor untuk membantu menemukan hologram.

Petunjuk

Kita akan menggunakan file DirectionIndicator.cs yang akan:

  1. Perlihatkan indikator arah jika pengguna tidak menatap hologram.
  2. Sembunyikan indikator arah jika pengguna menatap hologram.
  3. Perbarui indikator arah untuk menunjuk ke hologram.

Mari kita mulai.

  1. Klik objek AstroMan di panel Hierarki dan klik panah untuk memperluasnya.
  2. Di panel Hierarki , pilih objek DirectionalIndicator di bawah AstroMan.
  3. Di panel Pemeriksa , klik tombol Tambahkan Komponen .
  4. Di menu, ketik di kotak pencarian Indikator Arah. Pilih hasil pencarian.
  5. Di panel Hierarki , seret dan letakkan objek Kursor ke properti Kursor di Pemeriksa.
  6. Di panel Proyek , di folder Hologram , seret dan letakkan aset DirectionalIndicator ke properti Indikator Arah di Pemeriksa.
  7. Buat dan sebarkan aplikasi.
  8. Perhatikan bagaimana objek indikator arah membantu Anda menemukan astronaut.

Bab 5 - Billboarding

Tujuan

  • Gunakan billboarding untuk memiliki hologram yang selalu dihadapi terhadap Anda.

Kami akan menggunakan file Billboard.cs untuk menjaga GameObject tetap berorientasi sedemikian rupan sehingga menghadap pengguna setiap saat.

  1. Di panel Hierarki , pilih objek AstroMan .
  2. Di panel Pemeriksa , klik tombol Tambahkan Komponen .
  3. Di menu, ketik di kotak pencarian Billboard. Pilih hasil pencarian.
  4. Di Pemeriksa atur Sumbu Pivot ke Y.
  5. Cobalah! Buat dan sebarkan aplikasi seperti sebelumnya.
  6. Lihat bagaimana objek Billboard menghadapi Anda tidak peduli bagaimana Anda mengubah titik pandang.
  7. Hapus skrip dari AstroMan untuk saat ini.

Bab 6 - Tag-Along

Tujuan

  • Gunakan Tag-Along agar hologram mengikuti kami di sekitar ruangan.

Saat kami mengerjakan masalah ini, kami akan dipandu oleh batasan desain berikut:

  • Konten harus selalu sekilas.
  • Konten tidak boleh menghalangi.
  • Konten penguncian kepala tidak nyaman.

Solusi yang digunakan di sini adalah menggunakan pendekatan "tag-along".

Objek tag-along tidak pernah sepenuhnya meninggalkan tampilan pengguna. Anda dapat menganggap tag-along sebagai objek yang melekat pada kepala pengguna oleh karet pita. Saat pengguna bergerak, konten akan tetap dalam pandangan yang mudah dengan meluncur ke tepi tampilan tanpa sepenuhnya pergi. Ketika pengguna menatap ke arah objek tag-along, itu datang lebih sepenuhnya ke tampilan.

Kita akan menggunakan file SimpleTagalong.cs yang akan:

  1. Tentukan apakah objek Tag-Along berada dalam batas kamera.
  2. Jika tidak dalam frustum tampilan, posisikan Tag-Along ke sebagian dalam frustum tampilan.
  3. Jika tidak, posisikan Tag-Along ke jarak default dari pengguna.

Untuk melakukan ini, pertama-tama kita harus mengubah skrip Interactible.cs untuk memanggil TagalongAction.

  1. Edit Interactible.cs dengan menyelesaikan latihan pengkodian 6.a (baris tidak berkomentar 84 hingga 87).
/* TODO: DEVELOPER CODING EXERCISE 6.a */
// 6.a: Uncomment the lines below to perform a Tagalong action.
if (interactibleAction != null)
{
    interactibleAction.PerformAction();
}

Skrip InteractibleAction.cs , dipasangkan dengan Interactible.cs melakukan tindakan kustom saat Anda mengetuk hologram. Dalam hal ini, kita akan menggunakannya khusus untuk tag-along.

  • Di folder Skrip klik aset TagalongAction.cs untuk dibuka di Visual Studio.
  • Selesaikan latihan pengkodian atau ubah ke ini:
    • Di bagian atas Hierarki, di bilah pencarian ketik ChestButton_Center dan pilih hasilnya.
    • Di panel Pemeriksa , klik tombol Tambahkan Komponen .
    • Di menu, ketik di kotak pencarian Tindakan Tagalong. Pilih hasil pencarian.
    • Di folder Hologram , temukan aset Tagalong .
    • Pilih objek ChestButton_Center di Hierarki. Seret dan letakkan objek TagAlong dari panel Proyek ke Pemeriksa ke properti Objek Ke Tagalong .
    • Seret objek Tindakan Tagalong dari Pemeriksa ke bidang Tindakan Interaktif pada skrip Interaktif .
  • Klik dua kali skrip TagalongAction untuk membukanya di Visual Studio.

Pengaturan interaktif

Kita perlu menambahkan hal-hal berikut:

  • Tambahkan fungsionalitas ke fungsi PerformAction dalam skrip TagalongAction (diwarisi dari InteractibleAction).
  • Tambahkan billboarding ke objek gazed-upon, dan atur sumbu pivot ke XY.
  • Kemudian tambahkan Tag-Along sederhana ke objek .

Berikut solusi kami, dari TagalongAction.cs:

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License. See LICENSE in the project root for license information.

using HoloToolkit.Unity;
using UnityEngine;

public class TagalongAction : InteractibleAction
{
    [SerializeField]
    [Tooltip("Drag the Tagalong prefab asset you want to display.")]
    private GameObject objectToTagalong;

    private void Awake()
    {
        if (objectToTagalong != null)
        {
            objectToTagalong = Instantiate(objectToTagalong);
            objectToTagalong.SetActive(false);

            /* TODO: DEVELOPER CODING EXERCISE 6.b */

            // 6.b: AddComponent Billboard to objectToTagAlong,
            // so it's always facing the user as they move.
            Billboard billboard = objectToTagalong.AddComponent<Billboard>();

            // 6.b: AddComponent SimpleTagalong to objectToTagAlong,
            // so it's always following the user as they move.
            objectToTagalong.AddComponent<SimpleTagalong>();

            // 6.b: Set any public properties you wish to experiment with.
            billboard.PivotAxis = PivotAxis.XY; // Already the default, but provided in case you want to edit
        }
    }

    public override void PerformAction()
    {
        // Recommend having only one tagalong.
        if (objectToTagalong == null || objectToTagalong.activeSelf)
        {
            return;
        }

        objectToTagalong.SetActive(true);
    }
}
  • Cobalah! Buat dan sebarkan aplikasi.
  • Tonton bagaimana konten mengikuti pusat titik tatapan, tetapi tidak terus menerus dan tanpa memblokirnya.