企业官网建设流程全解析

手机也能畅游虚拟3D世界了！

李飞飞团队开源了一项核心技术Spark 2.0。

它像一位空间管理大师，负责把非常庞大复杂的3D世界进行极致优化，让普通手机和电脑也能通过浏览器流畅地访问和交互。

高精度的3D场景就像一座用沙子堆成的、细节惊人的城堡。问题是，这座“沙堡”动辄由上亿粒沙子（数据点）构成，信息量大到普通手机根本搬不动。

Spark 2.0就是解决这个问题的搬运和管理专家，它的核心在于三个绝招：

自动选择最合适的细节（连续式LoD细节层级）。当你浏览全景图时，Spark 2.0会智能判断你当前的位置和视线，只在你目光所及的地方用最高清的“沙子”精细雕刻，而在远处或视野边缘，则用少量“沙子”勾勒轮廓。这保证了整体画面流畅，不会被海量数据压垮。

分批送货上门（渐进式流式加载）。它不会让你等整个“沙堡”都搬完了才能看。Spark 2.0会先给你看一个大概的轮廓，然后随着你视角的移动，把更多细节数据像水流一样“流”到你的设备上。这意味着打开一个大型场景几乎是瞬间的事。

优化存储，加速读取（.RAD新文件格式）。为了让数据跑得更快，它还把数据打包成了特殊的高效格式（.RAD），就像把沙子装进了设计精巧的集装箱，方便快速存取。

Spark 2.0的开源，很可能改变未来我们与数字世界互动的方式。

适配了最主流的网页3D框架Three.js，并基于兼容性极广的WebGL2技术。确保了无论是iPhone还是安卓机，甚至VR眼镜，只要有浏览器就能运行。

对于电商、在线教育、房地产等行业，未来可能无需任何3D建模基础，就能轻松打造出支持用户自由漫步的3D空间。比如，消费者可以在网页上像逛实体店一样“走进”商品展厅。

这也是李飞飞世界模型战略的关键一步，她本人对此评价道：“Spark 2.0现在可以在任意设备上流式传输超过1亿个高斯泼溅！”。

这个技术打通了从AI生成3D内容到大众便捷访问的最后环节，让AI生成的虚拟世界真正具备了走向大众的基础设施。

Spark 2.0打破了设备性能墙，让所有浏览器都能像播放高品质在线视频一样，流畅漫游包含几千万甚至上亿个数据点的庞大3DGS（三维高斯溅射）场景。

告别多边形拥抱高斯溅射

伴随机器学习技术的飞速发展，直接将真实世界扫描并转化为计算机三维数据的摄影测量技术迅速普及，名字叫3DGS。

与多边形网格完全不同，3DGS使用数以百万计的半透明且带有颜色的椭球体来替代生硬的三角形。无数微小的椭球体相互交织融合，构成逼真且细节丰富的物体表面。

每一个椭球体都携带专属属性，包含空间中心坐标、沿着3个维度的缩放半径、三维旋转方向、基础颜色以及不透明度。

抛开旋转方向不谈，将椭球体放置在坐标原点时，其三维密度刚好符合高斯分布曲线。业界普遍采用画家算法（Painter's Algorithm）将模型渲染到屏幕上。

计算机把所有椭球体按照距离屏幕由远及近的顺序排列，接着层层堆叠绘制，并利用过量操作符把半透明区域平滑过渡。

每一个三维椭球体投射到屏幕二维平面上，都会近似成1个二维椭圆形。渲染管线计算椭圆形里每个像素的不透明度，最终把颜色与底层图像融为一体。

Spark起初是李飞飞世界实验室（World Labs）内部开发的专用渲染器，曾用于大型世界模型研究预览和早期项目低保真世界。

市面上现存的网页端渲染引擎短板明显，有的每次只能正确渲染1个独立模型，有的完全不支持动态动画，有的底层技术绑定了尚未普及的接口，导致手机设备无法运行。

为让所有人都能在网页浏览器里打造顶级互动三维体验，研发团队打造了完全开源、通用性极强的渲染引擎。他们将Spark构建在当今最普及的THREE.js（三维图形框架）之上，同时将底层图形接口锁定在WebGL2（第二代网页图形库）标准，确保全球多数联网设备无障碍运行。

