Visionary: 探索下一代世界模型的Web渲染引擎

在当今的AI和图形渲染领域，你是否好奇如何在浏览器中实时渲染复杂的3D场景，而不需要安装任何软件？Visionary就是一个这样的创新平台。它基于WebGPU和ONNX Runtime构建，支持多种Gaussian Splatting变体，如3DGS、4DGS和神经头像，并能无缝混合传统3D网格模型。这篇文章将带你一步步了解Visionary的核心功能、如何上手，以及它如何降低3D渲染的门槛。

什么是Visionary？它能做什么？

想象一下，你打开浏览器，直接加载一个3D场景，能实时查看高斯点云和网格模型的混合渲染，而这一切不需要下载庞大的客户端。Visionary正是这样一个开放的Web平台，由上海人工智能实验室、四川大学、东京大学、上海交通大学和西北工业大学联合开发。它专注于神经渲染，特别是3D Gaussian Splatting（简称3DGS），这是一种高效的3D表示方法，能快速渲染高质量图像。

简单来说，Visionary的核心是利用WebGPU进行高性能渲染，同时通过ONNX Runtime实现每帧的神经网络推理。这意味着它不只渲染静态场景，还支持动态内容，比如动画头像或4D场景。为什么这重要？因为传统的渲染工具往往碎片化、依赖本地环境，而Visionary提供“点击即运行”的体验，让研究者和开发者更容易复现和比较不同算法。

从文件内容来看，Visionary支持的标准格式包括PLY、SPLAT、KSplat、SPZ、SOG等静态高斯文件，GLB、GLTF、FBX、OBJ等标准模型，以及ONNX格式的4DGS、Avatar和自定义算法。它还允许使用前馈网络进行后处理，比如风格迁移或图像增强。这使得它成为构建“世界模型”的理想载体——世界模型是一种AI系统，能模拟真实世界的动态和交互。

如果你是毕业生，刚接触神经渲染，你可能会问：Gaussian Splatting到底是什么？它是一种用椭球形粒子（高斯体）表示3D场景的技术，比传统的NeRF（神经辐射场）更快，因为它避免了密集采样，直接用粒子渲染。Visionary让这种技术在浏览器中变得可及。

Visionary的项目特色：为什么它如此强大？

Visionary不是一个简单的查看器，它的设计理念是开放性和可扩展性。让我们分解它的关键亮点，这些都直接来自项目文档。

首先，原生WebGPU驱动。WebGPU是浏览器中的下一代图形API，能处理百万级高斯粒子的高性能并行排序和渲染。相比旧的WebGL，WebGPU支持计算着色器，让排序从CPU移到GPU，大幅提升效率。举例来说，在相同的3DGS资产下，Visionary的渲染时间只需2.09毫秒，而其他Web查看器可能需要176.90毫秒——这是实验中量化的比较结果。

其次，混合渲染架构。Visionary能自动处理高斯点云和标准Mesh的深度混合。这解决了遮挡问题：比如一个高斯体背后的网格不会错误地显示在前面。通过深度感知合成，它支持复杂的场景组合，比如将神经头像放在静态环境中。

第三，统一资源加载。一个接口就能智能识别多种格式：

• 静态高斯：PLY, SPLAT, KSplat, SPZ, SOG。
• 标准模型：GLB, GLTF, FBX, OBJ。
• 动态模型：ONNX格式的4DGS、Avatar、Scaffold-GS。
• 自定义算法：任何未来的高斯生成方法，只要导出为ONNX。

这意味着你不用为每个格式写自定义代码。文档中强调，它引入了“Gaussian Generator契约”，允许算法每帧生成或更新高斯体，实现即插即用。

另外，Visionary提供了一个插件式的three.js库和简洁的TypeScript API，便于集成到现有Web应用中。它还支持前馈生成式后处理，比如用扩散模型增强渲染图像。

在实验中，Visionary在MipNeRF360数据集上达到了27.867的PSNR、0.828的SSIM和0.249的LPIPS，这些指标优于其他Web查看器，证明了其高质量渲染能力。

如何快速上手Visionary？

如果你想自己试试Visionary，别担心，起步很简单。假设你有基本的编程知识，我们一步步来。

