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, apa pun teknologinya, akan tersedia di browser. Namun, ada hambatan untuk menghadirkan proyek ke web, bergantung pada teknologi yang digunakan dan seberapa baik teknologi tersebut didukung oleh berbagai vendor browser. WebAssembly (Wasm) adalah target kompilasi yang distandardisasi oleh W3C yang membantu kami mengatasi masalah ini dengan memungkinkan kami menjalankan codebase dari bahasa selain JavaScript di web.

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

Alasan kami memilih WebAssembly untuk Google Earth

Awalnya kami menulis sebagian besar Google Earth dalam C++ karena ini adalah aplikasi desktop yang ditujukan untuk penginstalan. Kemudian, kami dapat mem-portnya ke Android dan iOS karena smartphone memegangnya, sehingga sebagian besar codebase C++ kami dipertahankan menggunakan NDK dan Objective-C++. Pada tahun 2017, saat kami 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 memindahkan kode C++ ke browser dan memberikan performa seperti yang dibutuhkan Bumi. 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 web.

Screenshot Earth yang menampilkan Menara Eiffel

Threading di threading

WebAssembly masih berkembang sebagai standar, dan browser terus bertambah dengan lebih banyak fitur dan fungsi. Dari perspektif Earth, perbedaan yang paling signifikan dalam dukungan untuk WebAssembly di antara browser adalah dukungan untuk threading. Beberapa browser menawarkan dukungan multi-threading dan yang lainnya tidak. Bayangkan Bumi seperti video game 3D besar di dunia nyata. Dengan demikian, kami terus mengalirkan data ke browser, melakukan dekompresi, dan membuatnya siap untuk rendering ke layar. Kemampuan melakukan tugas ini di thread latar belakang menunjukkan peningkatan yang jelas pada performa Earth di browser.

Multi-thread WebAssembly mengandalkan fitur browser yang disebut SharedArrayBuffer, yang diambil dari browser setelah kerentanan keamanan Spectre dan Meltdown terungkap. Untuk mengurangi potensi kerusakan akibat serangan, tim keamanan Chrome memperkenalkan Isolasi Situs di Chrome untuk semua sistem operasi desktop. Isolasi Situs membatasi setiap proses perender ke dokumen dari satu situs. Dengan adanya 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 menjalankan thread tunggal di browser tersebut.

Cara kerja WebAssembly dengan berbagai browser

Kita telah mempelajari banyak hal tentang status dukungan WebAssembly di browser yang melakukan porting Earth. Jika Anda akan mengembangkan aplikasi menggunakan WebAssembly, penting untuk memahami kondisi saat ini terkait cara kerja WebAssembly di 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 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 Anda dapat mengharapkan Earth berjalan lebih lancar. Namun, kami berharap Chrome dapat menambahkan dukungan untuk alokasi memori dinamis dengan multi-threading di WebAssembly. Jika belum melakukannya, Earth mungkin gagal dimulai di perangkat dengan jumlah memori terbatas (misalnya komputer 32-bit).

Firefox

Firefox menawarkan dukungan yang baik untuk WebAssembly, tetapi telah menonaktifkan dukungan untuk multi-threading. Akibatnya, Anda mungkin akan mendapatkan pengalaman yang lebih lambat saat menggunakan Earth. Kami berharap Mozilla dapat menghadirkan kembali dukungan untuk multi-threading pada versi mendatang. Sisi baiknya, Firefox mendukung alokasi memori dinamis.

Opera

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

Safari

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

Kami menantikan lebih banyak adopsi fitur WebAssembly

Perjalanan yang panjang untuk membuat Earth tersedia di web. Sekitar enam tahun lalu, kami memulai dengan demo internal berbasis asm.js awal yang dikelola dan diperluas selama bertahun-tahun. Kemudian diubah menjadi bentuk WebAssembly di Bumi, karena WebAssembly menjadi standar yang diadopsi W3C.

Kami masih memiliki cara lain untuk WebAssembly dan Earth. Secara khusus, kami ingin berpindah ke backend LLVM menggunakan Emscripten (Toolchain untuk menghasilkan WebAssembly dari kode C++). Perubahan ini akan memungkinkan dukungan SIMD di masa mendatang, serta alat proses debug yang lebih efektif seperti peta sumber untuk kode bahasa sumber. Hal lain yang kami harapkan adalah penggunaan OffscreenCanvas dan dukungan penuh untuk alokasi memori dinamis di WebAssembly. Namun, kami tahu bahwa kami melakukan hal yang benar: WebAssembly adalah masa depan jangka panjang bagi Earth di web.

Luangkan waktu untuk mencoba versi beta kami. Beri tahu kami cara kerjanya dengan memberikan masukan langsung di Earth.