Web3D技术是指在网页浏览器中实现三维式交互的技术，该技术可以让互联网用户能够快速的体验3D带来的真实感受，本文我们将主要带您了解Web3D的技术方向。

         一个Web3D项目的构建主要包括两大阶段：建模和渲染。

建模

        建模阶段我们需要使用3D建模软件来进行模型的构建，常用的建模软件有很多，如C4D、3ds Max、Maya、Blender等等，它们有其各自的专长和应用场景。还有一些在线 3D 模型编辑生成工具，例如Spline和Vectary，它们都是无需下载，免费使用的，可以直接在浏览器打开网站进行在线3D建模，而且它们最大程度的简化了建模操作步骤，比较容易上手，适合刚刚接触3D建模的新手或者有快速制作3D模型需求的小伙伴。

        由于3D建模工具种类繁多，他们又往往使用不同的三维模型标准/格式存储和传输数据，因此也产生了非常多的三维模型文件格式，比较常见的有 glTF、FBX、obj、mtl、usd等。

什么 3D 格式最适合 Web3D?

        选择一种合适的“食材”，经过大厨的精心制作才能成为诱人的美食。同理，选择合适的 3D 模型，才能创造出精美的场景。模型之于 Web3D ，犹如食材至于大厨。接下来我们通过分析主流 3D 模型的优缺点，试图找出什么 3D 格式最适合 Web3D。

3D 模型格式	优点	缺点	主要应用场景
obj	1、  简单易用 2、  易于读写 3、  容易被多种软件读取	1、  不支持动画数据和复杂的纹理映射 2、  文件体积一般较大	静态3D模型的制作和交换
FBX	1、  广泛的功能支持 2、  独立的位置、UV和法线拓扑 3、  良好的兼容性 4、  读写快速高效 5、  强大的SDK	1、私有格式 2、不常用的遗留功能较多，维护成本高，使用复杂 3、  材质、光照模型过时	动态3D模型的制作和交换，以及视觉效果的制作
usd	1、支持大规模场景、动画 2、PBR材质、粒子系统等现代化高级特性支持 3、读写快速高效	1、兼容性一般 2、文件体积较大 3、学习曲线较高	动画电影制作、苹果的软件
glTF	1、开放标准 2、易于阅读和编辑 3、快速且高效 4、丰富的场景数据 5、扩展性强	1、  不可编辑的3D模型 2、  没有着色器网络 3、  不向后兼容的扩展	Web 3D 应用、虚拟现实和增强现实应用

        相比之下，obj 和 FBX 是较老的格式，它们的文件大小比较大，不支持PBR材质系统，而且FBX是私有格式，访问FBX文件中的数据的方法是使用官方SDK。USD则是一种专门用于数字内容创作的格式，较为复杂，需要专业的技能才能使用。glTF 则顺应了互联网的崛起，它是一种轻量级、简化且易于处理的格式，它具有更好的性能和更广泛的兼容性，能够更快地加载和渲染3D内容，任何平台或设备都可以使用，包括手机上的 Web 浏览器。

        毋庸置疑，glTF 就是最适合 Web3D 的 3D 格式。这接下来我们将详细解释为什么 glTF是最合适 Web3D 的。

glTF是元宇宙和数字孪生时代的JPEG

        glTF（GL Transmission Format），是一种开源的高效传输和加载 3D 场景的规范，由Khronos Group提出并维护， 同时该组织也维护了大量的 WebGL API。 自2015年10月发布glTF 1.0以来，得到了业界广泛的认可，glTF 2.0 标准更新于 2017 年 6 月，支持对 3D 场景所需元素的完整描述，如节点、材质、相机、网格、动画、灯光及其它结构，支持物理材质渲染（PBR）、金属粗糙度模型等材质模型。目前 glTF 已经成为 Web3D 模型资产标准，可谓是“ 3D 领域的 JPEG”。

        glTF 已被业界广泛采用，特别是在以 Web 为主要运行环境的 JavaScript 框架中，如 Three.js 和 Babylon，以及以 Web 为主的企业，如 Google、Meta 甚至 Microsoft。glTF 标准具有文件小、加载快、和运行时引擎环境无关、对 3D 场景的描述完整且全面和灵活可扩展等众多优势。

易于阅读和编辑

        glTF 格式使用 JSON 文件来描述 glTF 的内容和它的属性。这很容易被开发人员直接读写，甚至比OBJ文件格式更容易，因为JSON本身就是一个灵活的人类可读的文件格式标准，并且大多数编程语言都有解析器。你可以使用许多开源库来读取 glTF 文件到你自己的应用程序中，或者你可以自己编写一个导入器。

        得益于 glTF 格式易于阅读和编辑的特性，开发者可以充分的发挥想象力，最大化的利用这些特性，制作出各种高效的工具。例如 gltfjsx1 就是一个命令行工具，开发者可以借助工具将 glTF 文件转换为可读性高、可复用的 jsx 组件。

        使用简单的命令：

npx gltfjsx model.gltf --transform

就可以将 model.gltf 转换为如下的 Model.jsx 文件。开发者可以像使用普通组件一样使用Model 组件，甚至还可以修改组件的内容。 

import { useGLTF, PerspectiveCamera } from '@react-three/drei'

export function Model(props) {
  const { nodes, materials } = useGLTF('/model-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <PerspectiveCamera name="camera" fov={40} near={10} far={1000} position={[10, 0, 50]} />      
      <pointLight intensity={10} position={[100, 50, 100]} rotation={[-Math.PI / 2, 0, 0]} />
      <group position={[10, -5, 0]}>
        <mesh geometry={nodes.robot.geometry} material={materials.metal} />
        <mesh geometry={nodes.rocket.geometry} material={materials.wood} />
      </group>
    </group>
  )
}

useGLTF.preload('/model.gltf')

Model.jsx

 

修改鞋底和斜纹为粉红色，添加鼠标进入变为红的的事件

快速且高效

        与 FBX 文件格式一样，glTF 将三维几何体的主要批量数据存储在一个二进制文件中。二进制文件的读取是由 JSON 文件引导的。这意味着 glTF 平均要比用人类可读的文本存储大量三维几何图形的文件格式（如OBJ）小5倍，读取速度快10倍以上。在移动电话中内存是一种宝贵的资源，在glTF中实现二进制压缩之前人们发送体积相对较小的 JPEG 文件纹理。但将其解压成全尺寸纹理的过程，即使是一个简单的模型，也需要数百兆字节的内存，这就会损害手机的功耗和性能。glTF纹理允许你采取如普通 JPEG 大小的超级压缩纹理，并立即将其解压为GPU本地纹理，它永远不会增长到全尺寸。因此，你可以将数据传输和所需的内存都减少5-10倍。

丰富的场景数据

        glTF 文件除了可以存储模型和材质外，还可以存储动画数据、骨骼、皮肤、场景层次以及灯光（通过扩展）。 这意味着glTF既可以用于单个静态模型，也可以用于动画角色和完整的复杂场景，与FBX文件类似。

扩展性强

        在glTF 2.0中不仅仅有物理外观还有几何、纹理和动画。目前的 glTF 没有提到任何关于物理属性、声音或交互的内容。但是可以通过扩展加入这些类型的行为和属性。

        基于物理的渲染技术通过对现实世界物体的物理属性进行建模来创建逼真的结果。它使开发者和艺术家能够通过控制与实际材料的物理属性相对应的参数来创建逼真的3D场景。三个新的扩展通过增加折射、基于体积的吸收和复杂的镜面反射，建立并扩展了现有的 glTF 2.0 PBR功能。

        KHR_materials_ior: 折射率描述了光线在通过一个物体时的散射情况。通过控制折射率值，可以使各种透明材料看起来更真实，包括空气、水、眼睛、玻璃、蓝宝石和钻石。

        KHR_materials_volume: 体积扩展使网格表面作为体积之间的界面，并使透明材料中的折射和吸收特性更加真实。这个扩展给了半透明材料以深度和重量的外观。对于无法进行光线追踪的实时引擎，这个扩展还提供了一个厚度纹理图，以实现快速接近光与材料体积的交互。

        KHR_materials_specular: 镜面属性是一个物体的镜面属性，它能够有规律地反射光线，形成其他物体的连贯反射。与它的前身 KHR_materials_pbrSpecularGlossiness不同，这个新的specular 扩展在 glTF 的 PBR 材质模型的核心（现代金属/粗糙度）工作流中运行，使彩色specular 高光与一系列高级 PBR 材质扩展兼容。

        这些扩展允许更多的场景和物体被真实地展现。