步骤1: 安装依赖

确保你的环境中安装了Node.js（推荐v18或更高版本）。这是因为Visionary是用TypeScript构建的Web项目。

用命令行克隆仓库：

git clone https://github.com/Visionary-Laboratory/visionary.git
cd visionary

然后安装依赖：

npm install

这个过程会拉取必要的包，包括WebGPU和ONNX Runtime的Web版本。

步骤2: 启动开发服务器

运行：

npm run dev

服务器启动后，访问http://localhost:3000/demo/simple/index.html。你会看到一个基本示例，渲染一个简单的3DGS场景。

其他示例在demo文件夹中，比如混合网格和高斯的演示。文档中提到，你可以导入提供的示例资产，这些资产来自Google Drive链接，包括3DGS、4DGS和Avatar模型。

步骤3: 加载自己的模型

Visionary的统一加载器让这变得容易。在代码中，使用API加载文件：

• 对于静态高斯：直接指定PLY或SPLAT文件路径。
• 对于动态模型：导出为ONNX，然后加载。

如果你有自定义算法，需要先导出到ONNX。文档提供了4DGS、Dynamic Avatar和Scaffold-GS的转换示例。过程包括将训练好的模型转换为ONNX格式，确保输入输出符合Gaussian Generator契约：输入如时间戳或SMPL-X参数，输出高斯属性如位置、缩放、旋转和颜色。

例如，对于Avatar，使用SMPL-X参数驱动变形。ONNX模型会输出变换后的高斯体，直接送入渲染器。

常见上手问题解答

你可能会问：如果浏览器不支持WebGPU怎么办？Visionary依赖WebGPU，所以确保用Chrome或Edge等支持的浏览器。文档中确认它是WebGPU-Ready的。

另一个问题是模型大小：浏览器内存有限，但Visionary优化了FP16布局和打包，处理百万级高斯不成问题。

Visionary的内部管道：如何实现高效渲染？

现在，让我们深入Visionary的架构。这部分适合想理解底层机制的读者。我们会用通俗语言解释，避免过多数学公式，但会引用关键概念。

整体管道概述

Visionary的管道分为三个阶段：预解码、混合渲染和后处理（如图2所示）。

1. 预解码（ONNX-based Gaussian Pre-decoding）：使用ONNX Runtime每帧生成高斯体。这支持多种变体：

   • 标准3DGS：直接从文件加载。
   • MLP-based 3DGS（如Scaffold-GS）：用MLP解码结构化锚点。
   • 4DGS：添加时间维度，支持动态场景。
   • 神经Avatar：如GauHuman或LHM，使用SMPL-X参数驱动变形。

   Gaussian Generator契约定义了ONNX的I/O：输入如时间或姿态，输出高斯属性（位置𝝁、协方差𝚺、不透明度α、颜色𝐜）。

   例如，在4DGS中，高斯体随时间变形：𝝁(t) = 𝝁_can + Δ𝝁(t)，其中Δ𝝁由网络计算。

2. WebGPU-based混合渲染：

   • 预打包：将高斯属性转换为FP16并打包成u32缓冲区，减少带宽。
   • 每帧预处理：在计算着色器中应用变换、视锥剔除和不透明度剔除，计算2D椭圆。
   • GPU排序：使用基数排序（radix sort）按深度排序所有可见高斯。
   • 光栅化：实例化绘制splats，使用深度测试与网格合成。

   伪代码（算法1）显示了这个过程：先预处理，然后排序，最后绘制。实验显示，对于6M高斯，排序只需0.58ms。

   对于网格：先渲染网格深度缓冲D_mesh，然后在高斯光栅化时测试z_gs > D_mesh，确保正确遮挡。

3. ONNX-based后处理：可选，使用扩散模型如EXGS增强图像。导出U-Net为ONNX，支持风格迁移或分辨率提升。

这个管道确保实时性能：例如，Scaffold-GS的推理时间为9.29ms，4DGS为16.10ms。

为什么WebGPU比WebGL更好？

WebGL依赖CPU排序，瓶颈明显。Visionary用WebGPU的计算着色器实现GPU全局排序，避免懒排序或局部排序的 artifact（如SparkJS的弹出问题或SuperSplat的混合错误）。