Spark与世界实验室的多模态世界模型Marble项目同步开发，Marble项目允许用户仅用1行文字或1张图片即可在浏览器生成三维世界。

为实现多物体无缝拼接，Spark采用3步走算法。

系统从场景所有的模型中提取数据，统一转换到相同坐标系下，生成囊括全局的完整列表。针对当前观察视角，系统将庞大列表按由远及近顺序进行深度排序。由于现代浏览器环境不支持直接在图形处理器上进行复杂的排序编程，Spark在图形处理器上计算好距离后，将列表读回中央处理器，并在后台线程使用双通道基数排序完成工作。最终系统通过单个实例化绘制指令，将排好序的椭球体一次性投射到屏幕上。

定制的顶点着色器计算边界，片段着色器评估高斯轮廓得出不透明度。开发者还能利用图形处理器执行自定义数据处理流水线，无论是重新上色、调整透明度、基于符号距离场进行裁剪，还是处理复杂的扫描动画插值，都能通过直观的节点图系统轻松实现。

应对数据膨胀的技术突围

面对庞大的3D世界迷宫，消费级手机和电脑每秒只能维持100万到500万个数据点的流畅渲染。稍大一点的场景动辄需要下载100MB甚至超过1GB的数据文件。移动端浏览器对图形处理器内存的使用有严格上限。

Spark 2.0巧妙融合3项图形与系统工程技术，击碎了设备性能与海量数据之间的壁垒。

应对庞大渲染压力的核心是LoD（细节层次）系统。游戏开发常采用该系统，依据距离远近自动切换模型精细度，距离越远模型越粗糙，从而节省算力。

多边形网格领域闻名的技术方案是虚幻引擎的Nanite系统。它创建不同级别的三角形簇层级结构，根据视角挑选局部进行渲染。离散模式预先生成几个特定面数的模型版本，按层级跳跃切换，容易在视线移动时产生画面跳动感并露出拼接接缝。

Spark 2.0采用连续细节层次树系统。所有微小的椭球体遵循层级关系排列。树形结构的每个内部节点，都是底层子节点的低分辨率缩影。

系统把相邻的小椭球体合并，计算近似形状和颜色，生成稍大新椭球体。合并过程层层向上递进，直到千万个数据点合并成树根位置唯一的巨大椭球体。

凭借特殊的树状图，Spark根据当下观察视角，精准挑选视觉效果最完美的节点集合。开发者自由设定1个渲染预算，例如50万到250万个数据点。系统严格遵守红线，确保每一帧交给显卡处理的数据量绝对恒定。不管场景里藏着几亿个元素，画面帧率始终稳定。

系统后台运行着巧妙的遍历算法，脱离主渲染循环束缚。

利用优先级队列，从树根最大的椭球体向下探索，系统计算每个节点在屏幕占据的像素尺寸，把尺寸最大的优先提取出来。若其在屏幕上不到1个像素或是已到达最底层的叶子节点，系统就将其放进输出列表。把某个节点拆解成子节点超出渲染红线时，算法立刻停止，把队列剩余节点全部转移到输出列表。全流程独立于总数据点数量，被编译成高效的Wasm（网页汇编语言），在浏览器后台线程静默运行，不影响主循环。

算法还能同时处理场景的多个模型，把所有模型的树根节点扔进初始队列全局统筹分配渲染预算。

为了将算力用在刀刃上，Spark实现了固定的视觉焦点渲染，把更多高清数据点分配到屏幕正中央。屏幕边缘甚至镜头背后区域分配更大更粗糙的椭球体。

系统引入4个参数控制细节。

全分辨率圆锥角定义了视线前方保持最高精细度的区域。模糊圆锥角定义了开始降低精细度的外围区域。边缘模糊因子控制边界处的缩放比例，设定为10会让该处椭球体变大10倍。后方模糊因子则控制镜头后方的粗糙程度，最大覆盖至180度。开发者像调色一样细腻控制不同角度画面精细度。

