Javascript 使用三角形在WebGL中创建网格平面

我试图在WebGL中创建一个三角形平面，我有以下代码。但是，当我在浏览器中渲染时，它只会给我一条与y轴平行的垂直线

var quads = 200;
for (var y = 0; y <= quads; ++y) {
  var v = y / quads * 40;
  for (var x = 0; x <= quads; ++x) {
    var u = x / quads * 40;
    recipient.vertices.push( vec3(u, v, 1))
    recipient.normals.push( vec3(0, 0, 1))
  }
}

var rowSize = (quads + 1);
for (var y = 0; y < quads; ++y) {
  var rowOffset0 = (y + 0) * rowSize;
  var rowOffset1 = (y + 1) * rowSize;
  for (var x = 0; x < quads; ++x) {
    recipient.indices.push(rowOffset0, rowOffset0 + 1, rowOffset1);
    recipient.indices.push(rowOffset1, rowOffset0 + 1, rowOffset1 + 1);
  }
}

var-quads=200；
对于（var y=0；y而言，中有一个bug。应该是这样的

var quads = 200;
for (var y = 0; y <= quads; ++y) {
  var v = y / quads;
  for (var x = 0; x <= quads; ++x) {
    var u = x / quads;
    recipient.vertices.push( vec3(u, v, 1))
    recipient.normals.push( vec3(0, 0, 1))
  }
}

var rowSize = (quads + 1);
for (var y = 0; y < quads; ++y) {
  var rowOffset0 = (y + 0) * rowSize;
  var rowOffset1 = (y + 1) * rowSize;
  for (var x = 0; x < quads; ++x) {
    var offset0 = rowOffset0 + x;
    var offset1 = rowOffset1 + x;
    recipient.indices.push(offset0, offset0 + 1, offset1);
    recipient.indices.push(offset1, offset0 + 1, offset1 + 1);
  }
}


属性向量4位置；
一致mat4矩阵；
void main（）{
gl_位置=矩阵*位置；
}
精密中泵浮子；
void main（）{
gl_FragColor=vec4（1,0,0,1）；
}
非常感谢您的帮助，这段代码非常好用！如果我能再问您一个问题，我想知道您对如何在某些区域（如丘陵）绘制曲面曲线有何建议？我知道这可能涉及一个带有y坐标的sin函数，但我一直在研究如何为所有对象生成法线。您应该问这是另一个问题，因为答案需要代码。一个简单的方法是使用sin函数生成pick-your Z-coord。制作法线需要更多的工作。有时可以从函数中派生法线，否则可以检查共享点来计算法线