shader - 来自纹理图集的 WebGL 平铺

Question

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

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

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

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

我真的很感激任何反馈。

标签： shaderwebgltexturestilingtexture-atlas

Answer 1

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

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