WebGL - 用块构建对象

Question

我正在尝试使用块构建一些文本，我打算稍后对其进行自定义。所附图片是我打算做的模型。

我正在考虑使用 WebGL，因为我想在 3D 中做，我不能做任何闪光，但我不知道如何从字母构造立方体的结构。谁能给我一个建议或技术将文本映射到一系列点，以便从远处看到他们绘制相同的文本？

Answer 1

1. 首先，您需要一种字体（字符形状表），格式可以从代码中读取。你已经有一个了吗？如果只是几个字母，您可以为每个字符手动创建多边形。

2. 然后，使用光栅化算法将字符形状转换为存在或不存在点/立方体的数组。如果您有完美的平面文本，请使用 2D 数组；如果您的“自定义”会创建深度效果，那么您将需要一个 3D 阵列（通过将形状相同地写入阵列的多个平面来“挤压”形状）。

   如果您的文本在运行时没有变化，则前两个步骤的替代方法是先创建一个带有所需文本的图像，然后将图像的像素用作上述二维数组。在浏览器中，您可以使用 2D Canvas 功能将图像绘制到画布上，然后从中读取像素。

3. 然后要从这个 voxel 数组中生成一个 3D 形状，为数组中“存在”点与“不存在”点相遇的每个位置构造一个多边形面。如果您基于邻居对执行此操作，您会得到一个大块像素外观（如 Minecraft）。如果您想要平滑的斜坡（如您的示例图像），那么您需要更复杂的技术；产生光滑表面的传统方法是marching cubes（但只做行进立方体会使你的所有角落都变圆）。