0

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

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 网格。

我专门查看了这个站点，但我无法弄清楚 trianglestrip 变量的来源。

4

1 回答 1

1

这是前几天才问的。这是一个答案

生成网格网格

在您的特定情况下，虽然 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

除了处理剔除（在该页面上搜索剔除）之外，我认为一个订单或另一个订单没有任何特殊原因

在您的特定情况下，尽管您也在使用TRIANGLE_STRIP. 让我先说 AFAIK *没有专业的游戏开发者使用TRIANGLE_STRIP. 他们都使用 plain 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 个三角形，包括

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

而TRIANGLE_STRIP将绘制4个三角形，包括

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正在做一些非常低效的魔术，但没有迹象表明您正在创建的顶点实际上正在被 WebGL 在您调用gl.drawArrays. 通常需要对 WebGL 进行一些调用gl.bufferData或gl.bufferSubData将数据提供给 WebGL。此外，您正在重新创建索引但gl.drawArrays不使用索引。

于 2016-02-20T05:48:25.200 回答