来自纹理图集的 WebGL 平铺
WebGL tiling from texture atlas
我将地图图块 (256px x 256px) 存储在纹理图集中，想要 select 一个图块并在其周围绘制相邻的 8 个图块。我的纹理图集是这样的（为简单起见将图块命名为 1-9）：
我已经有了制作纹理图集的设置。瓷砖存储在一个随机可用的位置，我可以从瓷砖坐标中获取纹理坐标。
例如。图块 5 的 texCoords 可以是：[{x: 0.00030517578125, y: 0.00018310546875}, {x: 0.01593017578125, y: 0.01580810546875}]
这适用于绘制单个图块，但现在我想用相邻的图块进行绘制，所以 9 个图块到帧缓冲区，如下所示：
如果这很重要，我正在使用 regl，但我正在努力解决的主要部分是如何设置着色器。我将始终只将 9 个图块绘制到 768 x 768 帧缓冲区。我可以发送纹理图集和 9 个制服以及瓷砖的 texCoords，但我从那里去哪里？我可能可以弄清楚如何使用 9 个绘制调用来完成它，但是仅使用 1 个绘制调用就可以完成吗？
如果有任何反馈，我将不胜感激。
我最初是用 triangle strip 基元和 4 个顶点位置绘制单个图块。当扩展到 9 个图块时，我无法让它正常工作。我现在明白这是因为每个顶点只有一个 texCoord，当每个图块的纹理处于随机位置时这将不起作用。我想我可以用某种方式使用退化三角形？
我改为使用 triangles 原始绘图，这使它变得更加简单。我现在给出 54 个顶点位置和 texCoords，它现在可以按要求工作。可能有更好的方法来做到这一点，但它对我有用。
我将地图图块 (256px x 256px) 存储在纹理图集中，想要 select 一个图块并在其周围绘制相邻的 8 个图块。我的纹理图集是这样的（为简单起见将图块命名为 1-9）：
我已经有了制作纹理图集的设置。瓷砖存储在一个随机可用的位置，我可以从瓷砖坐标中获取纹理坐标。 例如。图块 5 的 texCoords 可以是：[{x: 0.00030517578125, y: 0.00018310546875}, {x: 0.01593017578125, y: 0.01580810546875}]
这适用于绘制单个图块，但现在我想用相邻的图块进行绘制，所以 9 个图块到帧缓冲区，如下所示：
如果这很重要，我正在使用 regl，但我正在努力解决的主要部分是如何设置着色器。我将始终只将 9 个图块绘制到 768 x 768 帧缓冲区。我可以发送纹理图集和 9 个制服以及瓷砖的 texCoords，但我从那里去哪里？我可能可以弄清楚如何使用 9 个绘制调用来完成它，但是仅使用 1 个绘制调用就可以完成吗？
如果有任何反馈，我将不胜感激。
我最初是用 triangle strip 基元和 4 个顶点位置绘制单个图块。当扩展到 9 个图块时，我无法让它正常工作。我现在明白这是因为每个顶点只有一个 texCoord，当每个图块的纹理处于随机位置时这将不起作用。我想我可以用某种方式使用退化三角形？
我改为使用 triangles 原始绘图，这使它变得更加简单。我现在给出 54 个顶点位置和 texCoords，它现在可以按要求工作。可能有更好的方法来做到这一点，但它对我有用。