WebGL从纹理图集平铺

问题描述

我将地图图块(256px x 256px)存储在纹理地图集中,并且想要选择一个图块并使用其周围的8个图块进行绘制。我的纹理图集是这样的(为简单起见,将其命名为图块1-9):

enter image description here

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

这对于绘制单个图块效果很好,但是现在我想与相邻图块一起绘制,因此将9个图块绘制到帧缓冲区中,如下所示:

enter image description here

如果这很重要,我将使用regl,但是我苦苦挣扎的主要部分是如何设置着色器。我将始终只将9个图块绘制到768 x 768帧缓冲区中。我可以使用贴图的texCoords发送贴图集和9种制服,但是从那里去哪里呢?我大概可以弄清楚如何通过9次绘画调用来做到这一点,但是可以仅通过1次绘画调用来实现吗?

我非常感谢您的反馈。

解决方法

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

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