这是我正在使用的顶点数组：

vertices = [
    -1.0,  1.0,  0.0,
     0.0,  1.0,  0.0,
    -0.5,  1.0,  0.0,
     0.5,  1.0,  0.0,
     1.0,  1.0,  0.0,
     1.0,  0.5,  0.0,
     0.0,  0.5,  0.0,
     0.5,  0.5,  0.0,
    -0.5,  0.5,  0.0,
    -1.0,  0.5,  0.0,

    -1.0,  0.0,  0.0,
    -0.5,  0.0,  0.0,
     0.0,  0.0,  0.0,
     0.5,  0.0,  0.0,
     1.0,  0.0,  0.0,

    -1.0, -0.5,  0.0,
     0.0, -0.5,  0.0,
    -0.5, -0.5,  0.0,
     0.5, -0.5,  0.0,
     1.0, -0.5,  0.0,
     1.0, -1.0,  0.0,
     0.0, -1.0,  0.0,
     0.5, -1.0,  0.0,
    -0.5, -1.0,  0.0,
    -1.0, -1.0,  0.0,
];


在html选择中，我想选择一种渲染模式并在我的drawScene中使用-method：

var renderModeSelector = document.getElementById("renderModeDropDown");
var selectedRenderModeValue = renderModeSelector.options[renderModeSelector.selectedIndex].value;

switch (selectedRenderModeValue) {
    case "0":
        gl.drawArrays(gl.POINTS, 0, squareVertexPositionBuffer.numItems);
        break;
    case "1":
        gl.drawArrays(gl.TRIANGLE_FAN, 0, squareVertexPositionBuffer.numItems);
        break;
    case "2":
        gl.drawArrays(gl.LINE_LOOP, 0, squareVertexPositionBuffer.numItems);
        break;
    default:
        console.log("No rendering mode selected.");
}





情况“ 0”应该画出可以正常工作的点



>
情况“ 1”应绘制一个填充的矩形，且着色器在下面。不幸的是，它被弄乱了，请参见下图。

片段着色器：

precision mediump float;

varying vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}


顶点着色器：

attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec4 vColor;

void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
gl_PointSize = 5.0;
}





最后，在“ 2”的情况下，它应该只绘制轮廓，这也无法按预期工作，请参见




所以我想知道使用一个vertexPositionBuffer能否满足我的要求。我应该在渲染之前创建另一个vertexPositionBuffer还是可以“即时”更改我的矿井？

评论

在所有情况下，您只需要4个顶点。 1：-您可以轻松地使用嵌套的for循环绘制案例0。通过简单的数学运算，您可以得到4个端点，然后分别为案例1，案例2在它们之间绘制直线和三角形。 2：-或者您可以有端点，然后将它们除以案例0。我可能会做后者。
您的数据已关闭。您无需考虑缠绕规则。
@ritwiksinha是的，我想让它成为这么多顶点。
@joojaa“数据已关闭”是什么意思？我知道某些要点不是按照我更改的正确顺序进行，这不能解决问题。
@Käsebrot为什么不使用截面公式来计算4个顶点之间的点，即$（1，1），（-1、1），（-1，-1），（1，-1）$

#1 楼

您的着色器很好，问题是拓扑问题，这是顶点连接以创建三角形的方式。

对于情况1和2：在这种模式下，您无法真正绘制点网格（GL_TRIANGLE_FAN）因为顶点0（左上角的顶点）将用于每个三角形以及其他问题。您应该使用“三角形/线”条，尽管它们并不是那么简单，因为每行之间共享一些顶点。 />
0 1 2

3 4 5

6 7 8


您可以通过发送上面的顶点按以下顺序排列：


0,3,1（输出三角形0,1,3）

4，（输出三角形1,3， 4）

2，（输出三角形1,2,4）


等...

您可以在通过遍历1行顶点并在下一行中查找其他顶点的顶点来进行编码。
考虑到发送重复的顶点，您可以使用其他索引缓冲区，因为这将使您可以使用与GL_POINTS版本完全相同的顶点缓冲区。

评论

$ \ begingroup $
我做了一些小的修改，并编辑了与之匹配的代码。希望这可以按照您的期望保留答案，但是可以随意还原所有未包含的内容。
$ \ endgroup $
– trichoplax
16年8月2日在12:47