Cómo llevamos Google Earth a la Web

Mejoramos el acceso a Google Earth en varios navegadores con WebAssembly.

Jordon Mears
Jordon Mears

En un mundo ideal, todas las aplicaciones que compilan los desarrolladores, independientemente de la tecnología, estarían disponibles en el navegador. Sin embargo, existen barreras para llevar proyectos a la Web, según la tecnología con la que se compilaron y qué tan bien la admiten los distintos proveedores de navegadores. WebAssembly (Wasm) es un destino de compilación estandarizado por el W3C que nos ayuda a resolver este problema, ya que nos permite ejecutar bases de código de lenguajes distintos de JavaScript en la Web.

Eso es exactamente lo que hicimos con Google Earth, que hoy está disponible en la versión beta preliminar en WebAssembly. Ten en cuenta que esta es una versión beta de Google Earth y es posible que no funcione tan bien como estás acostumbrado (prueba la versión normal de Google Earth para la Web). Puedes experimentar con esta versión beta en Chrome y otros navegadores basados en Chromium, incluidos Edge (versión Canary), Opera y Firefox. Considera esta versión beta como inspiración si también buscas una mejor compatibilidad multinavegador para tus aplicaciones específicas de la plataforma.

Por qué elegimos WebAssembly para Google Earth

Originalmente, escribimos la mayor parte de Google Earth en C++ porque era una aplicación de escritorio diseñada para instalarse. Luego, pudimos portarlo a Android y iOS a medida que se popularizaron los smartphones, y conservamos la mayor parte de nuestra base de código C++ con NDK y Objective-C++. En 2017, cuando llevamos Google Earth a la Web, usamos Native Client (NaCl) para compilar el código C++ y ejecutarlo en el navegador Chrome.

En ese momento, NaCl era la única tecnología de navegador que nos permitía portar nuestro código C++ al navegador y brindarnos el tipo de rendimiento que necesitaba Earth. Lamentablemente, NaCl era una tecnología exclusiva de Chrome que nunca se adoptó en otros navegadores. Ahora comenzamos a cambiar a WebAssembly, que nos permite tomar ese mismo código y ejecutarlo en todos los navegadores. Esto significa que Earth estará disponible para más personas en la Web.

Captura de pantalla de Earth en la que se muestra la Torre Eiffel

Un subproceso sobre subprocesos

WebAssembly sigue evolucionando como estándar, y los navegadores se siguen ampliando con más funciones y funcionalidades. Desde la perspectiva de Earth, la diferencia más significativa en la compatibilidad con WebAssembly entre los navegadores es la compatibilidad con los subprocesos. Algunos navegadores ofrecen compatibilidad con subprocesos y otros no. Piensa en la Tierra como un gran videojuego 3D del mundo real. Por lo tanto, transmitimos datos constantemente al navegador, los descomprimimos y los preparamos para que se rendericen en la pantalla. Poder realizar este trabajo en un subproceso en segundo plano mostró una clara mejora en el rendimiento de Google Earth en el navegador.

WebAssembly de varios subprocesos se basa en una función del navegador llamada SharedArrayBuffer, que se quitó de los navegadores después de que se revelaron las vulnerabilidades de seguridad de Spectre y Meltdown. Para mitigar los posibles daños de los ataques, el equipo de seguridad de Chrome presentó el aislamiento de sitios en Chrome para todos los sistemas operativos de computadoras de escritorio. El aislamiento de sitios limita cada proceso de renderización a documentos de un solo sitio. Con esta función de seguridad implementada, Chrome volvió a habilitar SharedArrayBuffer para computadoras de escritorio, lo que nos permitió usar WebAssembly multiproceso con Earth para Chrome.

Otros navegadores están trabajando en el aislamiento de sitios o en otras mitigaciones para volver a habilitar SharedArrayBuffer. Mientras tanto, Earth se ejecuta en un solo subproceso en esos navegadores.

Cómo funciona WebAssembly con diferentes navegadores

Aprendimos mucho sobre el estado de la compatibilidad con WebAssembly en los navegadores que portan Earth. Si vas a desarrollar aplicaciones con WebAssembly, es importante que comprendas el estado actual de cómo funciona WebAssembly con diferentes navegadores.

Edge

Edge está a punto de convertirse en dos experiencias de desarrollo distintas según la decisión de Microsoft de pasar del renderizador de EdgeHTML a uno basado en Chromium. Por el momento, la versión beta de Google Earth en WebAssembly no se ejecuta en la versión pública actual de Edge debido a la falta de compatibilidad con WebGL2. Este problema se solucionará cuando se lance la nueva versión de Edge, basada en Chromium, en un futuro cercano. Mientras tanto, puedes descargar la versión Canary de Edge y ver que Earth funciona bastante bien.

Chrome

Chrome tiene una gran compatibilidad con WebAssembly, incluido el procesamiento en varios subprocesos en computadoras, por lo que Earth debería funcionar de forma más fluida. Sin embargo, esperamos que Chrome agregue compatibilidad con la asignación de memoria dinámica con varios subprocesos en WebAssembly. Hasta entonces, es posible que Earth no se inicie en dispositivos con cantidades limitadas de memoria (como máquinas de 32 bits).

Firefox

Firefox ofrece una buena compatibilidad con WebAssembly, pero inhabilitó la compatibilidad con varios subprocesos. Como resultado, es posible que la experiencia con Google Earth sea más lenta. Esperamos que Mozilla vuelva a admitir varios subprocesos en versiones futuras. Por el lado positivo, Firefox admite la asignación de memoria dinámica.

Opera

Opera se basa en Chromium, al igual que Chrome, junto con las próximas versiones de Edge. Sin embargo, la versión actual de Opera solo ofrece compatibilidad con subproceso único de WebAssembly. Earth se ejecuta en Opera, pero la experiencia es algo degradada. Con suerte, las versiones más recientes de Opera tendrán compatibilidad con varios subprocesos y una compatibilidad más sólida con WebAssembly.

Safari

Safari tiene una implementación sólida de WebAssembly, pero no es totalmente compatible con WebGL2. Por lo tanto, Earth con WebAssembly no se ejecuta en Safari. Específicamente, algunos de nuestros sombreadores requieren GLSL 1.2. Esperamos que Earth también esté disponible en Safari una vez que se agregue una mejor compatibilidad con WebGL2.

Esperamos que se adopten más funciones de WebAssembly

Recorrimos un largo camino para que Google Earth esté disponible en la Web. Hace aproximadamente seis años, comenzamos con una demostración interna inicial basada en asm.js que se mantuvo y expandió a lo largo de los años. Luego, se convirtió en una compilación de WebAssembly de Earth, ya que WebAssembly se convirtió en el estándar adoptado por el W3C.

Aún queda mucho por hacer con WebAssembly y Earth. Específicamente, nos gustaría pasar al backend de LLVM con Emscripten (la cadena de herramientas para generar WebAssembly a partir de código C++). Este cambio permitirá la compatibilidad futura con SIMD, así como herramientas de depuración más sólidas, como los mapas de origen para el código del lenguaje de origen. También esperamos ver la adopción de OffscreenCanvas y la compatibilidad total con la asignación de memoria dinámica en WebAssembly. Pero sabemos que vamos por el camino correcto: WebAssembly es el futuro a largo plazo de Earth en la Web.

Tómate un momento para probar nuestra versión beta. Deja comentarios directamente en Google Earth para informarnos cómo te funciona.