javascript - 在 WebGL 中对平面进行三 Angular 测量

Question

我正在尝试在 WebGL 中用三 Angular 形构造一个平面。我的构造函数代码如下所示:

function plane( points_transform )
{

    shape.call(this); // Inherit class shape’s array members by calling parent constructor
    if( !arguments.length) return; // Pass no arguments if you just want to make an empty dummy object that inherits everything, for populating other shapes
    this.populate( this, points_transform ); // Otherwise, a new triangle immediately populates its own arrays with triangle points,
    this.init_buffers(); // Then sends its arrays to the graphics card into new buffers
}

inherit(plane, shape); 
plane.prototype.populate = function( recipient, points_transform) 
{
    var offset = recipient.vertices.length;        
    var index_offset = recipient.indices.length;                // Recipient's previous size

    recipient.vertices.push( vec3(0,0,0), vec3(1,1,0), vec3(0,1,0), vec3(1,0,0), vec3(2,1,0), vec3(2,0,0) );
    recipient.normals.push( vec3(0,0,1), vec3(0,0,1), vec3(0,0,1), vec3(0,0,1), vec3(0,0,1), vec3(0,0,1) );
    // recipient.texture_coords.push( vec2(0,0), vec2(0,1), vec2(1,0), vec2(1,1), vec2(2,0), vec2(2,1) );
    recipient.indices.push( offset + 0, offset + 1, offset + 2, offset + 3, offset + 4, offset + 5 );

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, recipient.vertices);
}

但是当我绘制它时，它看起来像这样脱节:

我想知道如何解决这个问题以及如何创建一个通用函数，该函数可以采用任意数量的行/列并计算必要的顶点来生成 MxN 网格。

我正在查看this site具体来说，但我无法弄清楚trianglestrip变量来自哪里。

Answer 1

几天前有人问过这个问题。这是一个答案

Generate grid mesh

在您的特定情况下，虽然 1 单位矩形具有这些点

0,0      1,0
 +--------+
 |        |
 |        |
 |        |
 |        |
 +--------+
0,1      1,1

所以你的顶点应该是

recipient.vertices.push( 
  vec3(0,0,0), vec3(1,1,0), vec3(0,1,0), 
  vec3(1,0,0), vec3(1,1,0), vec3(0,0,0) );

没有2s

当然，这 4 个点还有许多其他组合和顺序可以形成一个矩形。

我通常选择这个顺序

0         1 4 
 +--------+
 |        |
 |        |
 |        |
 |        |
 +--------+
2 3       5

我认为除了处理 culling 之外，没有任何特殊原因需要执行这样或那样的订单。 (在该页面上搜索剔除)

在您的特定情况下，您也使用TRIANGLE_STRIP。首先我要说的是，据我所知*没有专业游戏开发者使用TRIANGLE_STRIP。他们都使用简单的TRIANGLES。它只是让一切变得更容易，所以你可能想切换到TRIANGLES。只需 4 分即可顺利通过

recipient.vertices.push( 
  vec3(0,0,0), vec3(0,1,0), vec3(0,1,0), vec3(1,1,0)); 
recipient.indices.push( 
  offset + 0, offset + 1, offset + 2, offset + 3);

以防万一不清楚。给定 6 个点 TRIANGLES 将绘制 2 个由

组成的三 Angular 形

triangle 0 = points 0,1,2 
triangle 1 = points 3,4,5 

而 TRIANGLE_STRIP 将绘制 4 个由

组成的三 Angular 形

triangle 0 = points 0,1,2 
triangle 1 = points 1,2,3 
triangle 2 = points 2,3,4 
triangle 3 = points 3,4,5 

此外，根本不清楚您的代码在做什么。也许recipeient.xxx.push正在做一些非常低效的魔法，但是当您调用gl.drawArrays时，没有迹象表明您正在创建的顶点实际上正在被WebGL使用。通常需要调用 gl.bufferData 或 gl.bufferSubData 将数据提供给 WebGL。此外，您正在重新创建索引，但 gl.drawArrays 不使用索引。