WebGL固定网格中的单元格纹理，没有重复的顶点

Question

我正在使用WebGL编写一个Web应用程序，我创建了一个顶点网格，它被组装成四边形，有点像网格。

它看起来像是完全纹理化的。

它工作正常，但有一个问题。纹理是以下8x8图像，带有2个箭头，一个指向左，一个指向上方。

此时，您可能已经意识到纹理会根据顶点在所有方向上翻转。

我使用以下Dart代码创建顶点。尽管

，这对于javascript开发人员来说也难以理解

    vertices = new Float32List(verts * ChunkRenderer.FLOATS_PER_VERTEX);

    for (int i = 0; i < w + 1; i++) {
        for (int j = 0; j < h + 1; j++) {
            int index = (i + j * (w + 1)) * ChunkRenderer.FLOATS_PER_VERTEX;

            double x = i * 16.0;
            double z = j * 16.0;
            double y = 0.0;

            double r = rand.nextDouble();
            double g = rand.nextDouble();
            double b = rand.nextDouble();

            double u = i % 2 == 0 ? 0.0 : 1.0;
            double v = j % 2 == 0 ? 0.0 : 1.0;

            vertices.setAll(index, [
                x, y, z,
                   u, v,
                r, g, b,
            ]);
        }
    }

这些行特别负责设置UV映射

double u = i % 2 == 0 ? 0.0 : 1.0;
double v = j % 2 == 0 ? 0.0 : 1.0;

有没有办法为每个三角形重复使用顶点而不会弄乱纹理，还是我真的需要为每个单元复制顶点？

我喜欢这种当前的设置，因为我可以移动一个顶点，例如它会创建一个＆＃34;尖峰＆＃34;如果你愿意的话。如果每个单元格都有自己的顶点，我必须更新4个不同的顶点才能获得相同的效果（当然不包括网格边缘的顶点）

由于

Answer 1

您可以为每个顶点提供4对（U，V），然后决定使用哪一个。

我不知道您的渲染代码，因此很难提供任何示例。

Answer 2

我认为最基本的重用形式是为一个四边形准备网格数据，然后为每个绘制调用重新绘制具有不同平移和旋转信息的四边形。由于额外的绘制调用，这将比你正在进行的性能显着降低，但也需要更少的内存。