来自纹理图集的 WebGL 平铺

Question

我将地图图块 (256 像素 x 256 像素) 存储在纹理图集中，并希望选择一个图块并将其与周围相邻的 8 个图块一起绘制。我的纹理图集是这样的（为简单起见，将图块命名为 1-9）：

我已经有了制作纹理图集的设置。瓷砖存储在一个随机的可用位置，我可以从瓷砖坐标中获取纹理坐标。 例如。 tile 5 的 texCoords 可以是：[{x: 0.00030517578125, y: 0.00018310546875}, {x: 0.01593017578125, y: 0.01580810546875}]

这适用于绘制单个图块，但现在我想用相邻的图块进行绘制，所以 9 个图块到帧缓冲区，如下所示：

如果这很重要，我正在使用 regl，但我正在努力解决的主要部分是如何设置着色器。我将始终只在 768 x 768 帧缓冲区中绘制 9 个图块。我可以发送纹理图集和 9 个带有 texCoords 的制服，但是我从那里去哪里？我大概可以弄清楚如何用 9 个绘图调用来做到这一点，但可以只用 1 个绘图调用来完成吗？

非常感谢任何反馈。

Answer 1

我最初是用triangle strip 基元和4 个顶点位置绘制单个图块。当扩展到 9 个图块时，我无法使其正常工作。我现在明白这是因为每个顶点只有一个 texCoord，当每个图块的纹理处于随机位置时，这将不起作用。我想我可以以某种方式使用退化三角形？

我改为使用triangles 原语进行绘图，这使它变得更加简单。我现在给出 54 个顶点位置和 texCoords，它现在可以按要求工作。可能有更好的方法来做到这一点，但它对我有用。