本文旨在解决 Three.js 中渲染大量 2D 文本标签时遇到的性能瓶颈。通过采用实例几何体（InstancedBufferGeometry）结合纹理图集（Texture Atlas）和自定义着色器（ShaderMaterial）的方法，可以显著提升渲染效率，实现千级甚至更多文本标签的流畅显示，同时保持文本的对齐和可读性。
在 Three.js 应用中，当需要渲染数百甚至数千个 2D 文本标签时，传统的渲染方法如 TextGeometry、troika-three-text 或 CSS2DRenderer 往往会遭遇严重的性能问题，导致帧率骤降。这些方法通常为每个文本标签创建独立的几何体或 DOM 元素，从而增加了大量的绘制调用（draw calls）和 CPU/GPU 开销。为了解决这一挑战，一种高效的策略是利用 WebGL 的实例渲染（Instanced Rendering）能力，结合纹理图集来管理文本内容。
核心策略：实例渲染与纹理图集
该解决方案的核心思想是将所有文本标签渲染为同一批次的实例平面（instanced planes），并通过一个包含所有文本内容的纹理图集来为这些平面提供纹理。每个实例平面通过其唯一的 gl_InstanceID 从纹理图集中选择并显示对应的文本片段。这种方法将数千个绘制调用合并为少数几个，极大地减轻了渲染负担。
- 纹理图集（Texture Atlas）: 首先，创建一个足够大的 Canvas 元素，将所有需要显示的文本内容绘制到这个 Canvas 上，形成一个包含多个文本块的“图集”。然后，将这个 Canvas 转换为 THREE.CanvasTexture，作为我们实例平面的纹理。
- 实例几何体（InstancedBufferGeometry）: 使用 THREE.PlaneGeometry 作为基础几何体，并将其转换为 THREE.InstancedBufferGeometry。这意味着所有文本标签都将共享同一个几何体数据。
-
自定义着色器（ShaderMaterial）:
- 顶点着色器 (Vertex Shader)：为每个实例平面定义其独特的位置 (instPos)。关键在于，根据内置的 gl_InstanceID，计算出当前实例在纹理图集中的 UV 坐标偏移，从而确保每个实例能正确采样到图集中的特定文本。此外，为了实现文本始终面向摄像机（billboard effect），需要将平面相对于摄像机进行旋转。
- 片元着色器 (Fragment Shader)：简单地使用顶点着色器传递过来的正确 UV 坐标，从纹理图集中采样颜色，并输出到屏幕。
实现步骤详解
以下是使用 Three.js 实现高性能 2D 文本标签渲染的详细步骤和示例代码。
1. 基础 Three.js 场景设置
首先，我们需要一个标准的 Three.js 场景、摄像机、渲染器和轨道控制器。
Three.js 高性能2D文本标签
注意事项与最佳实践
- 纹理图集尺寸与文本质量: getMarkerTexture 函数中的 size 参数决定了纹理图集的总分辨率。更大的分辨率可以容纳更多文本或更高质量的文本。amountW 和 amountH 决定了图集中文本块的布局。需要根据实际文本数量和文本大小进行合理规划。
- 动态文本内容: 如果文本内容需要动态更新，则需要重新生成纹理图集。这可能是一个性能瓶颈，尤其是在频繁更新时。对于少量动态文本，可以考虑在图集中预留空白区域，并只更新局部纹理。对于大量动态文本，可能需要更复杂的策略，如多个纹理图集或异步更新。
- 文本裁剪与溢出: 示例代码中的文本是作为纹理绘制在平面上的。如果需要文本被其所在平面的边界裁剪（即“overflow hidden”），则当前的 UV 计算已经隐含了这一点，因为每个文本只占用其在图集中的指定区域。如果需要根据 另一个 3D 几何体的边界进行裁剪，则需要更复杂的着色器逻辑，例如使用 discard 片元或利用 Three.js 的裁剪平面功能。
- 性能优势: 实例渲染将所有文本标签的绘制合并为一个或少数几个绘制调用，显著减少了 CPU 和 GPU 之间的通信开销。同时，纹理图集避免了为每个文本单独加载纹理，进一步优化了性能。
- 文本样式与字体: 可以在 getMarkerTexture 函数中通过 ctx.font、ctx.fillStyle 等 Canvas 2D API 自由控制文本的字体、大小、颜色和样式。
- 替代方案考量: 对于数量较少（例如几十个）或需要与 DOM 元素交互的文本标签，CSS2DRenderer 仍是一个可行的选择。但对于千级以上的高性能需求，实例渲染与纹理图集是目前最有效的方法之一。
总结
通过 InstancedBufferGeometry 和 ShaderMaterial 结合纹理图集，我们能够高效地在 Three.js 中渲染大量的 2D 文本标签。这种方法将渲染性能瓶颈从每个文本标签的独立绘制调用转移到一次性生成纹理图集和一次性绘制所有实例上，从而在保持良好视觉效果的同时，实现了卓越的性能。在开发需要展示大量信息（如地图标注、楼层平面图中的房间名称等）的 3D 应用时，这种技术是不可或缺的。
