Cách chúng tôi đưa Google Earth lên môi trường web

Cải thiện khả năng truy cập vào Google Earth trên nhiều trình duyệt bằng WebAssembly.

Jordon Mears
Jordon Mears

Trong trường hợp lý tưởng, mọi ứng dụng mà nhà phát triển xây dựng, bất kể công nghệ, đều có sẵn trong trình duyệt. Tuy nhiên, có một số rào cản để đưa dự án lên web, tuỳ thuộc vào công nghệ mà dự án được xây dựng và mức độ hỗ trợ của các nhà cung cấp trình duyệt đối với công nghệ đó. WebAssembly (Wasm) là một mục tiêu biên dịch được W3C chuẩn hoá, giúp chúng ta giải quyết vấn đề này bằng cách cho phép chạy cơ sở mã từ các ngôn ngữ khác ngoài JavaScript trên web.

Chúng tôi đã làm điều đó với Google Earth, hiện có sẵn ở dạng bản dùng thử beta trên WebAssembly. Xin lưu ý rằng đây vẫn là phiên bản thử nghiệm của Google Earth và có thể không mượt mà như bạn mong đợi (hãy thử Earth cho web thông thường). Bạn có thể thử nghiệm bản thử nghiệm này trong Chrome và các trình duyệt dựa trên Chromium khác, bao gồm cả Edge (phiên bản Canary) và Opera, cũng như Firefox. Hãy xem phiên bản thử nghiệm này là nguồn cảm hứng nếu bạn cũng đang tìm kiếm tính năng hỗ trợ đa trình duyệt tốt hơn cho các ứng dụng dành riêng cho nền tảng của mình.

Lý do chúng tôi chọn WebAssembly cho Google Earth

Ban đầu, chúng tôi viết hầu hết Google Earth bằng C++ vì đây là một ứng dụng dành cho máy tính để bàn và cần được cài đặt. Sau đó, chúng tôi có thể chuyển ứng dụng này sang Android và iOS khi điện thoại thông minh bắt đầu phổ biến, giữ lại hầu hết cơ sở mã C++ bằng cách sử dụng NDKObjective-C++. Năm 2017, khi đưa Earth lên web, chúng tôi đã sử dụng Native Client (NaCl) để biên dịch mã C++ và chạy mã đó trong trình duyệt Chrome.

Vào thời điểm đó, NaCl là công nghệ trình duyệt duy nhất cho phép chúng tôi chuyển mã C++ sang trình duyệt và cung cấp cho chúng tôi loại hiệu suất mà Earth cần. Rất tiếc, NaCl là một công nghệ chỉ dành cho Chrome và chưa bao giờ được áp dụng trên các trình duyệt. Bây giờ, chúng ta sẽ bắt đầu chuyển sang WebAssembly. WebAssembly cho phép chúng ta lấy chính mã đó và chạy trên các trình duyệt. Điều này có nghĩa là nhiều người hơn sẽ có thể sử dụng Earth trên web.

Ảnh chụp màn hình Earth cho thấy Tháp Eiffel

Một chuỗi về việc tạo luồng

WebAssembly vẫn đang phát triển dưới dạng một tiêu chuẩn và các trình duyệt tiếp tục được mở rộng với nhiều tính năng và chức năng hơn. Từ góc độ Earth, sự khác biệt đáng kể nhất trong việc hỗ trợ WebAssembly giữa các trình duyệt là khả năng hỗ trợ tạo luồng. Một số trình duyệt hỗ trợ nhiều luồng và một số trình duyệt khác thì không. Hãy coi Trái Đất như một trò chơi điện tử 3D khổng lồ về thế giới thực. Do đó, chúng ta liên tục truyền dữ liệu đến trình duyệt, giải nén dữ liệu và chuẩn bị dữ liệu để kết xuất lên màn hình. Việc có thể thực hiện công việc này trên luồng trong nền đã cho thấy sự cải thiện rõ ràng về hiệu suất của Earth trong trình duyệt.

WebAssembly đa luồng dựa vào một tính năng của trình duyệt có tên là SharedArrayBuffer. Tính năng này đã bị xoá khỏi trình duyệt sau khi các lỗ hổng bảo mật Spectre và Meltdown bị tiết lộ. Để giảm thiểu thiệt hại tiềm ẩn từ các cuộc tấn công, nhóm bảo mật của Chrome đã ra mắt tính năng Tách biệt trang web trong Chrome cho tất cả hệ điều hành máy tính. Tính năng Tách biệt trang web giới hạn mỗi quy trình kết xuất ở các tài liệu của một trang web. Với tính năng bảo mật này, Chrome đã bật lại SharedArrayBuffer cho máy tính để bàn, cho phép chúng tôi sử dụng WebAssembly nhiều luồng với Earth cho Chrome.

Các trình duyệt khác đang nỗ lực để triển khai tính năng Tách biệt trang web hoặc các biện pháp giảm thiểu khác nhằm bật lại SharedArrayBuffer. Trong thời gian chờ đợi, Earth sẽ chạy theo luồng đơn trong các trình duyệt đó.

Cách WebAssembly hoạt động với các trình duyệt khác nhau

Chúng tôi đã tìm hiểu rất nhiều về trạng thái hỗ trợ WebAssembly trong các trình duyệt chuyển Earth. Nếu bạn định phát triển ứng dụng bằng WebAssembly, điều quan trọng là bạn phải hiểu trạng thái hiện tại của cách WebAssembly hoạt động với các trình duyệt khác nhau.

Edge

Edge sắp trở thành hai trải nghiệm phát triển riêng biệt dựa trên lựa chọn của Microsoft là chuyển từ trình kết xuất EdgeHTML sang trình kết xuất dựa trên Chromium. Hiện tại, phiên bản beta của Google Earth trên WebAssembly sẽ không chạy trên phiên bản công khai hiện tại của Edge do thiếu tính năng hỗ trợ WebGL2. Vấn đề này sẽ được khắc phục sau khi phiên bản mới của Edge (dựa trên Chromium) ra mắt trong thời gian sắp tới. Trong thời gian chờ đợi, bạn có thể tải phiên bản Canary của Edge xuống và thấy rằng Earth hoạt động khá tốt.

Chrome

Chrome hỗ trợ mạnh mẽ WebAssembly, bao gồm cả tính năng đa luồng trên máy tính. Nhờ đó, Earth có thể chạy mượt mà hơn. Tuy nhiên, chúng tôi mong muốn Chrome sẽ hỗ trợ việc phân bổ bộ nhớ động bằng tính năng đa luồng trong WebAssembly. Cho đến thời điểm đó, Earth có thể không khởi động được trên các thiết bị có dung lượng bộ nhớ hạn chế (chẳng hạn như máy 32 bit).

Firefox

Firefox hỗ trợ tốt WebAssembly, nhưng đã tắt tính năng hỗ trợ đa luồng. Do đó, bạn có thể thấy trải nghiệm sử dụng Earth chậm hơn. Chúng tôi mong Mozilla sẽ hỗ trợ lại tính năng đa luồng trong các phiên bản sau này. Mặt tích cực là Firefox hỗ trợ tính năng phân bổ bộ nhớ động.

Opera

Opera cũng dựa trên Chromium như Chrome, cùng với các phiên bản Edge sắp ra mắt. Tuy nhiên, phiên bản Opera hiện tại chỉ hỗ trợ WebAssembly theo luồng đơn. Earth chạy được trong Opera, nhưng trải nghiệm có phần kém hơn. Hy vọng các phiên bản Opera mới hơn sẽ hỗ trợ hoạt động đa luồng và hỗ trợ WebAssembly mạnh mẽ hơn.

Safari

Safari có khả năng triển khai WebAssembly mạnh mẽ, nhưng lại thiếu khả năng hỗ trợ đầy đủ cho WebGL2. Do đó, Earth với WebAssembly không chạy trong Safari. Cụ thể, một số chương trình đổ bóng của chúng tôi yêu cầu GLSL 1.2. Chúng tôi hy vọng Earth cũng sẽ có trên Safari sau khi bổ sung tính năng hỗ trợ tốt hơn cho WebGL2.

Mong muốn được áp dụng nhiều tính năng WebAssembly hơn

Chúng tôi đã phải trải qua một chặng đường dài để có thể cung cấp Earth trên web. Khoảng 6 năm trước, chúng tôi bắt đầu với một bản minh hoạ nội bộ ban đầu dựa trên asm.js. Bản minh hoạ này được duy trì và mở rộng qua nhiều năm. Sau đó, bản dựng này được chuyển đổi thành bản dựng WebAssembly của Earth, vì WebAssembly đã trở thành tiêu chuẩn được W3C chấp nhận.

Chúng tôi vẫn còn nhiều việc phải làm với WebAssembly và Earth. Cụ thể, chúng ta muốn chuyển sang phần phụ trợ LLVM bằng Emscripten (chuỗi công cụ để tạo WebAssembly từ mã C++). Thay đổi này sẽ hỗ trợ SIMD trong tương lai, cũng như các công cụ gỡ lỗi mạnh mẽ hơn như bản đồ nguồn cho mã ngôn ngữ nguồn. Những điều khác mà chúng tôi hy vọng sẽ thấy là việc sử dụng OffscreenCanvas và hỗ trợ đầy đủ việc phân bổ bộ nhớ động trong WebAssembly. Tuy nhiên, chúng tôi biết rằng mình đang đi đúng hướng: WebAssembly là tương lai lâu dài của Earth trên web.

Vui lòng dành chút thời gian để dùng thử beta của chúng tôi. Hãy cho chúng tôi biết bạn đánh giá như thế nào về tính năng này bằng cách để lại ý kiến phản hồi ngay trong Earth.