Menampilkan dan berinteraksi dengan konten web

Gunakan WebSlate untuk menampilkan konten web interaktif di lingkungan Jala 3D Anda. Dapatkan pengalaman penjelajahan lengkap di PC atau Quest 2 dengan input, penyesuaian, keamanan, dan manajemen performa yang intuitif.

Anda dapat menggunakan WebSlates untuk:

• Berinteraksi dengan peta, diagram, dan data

• Menampilkan dasbor, halaman web, foto, dan video

• Menampilkan konten yang menyoroti produk dan layanan, cerita pelanggan, dan identitas merek

Fitur WebSlate

• Tentukan URL default: Pilih lokasi Anda, lalu seret dan letakkan prefab, lalu tambahkan URL. Ulangi jika Anda ingin beberapa WebSlates di adegan Anda.

• Input & audio bawaan: Navigasi web pengguna akhir, interaksi dengan aplikasi, dan melihat video menjadi tersedia di Mesh.

• Navigasi aman: Kunci URL pengalihan untuk mencegah pengalihan berbahaya dan navigasi hyperlink yang tidak diinginkan.

• Kustomisasi visual: Ubah kualitas untuk mengoptimalkan perangkat pengguna. Menarik pengguna dari kejauhan dengan konten yang mudah dilihat.

• Dapat ditulis: Dengan pembuatan skrip visual dan pembuatan skrip cloud, Anda dapat mengaktifkan pengalihan antar halaman dengan tombol .

• Integrasi alat content Penganalisis Kinerja: Mengukur waktu rata-rata yang diperlukan URP untuk merender WebSlates dalam bingkai dan menemukan masalah pemuatan konten.

• Pengujian dalam Mode Emulasi Jala: Berinteraksi dengan konten Anda sebagai pengguna, langsung dari editor Unity.

• Autentikasi pengalaman secara manual: Akses konten aman dari dalam pengalaman dengan masuk ke akun Anda dan melihat konten saat runtime.

Cara kerja WebSlate

Jika Anda memiliki proyek Unity yang disiapkan untuk membuat Lingkungan Mesh, menambahkan WebSlate ke Lingkungan Anda adalah proses yang mudah.

Di Mesh, WebSlate memuat halaman interaktif melalui URL yang disediakan. URL yang diberikan kepadanya di Lingkungan akan sama dengan yang dimuat di Mesh. Dalam toolkit Mesh, prefab WebSlate berisi parameter URL yang dapat ditentukan pengembang untuk mengontrol konten yang ditampilkan di Lingkungan Mesh mereka.

• Saat dimuat di Aplikasi Mesh untuk PC dan Quest, halaman web yang dimuat oleh WebSlate dapat berinteraksi melalui input pengontrol mouse, keyboard, dan Quest XR.

• Ukuran dan bentuk WebSlate akan cocok dengan quad GameObject tempatnya ditempatkan. Biasanya, ini adalah quad yang dipanggang di dalam prefab WebSlate.

• Beberapa WebSlates dapat ditambahkan ke adegan. Jumlah pengguna di Lingkungan Jala Anda tidak memengaruhi performa WebSlate; Sumber daya WebSlate diinisialisasi secara lokal pada komputer pengguna.

• WebSlates dapat dikonfigurasi dengan skrip visual atau cloud untuk menambahkan perilaku interaktif dan sinkronisasi di seluruh pengguna.

• WebSlate dapat menampilkan halaman web dan mendukung interaksi tetapi tidak berfungsi sebagai browser dan tidak mendukung marka buku, riwayat, atau perjalanan bolak-balik.

• Anda dapat melihat pratinjau WebSlate di proyek Unity sebelum mengunggah adegan ke Mesh dengan menekan Putar.

Persyaratan/Dependensi

WebSlate tergantung pada paket Unity.InputSystem dan Unity.XR.Interaction.Toolkit Unity, yang terletak di toolkit Mesh.

Menambahkan prefab WebSlate ke proyek Unity Anda

Ada dua rasa prefab WebSlate yang tersedia di toolkit Mesh yang dapat Anda tambahkan ke adegan Anda. Jika Anda lebih suka WebSlate yang bersih tanpa komponen tambahan, tambahkan prefab WebSlate. Jika Anda ingin WebSlate yang terkandung dalam bingkai bergaya dengan fitur tambahan, tambahkan prefab WebSlateFramed .

Menambahkan prefab WebSlate dari menu

Untuk menambahkan salah satu prefab ke adegan Anda:

1. Klik kanan di dalam Hierarki, lalu di menu konteks, lakukan salah satu hal berikut ini:

   Untuk menambahkan WebSlate yang bersih tanpa komponen tambahan:
   Pilih Mesh Toolkit>WebSlate.

   Untuk menambahkan WebSlate dengan bingkai bergaya dan fitur tambahan:
   Pilih Mesh Toolkit>WebSlateFramed.

2. Tambahkan URL ke WebSlate untuk menampilkan isi.

   Tips: Anda juga dapat mengklik tombol "+" di kiri atas jendela Hierarki untuk melihat menu yang sama.

   

   

Cari dan tambahkan prefab WebSlate

Anda juga dapat mencari dan menambahkan prefab WebSlate.

1. Di bidang Pencarian, ketik "WebSlate." Pastikan Anda memilih Semua filter.

   

2. Seret prefab yang Anda inginkan ke tampilan Adegan atau Hierarki.

   

3. Di Pemeriksa, navigasikan ke komponen WebSlate , lalu tambahkan URL yang ingin Anda tampilkan di WebSlate:

   

Pastikan WebSlate Anda dapat dibaca

Penting untuk memastikan bahwa semua peserta dalam pengalaman Mesh dapat membaca semua konten di WebSlate dengan nyaman. Kami menyarankan agar Anda membuat beberapa ruang lantai kosong di depan WebSlate sehingga peserta dapat bergerak lebih dekat ke ruang tersebut dan menyesuaikan posisinya untuk tampilan yang lebih baik. Jika pengalaman Anda berisi kursi, lihat WebSlate dari setiap kursi untuk memastikan bahwa peserta yang duduk di kursi tersebut dapat membaca teks di WebSlate. Jika Anda memiliki kontrol atas konten yang akan muncul di WebSlate, bereksperimenlah dengan berbagai ukuran font untuk teks guna menentukan ukuran optimal untuk ditampilkan. Dalam contoh pengalaman di bawah ini, teks "Microsoft Teams" di tengah WebSlate lebih dari cukup besar untuk dilihat dengan nyaman, tetapi teks yang jauh lebih kecil di sudut sulit dibaca. Dalam jenis skenario ini, Anda tidak akan memiliki kontrol atas teks dalam video streaming sehingga Anda harus mempertimbangkan untuk memindahkan seat lebih dekat. Selain itu, kursi yang lebih terpusat dan melihat lurus webSlate akan memberikan pemandangan yang lebih baik daripada kursi yang berada di samping.

Pratinjau WebSlate dalam Mode Emulasi Jala

Untuk melihat URL yang ditampilkan di WebSlate dengan lebih cepat, Anda dapat menggunakan Mode Emulasi Jala. Selain menguji dalam mode ini, satu-satunya cara lain untuk melihat WebSlate Anda adalah dengan mengunggahnya menggunakan Mesh toolkit Uploader dan melihatnya dalam pengalaman Mesh.

Untuk menambahkan Mode Emulasi Mesh ke proyek Anda, ikuti petunjuk di artikel Emulator Mesh.

Untuk melihat halaman Web Anda di WebSlate:
Tekan tombol Putar editor Unity.

Mengaktifkan interaksi WebSlate untuk Mode Emulasi Jala

Untuk mengaktifkan interaksi di WebSlate, Anda harus menyiapkan beberapa hal.

1. Tambahkan Emulator Mesh ke adegan Anda untuk mengaktifkan Mode Emulasi Mesh.

2. Buat Plane GameObject baru. Ini akan jadi lantaimu. Pastikan GameObject diposisikan di asal (0,0,0):

   

3. Posisikan WebSlate sehingga berada di depan karakter MeshEmulatorSetup :

   

4. Klik tombol Putar, lalu klik dua kali untuk berinteraksi dengan halaman Web yang ditampilkan di WebSlate:

   

Kerja bagus! Anda menambahkan WebSlate kustom ke adegan Unity Anda dan menguji interaksi dalam Mode Emulasi Jala.

Sekarang Anda siap untuk mengunggah Lingkungan ke Mesh dan membagikan kreasi Anda dengan dunia!

WebSlate dalam Visual Scripting

Dengan Visual Scripting, pengembang dapat menerapkan fungsionalitas dan perilaku WebSlate tanpa perlu mengetik kode. Sebaliknya, antarmuka visual berbasis simpul disediakan, memungkinkan pengguna untuk menentukan dan menghubungkan berbagai tindakan dan peristiwa dalam adegan. Beberapa pengembang menemukan bahwa ini dapat menyederhanakan proses penambahan interaktivitas dan perilaku.

Untuk mengaktifkan pembuatan skrip visual menggunakan WebSlate, Anda harus menyiapkan beberapa hal.

1. Buka Edit>Pengaturan Proyek.

2. Di daftar sisi kiri, pilih Visual Scripting.

   

3. Perluas Pustaka Simpul. Ini menampilkan daftar perakitan.

4. Di bagian bawah daftar rakitan di sebelah kanan, klik tombol Tambahkan (+). Ini menambahkan item baru ke daftar yang menampilkan "(Tidak Ada Rakitan)".

5. Klik entri rakitan baru, lalu di bidang Pencarian, ketik "Webslate". Ini mempersempit daftar ke Microsoft.Mesh.WebSlate. Pilih item ini untuk menambahkannya ke daftar Rakitan .

   

   Visual Scripting menambahkan Microsoft.Mesh.WebSlate dan simpulnya ke Pustaka Simpul. Untuk menggunakan simpul dalam proyek Anda, pilih tombol Regenerasi Simpul .

   

   Muat URL

   Pengembang sekarang dapat mengubah konten web secara dinamis secara real time dengan memuat URL baru melalui Visual Scripting. Fungsionalitas ini memperluas cakupan untuk berbagai aplikasi, termasuk mengubah konten web berdasarkan preferensi pengguna atau memperbaruinya sebagai respons terhadap data real-time.

   

   Muat Isi HTML

   Fitur baru di WebSlate ini memungkinkan pengembang untuk menjatuhkan file HTML sebagai TextAssets ke dalam adegan Unity dengan upaya rendah. Integrasi ini tidak hanya menyederhanakan alur kerja tetapi juga memungkinkan umpan balik langsung dalam Mode Unity Play, meningkatkan pengeditan dan penelusuran kesalahan real-time. Selain itu, ini mendukung pengalihan konten dinamis, menawarkan fleksibilitas dan pengalaman pengguna yang lebih interaktif.

   

   Buat HTML baru atau gunakan kembali yang sudah ada untuk melihat/berinteraksi di lingkungan Mesh Anda: Jika Anda tidak ingin menghosting konten HTML atau Anda memiliki file offline yang aman, Anda dapat menambahkan HTML di tempat dan menyertakannya sebagai bagian dari aset di adegan Anda.

   Pemuatan Dinamis saat Runtime: Memuat HTML dari file memungkinkan pengembang untuk membuat perubahan real time menggunakan Visual Scripting. Kemampuan dinamis ini meningkatkan pengalaman pengguna.

   Perulangan Umpan Balik Cepat dalam Mode Unity Play: Dengan konten HTML yang dimuat dari file, pengembang dapat langsung melihat efek perubahan mereka saat dalam Mode Unity Play.

WebSlate di Cloud Scripting

Pengembang juga dapat menambahkan WebSlate ke Lingkungan menggunakan pembuatan skrip cloud Mesh. Ini berarti bahwa WebSlate dapat dinavigasi oleh skrip cloud Mesh lalu disinkronkan di seluruh pengguna. Misalnya, Anda dapat membuat skrip cloud Mesh yang berisi simpul WebSlate dan satu atau beberapa simpul yang dapat berinteraksi. Selanjutnya, Anda dapat menyiapkan penanganan aktivitas klik InteractableNode untuk menavigasi WebSlate ke URL lain. Dengan menambahkan skrip cloud Mesh bersama WebSlate, pengguna Anda dapat memperbarui konten WebSlate secara interaktif.

Untuk panduan lebih lanjut tentang simpul WebSlate di Aplikasi Mesh, lihat Gambaran umum skrip visual.

Tips Umum

• Anda dapat menempatkan WebSlate di GameObjects selain Quad dengan menambahkan WebSlate.cs sebagai komponen skrip langsung ke objek pilihan 3D Anda dan menambahkan UnlitWebSlate.mat ke MeshRenderer Materials. Perhatikan bahwa ini dapat mengakibatkan peregangan tekstur visual, inversi, dan/atau rotasi.

• WebSlate memuat URL default. Anda harus mengganti URL ini dengan URL yang Anda sukai untuk setiap WebSlate yang digunakan. Parameter kecerahan diatur ke 1,0 (100% dari kecerahan browser).

• WebSlates akan secara otomatis menangguhkan diri mereka sendiri setelah di luar layar terlalu lama. Jika Anda perlu memastikan slate tertentu selalu berjalan (seperti pemutaran audio livestream atau berkelanjutan), periksa tombol "Cegah Penangguhan" pada WebSlate asosiasi. Lihat di bawah ini untuk implikasi performa.

• Untuk mengukur URL gambar ke ukuran WebSlate, bungkus URL dalam HTML. Manfaatkan API WebSlate LoadHTML melalui skrip visual untuk merender konten HTML ini ke WebSlate Anda. Tambahkan HTML yang dibangun ke properti HTMLContent. Atau, Anda dapat menggunakan LOADHTMAsset API dan meneruskan HTML sebagai aset. Ganti URL gambar dengan URL gambar Anda.

  Contoh HTML dengan URL gambar dan grafik skrip Visual menggunakan LoadHTML dan LoadHTMLAsset API:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

Performa

• Karena WebSlate adalah halaman web yang dimuat, penting untuk mempertimbangkan implikasi performa:

  • Adegan biasanya berkinerja pada 60fps dengan hingga 10 WebSlates aktif. Framerate dan penurunan performa umum dapat diamati sebanding dengan jumlah WebSlates yang ditempatkan dalam adegan, terlepas dari kontennya.

  • Konten dimuat dan dijalankan di WebSlate pada utas yang terpisah dari utas pembaruan dan penyajian adegan, dan oleh karena itu tidak mungkin secara langsung memengaruhi kecepatan bingkai. Namun, masih penting untuk mempertimbangkan biaya JavaScript yang berjalan di halaman Web baik dalam hal kompleksitas runtime maupun penggunaan memori.

  • Untuk membantu menghemat performa, WebSlates yang di luar layar selama lebih dari 30 detik secara otomatis ditangguhkan. Mereka dengan cepat melanjutkan pada kembali di layar, tetapi ini dapat berdampak pada layanan yang berjalan secara aktif di halaman yang dihosting. Jika ini adalah masalah, pengembang dapat menonaktifkan penangguhan dengan kotak centang "Cegah Penangguhan" prefab. Perhatikan bahwa melakukannya dapat menyebabkan adegan menggunakan lebih banyak sumber daya, karena WebSlates ini tetap aktif setiap saat.

  

• Karena WebSlates tidak memiliki antarmuka pengguna navigasi eksternal secara default, praktik terbaiknya adalah hanya memuat URL kustom, di mana navigasi situs bersifat siklik dan dapat dilakukan di dalam halaman. Ini dapat dilakukan dengan bilah sisi navigasi, atau tautan ke halaman hub, misalnya.

• Alat Content Penganalisis Kinerja (CPA) mencakup penganalisis WebSlate yang mengukur waktu rata-rata yang dibutuhkan alur render Unity untuk merender WebSlates dalam bingkai.

  • Pengukuran didasarkan pada perekam profiler Unity dan memerlukan mode Putar. Penganalisis memindahkan kamera ke setiap WebSlate untuk mengumpulkan sampel profiler yang memadai dan menghitung waktu render rata-rata.

  • Ini menyediakan analisis tahap pertama tingkat tinggi dari waktu render WebSlate dalam konteks alur render Unity. Ini tidak menyediakan kecepatan bingkai konten WebSlate itu sendiri.

  • Jika alur render Unity melebihi ambang batas untuk merender WebSlates (saat ini 10ms), alat CPA memberikan peringatan.

  • Pengukuran yang sama juga tersedia untuk Profiler Performa. Grup pada Profiler Performa biasanya mengubah warna dari hijau ke merah ketika jatah anggaran untuk kategori dilewati. Untuk saat ini, grup WebSlate hanya ditampilkan sebagai hijau sampai anggaran waktu render yang wajar dirasionalisasi untuk WebSlates.

  

Pembatasan keamanan

• WebSlates dikunci ke URL yang dinavigasi, mencegah pengalihan berbahaya. Semua navigasi hyperlink yang tidak diinginkan ke domain luar diblokir, kecuali secara eksplisit terdaftar sebagai domain yang diizinkan (lihat di bawah).

• WebSlates dibatasi untuk navigasi dalam domain awal atau pengalihan URL dan server yang ditentukan.

• Navigasi dalam WebSlate secara eksklusif terbatas pada HTTPS.

• Akses perangkat ke webcam, mikrofon, dan geolokasi diblokir.

Daftar izin domain WebSlate

Untuk memastikan keamanan terhadap vektor serangan berbasis URL yang tidak diinginkan seperti phishing, WebSlates secara default membatasi navigasi ke URL yang disertakan di bawah domain halaman pertama yang dimuat ke dalam WebSlate. Misalnya, WebSlate yang diluncurkan https://www.microsoft.com/ hanya akan menavigasi ke halaman yang URL-nya dimulai dengan "www.microsoft.com". Meskipun ini memastikan bahwa pengguna tidak akan secara tidak sengaja menyimpang dari alur navigasi yang dimaksudkan, ini dapat menjadi default yang terlalu ketat untuk beberapa kasus penggunaan, seperti autentikasi pengguna, di mana mungkin ada pengalihan ke subdomain atau penyedia autentikasi pihak ketiga.

Cara untuk mengakomodasi kasus penggunaan ini adalah dengan menambahkan domain ke daftar izin WebSlate.

Menambahkan domain secara otomatis (disarankan)

Saat bekerja dengan WebSlates di editor Unity, Anda memiliki opsi untuk mengaktifkan "Kumpulkan Domain yang Diizinkan". Ini akan menghapus pembatasan navigasi domain sehingga Anda dapat menavigasi secara bebas saat berjalan dalam mode Putar untuk menguji skenario Anda. Saat Anda menavigasi dalam mode Putar, WebSlate akan mencatat domain yang Anda kunjungi di latar belakang.

Dalam hal ini, kami memperluas navigasi dari microsoft.com untuk juga menyertakan learn.microsoft.com.

Setelah keluar dari mode Putar, Anda akan menemukan aset yang disebut "WebViewAllowedDomains.asset" di folder Aset tingkat atas Anda.

Mengklik aset ini akan memberi Anda daftar domain tambahan yang Anda kunjungi di luar domain URL awal Anda. Anda dapat mengklik kanan, menyalin, lalu menempelkan nilai ke bidang "Domain yang Diizinkan" dari komponen WebSlate.

Catatan

Opsi ini tidak mungkin diaktifkan dalam adegan yang diunggah. Membiarkan "Kumpulkan Domain yang Diizinkan" diaktifkan TIDAK akan menghapus pembatasan di adegan akhir Anda. Namun, daftar domain yang diizinkan akan tetap ada dan akan memungkinkan navigasi selama domain ditambahkan ke WebSlate.

Menambahkan domain secara manual

Jika Anda sudah mengetahui domain mana yang akan Anda butuhkan, Anda dapat menambahkannya secara manual ke WebSlate dengan memperluas drop-down "Domain yang Diizinkan" dan menambahkan domain tambahan Anda ke daftar di GUI Unity.

Streaming langsung yang didukung oleh WebSlate

Untuk mencapai hal ini, integrasikan WebSlate Prefab di lingkungan Anda dan berikan URL livestream. Dalam kasus di mana URL livestream tidak tersedia sebelumnya, Anda dapat menggunakan layanan pengalihan URL untuk menghasilkan URL dan memberikannya ke WebSlate. Pendekatan ini memberikan fleksibilitas untuk memperbarui URL pengalihan pada saat terakhir tanpa perlu menerbitkan ulang lingkungan besar dengan URL livestream. Pastikan Anda memilih opsi 'Cegah Penangguhan' selama penyiapan WebSlate untuk mencegahnya ditangguhkan setelah 30 detik jika seseorang tidak secara aktif melihat WebSlate. WebSlates tidak memerlukan konfigurasi dengan Alat Host, sehingga peristiwa tanpa host dapat dibuat dan berfungsi sebagai spasi drop-in dengan konten yang bermakna.

Batasan dan Masalah yang Diketahui

Batasan umum

• WebSlates saat ini didukung dalam aplikasi Mesh pada perangkat PC Standalone dan Quest. WebSlates hanya tersedia untuk dipratinjau di unity Editor di Windows.

• WebSlates dalam pratinjau Editor kehilangan beberapa kemampuan input (klik dua kali, seret).

• Saat melihat dari jarak jauh pada Quest, legibilitas rendah.

• Audio tidak dilokalkan secara spasial.

• Sinkronisasi konten web terbatas pada aplikasi yang menggunakan API web untuk menyinkronkan konten.

Masalah yang diketahui

Lihat bagian WebSlate di artikel Masalah toolkit Mesh yang diketahui.

Umpan balik untuk konten Web di Mesh

Kami menyukai umpan balik dan laporan bug! Jika Anda ingin memberikan umpan balik, gunakan tombol Umpan Balik di dalam pengalaman Mesh apa pun. Ini memastikan bahwa umpan balik dan pelaporan bug Anda akan ditinjau dan dimasukkan dengan cepat. Untuk umpan balik WebSlate, sertakan "[konten web]" atau sebutan WebSlate dalam umpan balik Anda.