Membangun Game WebGL Lintas-Platform Dengan Babylon.js

Inilah tantangan untuk Anda: bagaimana dengan membangun game 3D selama akhir pekan? Babylon.js adalah kerangka kerja JavaScript untuk membuat game 3D dengan HTML5, WebGL, dan Audio Web , yang dibuat oleh Anda sendiri dan tim Babylon.js. Untuk merayakan pustaka versi 2.3 yang baru, kami memutuskan untuk membuat demo baru bernama "Sponza" untuk menyoroti apa yang dapat dilakukan dengan mesin WebGL dan HTML5 dalam hal membuat game hebat saat ini.

Idenya adalah untuk menciptakan pengalaman yang konsisten, serupa, jika tidak identik, di semua platform yang didukung WebGL dan mencoba menjangkau fitur aplikasi asli. Dalam artikel ini, saya akan menjelaskan bagaimana semuanya bekerja bersama, bersama dengan berbagai tantangan yang kami hadapi dan pelajaran yang kami pelajari saat membangunnya.

Bacaan Lebih Lanjut tentang SmashingMag:

• Membangun Shader Dengan Babylon.js
• Menggunakan API Gamepad Di Game Web
• Pengantar Pemodelan Poligonal Dan Three.js
• Cara Membuat Mesin Drum 8-Bit yang Responsif

Untuk mencapai tujuan ini, Sponza menggunakan sejumlah fitur HTML5 seperti WebGL, Web Audio, serta Pointer Events (sekarang didukung secara luas berkat jQuery PEP polyfill), API Gamepad, IndexedDB, HTML5 AppCache, transisi/animasi CSS3, flexbox, dan Layar Penuh API. Anda dapat menguji demo Sponza di desktop, seluler, atau Xbox One Anda.

Menemukan Demo

Pertama, Anda akan memulai dengan urutan animasi otomatis yang memberikan penghargaan kepada siapa pun yang telah membangun adegan tersebut. Sebagian besar anggota tim berasal dari adegan demo. Anda akan menemukan bahwa ini adalah bagian penting dari budaya pengembang 3D. Di pihak saya, saya berada di Atari sementara David Catuhe berada di Amiga yang masih menjadi sumber konflik reguler di antara kami, percaya atau tidak. Saya mengkode sedikit tetapi terutama membuat musik di grup demo saya. Saya adalah penggemar berat Future Crew dan lebih khusus lagi Purple Motion, komposer adegan demo favorit saya sepanjang masa. Tapi jangan sampai menyimpang dari topik.

Untuk Sponza, berikut adalah kontributornya:

• Michel Rousseau alias "Mitch" telah melakukan animasi visual yang luar biasa & pengoptimalan rendering yang bertindak sebagai artis 3D. Dibutuhkan model Sponza yang disediakan secara gratis oleh Crytek di situs web mereka dan menggunakan eksportir 3DS Max untuk menghasilkan apa yang Anda lihat.
• David Catuhe alias "deltakosh" dan saya telah melakukan bagian inti dari mesin Babylon.js dan juga semua kode untuk demo (pemuat khusus, efek khusus untuk mode demo menggunakan fade to black post-processes, dll.) serta jenis kamera baru bernama “ UniversalCamera ” yang menangani semua jenis input dengan cara yang umum.
• Saya telah menyusun musik menggunakan Renoise dan bank suara EastWest Symphonic Orchestra. Jika Anda tertarik, saya sudah membagikan alur kerja dan proses saya di artikel tentang Menulis musik untuk game World Monger Windows 8 menggunakan pelacak Renoise & Plug-in East West VST
• Julien Moreau-Mathis membantu kami dengan membangun alat baru untuk membantu seniman 3D menyelesaikan pekerjaan antara alat pemodelan (3DS Max, Blender) dan hasil akhir. Misalnya, Michel menggunakannya untuk menguji dan menyetel berbagai kamera animasi dan untuk menyuntikkan partikel ke dalam adegan.

Jika Anda menunggu sampai akhir urutan otomatis hingga "selesai epik", Anda akan secara otomatis beralih ke mode interaktif. Jika Anda ingin melewati mode demo, cukup klik ikon kamera atau tekan A pada gamepad Anda.

Dalam mode interaktif, jika Anda menggunakan Mac atau PC, Anda dapat bergerak di dalam adegan menggunakan keyboard/mouse seperti game FPS. Jika Anda menggunakan ponsel cerdas, Anda dapat bergerak menggunakan satu sentuhan (dan 2 untuk memutar kamera). Terakhir, di Xbox One, Anda dapat menggunakan gamepad (atau desktop jika Anda mencolokkan gamepad ke dalamnya). Fakta menyenangkan: pada PC sentuh Windows, Anda berpotensi dapat menggunakan 3 jenis input secara bersamaan.

Suasana berbeda dalam mode interaktif. Anda memiliki tiga sumber audio badai yang diposisikan secara acak di lingkungan 3D, hembusan angin, dan retakan api di setiap sudut. Pada browser yang didukung (Chrome, Firefox, Opera, dan Safari), Anda bahkan dapat beralih antara mode speaker normal dan mode headphone dengan mengklik ikon khusus. Kemudian akan menggunakan rendering audio binaural dari Web Audio untuk simulasi audio yang lebih realistis — jika Anda mendengarkan melalui headphone.

Untuk mendapatkan pengalaman seperti aplikasi yang lengkap, kami telah membuat ikon dan ubin untuk semua platform. Ini berarti, misalnya, pada Windows ⁸ ₁₀ Anda dapat menyematkan aplikasi web ke menu “Start”. Kami bahkan memiliki beberapa ukuran yang tersedia:

Offline dulu!

Setelah demo dimuat sepenuhnya, Anda dapat mengalihkan ponsel ke mode pesawat untuk memutus konektivitas dan mengeklik ikon Sponza. Aplikasi web akan tetap memberikan pengalaman lengkap dengan rendering WebGL, audio web 3D, dan dukungan sentuh. Alihkan ke layar penuh dan Anda benar-benar tidak akan dapat merasakan perbedaan antara demo dan pengalaman aplikasi asli.

Kami menggunakan lapisan IndexedDB yang tersedia secara asli di dalam Babylon.js untuk itu. Adegan (format JSON) dan sumber daya (tekstur JPG/PNG serta MP3 untuk musik dan suara) disimpan di IDB. Lapisan IDB yang digabungkan dengan cache aplikasi HTML5 kemudian memberikan pengalaman offline. Untuk mempelajari lebih lanjut tentang bagian ini dan cara mengonfigurasi game Anda untuk mendapatkan hasil yang serupa, Anda dapat membaca artikel tentang Menggunakan IndexedDB untuk menangani aset WebGL 3D Anda: berbagi masukan & tips dari Babylon.JS dan Caching Resources di IndexedDB di Babylon.js

Xbox One menikmati pertunjukannya

Last but not least, demo yang sama bekerja dengan sempurna di MS Edge di Xbox One Anda:

Tekan A untuk beralih ke mode interaktif . Xbox One akan memberi tahu Anda bahwa Anda sekarang dapat bergerak menggunakan gamepad Anda di dalam adegan 3D:

Jadi, mari kita rekap secara singkat.

Basis kode yang sama berfungsi di Mac, Linux, Windows di MS Edge, Chrome, Firefox, Opera dan Safari, di iPhone/iPad, di perangkat Android dengan Chrome atau Firefox, Firefox OS, dan di Xbox One! Bukankah itu keren? Mampu menargetkan begitu banyak perangkat dengan pengalaman asli yang lengkap langsung dari server web Anda?

Saya sudah berbagi kegembiraan saya tentang potensi teknologi di artikel sebelumnya di Web: perbatasan permainan berikutnya?

Retas Adegan Dengan Lapisan Debug

Jika Anda ingin memahami bagaimana Michel menguasai keajaiban pemodelan 3D, Anda dapat meretas adegan menggunakan alat Lapisan Debug Babylon.js. Untuk mengaktifkannya di komputer dengan keyboard, tekan CMD/CTRL + SHIFT + D dan jika Anda menggunakan gamepad di PC atau Xbox, tekan Y . Harap dicatat bahwa menampilkan lapisan debug membutuhkan sedikit kinerja karena pekerjaan komposisi yang harus dilakukan mesin rendering. Jadi FPS yang ditampilkan sedikit kurang penting daripada FPS asli yang Anda dapatkan tanpa menampilkan lapisan debug.

Mari kita uji di PC, misalnya.

Bergerak di dekat kepala singa dan potong saluran benjolan dari pipa shader kami:

Anda harus melihat bahwa kepala sekarang kurang realistis. Mainkan dengan saluran lain untuk memeriksa apa yang terjadi.

Anda juga dapat memotong mesin petir dinamis atau menonaktifkan mesin tabrakan untuk terbang atau bergerak menembus dinding. Misalnya, nonaktifkan kotak centang " tabrakan " dan terbang ke lantai pertama. Letakkan kamera di depan bendera merah. Anda dapat melihat mereka sedikit bergerak. Michel telah menggunakan dukungan tulang/kerangka Babylon.js untuk memindahkannya. Sekarang, nonaktifkan opsi " kerangka " dan mereka akan berhenti bergerak:

Akhirnya, Anda dapat menampilkan pohon jerat di sudut kanan atas. Anda dapat mengaktifkan atau menonaktifkannya untuk sepenuhnya menghentikan pekerjaan yang dilakukan oleh Michel:

Menghapus geometri, saluran shader, atau beberapa opsi mesin dapat membantu Anda memecahkan masalah kinerja pada perangkat tertentu untuk melihat apa yang saat ini terlalu mahal. Anda juga dapat memeriksa apakah Anda CPU-limited atau GPU-limited, meskipun sebagian besar waktu, Anda akan CPU-limited di WebGL karena sifat JavaScript mono-threading. Terakhir, alat ini juga sangat berguna untuk membantu Anda mempelajari bagaimana suatu adegan dibuat oleh seniman 3D.

Omong-omong, ini juga berfungsi dengan baik di Xbox One:

Tantangan

Sepanjang jalan, kami menghadapi sejumlah masalah dan tantangan untuk membangun demo. Mari kita lihat beberapa di antaranya secara detail.

Performa WebGL dan kompatibilitas lintas platform

Sisi pemrograman mungkin yang paling mudah untuk ditangani karena sepenuhnya ditangani oleh mesin Babylon.js itu sendiri. Kami menggunakan arsitektur shader kustom yang menyesuaikan diri dengan platform dengan mencoba menemukan shader terbaik yang tersedia untuk browser/GPU saat ini menggunakan berbagai fallback. Idenya adalah untuk menurunkan kualitas dan kompleksitas mesin rendering hingga kami berhasil menampilkan sesuatu yang berarti di layar.

Babylon.js terutama didasarkan pada WebGL 1.0 untuk menjamin bahwa pengalaman 3D yang dibangun di atasnya akan berjalan cukup banyak di mana-mana. Ini telah dibangun dengan mempertimbangkan filosofi web, jadi kami secara bertahap meningkatkan proses kompilasi shader. Ini benar-benar transparan untuk seniman 3D yang tidak ingin berurusan dengan kerumitan ini sepanjang waktu.

Namun, artis 3D memiliki peran yang sangat penting dalam pengoptimalan kinerja. Dia harus mengetahui platform yang dia targetkan, fitur yang didukung, dan batasannya. Anda tidak dapat mengambil aset yang berasal dari game AAA yang dibuat untuk GPU kelas atas dan DirectX 12 dan hanya mengintegrasikannya ke dalam game yang berjalan di mesin WebGL. Saya berpendapat bahwa menargetkan WebGL hari ini sangat mirip dengan pekerjaan yang harus Anda lakukan untuk mengoptimalkan pengalaman di perangkat seluler, dengan sedikit JavaScript ekstra yang harus sangat mono-threaded.

Mitch sangat ahli dalam hal itu: mengoptimalkan tekstur, menghitung awal kilat untuk memanggangnya ke dalam tekstur, mengurangi jumlah panggilan undian sebanyak mungkin, dll. Dia memiliki pengalaman bertahun-tahun di belakangnya dan melihat berbagai generasi Perangkat keras dan mesin 3D (dari PowerVR/3DFX hingga GPU masa kini) yang sangat membantu mewujudkan demo.

Dia telah membagikan sedikit dari dasar-dasar itu dalam artikelnya tentang Real Time 3D: membuat demo untuk Tujuan WebGL–Dasar-dasar dan telah membuktikan beberapa kali bahwa Anda dapat membuat pengalaman visual yang cukup menarik di web dengan kinerja tinggi pada GPU terintegrasi kecil, misalnya di Adegan demo Mansion, Hill Valley atau Espilit. Jika Anda tertarik, luangkan waktu untuk menonton ceramahnya di NGF2014 – Membuat aset 3D untuk dunia seluler & web, sudut pandang seorang desainer 3D di mana ia berbagi pengalamannya dan bagaimana ia berhasil mengoptimalkan adegan Hill Valley dari kurang dari 1 fps hingga 60 fps.

Tujuan awal Sponza adalah membangun dua adegan. Satu untuk desktop dan satu lagi untuk seluler dengan kompleksitas yang lebih rendah, tekstur yang lebih kecil, serta mesh dan geometri yang lebih sederhana. Tetapi selama pengujian kami, kami akhirnya menemukan bahwa versi desktop juga berjalan cukup baik di seluler karena dapat berjalan hingga 60fps pada iPhone 6s atau Android OnePlus 2. Kami kemudian memutuskan untuk tidak melanjutkan mengerjakan versi seluler yang lebih sederhana.

Tetapi sekali lagi, mungkin akan lebih baik untuk memiliki pendekatan mobile-first yang bersih di Sponza untuk mencapai 30fps+ di banyak perangkat seluler, dan kemudian meningkatkan adegan untuk seluler dan desktop kelas atas. Namun, sebagian besar umpan balik yang kami terima sejauh ini di Twitter tampaknya menunjukkan bahwa hasil akhirnya bekerja dengan sangat baik di sebagian besar perangkat. Diakui, Sponza telah dioptimalkan pada GPU HD4000 (Intel Core i5 terintegrasi) yang kurang lebih setara dengan GPU ponsel kelas atas yang sebenarnya.

Kami cukup senang dengan kinerja yang berhasil kami capai. Sponza menggunakan shader kami dengan ambient , diffuse , bump , specular dan refleksi diaktifkan. Kami memiliki beberapa partikel untuk mensimulasikan api kecil di setiap sudut, tulang animasi untuk bendera merah, suara posisi 3D, dan tabrakan saat Anda bergerak menggunakan mode interaktif.

Secara teknis, kami memiliki 98 mesh yang digunakan dalam adegan , menghasilkan hingga 377781 simpul, 16 tulang aktif, 60+ partikel yang dapat menghasilkan hingga 36 panggilan seri. Apa yang telah kita pelajari? Satu hal yang pasti: memiliki panggilan undian yang lebih sedikit adalah kunci untuk kinerja yang optimal, terlebih lagi di web.

Pemuat

Untuk Sponza, kami ingin membuat pemuat baru, berbeda dari pemuat bawaan yang kami gunakan di situs web BabylonJS, untuk memiliki aplikasi web yang bersih dan halus. Saya kemudian meminta Michel untuk menyarankan sesuatu yang baru.

Dia pertama kali mengirim layar berikut kepada saya:

Memang, layarnya terlihat sangat bagus ketika Anda pertama kali melihatnya. Tapi kemudian Anda mungkin mulai bertanya-tanya bagaimana Anda akan membuatnya bekerja di semua perangkat, dengan cara yang benar-benar responsif? Mari kita cari tahu.

Mari kita bicara tentang latar belakang terlebih dahulu. Efek buram yang dibuat oleh Michel bagus tetapi tidak berfungsi dengan baik di semua ukuran dan resolusi jendela yang menghasilkan beberapa moire. Saya kemudian menggantinya dengan tangkapan layar "klasik" dari adegan tersebut. Namun, saya ingin latar belakang memenuhi layar sepenuhnya tanpa bilah hitam dan tanpa meregangkan gambar untuk merusak rasio.

Solusinya terutama berasal dari background-size: cover + centering gambar pada sumbu X dan Y. Hasilnya, kami kemudian memiliki pengalaman yang saya cari, apa pun rasio layar yang digunakan:

Bagian lain menggunakan posisi CSS berbasis persentase yang baik. Oke, dengan diurutkan, bagaimana kita menangani tipografi — ukuran font harus didasarkan pada ukuran viewport. Jelas, kita bisa menggunakan unit viewport untuk itu. vw dan vh (di mana 1vw adalah 1% dari lebar viewport, dan 1vh adalah 1% dari tinggi viewport) didukung dengan cukup baik di seluruh browser, khususnya di semua browser yang kompatibel dengan WebGL. (Ada juga artikel tentang Tipografi Berukuran Viewport di Majalah Smashing yang sangat saya rekomendasikan untuk Anda baca.)

Terakhir, kita bermain dengan properti opacity dari gambar latar belakang untuk memindahkannya dari 0 ke 1 berdasarkan proses pengunduhan saat ini yang bergerak dari 0 ke 100%.

Omong-omong, animasi teks hanya dilakukan dengan menggunakan transisi CSS atau animasi yang dikombinasikan dengan tata letak flexbox untuk memiliki cara yang sederhana namun efisien untuk ditampilkan di tengah atau di setiap sudut.

Menangani semua masukan secara transparan

Mesin WebGL kami melakukan semua pekerjaan di sisi rendering untuk menampilkan visual dengan benar di semua platform. Tetapi bagaimana kami dapat menjamin bahwa pengguna akan dapat bergerak di dalam adegan apa pun jenis input yang digunakan?

Di Babylon.js versi sebelumnya, kami mendukung semua jenis input dan interaksi pengguna: keyboard/mouse, sentuh, joystick sentuh virtual, gamepad, VR orientasi perangkat (untuk Papan Kartu) dan WebVR, masing-masing melalui kamera khusus. Anda dapat membaca dokumentasi kami untuk mempelajari lebih lanjut tentang mereka.

Touch sedang dikelola secara universal dengan spesifikasi Pointer Events yang disebarkan ke semua platform melalui polyfill jQuery PEP (menghasilkan Touch Events untuk aplikasi saat dibutuhkan). Untuk mengetahui lebih banyak tentang Pointer Events, Anda dapat membaca di Unifying touch and mouse: bagaimana Pointer Events akan membuat dukungan sentuh lintas-browser menjadi mudah

Kembali ke demo kemudian. Ide untuk Sponza adalah memiliki kamera yang unik, menangani semua skenario pengguna sekaligus: desktop, seluler, dan konsol.

Kami akhirnya membuat UniversalCamera . Sejujurnya, itu sangat jelas dan sederhana untuk dibuat sehingga saya masih tidak tahu mengapa kami tidak melakukannya sebelumnya. UniversalCamera kurang lebih merupakan kamera gamepad yang memperluas TouchCamera yang memperluas FreeCamera .

FreeCamera menyediakan logika keyboard/mouse; TouchCamera menyediakan logika sentuh, dan perpanjangan terakhir menyediakan logika gamepad.

UniversalCamera sekarang digunakan di Babylon.js secara default. Jika Anda menelusuri demo, Anda dapat bergerak di dalam adegan menggunakan mouse, sentuh, dan gamepad di semuanya. Sekali lagi, Anda dapat mempelajari kode untuk melihat bagaimana tepatnya hal itu dilakukan.

Menyinkronkan transisi dengan musik

Sekarang, bagian ini adalah tempat kami mengajukan sebagian besar pertanyaan kepada diri sendiri. Anda mungkin telah memperhatikan bahwa urutan pengenalan disinkronkan dengan area tertentu dari trek musik . Baris pertama ditampilkan saat beberapa drum ditendang, dan urutan akhir akhir berpindah dengan cepat dari satu kamera ke kamera lainnya pada setiap nada instrumen klakson yang kami gunakan.

Menyinkronkan audio dengan loop rendering WebGL tidak mudah. Sekali lagi, ini adalah sifat JavaScript mono-threaded yang menghasilkan kompleksitas ini. Artikel tentang Pengantar Pekerja Web HTML5: pendekatan multithreading JavaScript berbagi beberapa wawasan di balik itu. Sangat penting untuk memahami masalah untuk memahami masalah global yang kita hadapi, tetapi membahas detail di sini adalah di luar cakupan artikel ini.

Biasanya, dalam adegan demo (dan video game), jika Anda ingin menyinkronkan visual dengan suara/musik, Anda akan didorong oleh tumpukan audio. Dua pendekatan yang sering digunakan:

1. Hasilkan metadata yang akan disuntikkan ke file audio, dan yang kemudian dapat "memanggil" beberapa peristiwa saat Anda mencapai bagian tertentu darinya,
2. Analisis aliran audio secara real-time melalui FFT atau teknologi serupa untuk mendeteksi puncak yang menarik atau perubahan BPM yang sekali lagi akan menghasilkan peristiwa untuk mesin visual.

Pendekatan tersebut bekerja sangat baik di lingkungan multi-utas seperti C++. Namun dalam JavaScript, dengan Audio Web, kami memiliki dua masalah:

1. JavaScript, yang mono-threaded dan, sayangnya, sebagian besar waktu pekerja web tidak akan benar-benar membantu kami,
2. Audio Web tidak memiliki peristiwa apa pun yang dapat dikirim kembali ke utas UI meskipun Audio Web sedang ditangani di utas terpisah oleh browser.

Audio Web memiliki pengatur waktu yang jauh lebih tepat daripada JavaScript. Akan sangat luar biasa untuk dapat menggunakan pengatur waktu terpisah ini pada utas terpisah untuk mengarahkan peristiwa kembali ke utas UI. Tapi hari ini, Anda belum bisa melakukannya (belum?).

Di sisi lain, kami merender adegan menggunakan WebGL dan metode requestAnimationFrame . Ini berarti bahwa, dalam "kasus terbaik", kami memiliki jangka waktu jendela 16 ms. Jika Anda kehilangan satu, Anda harus menunggu hingga 16 ms untuk dapat bertindak pada frame berikutnya untuk mencerminkan sinkronisasi suara (misalnya untuk meluncurkan efek "fade-to-black").

Saya kemudian berpikir untuk menyuntikkan logika sinkronisasi ke dalam loop requestAnimationFrame . Saya mempelajari waktu yang dihabiskan sejak awal urutan dan melihat opsi untuk menyesuaikan visual untuk bereaksi pada acara audio. Kabar baiknya adalah bahwa audio Web akan membuat suara apa pun yang terjadi di utas UI utama. Misalnya, Anda dapat yakin bahwa stempel waktu 12 detik musik akan tiba tepat 12 detik setelah musik mulai diputar meskipun GPU mengalami kesulitan merender adegan.

Pada akhirnya, kami akhirnya memilih solusi paling sederhana yang pernah ada: menggunakan panggilan setTimeout() ! Ya saya tahu. Jika Anda melihat sebagian besar artikel di luar sana, termasuk yang saya tautkan di atas, Anda akan menemukan bahwa itu cukup tidak dapat diandalkan. Tetapi dalam kasus kami, setelah adegan siap untuk dirender, kami tahu bahwa kami telah mengunduh semua sumber daya kami (tekstur dan suara) dan mengkompilasi shader kami. Kita tidak boleh terlalu terganggu oleh kejadian tak terduga yang memenuhi utas UI. GC bisa menjadi masalah, tetapi kami juga menghabiskan banyak waktu untuk melawannya di mesin: Mengurangi tekanan pada pengumpul sampah dengan menggunakan bilah pengembang F12 di Internet Explorer 11.

Namun, kami tahu bahwa solusi ini jauh dari ideal. Beralih ke tab lain atau mengunci ponsel Anda dan membukanya beberapa detik kemudian dapat menimbulkan beberapa masalah pada bagian sinkronisasi demo. Kami dapat memperbaiki masalah ini dengan menggunakan API Visibilitas Halaman, misalnya dengan menjeda loop rendering, berbagai suara, dan menghitung ulang kerangka waktu berikutnya untuk panggilan setTimeout() .

Tapi mungkin kita melewatkan sesuatu; mungkin, dan bahkan mungkin, ada pendekatan yang lebih baik untuk menangani masalah ini. Kami akan senang mendengar pemikiran dan saran Anda di bagian komentar jika menurut Anda ada cara yang lebih baik untuk menyelesaikan masalah yang sama.

Menangani Audio Web di iOS

Tantangan terakhir yang ingin saya bagikan kepada Anda adalah cara Audio Web ditangani oleh iOS di iPhone dan iPad. Jika Anda mencari artikel tentang "audio web + iOS", Anda akan menemukan banyak orang mengalami kesulitan untuk memutar suara di iOS. Sekarang, apa yang terjadi di sana?

iOS memiliki dukungan Audio Web yang luar biasa — bahkan mode audio binaural. Tetapi Apple telah memutuskan bahwa halaman web tidak dapat memutar suara apa pun secara default tanpa interaksi pengguna tertentu. Keputusan ini mungkin dibuat untuk menghindari iklan atau hal lain yang mengganggu pengguna dengan memainkan suara yang tidak diminta.

Apa artinya bagi pengembang web? Nah, pertama-tama Anda harus membuka kunci konteks audio web iOS setelah sentuhan pengguna — sebelum mencoba memutar suara apa pun. Jika tidak, aplikasi web Anda akan tetap tidak bersuara.

Sayangnya, satu-satunya cara yang saya temukan untuk melakukan pemeriksaan ini jika dengan melakukan pendekatan sniffing platform pengguna karena saya tidak menemukan cara deteksi fitur untuk melakukannya. Itu bukan teknik yang mengerikan, dan bukan antipeluru, tetapi saya tidak dapat menemukan solusi lain yang akan menyelesaikan masalah ini. Kode? Ini dia!

Jika Anda tidak menggunakan iPad/iPhone/iPod, konteks audio segera tersedia untuk digunakan. Jika tidak, kami membuka kunci konteks audio iOS dengan memutar kode yang menghasilkan suara kosong pada acara touchend . Anda dapat mendaftar ke acara onAudioUnlocked jika Anda ingin menunggunya sebelum meluncurkan game Anda. Jadi, jika Anda meluncurkan Sponza di iPhone/iPad, Anda akan memiliki layar terakhir ini di akhir urutan pemuatan:

Menyentuh di mana saja di layar akan membuka kunci tumpukan audio iOS dan akan meluncurkan "pertunjukan".

Jadi di sini kita pergi! Saya harap Anda menikmati beberapa wawasan di balik pengembangan demo. Untuk mempelajari lebih lanjut, baca kode sumber lengkap demo ini di GitHub kami. Jelas, semuanya bersumber terbuka, dan Anda dapat menemukan file utama di GitHub: index.js dan babylon.demo.ts.

Akhirnya, saya sangat berharap Anda sekarang semakin yakin bahwa web jelas merupakan platform yang hebat untuk bermain game! Nantikan, karena kami sedang mengerjakan demo baru saat ini, dan mudah-mudahan mereka juga cukup mengesankan.

Artikel ini adalah bagian dari seri pengembangan web dari penginjil dan insinyur teknologi Microsoft tentang pembelajaran JavaScript praktis, proyek sumber terbuka, dan praktik terbaik interoperabilitas termasuk browser Microsoft Edge.

Kami mendorong Anda untuk menguji di seluruh browser dan perangkat termasuk Microsoft Edge – browser default untuk Windows 10 – dengan alat gratis di dev.microsoftedge.com, termasuk alat pengembang F12 – tujuh alat berbeda yang terdokumentasi lengkap untuk membantu Anda men-debug, menguji, dan mempercepat halaman web Anda. Juga, kunjungi blog Edge untuk tetap mendapatkan informasi terbaru dari pengembang dan pakar Microsoft.