减少冗余的 webgl 属性数据

Question

如果我想在没有多次绘制调用的情况下使用三角形绘制一个红色和蓝色的正方形，据我所知，形状顶点有 12 个元素（有意义），但我还需要仅对两种颜色使用 12 个元素，因为我需要为每个顶点定义一种颜色，我用于形状的顶点越多，该颜色呈指数级冗余。

有没有什么办法，比如说，跳过某个属性很多次，使得这些排列起来

vertices = [0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1
            1, 1, 1, 2, 2, 1, 2, 1, 1, 2, 2, 2]
colors   = [1, 0, 0, 1,
            0, 0, 1, 1]

因此第一种颜色（颜色中的第一个 vec4）应用于顶点中的前六个点，第二种颜色应用于接下来的六个点。

这可能吗，还是我必须为形状中的每个顶点重新定义相同的颜色？

Answer 1

否则，如果你真的热衷于不复制顶点，你可以使用制服：

uploadAttrDataForOneShape();
setUniform("color", RED);
draw();
setUniform("color", BLUE);
draw();

实际上，GPU 上的内存是充足的，可能不值得为顶点冗余过分强调。

reduce redundant webgl attribute data