Safari 27 lleva el elemento model al iPhone y al Mac, y añade planos de recorte a WebGPU
Safari 27 se lanzó el 14 de septiembre junto con iOS 27, iPadOS 27 y macOS 27, y Apple también lo ofrece como actualización independiente para macOS Sequoia y Tahoe. El equipo de WebKit publicó su resumen de novedades tres días después. Según sus cifras, la versión incluye 83 funciones nuevas y 844 correcciones, frente a las 58 funciones y 525 correcciones que anunciaron con la beta de junio. Tres de esas funciones son relevantes para cualquiera que renderice 3D en un navegador. WebKit: funciones de Safari 27.0.
El entorno 3D de un sitio web rodeando Safari en visionOS 27, extraído de la sesión de Apple en la WWDC. Imagen: Apple.
El elemento model sale del visor
El elemento HTML <model> nació en visionOS como una forma de insertar un archivo 3D en una página igual que se insertaría un vídeo. Safari 27 lo lleva a iOS, iPadOS y macOS. Se le asigna un archivo USDZ o glTF, o se indican ambos mediante elementos <source> secundarios como se haría con un vídeo; el navegador se encarga de la carga y la visualización, y el usuario puede girar el objeto sin que tengas que programar un renderizador. Un atributo environmentmap acepta un archivo HDR para la iluminación. En visionOS 27, el mismo elemento va más allá: un sitio puede proporcionar un entorno inmersivo como modelo y, con una sola llamada de JavaScript, hacer que envuelva toda la ventana del navegador, que es como apareció el cine de la imagen anterior. Esta versión también añade la propiedad CSS dynamic-range-limit a los elementos model, para que una página pueda decidir cuánto margen HDR puede utilizar un modelo, y corrige dos errores de la primera implementación: entityTransform no se comportaba correctamente y la interacción mediante gestos dejaba de funcionar después de que se recargara un reproductor de modelos.
El marcado: dos formatos de origen, un mapa de entorno HDR y una tetera iluminada por él. Imagen: Apple.
Un único archivo 3D renderizado en Mac, iPad y iPhone. Imagen: Apple / WebKit.
Resulta tentador interpretar esto como «los visores 3D ya vienen integrados en el navegador», y para las fotos de productos es más o menos cierto. Para los juegos, no. El elemento model muestra un modelo. No ejecuta el bucle del juego, la física ni los shaders, y solo existe en Safari. Chrome y Firefox aún no lo han incorporado, así que una página que dependa de él necesita una alternativa que, en la práctica, será el visor WebGL o WebGPU que habrías tenido que crear de todos modos.
Planos de recorte en WGSL
El cambio más útil para los motores es más discreto. Safari 27 admite el elemento integrado clip_distances de WGSL, que permite a un shader de vértices definir sus propios planos de recorte y descartar geometría antes de la rasterización. Los reflejos planos, el renderizado de portales, las vistas en corte y las superficies de agua dependen de esta función, y hasta ahora una aplicación WebGPU que la necesitara en Safari tenía que simularla en el shader de fragmentos con un descarte, lo que consume tasa de relleno precisamente en las pasadas que ya son las más costosas.
Canvas, WebGL y las demás API con gestión de color también incorporan dos espacios de color predefinidos, srgb-linear y display-p3-linear. Si realizas tu propio mapeo de tonos o compones contenido HDR en un lienzo, ahora puedes entregar al navegador datos en luz lineal y dejar que se encargue de la función de transferencia, en lugar de codificarlos tú mismo a sRGB y perder precisión durante el proceso.
La sesión de Apple en la WWDC dedicada a esta versión explica el elemento model y el resto de los cambios de WebKit.
Por qué nos afecta
Nuestro motor renderiza con WebGPU cuando el navegador lo admite y con WebGL cuando no, y Safari es el navegador que más inquietud nos genera en las pruebas desde que WebGPU llegó a él el año pasado. Los planos de recorte eran una de las carencias. Los reflejos en el agua son precisamente el tipo de pasada que necesita uno y, en WebGPU, las opciones hasta ahora eran una matriz de proyección oblicua o un descarte en el shader de fragmentos, que consume tasa de relleno en los teléfonos, donde esta supone todo el presupuesto. Safari 27 cubre esa carencia en la única plataforma en la que no podemos pedir a los usuarios que cambien de navegador, porque en iOS todos los navegadores usan Safari por debajo.
Los espacios de color lineales ayudan de una forma menos visible. La salida HDR fue una de las novedades destacadas de Godot 4.7, y el recorrido desde un destino de renderizado lineal hasta la pantalla ha sido la parte complicada en la web. Que el lienzo acepte datos lineales directamente elimina una conversión que actualmente los motores realizan a mano.
Usaremos el elemento model para aquello en lo que destaca: mostrar un único recurso en una página. Nuestro visor de GLB y la biblioteca de recursos mantendrán su renderizador de three.js, porque es lo que funciona en todos los navegadores, pero merece la pena contar con una ruta nativa de Safari para los casos de visualización rápida. Si quieres comprobar qué admite tu propio navegador antes de que todo esto te resulte relevante, el comprobador de WebGL y WebGPU te lo indicará, y la guía de WebGPU frente a WebGL explica por qué la diferencia es mayor de lo que parece.