Javascript將數組返回到返回函數數組的索引[0]

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中創建的相同數組填充矩陣。 但是，假設是字符串格式，我方形對象中的所有項目都在矩陣的第一個索引中。 搜索后，我看到的是根本沒有返回數組的人。

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)推入網格中createSquare(gl,x,y)將網格設置為等於它：

grid = createSquare(gl, x, y);

Answer 2

您將grid變量定義為數組，然后按其方式將一個正方形插入其中，如果您只替換，則grid始終是長度=== 1的數組。

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

現在根本沒有連接，也沒有創建額外的數組。

您選擇哪種方式取決於您。 我可能會選擇中間的concat版本，因為它可能是最靈活的版本，因為您不必預先計算頂點數，因此，如果您更改每平方的頂點數，則不必更改任何其他代碼。