在 Autodesk Forge 中渲染二维文本而不会出现锯齿或模糊

Question

原来我正在使用 Autodesk Forge 查看器和 Three.js，试图渲染可以与之交互的 2D 文本（特别是 select、旋转和移动）。

为此，我正在使用网格（使用 MeshBasicMaterial、Mesh 和 TextGeometry），但事实证明文本看起来不是很清晰，它出现锯齿，我发现根据 API 参考，抗锯齿不适用于 2d。

下面是问题的一些示例，如您所见，我离平面越远，文字看起来就越糟糕（甚至近距离看也不完美）：

我试图用 Sprite 来表示文本的测试（尽管这意味着必须更改已经使用其他功能的网格制作的整个实现）但除了我看不到它之外，我还看到了示例图像，它们看起来也不太好：锯齿从远处可见，近距离看起来真的很模糊。 这里有一些例子：

有没有办法纠正这个问题，或者这是我在 2D 中可以获得的最多？ 我试过搜索这方面的信息，但找不到任何有用的信息。 最让我困惑的是意识到抗锯齿不适用于 2d 的情况，比如明确表示无法修复它。

如果您能解决我的疑惑，我将不胜感激，在此先感谢您的帮助。

Answer 1

一个更简单的选择是只为渲染器使用更高的像素比......

window.devicePixelRatio=2;  
viewer.resize();

例如，使用来自 Joao 演示的自定义几何文本，您可以在 DPR=0.5 和 DPR=1.0 处看到相同的锯齿问题...

但是当我设置 DPR=2.0 时，文本看起来很干净。 权衡是渲染性能，但您的 2D 绘图可能足够简单，因此无关紧要。 如果您想要更好的 UX 体验，可以使用“鼠标向上”相机固定技巧，在 1 和 2 的 DPR 之间切换。

Answer 2

有几种方法可以解决 2D（和 3D 文本）的混叠问题。

我为您的用例推荐的方法是使用 DIV 元素 (THREE.CSS3DRenderer)，而不是将文本转换为 three.js 镶嵌三角形几何图形，如这篇博文所示：

您可以在此处找到有关 THREE.CSS3DRenderer 的更多信息： https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer

使用 CSS3DRenderer 而不是 CSS2DRenderer，意味着您将在放大 2D 绘图时获得 div 元素的正确缩放（和旋转），并且矩阵变换计算中的数学运算具有更少的边缘情况。

为文本使用 DIV 元素后，您会注意到文本更清晰并且没有锯齿问题。 那是因为它不是被 webGL 管道光栅化，而是被 chrome/firefox/opera/etc 用于光栅化文本的 SKIA 库光栅化。

最后一个选项是使用带符号的距离字段，但它可能对您的需要来说有点矫枉过正。

如果您需要一些示例代码，请告诉我。