Javascript WebGL如何渲染3d阵列？

我正试图找到一种使用WebGL渲染数学函数的好方法。或者只是我放在数组中的所有东西，比如基本的数学函数。所以这里我只是把一些3D坐标放在一个数组中，它似乎不起作用

以下是我的代码行：

arrays.js[更新]

---

正如您所说，有一些小错误，但我认为真正的问题是您在调用gl.drawArray之前没有设置矩阵制服。我假设您正在遵循上的教程，因此drawPoints中的最后3行应该是：

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
                       myArrBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.POINTS, 0, myArrBuffer.numItems);

其中，setMatrixUniforms定义为：

function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

注意，我还将gl.VertexAttributeArray更改为gl.VertexAttributePointer

使用转换矩阵

mat4.translate(mvMatrix, [ 0.0, 0.0, -7.0 ]);

并在顶点着色器中将点大小设置为10以实现可见性

gl_PointSize = 10.0;

以下是我得到的输出：

---

我还没有看完所有的内容，但是为什么你要声明mvmatrix和pMatrix，而在你的顶点着色器中使用uPMatrix和uMVMatrix？好的，我想我到处都改变了它，谢谢你指出这一点。但仍然不工作…定义不工作。我可以看到画布，背景是黑色的，但我看不到任何点？我能立即看到的另一件事是最后一行圆点的长度拼写错误。错误控制台说什么？

function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

mat4.translate(mvMatrix, [ 0.0, 0.0, -7.0 ]);

gl_PointSize = 10.0;