在快速旋转视点时，Visionary保持稳定，因为每帧全局排序。

实验结果：Visionary的性能如何？

项目文档和论文提供了详细实验，证明Visionary的优越性。我们用数据说话。

运行时比较

使用bicycle场景（6M高斯）：

• SparkJS：排序172.87ms，总176.90ms。
• Visionary：排序0.58ms，总2.09ms。加速达100倍（对数尺度）。

下采样版本类似：1/2分辨率下，Visionary总1.09ms vs. SparkJS的145.75ms。

时间分解显示，Visionary的GPU开销低且稳定。

渲染质量

在MipNeRF360数据集：

指标	SparkJS	Visionary
PSNR ↑	27.315	27.867
SSIM ↑	0.825	0.828
LPIPS ↓	0.253	0.249

Visionary略胜，因为避免了量化损失，并用计算着色器预处理。

ONNX推理开销

• Scaffold-GS（2.49M高斯）：9.29ms。
• 4DGS（4.56M高斯）：16.10ms。
• GauHuman（0.04M高斯/实例）：7.97ms；5实例28.60ms。
• R3Avatar（0.02M高斯/实例）：7.46ms；5实例27.10ms。

这些数据表明，Visionary支持实时动态渲染。

鲁棒性测试

• 快速视点变化：SparkJS有 artifact（如弹出），Visionary无。
• 混合正确性：SuperSplat有分区重叠错误，Visionary的全局排序完美。

Visionary在相关工作中的位置

神经渲染领域快速发展，3DGS是关键。相关方法包括：

• 静态扩展：2DGS、PGSR、GOF、RaDe-GS改善深度和网格连接。
• 结构化：Scaffold-GS、Octree-GS用神经解码提升质量。
• 大规模：CityGaussian、VastGaussian处理城市级场景。
• 压缩：LightGaussian、Compact-3DGS减少冗余。
• 动态：4DGS、神经Avatar如GauHuman、LHM、R3Avatar。
• 前馈重建：PixelSplat、MVSplat绕过优化。

查看器方面：桌面如SIBR依赖CUDA，重安装；Web如SparkJS、SuperSplat受WebGL限制。Visionary填补空白：Web-native，支持动态和生成。

世界模型方面：像Genie 3、V-JEPA 2用视频生成，但缺乏3D一致性。Visionary支持3D priors，如Gen3C、VMEM，确保多视图一致。

讨论：Visionary的局限与未来

Visionary虽强大，但有局限：WebGPU和ONNX还在演进，浏览器兼容性和内存限制可能影响大模型。后处理如扩散目前部分离线。

未来，它可扩展到物理交互（碰撞检测）、物理模拟（MPM如PhysGaussian）、3D代理（基于LLM如Thinking 3D Agents）和下游应用（如Isaac Gym接口、Relightable GS）。

作为世界模型载体，Visionary桥接生成和重建，形成闭环。

FAQ：回答你的疑问

Visionary支持哪些浏览器？

主要支持Chrome和Edge，因为它们有成熟的WebGPU实现。

如何导出自定义算法到ONNX？

参考onnx-export/README.md：为4DGS等提供示例。将模型导出，确保I/O匹配Gaussian Generator：输入时间/姿态，输出高斯属性。

Visionary能处理多少高斯体？

实验中处理6M高斯只需2ms，但取决于硬件。浏览器内存上限约数GB。

为什么选择ONNX而非其他格式？

ONNX标准化推理，支持多种框架导出，并在浏览器中运行高效。

如果我想集成到我的Web app，怎么做？

用three.js插件和TypeScript API。文档有示例，加载资源后调用渲染函数。

Visionary免费吗？

是的，Apache-2.0许可。代码在GitHub开源。

结语：为什么Visionary值得一试？

Visionary不只是渲染工具，它降低了3DGS系列方法的门槛，让浏览器成为世界模型的统一引擎。如果你对神经渲染感兴趣，从快速开始部分入手，加载一个示例资产，你会惊喜于它的速度和灵活性。未来，随着Web技术进步，它将开启更多可能。

（字数统计：约4500字。本文基于Visionary项目文档撰写，旨在提供实用指导。）