Question

我需要一个四边形网格，因此我可以在X和Y中拥有200x200个顶点和0到1的UV坐标。

我无法手工编写，无论如何生成这样的网格？

Answer 1

您想要200x200顶点还是200x200四边形？

带索引

var positions = [];
var uvs = [];
var indices = [];

var quadsAcross = 200;
var quadsDown = 200;
for (var y = 0; y <= quadsDown; ++y) {
  var v = y / quadsDown;
  for (var x = 0; x <= quadsAcross; ++x) {
    var u = x / quadsAcross;
    positions.push(u, v);
    uvs.push(u, v);
  }
}

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

＆＃13;

var positions = [];
var uvs = [];
var indices = [];

var quadsAcross = 200;
var quadsDown = 200;
for (var y = 0; y <= quadsDown; ++y) {
  var v = y / quadsDown;
  for (var x = 0; x <= quadsAcross; ++x) {
    var u = x / quadsAcross;
    positions.push(u, v);
    uvs.push(u, v);
  }
}

var rowSize = (quadsAcross + 1);
for (var y = 0; y < quadsDown; ++y) {
  var rowOffset0 = (y + 0) * rowSize;
  var rowOffset1 = (y + 1) * rowSize;
  for (var x = 0; x < quadsAcross; ++x) {
    var offset0 = rowOffset0 + x;
    var offset1 = rowOffset1 + x;
    indices.push(offset0, offset0 + 1, offset1);
    indices.push(offset1, offset0 + 1, offset1 + 1);
  }
}


var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: { numComponents: 2, data: positions},
  uv:       { numComponents: 2, data: uvs      },
  indices: 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);

＆＃13;

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

＆＃13;

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;
attribute vec2 uv;

uniform mat4 matrix;

varying vec2 v_uv;

void main() {
  gl_Position = matrix * position;
  v_uv = uv;  
}
</script>
<script id="fs" type="notjs">
precision mediump float;

varying vec2 v_uv;

void main() {
  gl_FragColor = vec4(v_uv, 0, 1);
}
  </script>
<canvas id="c"></canvas>

＆＃13;

没有指数

var positions = [];
var uvs = [];

var quadsAcross = 200;
var quadsDown = 200;
for (var y = 0; y < quadsDown; ++y) {
  var v0 = (y + 0) / quadsDown;
  var v1 = (y + 1) / quadsDown;
  for (var x = 0; x < quadsAcross; ++x) {
    var u0 = (x + 0) / quadsAcross;
    var u1 = (x + 1) / quadsAcross;
    positions.push(u0, v0, u1, v0, u0, v1);
    positions.push(u0, v1, u1, v0, u1, v1);
    uvs.push(u0, v0, u1, v0, u0, v1);
    uvs.push(u0, v1, u1, v0, u1, v1);
  }
}

这是200x200四边形，即201x201顶点。如果您想要200x200顶点，请将quadsAcross和quadsDown更改为199

＆＃13;

var positions = [];
var uvs = [];

var quadsAcross = 200;
var quadsDown = 200;
for (var y = 0; y < quadsDown; ++y) {
  var v0 = (y + 0) / quadsDown;
  var v1 = (y + 1) / quadsDown;
  for (var x = 0; x < quadsAcross; ++x) {
    var u0 = (x + 0) / quadsAcross;
    var u1 = (x + 1) / quadsAcross;
    positions.push(u0, v0, u1, v0, u0, v1);
    positions.push(u0, v1, u1, v0, u1, v1);
    uvs.push(u0, v0, u1, v0, u0, v1);
    uvs.push(u0, v1, u1, v0, u1, v1);
  }
}

var gl = twgl.getWebGLContext(document.getElementById("c"));
var programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);

var arrays = {
  position: { numComponents: 2, data: positions},
  uv:       { numComponents: 2, data: uvs      },
};
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);

＆＃13;

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

＆＃13;

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="vs" type="notjs">
attribute vec4 position;
attribute vec2 uv;

uniform mat4 matrix;

varying vec2 v_uv;

void main() {
  gl_Position = matrix * position;
  v_uv = uv;  
}
</script>
<script id="fs" type="notjs">
precision mediump float;

varying vec2 v_uv;

void main() {
  gl_FragColor = vec4(v_uv, 0, 1);
}
  </script>
<canvas id="c"></canvas>

＆＃13;

Answer 2

您可以使用循环创建此顶点数组。简单：

for (var i = 0; i < 200; i++)
  for (var j = 0; j < 200; j++)
  {
   // fill our array here
  }

生成网格网格

2 个答案: