在WebGL中使用三角形制作网格平面

问题描述

我正在尝试在WebGL中创建一个三角剖分的平面，并且我有以下代码.但是，当我在浏览器中渲染它时，它只是给我一条平行于y轴的垂直线.

I'm trying to create a triangulated plane in WebGL and I have the following code. However, when I render this in the browser, it just gives me a vertical line parallel to the y-axis.

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);
  }
}

作为后续问题，我希望获得一些技巧，以了解如何使用该平面制作弯曲的表面，类似于小山.

Also as a followup question, I was hoping to get some tips on how to make a curved surface with this plane, something similar to a hill.

推荐答案

原始答案.应该是这个

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);
  }
}

还固定在原始答案中.

function Vec3Array() {
  this.array = [];
  this.push = function(v3) {
    this.array.push.apply(this.array, v3);
  }
}

function vec3(x, y, z) {
  return [x, y, z];
}
  
var recipient = {
  vertices: new Vec3Array(),
  normals: new Vec3Array(),
  indices: [],
};
  
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);
  }
}


var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: recipient.vertices.array,
  indices: recipient.indices,
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

function render(time) {
  time *= 0.001;
  twgl.resizeCanvasToDisplaySize(gl.canvas);
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

  var scale = 2 + (Math.sin(time) * 0.5 + 0.5) * 16;
  var uniforms = {
    matrix: [
      scale, 0, 0, 0,
      0, scale, 0, 0,
      0, 0, 1, 0,
      -1, -1, 0, 1,
    ],
  };

  gl.useProgram(programInfo.program);
  twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
  twgl.setUniforms(programInfo, uniforms);
  twgl.drawBufferInfo(gl, gl.LINE_STRIP, bufferInfo);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
canvas { 
  width: 100%;
  height: 100%;
}

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;

uniform mat4 matrix;

void main() {
  gl_Position = matrix * position;
}
</script>
<script id="fs" type="notjs">
precision mediump float;

void main() {
  gl_FragColor = vec4(1,0,0,1);
}
  </script>
<canvas id="c"></canvas>

这篇关于在WebGL中使用三角形制作网格平面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！