maxandonuts
maxandonuts

Reputation: 595

gl-matrix "cannot read property 0 of undefined" in webgl application

I began learning webgl by reading Apress's Beginning WebGl for HTML5, it recommends gl-matrix.js to deal with matrix operations, when using the mat4.translate function which has the following implementation

mat4.translate = function (out, a, v) {
    var x = v[0], y = v[1], z = v[2],
    a00, a01, a02, a03,
    a10, a11, a12, a13,
    a20, a21, a22, a23;

if (a === out) {
    out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
    out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
    out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
    out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
} else {
    a00 = a[0]; a01 = a[1]; a02 = a[2]; a03 = a[3];
    a10 = a[4]; a11 = a[5]; a12 = a[6]; a13 = a[7];
    a20 = a[8]; a21 = a[9]; a22 = a[10]; a23 = a[11];

    out[0] = a00; out[1] = a01; out[2] = a02; out[3] = a03;
    out[4] = a10; out[5] = a11; out[6] = a12; out[7] = a13;
    out[8] = a20; out[9] = a21; out[10] = a22; out[11] = a23;

    out[12] = a00 * x + a10 * y + a20 * z + a[12];
    out[13] = a01 * x + a11 * y + a21 * z + a[13];
    out[14] = a02 * x + a12 * y + a22 * z + a[14];
    out[15] = a03 * x + a13 * y + a23 * z + a[15];
}

return out;

};

with the following call

mat4.translate(mvMatrix,[0, 0, -2.0]);  

i get the following error: "Cannot read property 0 of undefined" given when it tries to assign the vec3 v components.

Any help with that? Regards

Upvotes: 2

Views: 2929

Answers (4)

bruce
bruce

Reputation: 1316

Yes, I happened to the same problem with the latest glmatrix.min.js. However, after using ver 1.3.7 from https://www.versioneye.com/javascript/toji:gl-matrix/1.3.7 , it was solved.

Upvotes: 0

Naoufel El ABBASSI
Naoufel El ABBASSI

Reputation: 56

OLD API: gl-matrix-1.x

mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

New API: gl-matrix-2.x

mat4.perspective(pMatrix, 45, canvas.width / canvas.height, 0.1, 100.0);                                                               
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, mvMatrix, [-1.5, 0.0, -7.0]);

Upvotes: 1

blessdyb
blessdyb

Reputation: 49

Update the new API in gl-matrix:

mat4.perspective(pMatrix, 45, canvas.width / canvas.height, 0.1, 100.0);                                                               
mat4.identity(mvMatrix);                                     
mat4.translate(mvMatrix, mvMatrix, [0, 0, -2.0]);

Upvotes: 3

Toji
Toji

Reputation: 34498

The version of glMatrix used by the book is likely 1.3.7, while the most recently released version is 2.1.0. As of 2.0 the interface has changed for consistency and will not match what you see in the book.

If you want to use the latest and greatest glMatrix, you'll want to refer to the documentation to get the correct parameters. Otherwise just download 1.3.7 and use it as the book describes.

Upvotes: 3

Related Questions