浏览器中的3D：技术与框架
浏览器中的3D：技术与框架
网络已经悄然成为一个严肃的3D体验平台。从简单的旋转立方体开始，已经演变为主要品牌的产品配置器、科学家的数据可视化、全尺寸游戏以及沉浸式AR/VR体验——所有这些都在浏览器标签页中运行，无需安装。
驱动Web 3D的核心技术
在基础层面，有一些关键技术使这一切成为可能。把它们想象成蛋糕的层次——每一层都建立在下一层之上。
WebGL 2是通用的基线。它已经在每个浏览器中存在多年，稳定且拥有庞大的工具和库生态系统。如果你今天为网络构建，无论你是直接编写还是使用框架，你的代码最终都在WebGL 2上运行。
WebGPU是闪亮的新成员。它是一个现代的、低级别的图形API，为开发者提供了对GPU更直接的控制——类似于原生平台上的Vulkan、Metal或DirectX 12。它支持计算着色器（使用GPU进行通用数学计算，而不仅仅是图形）、更好的多线程和更可预测的性能。浏览器支持正在快速增长：它在Chrome和Edge中已发布，在Firefox中可通过标志启用，并在Safari Technology Preview中可用。对于性能重要的新项目，值得关注。
WebXR是将虚拟现实和增强现实带入浏览器的方式。它是Meta Quest、Apple Vision Pro甚至简单的Cardboard查看器等VR头显以及手机和平板电脑上AR的标准API。WebXR处理跟踪头部位置、渲染立体视图和管理控制器输入的复杂工作——这样你就可以专注于构建体验。
WebAssembly（Wasm）也值得一提。它允许你用C++、Rust或其他语言编写的代码在浏览器中以接近原生的速度运行。这就是Unity、Unreal和Godot等重型引擎可以导出到网络的方式——它们将C++核心编译为WebAssembly，并与JavaScript一起运行。
最后，像Basis Universal和KTX2这样的GPU纹理压缩格式允许你传输在GPU内存中保持压缩状态的纹理，从而节省带宽和内存——这对移动设备至关重要。
高级框架：你可能不想编写原始WebGL
编写原始WebGL就像从头开始制造汽车发动机——可能，但很少是你时间的最佳利用方式。框架处理样板代码，提供有用的抽象，并让你以场景、对象和材质的角度思考，而不是缓冲区、着色器和绘制调用。
Three.js是生态系统中无可争议的王者。它自2010年以来一直存在，拥有庞大的社区、优秀的文档，并与所有主要的3D格式兼容。它为你提供了一个场景图（对象树）、相机、灯光、材质、几何体、动画系统、后期处理效果以及GLTF、OBJ、FBX等的加载器。React生态系统通过React Three Fiber（R3F）拥抱了它，这让你可以声明式地将Three.js场景编写为React组件——如果你已经在使用React构建，这将是一个游戏规则改变者。
Babylon.js采取了不同的方法——它更像是一个浏览器中的完整游戏引擎。它拥有强大的可视化编辑器、内置物理引擎、基于节点的材质编辑器、出色的TypeScript支持和一流的WebXR实现。如果你正在构建类似游戏的东西或需要编辑器驱动的工作流程，Babylon.js是一个绝佳的选择。
PlayCanvas的独特之处在于它是云原生的。编辑器在你的浏览器中运行，你的项目保存在云端，多人可以实时协作。它使用实体组件系统架构，在构建可玩广告、即时游戏和协作3D工具的团队中很受欢迎。
A-Frame采用声明式的、类似HTML的方法。你将3D场景编写为自定义HTML元素：
OGL是极简主义者的选择——只有几KB，没有意见，只是WebGL上的一层薄薄的封装。非常适合尺寸受限的项目，如横幅广告，或者当你想要从头开始构建自己的抽象时。
React生态系统：组件驱动的3D
如果你是React开发者，React Three Fiber（R3F）是变革性的。它是Three.js的React渲染器——这意味着你使用JSX编写3D场景，就像你的UI一样。
R3F生态系统已经变得丰富，拥有许多辅助工具。@react-three/drei为你提供了数十个现成的组件：轨道控制、HTML叠加层、文本、环境贴图、加载器等。@react-three/postprocessing带来了后期处理效果。@react-three/rapier和@react-three/cannon-es添加了物理引擎。你可以用非常少的样板代码构建出奇复杂的3D应用。
对于React中的WebXR，有React XR，它将相同的声明式方法带到了AR/VR开发中。
文件格式：glTF是3D界的JPEG
如果你要把3D放到网络上，glTF 2.0（GL传输格式）是标准。它通常被称为“3D界的JPEG”——一个免版税、高效、运行时就绪的格式，由Khronos Group（WebGL和WebGPU背后的同一群人）维护。
glTF有两种形式：.gltf（JSON + 单独的二进制/数据文件）和.glb（所有内容都在一个二进制文件中）。对于网络，通常首选.glb——一个文件，一个请求，易于缓存。
glTF开箱即用地支持基于物理的渲染（PBR）材质——金属/粗糙度工作流程、法线贴图、环境光遮蔽贴图、自发光贴图。它处理动画、骨骼绑定（蒙皮）和变形目标（混合形状）。对于压缩，Draco极大地减少了几何体大小，而KTX2/Basis Universal处理在GPU上保持压缩状态的纹理压缩。
其他格式也存在——用于Apple AR Quick Look的USDZ，作为遗留交换格式的FBX和OBJ——但对于网络交付，glTF是答案。避免在生产网络中使用FBX/OBJ；它们冗长、缺乏标准化且压缩效果不佳。
资产管道：从建模到浏览器
将3D模型从建模软件高效地导入浏览器涉及几个步骤。
建模在Blender（免费且优秀）、Maya、Cinema 4D或Modo等工具中完成。导出时，使用Blender的官方Khronos glTF导出器——它由规范作者维护，并产生最干净的输出。
优化是网络性能的魔法发生的地方。glTF Transform（一个命令行工具）可以应用Draco几何压缩、将纹理调整大小并压缩为KTX2/BasisU、生成mipmap、删除未使用的数据等。Meshoptimizer进一步压缩顶点和索引缓冲区。glTF Validator在你发货前捕获规范违规。
对于托管，使用具有适当CORS标头和HTTP Range请求支持的CDN——这可以实现大型模型的渐进式加载。一些团队使用专门的3D CDN，它们可以即时处理格式转换和优化。
物理和交互：让它感觉真实
静态3D很漂亮；交互式3D很吸引人。对于物理，JavaScript/Wasm世界中的主要选项是Cannon-es（Cannon.js的轻量级移植）、Rapier（一个快速、现代的基于Rust的引擎，编译为Wasm，通过@react-three/rapier与R3F完美集成）、Ammo.js（行业标准Bullet物理引擎的移植——强大但沉重）和Jolt Physics（一个更新、非常快的Wasm移植）。
对于交互，光线投射是基本技术——从相机通过鼠标/手指位置发射一条不可见的光线，以查看击中了哪个3D对象。库提供现成的控件：用于围绕对象旋转的OrbitControls、用于移动物体的DragControls、用于gizmo样式平移/旋转/缩放的TransformControls。在WebXR中，你获得基于控制器的交互——指向、抓取、传送——由框架的XR集成处理。
性能预算：保持流畅
网络是性能的恶劣环境。用户使用从旗舰手机到五年前的笔记本电脑等各种设备。以每秒60帧为目标意味着每帧有16.6毫秒。对于VR，你需要90fps（11.1ms）甚至120fps（8.3ms）。
大致预算目标：移动设备低于10万个三角形，桌面设备低于100万个。绘制调用低于50个是理想的，低于200个是可接受的。纹理内存：移动设备低于100MB，桌面设备低于500MB。着色器复杂性很重要——避免动态分支，限制纹理采样，保持指令数较低。
性能分析工具是你的朋友。Chrome DevTools的Performance选项卡、用于帧捕获的Spector.js、three.js的内置统计面板以及用于在运行时对设备进行分级的detect-gpu。关键见解：在实际设备上测量，而不仅仅是在你的开发机器上。
渐进增强：优雅降级
并非所有设备都能运行你花哨的3D场景。渐进增强意味着在任何地方提供可用的体验，然后在支持的地方叠加3D。
从2D后备开始——一张英雄图片、一个轮播图、一个静态图表。在运行时检测WebGL（以及WebGPU、WebXR）支持。对于低端设备，提供低多边形模型、较小的纹理，并禁用阴影、泛光或屏幕空间反射等昂贵效果。像three.js的detectGPU或WebGL Report这样的工具可以帮助对设备能力等级进行分类。
目标不是让所有地方看起来都一样——而是让核心体验在任何地方都能工作，并在硬件允许的地方大放异彩。