Safari 27 将 model 元素带到 iPhone 和 Mac，并为 WebGPU 带来裁剪平面
Safari 27 已于 9 月 14 日随 iOS 27、iPadOS 27 和 macOS 27 一同发布，Apple 也为 macOS Sequoia 和 Tahoe 提供了独立更新。三天后，WebKit 团队发布了功能概览。据其统计，此版本共包含 83 项新功能和 844 项修复，高于他们在 6 月测试版中公布的 58 项功能和 525 项修复。其中三项功能对所有在浏览器中渲染 3D 内容的人都很重要。WebKit：Safari 27.0 的功能。
visionOS 27 上，网站自己的 3D 环境环绕着 Safari 窗口，画面来自 Apple 的 WWDC 讲座。图片：Apple。
model 元素走出头显
HTML <model> 元素最初出现在 visionOS 上，让开发者能像在页面中嵌入视频一样嵌入 3D 文件。Safari 27 将它带到了 iOS、iPadOS 和 macOS。你可以让它指向 USDZ 或 glTF 文件，也可以像处理视频一样，通过 <source> 子元素同时列出两种格式。浏览器会负责加载和显示，用户无需你编写渲染器就能旋转物体。environmentmap 属性可接收用于照明的 HDR 文件。在 visionOS 27 上，同一个元素还能更进一步：网站可以将一个模型作为沉浸式环境提供，只需调用一次 JavaScript，就能让它环绕整个浏览器窗口，上图中的剧院正是以这种方式实现的。此版本还为 model 元素新增了 CSS dynamic-range-limit 属性，让页面可以决定模型可使用多少 HDR 亮度余量，并修复了初始实现中的两个错误：entityTransform 无法正常工作，以及模型播放器重新加载后手势交互失效。
这段标记包含两种源格式、一张 HDR 环境贴图，以及一个由它照亮的茶壶。图片：Apple。
一个 3D 文件即可跨 Mac、iPad 和 iPhone 渲染。图片：Apple / WebKit。
人们很容易将其理解为“浏览器现在内置了 3D 查看器”，而对于产品图片来说，这种说法大致没错。但对于游戏来说并非如此。model 元素只能显示模型。它不会运行你的游戏循环、物理系统或着色器，而且仅存在于 Safari 中。Chrome 和 Firefox 尚未提供该功能，因此依赖它的页面需要后备方案，而实际上的后备方案仍然是你原本就要编写的 WebGL 或 WebGPU 查看器。
WGSL 中的裁剪平面
对于引擎而言，更实用的变化反而没有那么显眼。Safari 27 支持 WGSL 中的 clip_distances 内置值，允许顶点着色器定义自己的裁剪平面，并在光栅化之前丢弃几何体。平面反射、传送门渲染、剖视图和水面都依赖这一功能。此前，在 Safari 上需要此功能的 WebGPU 应用只能在片元着色器中使用 discard 来模拟，而这会消耗填充率，偏偏这些渲染通道本就属于开销最大的一类。
Canvas、WebGL 和其他支持色彩管理的 API 还新增了两个预定义色彩空间：srgb-linear 和 display-p3-linear。如果你自行执行色调映射，或将 HDR 内容合成到画布中，现在可以直接向浏览器提交线性光数据，由浏览器处理传递函数，无需再自行编码为 sRGB 并在过程中损失精度。
Apple 关于此版本的 WWDC 讲座详细介绍了 model 元素和 WebKit 的其他变化。
这对我们为何重要
我们的引擎会在浏览器支持时使用 WebGPU，否则使用 WebGL。自去年 Safari 支持 WebGPU 以来，它一直是我们测试时最为谨慎对待的浏览器。裁剪平面正是缺失的功能之一。水面反射恰好是最需要裁剪平面的渲染通道，而在 WebGPU 中，此前只能选择使用斜投影矩阵，或在片元着色器中执行 discard。后者会消耗手机上的填充率，而填充率几乎就是手机端的全部性能预算。Safari 27 弥补了这一缺口，而且是在我们无法要求用户更换浏览器的平台上，因为在 iOS 上，所有浏览器的底层都是 Safari。
线性色彩空间带来的帮助不那么显眼。HDR 输出是 Godot 4.7 的主打功能之一，而在网页端，将线性渲染目标输出到屏幕一直是其中最棘手的环节。让画布直接接收线性数据，可以省去目前引擎必须手动完成的一次转换。
我们会将 model 元素用于它擅长的场景，也就是在页面上展示单个资源。我们的 GLB 查看器和资源库仍会继续使用 three.js 渲染器，因为它能在所有浏览器中运行。不过，对于快速预览场景，拥有一条 Safari 原生路径仍然值得。如果你想先确认自己的浏览器支持哪些功能，再判断这些变化是否与你有关，可以使用 WebGL 和 WebGPU 检测工具；WebGPU 与 WebGL 游戏指南则介绍了为何两者之间的差异比听起来更大。