Question

全新的javascript，尝试进行webGL项目。

这是我最终要努力的目标，我的想法是有两个for循环

// Create the vertex data for a grid to be drawn
function createGrid(gl, x, y) {
    var vertexBuffer;
    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    var matrix= []
    for(var i = 0, i < x, ++i)
    {
        for(var j = 0, i < y, ++j)
        {
            matrix.push(createSquare(i,j))
        }
    }
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(matrix), gl.STATIC_DRAW);
     var grid = {buffer:vertexBuffer, vertSize:3, nVerts:matrix.length, primtype:gl.TRIANGLE_STRIP};

     return grid;
}

我试图动态地创建一个方块墙。我有两个功能。

// Create the vertex data for a square to be drawn
function createSquare(gl, x, y) {

    var square = [  x+ .5, y+ .5,  0.0,
                    x+ -.5, y+ .5,  0.0,
                    x+ .5,y+ -.5,  0.0,
                    x+ -.5,y+ -.5,  0.0];

    return square;
}

 // Create the vertex data for a grid to be drawn
function createGrid(gl, x, y) {
    var vertexBuffer;
    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    var matrix= []
    matrix.push(createSquare(gl,x,y ));

    var numVerts = matrix.length;
     alert(matrix[0]);

     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(matrix), gl.STATIC_DRAW);
    var grid = {buffer:vertexBuffer, vertSize:3, nVerts:numVerts, primtype:gl.TRIANGLE_STRIP};

    return grid;
}

让我搞砸的是行

matrix.push(createSquare(gl,x,y ));

我期望使用在createSquare中创建的相同数组进行matrixpopulation。但是，我的方形对象中的所有项都在矩阵的第一个索引中，假设为字符串格式。搜索和我看到的所有人都没有返回他们的阵列。

matrix[0] = 1.5,0.5,0,0.5,0.5,0,1.5,-0.5,0,0.5,-0.5,0 and
matrix[1] = undefined

编辑：我现在知道了，matrix [0]包含了数组对象。这也是我之前尝试过array.concat（）的原因，但后来我遇到了与数组完全没有返回的其他情况相同的情况。 array.push（）是唯一给我回复的函数。

Answer 1

不要将createSquare(gl,x,y)推入网格，只需将网格设置为等于：

grid = createSquare(gl, x, y);

Answer 2

您正在将grid变量定义为数组，然后将方形推入其中，就像它一样，网格将始终是长度为=== 1的数组，如果您只是替换：< / p>

grid.push(createSquare(gl,x,y ));

使用：

grid = createSquare(gl,x,y);

它可以按你的意愿工作。

另请注意，您要在以下行重新定义grid：

var grid = {buffer:vertexBuffer, vertSize:3, nVerts:numVerts, primtype:gl.TRIANGLE_STRIP};

也许这是有意的，但我会对你发表评论，以便你知道。

Answer 3

所以答案是......

matrix = matrix.concat(createSquare(x,y));

当我早些时候闲逛时，我只是在使用

matrix.concat(createSquare(x,y));

......并没有抱怨。

Answer 4

原始代码中的问题是createSquare返回一个数组。这一行

matrix.push(createSquare(i,j))

正在制作数组数组。但是来自

行的new Float32Array(matrix)

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(matrix), gl.STATIC_DRAW);

需要单个数组，而不是数组数组。有多种方法可以解决这个问题。最简单的是改变这个

matrix.push(createSquare(i,j))

到这个

matrix = matrix.concat(createSquare(i,j))

concat函数获取您拥有的数组和传递它的数组，并将它们连接成新数组。换句话说，单行matrix.concat(someArray)将不会执行任何操作，因为它会创建一个新数组，但因为该数组未分配给变量，所以它会立即丢失。

但请注意，这是一个缓慢的解决方案。也许它的速度足以满足您的需求？

它变慢的原因是因为每次你需要完成一堆工作。前两个数组中的每个元素都需要复制到一个新数组。例如，假设您制作了1000个正方形。代码将执行

 newArray = arrayOf0Elements  + arrayOf12Elements;
 newArray = arrayOf12Elements + arrayOf12Elements;
 newArray = arrayOf24Elements + arrayOf12Elements;
 newArray = arrayOf36Elements + arrayOf12Elements;
 newArray = arrayOf48Elements + arrayOf12Elements;
 ...
 newArray = arrayof11964Elements + arrayOf12Elements;
 newArray = arrayof11976Elements + arrayOf12Elements;
 newArray = arrayof11988Elements + arrayOf12Elements;

希望你能明白为什么这么慢。那个必须发生的6006000份副本！

让它变得更快的一个简单方法就是像这样在最后结束。完全保留代码，但添加此行

 var combinedData = Array.prototype.concat.apply([], matrix);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(combinedData), gl.STATIC_DRAW);

这样，在1000平方的情况下，你可以制作1000个正方形，每个12个元素。然后你立刻将它们连接起来。这只有12000份，而另一种方式是6006000份。

Array.prototype.concat是用于连接数组的简单JavaScript函数。调用apply允许您传递一个对象进行操作，在本例中为[]，然后在数组中传递给它的参数。它就像你做了这个一样

var combineData = [].concat(matrix[0], matrix[1], matrix[2], ... matrix[999]);

最快的方法之一是在开头创建Float32Array并将其传递给createSquare，并使用这样的偏移量

// Create the vertex data for a square to be drawn
function createSquare(dst, offset, x, y) {

    dst[offset++] = x+ .5;
    dst[offset++] = y+ .5;
    dst[offset++] = 0.0;
    dst[offset++] = x+ -.5;
    dst[offset++] = y+ .5;
    dst[offset++] = 0.0;
    dst[offset++] = x+ .5;
    dst[offset++] = y+ -.5;
    dst[offset++] = 0.0;
    dst[offset++] = x+ -.5;
    dst[offset++] = y+ -.5;
    dst[offset++] = 0.0;

    return offset;
}

// Create the vertex data for a grid to be drawn
function createGrid(gl, x, y) {
    var vertexBuffer;
    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    // allocate space for all vertices up front
    var matrix = new Float32Array(x * y * 12); 
    var offset = 0;
    for(var i = 0, i < x, ++i)
    {
        for(var j = 0, i < y, ++j)
        {
            offset = createSquare(matrix, offset, i, j))
        }
    }
     gl.bufferData(gl.ARRAY_BUFFER, matrix, gl.STATIC_DRAW);
     var grid = {buffer:vertexBuffer, vertSize:3, nVerts:matrix.length, primtype:gl.TRIANGLE_STRIP};

     return grid;
}

现在根本没有连接，也没有创建额外的数组。

您选择哪种方式取决于您。我可能会选择中间版本，因为它可能是最灵活的，因为你不必预先计算顶点的数量，所以如果你改变每个方格的顶点数量，你就不能＃＆＃ 39; t必须改变任何其他代码。

Javascript将数组返回到返回函数数组的索引[0]

4 个答案: