Cara kami menghadirkan Google Earth ke web

Meningkatkan akses lintas browser ke Google Earth dengan WebAssembly.

Jordon Mears
Jordon Mears

Dalam kondisi ideal, setiap aplikasi yang dibuat developer, terlepas dari teknologinya, akan tersedia di browser. Namun, ada kendala untuk menghadirkan project ke web, bergantung pada teknologi yang digunakan untuk mem-build project tersebut dan seberapa baik teknologi tersebut didukung oleh berbagai vendor browser. WebAssembly (Wasm) adalah target kompilasi yang distandarisasi oleh W3C yang membantu kita mengatasi masalah ini dengan memungkinkan kita menjalankan codebase dari bahasa selain JavaScript di web.

Kami telah melakukannya dengan Google Earth, yang tersedia saat ini dalam pratinjau beta di WebAssembly. Perlu diingat bahwa ini masih merupakan versi beta Google Earth dan mungkin tidak selancar biasanya (coba Earth untuk web biasa). Anda dapat bereksperimen dengan versi beta ini di Chrome dan browser berbasis Chromium lainnya, termasuk Edge (versi Canary) dan Opera, serta Firefox. Pertimbangkan versi beta ini sebagai inspirasi jika Anda juga mencari dukungan lintas browser yang lebih baik untuk aplikasi khusus platform Anda.

Alasan kami memilih WebAssembly untuk Google Earth

Awalnya, kami menulis sebagian besar Google Earth dalam C++ karena merupakan aplikasi desktop yang dimaksudkan untuk diinstal. Kemudian, kami dapat mem-port-nya ke Android dan iOS saat smartphone mulai populer, dengan mempertahankan sebagian besar codebase C++ menggunakan NDK dan Objective-C++. Pada tahun 2017, saat menghadirkan Earth ke web, kami menggunakan Native Client (NaCl) untuk mengompilasi kode C++ dan menjalankannya di browser Chrome.

Pada saat itu, NaCl adalah satu-satunya teknologi browser yang memungkinkan kami mem-porting kode C++ ke browser dan memberi kami jenis performa yang diperlukan Earth. Sayangnya, NaCl adalah teknologi khusus Chrome yang tidak pernah diadopsi di seluruh browser. Sekarang kita mulai beralih ke WebAssembly, yang memungkinkan kita mengambil kode yang sama dan menjalankannya di seluruh browser. Artinya, Earth akan tersedia untuk lebih banyak orang di seluruh web.

Screenshot Earth yang menampilkan Menara Eiffel

Thread tentang threading

WebAssembly masih berkembang sebagai standar, dan browser terus diperluas dengan lebih banyak fitur dan fungsi. Dari perspektif Earth, perbedaan paling signifikan dalam dukungan untuk WebAssembly di antara browser adalah dukungan untuk threading. Beberapa browser menawarkan dukungan multi-threading dan yang lainnya tidak. Anggaplah Bumi seperti video game 3D besar dari dunia nyata. Dengan demikian, kita terus melakukan streaming data ke browser, mendekompresi, dan menyiapkannya untuk dirender ke layar. Kemampuan untuk melakukan pekerjaan ini di thread latar belakang telah menunjukkan peningkatan yang jelas dalam performa Earth di browser.

WebAssembly multi-thread mengandalkan fitur browser yang disebut SharedArrayBuffer, yang ditarik dari browser setelah kerentanan keamanan Spectre dan Meltdown terungkap. Untuk mengurangi potensi kerusakan dari serangan, tim keamanan Chrome memperkenalkan Isolasi Situs di Chrome untuk semua sistem operasi desktop. Isolasi Situs membatasi setiap proses perender untuk dokumen dari satu situs. Dengan fitur keamanan ini, Chrome mengaktifkan kembali SharedArrayBuffer untuk desktop—yang memungkinkan kami menggunakan WebAssembly multi-thread dengan Earth untuk Chrome.

Browser lain sedang mengerjakan Isolasi Situs atau mitigasi lainnya untuk mengaktifkan kembali SharedArrayBuffer. Sementara itu, Earth berjalan dengan thread tunggal di browser tersebut.

Cara kerja WebAssembly dengan browser yang berbeda

Kami telah mempelajari banyak hal tentang status dukungan WebAssembly di browser yang melakukan porting Earth. Jika Anda akan mengembangkan aplikasi menggunakan WebAssembly, penting untuk memahami status saat ini tentang cara kerja WebAssembly dengan berbagai browser.

Edge

Edge hampir menjadi dua pengalaman pengembangan yang berbeda berdasarkan pilihan Microsoft untuk beralih dari perender EdgeHTML ke perender berbasis Chromium. Saat ini, Google Earth versi beta di WebAssembly tidak akan berjalan di Edge versi publik saat ini karena kurangnya dukungan untuk WebGL2. Masalah ini akan diperbaiki setelah Edge versi baru, yang didasarkan pada Chromium, dirilis dalam waktu dekat. Sementara itu, Anda dapat mendownload Edge versi Canary dan melihat bahwa Earth berfungsi dengan cukup baik.

Chrome

Chrome memiliki dukungan yang kuat untuk WebAssembly, termasuk multi-threading di desktop, sehingga Earth akan berjalan lebih lancar. Namun, kami berharap Chrome menambahkan dukungan untuk alokasi memori dinamis dengan multi-threading di WebAssembly. Hingga saat itu, Earth mungkin gagal dimulai di perangkat dengan jumlah memori terbatas (seperti mesin 32-bit).

Firefox

Firefox menawarkan dukungan yang baik untuk WebAssembly, tetapi telah menonaktifkan dukungan untuk multi-threading. Akibatnya, Anda mungkin akan mengalami pengalaman yang lebih lambat dengan Earth. Kami berharap Mozilla akan menghadirkan kembali dukungan untuk multi-threading di versi mendatang. Di sisi positifnya, Firefox mendukung alokasi memori dinamis.

Opera

Opera didasarkan pada Chromium seperti Chrome, beserta versi Edge mendatang. Namun, versi Opera saat ini hanya menawarkan dukungan WebAssembly dengan thread tunggal. Earth memang berjalan di Opera, tetapi dengan pengalaman yang agak menurun. Semoga Opera versi yang lebih baru akan memiliki dukungan untuk multi-threading dan dukungan WebAssembly yang lebih andal.

Safari

Safari memiliki penerapan WebAssembly yang kuat, tetapi tidak memiliki dukungan penuh untuk WebGL2. Oleh karena itu, Earth dengan WebAssembly tidak berjalan di Safari. Secara khusus, beberapa shader kami memerlukan GLSL 1.2. Kami berharap Earth juga akan tersedia di Safari, setelah dukungan yang lebih baik untuk WebGL2 ditambahkan.

Menantikan adopsi fitur WebAssembly yang lebih luas

Sudah lama sejak kami pertama kali memulai upaya peralihan ini. Sekitar enam tahun yang lalu, kami memulai dengan demo internal awal berbasis asm.js yang dikelola dan diperluas selama bertahun-tahun. Kemudian, Earth dikonversi menjadi build WebAssembly, karena WebAssembly menjadi standar yang diadopsi W3C.

Kami masih memiliki banyak hal yang harus dilakukan untuk WebAssembly dan Earth. Secara khusus, kita ingin beralih ke backend LLVM menggunakan Emscripten (toolchain untuk membuat WebAssembly dari kode C++). Perubahan ini akan memungkinkan dukungan SIMD di masa mendatang, serta alat proses debug yang lebih kuat seperti peta sumber untuk kode bahasa sumber. Hal lain yang kami harapkan adalah adopsi OffscreenCanvas dan dukungan penuh untuk alokasi memori dinamis di WebAssembly. Namun, kami tahu bahwa kami berada di jalur yang benar: WebAssembly adalah masa depan jangka panjang untuk Earth di web.

Luangkan waktu sejenak untuk mencoba beta kami. Beri tahu kami bagaimana pengalaman Anda dengan fitur ini dengan memberikan masukan langsung di Earth.