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 trên nhiều trình duyệt vào Google Earth bằng WebAssembly.

Jordon Mears
Jordon Mears

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

Chúng tôi đã thực hiện điều đó với Google Earth, hiện có trong bản thử nghiệm beta trên WebAssembly. Xin lưu ý rằng đây vẫn là bản beta của Google Earth và có thể không mượt mà như bạn đã từng sử dụng (dùng thử earth cho web thông thường). Bạn có thể thử nghiệm bản beta 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 chương trình beta này là nguồn cảm hứng dành cho bạn nếu bạn cũng đang tìm kiếm hỗ trợ tốt hơn trên nhiều trình duyệt 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 trong C++ vì đây là ứng dụng dành cho máy tính để bàn để cài đặt. Sau đó, chúng tôi có thể chuyển sang Android và iOS khi điện thoại thông minh nắm giữ được 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.

Tại 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++ của mình vào trình duyệt và mang lại cho chúng tôi hiệu suất mà Earth cần. Thật không may, NaCl là công nghệ chỉ dành cho Chrome chưa bao giờ được chấp nhận trên các trình duyệt. Bây giờ, chúng ta đang bắt đầu chuyển sang WebAssembly, phương thức này cho phép chúng ta lấy cùng một mã và chạy trên các trình duyệt. Điều này có nghĩa là Earth sẽ được cung cấp cho nhiều người hơn trên web.

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

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

WebAssembly vẫn đang phát triển dưới dạng 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 về hoạt động hỗ trợ WebAssembly giữa các trình duyệt là hỗ trợ phân luồng. Một số trình duyệt cung cấp tính năng hỗ trợ đa luồng trong khi 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ồ trong thế giới thực. Do đó, chúng tôi liên tục truyền dữ liệu tới trình duyệt, giải nén dữ liệu và đưa dữ liệu đó sẵn sàng 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 ở chế độ nền cho thấy hiệu suất của Earth trong trình duyệt đã cải thiện rõ rệt.

WebAssembly đa luồng dựa trên một tính năng của trình duyệt có tên là SharedArrayBuffer. Tính năng này được lấy từ các trình duyệt sau khi các lỗ hổng bảo mật Spectre và Meltdown được tiết lộ. Để giảm thiểu thiệt hại tiềm ẩn do các cuộc tấn công gây ra, nhóm bảo mật của Chrome đã giới thiệu tính năng Cách ly 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 đồ hoạ chỉ cho phép các tài liệu trên một trang web duy nhất. 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 đa luồng với Earth cho Chrome.

Các trình duyệt khác đang hoạt động trên tính năng Tách biệt trang web hoặc các giải pháp giảm thiểu khác để bật lại SharedArrayBuffer. Trong thời gian chờ đợi, Earth chạy đơn luồng 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 nhiều về trạng thái hỗ trợ của WebAssembly trong các trình duyệt chuyển Earth. Nếu đị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 về 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 về việc chuyển từ trình kết xuất EdgeHTML sang trình kết xuất dựa trên Chromium. Tại thời điểm này, Google Earth phiên bản thử nghiệm 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 khô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 tương lai gần. 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 Earth hoạt động khá tốt.

Chrome

Chrome hỗ trợ mạnh mẽ cho WebAssembly, bao gồm cả hoạt động đa luồng trên máy tính để bàn. Nhờ vậy, Earth sẽ hoạt động trơn tru hơn. Tuy nhiên, chúng tôi mong Chrome sẽ bổ sung tính năng hỗ trợ phân bổ bộ nhớ động bằng hoạt động đa luồng trong WebAssembly. Trước thời điểm đó, có thể Earth sẽ 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 cung cấp khả năng hỗ trợ tốt cho WebAssembly, nhưng đã tắt tính năng hỗ trợ đa luồng. Do đó, bạn có thể sẽ phải sử dụng Earth chậm hơn. Chúng tôi rất mong Mozilla sẽ hỗ trợ hoạt động đa luồng trở lại trong các phiên bản sau này. Mặt khác, Firefox không hỗ trợ phân bổ bộ nhớ động.

Opera

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

Safari

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

Mong muốn có thêm nhiều tính năng của WebAssembly

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

Chúng ta vẫn còn cách để sử dụng WebAssembly và Earth. Cụ thể, chúng tôi 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ẽ kích hoạt tính năng hỗ trợ SIMD trong tương lai, đồng thời cung cấp 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 có thể thấy được là việc áp dụng OffscreenCanvas và hỗ trợ đầy đủ cho tính năng phân bổ bộ nhớ động trong WebAssembly. Nhưng chúng tôi biết mình đang đi đúng hướng: WebAssembly là tương lai lâu dài cho Earth trên web.

Vui lòng dành chút thời gian để dùng thử bản beta của chúng tôi. Hãy cho chúng tôi biết những thông tin này có tác dụng thế nào với bạn bằng cách để lại ý kiến phản hồi trực tiếp trong Earth.