玻璃穹顶下的橄榄。使用IOR、Specular、Transmission和Volume PBR扩展，为半透明的材料添加反射和折射

 

渲染

        我们要实现交互灵活、功能强大、特效绚丽的 3D 场景只有模型是不够的，因此我们还需要借助 3D 渲染引擎进行渲染。

3D渲染引擎

        Three.js 是最知名的 WebGL 项目之一， 它具有强大的几何体、材质、光源和动画功能，可以轻松创建各种3D场景和交互式应用。相对于其他框架来说它具备出色的文档和强大的社区，源码中还提供了大量的示例帮助学习，比较容易上手，同时它能很好地执行复杂的渲染功能，性能较好。但 Three.js 自身的定位是渲染引擎，不算是游戏引擎，渲染以外的功能较少，主要靠社区开发维护，缺少碰撞检测。three.js更适合应用于小场景当中，可以用来做中小型的重表现的Web项目。

        Babylon.js 是一个强大的、简单的、开放的游戏和渲染引擎，它是 Three.js 的有力竞争者。Babylon.js具有许多功能，如物理引擎、阴影、碰撞检测、动画、粒子系统等，可以帮助开发者快速创建高品质的3D场景。和 Three.js 主要由社区推动不同，它由微软提供完善的开发团队，文档完善且更新及时，支持 JavaScript 和 TypeScript 两种编程语言，相对稳定。Babylon 的周边工具非常丰富，具备出色的测试工具 Playground，让开发者可以在进行全面开发之前就能对事物进行简单快捷的测试。适合做中大型项目，尤其是多种媒体混杂的或者是游戏项目 VR 体验项目。

        这两个 3D 渲染引擎都有对应的 loader 来加载 glTF 文件。在 Babylon 引擎中，只需要几行代码就能将 glTF 模型加载到场景中4。

var delayCreateScene = function () {
    // Create a scene.
    var scene = new BABYLON.Scene(engine);

    // Create a default skybox with an environment.
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("textures/environment.dds", scene);
    var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);

    // Append glTF model to scene.
    BABYLON.SceneLoader.Append("scenes/BoomBox/", "BoomBox.gltf", scene, function (scene) {
        // Create a default arc rotate camera and light.
        scene.createDefaultCameraOrLight(true, true, true);

        // The default camera looks at the back of the asset.
        // Rotate the camera by 180 degrees to the front of the asset.
        scene.activeCamera.alpha += Math.PI;
    });

    return scene;
};

        Three.js 和 Babylon 都支持 WebGPU 渲染，它们能充分发挥硬件能力，给用户提供更流畅稳定的体验。

WebAssembly

        WebAssembly也是Web 3D开发的重要技术之一，它是一种使用非 JavaScript 代码，并使其在浏览器中运行的方法。它的目标是将诸如C、C++ 或 Rust 等低级源语言进行高效编译，编译为二进制文件，然后在 JavaScript 中可以直接被当作模块来用，从而使这些代码可以在浏览器中以接近原生的速度运行，因此它可以提供比JavaScript更高效的计算和渲染方式，并且具有跨平台的优势。在Web3D领域，WebAssembly 技术可以用于将桌面游戏引擎中开发的 3D 项目直接移植到 Web 平台上，使得其在浏览器中的性能得到大幅提升。例如，Unity 和 Unreal Engine 都提供了 WebAssembly 导出功能，可以将3D项目代码导出成 WebAssembly 模块，以便在浏览器中运行。

        本文介绍了当前从建模到渲染过程中的一些Web3D技术。随着5G技术的发展和元宇宙概念的火爆，Web3D技术将继续发展和完善，提供更好的图像性能及更丰富的功能。Web3D一定会重塑未来，给人们的生产和生活带来更加精彩的体验和更为深刻的变革。