Safari 27 leva o elemento model ao iPhone e ao Mac e adiciona planos de recorte ao WebGPU
O Safari 27 foi lançado em 14 de setembro junto com o iOS 27, o iPadOS 27 e o macOS 27, e a Apple também o oferece como uma atualização independente para o macOS Sequoia e o Tahoe. A equipe do WebKit publicou seu resumo de recursos três dias depois. Segundo a contagem da equipe, a versão traz 83 novos recursos e 844 correções, ante os 58 recursos e 525 correções anunciados na versão beta de junho. Três desses recursos são importantes para quem renderiza 3D em um navegador. WebKit: recursos do Safari 27.0.
O ambiente 3D de um site envolvendo o Safari no visionOS 27, durante uma sessão da WWDC da Apple. Imagem: Apple.
O elemento model sai do headset
O elemento HTML <model> surgiu no visionOS como uma forma de inserir um arquivo 3D em uma página do mesmo modo que se insere um vídeo. O Safari 27 o leva ao iOS, ao iPadOS e ao macOS. Você aponta o elemento para um arquivo USDZ ou glTF — ou lista ambos usando elementos <source>, como faria com um vídeo —, o navegador cuida do carregamento e da exibição, e o usuário pode girar o objeto sem que você precise escrever um renderizador. Um atributo environmentmap recebe um arquivo HDR para a iluminação. No visionOS 27, o mesmo elemento vai além: um site pode fornecer um ambiente imersivo como modelo e, com uma única chamada JavaScript, fazer com que ele envolva toda a janela do navegador, que foi como o cinema da imagem acima chegou ali. Esta versão também adiciona a propriedade CSS dynamic-range-limit aos elementos model, permitindo que uma página defina quanto da faixa adicional de HDR um modelo pode usar, e corrige dois bugs da primeira implementação: o comportamento incorreto de entityTransform e a interrupção da interação por gestos depois que um player de modelo era recarregado.
A marcação: dois formatos de origem, um mapa de ambiente HDR e um bule iluminado por ele. Imagem: Apple.
Um único arquivo 3D renderizado no Mac, no iPad e no iPhone. Imagem: Apple / WebKit.
É tentador interpretar isso como “visualizadores 3D agora vêm integrados ao navegador” e, para fotos de produtos, isso é mais ou menos verdade. Para jogos, não é. O elemento model exibe um modelo. Ele não executa o loop do seu jogo, a física nem os shaders, e só existe no Safari. O Chrome e o Firefox ainda não o disponibilizaram, portanto uma página que dependa dele precisa de uma alternativa que, na prática, é o visualizador WebGL ou WebGPU que você teria de criar de qualquer forma.
Planos de recorte em WGSL
A mudança mais útil para engines é mais discreta. O Safari 27 oferece suporte ao recurso integrado clip_distances em WGSL, que permite que um shader de vértices defina seus próprios planos de recorte e descarte a geometria antes da rasterização. Reflexos planares, renderização de portais, vistas em corte e superfícies de água dependem desse recurso. Até agora, um aplicativo WebGPU que precisasse dele no Safari tinha de simulá-lo no shader de fragmentos usando um descarte, o que consome taxa de preenchimento justamente nos passes que já são os mais caros.
Canvas, WebGL e as outras APIs com gerenciamento de cores também recebem dois espaços de cores predefinidos, srgb-linear e display-p3-linear. Se você faz seu próprio mapeamento de tons ou compõe conteúdo HDR em um canvas, agora pode entregar dados em luz linear ao navegador e deixá-lo cuidar da função de transferência, em vez de fazer por conta própria a codificação para sRGB e perder precisão durante o processo.
A sessão da WWDC da Apple sobre a versão apresenta o elemento model e as demais mudanças do WebKit.
Por que isso é relevante para nós
Nossa engine renderiza com WebGPU quando o navegador oferece suporte e com WebGL quando não oferece, e o Safari tem sido o navegador que testamos com mais apreensão desde que o WebGPU chegou a ele no ano passado. Os planos de recorte eram uma das lacunas. Os reflexos na água são exatamente o tipo de passe que precisa deles e, no WebGPU, as opções até agora eram uma matriz de projeção oblíqua ou um descarte no shader de fragmentos, que consome taxa de preenchimento em celulares, justamente onde ela representa todo o orçamento. O Safari 27 fecha essa lacuna na única plataforma em que não podemos pedir às pessoas que troquem de navegador, pois, no iOS, todo navegador usa o Safari por baixo.
Os espaços de cores lineares ajudam de uma forma menos visível. A saída HDR foi um dos principais recursos do Godot 4.7, e o caminho de um alvo de renderização linear até a tela tem sido a parte complicada na web. Permitir que o canvas aceite dados lineares diretamente elimina uma conversão que as engines atualmente fazem por conta própria.
Usaremos o elemento model para aquilo em que ele é bom: exibir um único asset em uma página. Nosso visualizador de GLB e a biblioteca de assets continuarão usando seu renderizador three.js, porque é isso que funciona em todos os navegadores, mas vale a pena ter um caminho nativo no Safari para visualizações rápidas. Se quiser verificar o que seu próprio navegador suporta antes que tudo isso seja relevante para você, o verificador de WebGL e WebGPU mostrará, e o guia sobre WebGPU versus WebGL explica por que a diferença é maior do que parece.