为方便开发者快速生成细节层次树，Spark 2.0自带2个算法，均无需训练且直接操作三维数据。

浏览器端即时处理采用Tiny-LoD算法。系统将三维空间划分为网格，允许网格步长依据连续网格尺寸比率变化。算法借鉴计算基因组学内存优化技巧，放弃占用内存极大的哈希表映射，使用连续数组排序和分组，将落在同个网格的小椭球体迅速合并。非整数比率能打破规则网格边界产生的生硬图案，平滑细节过渡。

追求画质的离线处理采用Bhatt-LoD算法。它用于精准计算2个三维高斯密度函数之间的统计学重叠度。系统把所有数据点放进优先级队列，逐一寻找形状重叠度最高且颜色平方差最小的相邻伙伴进行合并，画质过渡十分顺滑。

渐进式传输与显存虚拟化

网页端想要顺畅浏览超大场景，必须做到边看边加载。

主流三维高斯溅射文件格式面对该需求全部失效。PLY格式采用按行排列的数据结构，记录完第1个数据点所有属性再记录第2个。虽支持读一点渲染一点，但采用无压缩的32位浮点数存储，1000万个数据点吃掉超过2.3GB存储空间。

SPZ格式采用按列排列逻辑，把数据点中心坐标与不透明度等属性分别打包，并将0到1的不透明度压缩成单字节数值，利用Gzip（GNU压缩算法）高强度压缩。1000万个数据点压缩到200MB左右，但浏览器必须把整个文件下载完毕且完全解压才能渲染，等待下载过程依旧是黑屏。

Spark 2.0创造了全新的RAD文件格式，兼具极高压缩率、灵活可扩展性以及随机访问能力。

文件首部是一段轻量级的JSON元数据，清晰记录后续数据块精确位置和体积大小。浏览器随时跳跃读取文件里的任意片段。主体部分被切割成固定包含65000个数据点的独立数据块。数据块内部也带有独立头文件，属性数据依然采用按列排列和压缩。由于头文件使用标准格式，未来增添新的压缩算法变得十分方便。

RAD文件在切分数据块时引入空间分区策略。系统把庞大细节层次树按照空间位置切割。排在文件最前面的0号数据块装载涵盖场景范围的根节点以及下方最大的节点集合。后续数据块框定在不断缩小的三维边界区域内，专注于填充角落细节。

打开网页瞬间，浏览器只需下载极小体积的0号数据块，粗糙但结构完整的三维世界立刻展现，免去黑屏加载苦恼。系统利用3个并行的后台工作线程密切追踪位置和视角，优先获取并解码靠近镜头的数据块。远处的景物保持模糊，眼前的建筑草木伴随网速迅速变清晰，与视频网站渐进缓冲体验一致。当遍历算法发现缺失更精细的子节点数据时，会自动用已下载的粗糙父节点顶替，等待数据传输完成再做细化。

海量数据块涌入极易让浏览器图形处理器内存爆满。Spark 2.0借用操作系统的显存虚拟化技术。

Spark在显卡划定固定绝不超载的内存池，例如仅容纳1600万个数据点。它把内存池切分成与RAD文件数据块对应的标准物理页。建立1张庞大虚拟页表充当调度员，系统根据当前位置计算所需数据块，将其塞进空闲物理页。离开当前区域时，页表调度员审视全局，把长时间未出现在视线范围、优先级跌落谷底的陈旧数据块移除，为新数据腾出空间。

借助严格末位淘汰机制，多个互相独立的RAD文件共享同个物理内存池。无论探索多大尺寸的复合三维世界，图形处理器始终保持安全工作状态，避免内存溢出导致网页崩溃。

Spark 2.0将网页浏览器升华成了容纳无限空间的数字容器，把繁重数据调度、显存管理及算力分配全部交由底层引擎处理。

它让人们在桌面端、iOS、Android以及VR移动设备的浏览器中，都能访问3D内容。世界模型生成的虚拟3D世界，也许很快就能走进我们的生活。

准备好在浏览器里拥抱空间智能时代了吗？

参考资料：

https://www.worldlabs.ai/blog/spark-2.0

https://github.com/sparkjsdev/spark/