staticvoid

08-16-2011, 12:43 PM

I am new here so hello everybody! :)

I try to describe my problem even if my english skills are moderate. I am a bit confused about the matrix-functions in my project. I use mvPushMatrix, mvPopMatrix and setMatrixUniforms like seen in the "learning WebGL" lessons.

var mvMatrix = mat4.create();

var pMatrix = mat4.create();

var mvMatrixStack = [];

function mvPushMatrix() {

var copy = mat4.create();

mat4.set(mvMatrix, copy);

mvMatrixStack.push(copy);

}

function mvPopMatrix() {

if(mvMatrixStack.length == 0) {

throw "Invalid popMatrix!";

}

mvMatrix = mvMatrixStack.pop();

}

function setMatrixUniforms() {

gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);

gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

}

I like to draw a simple car and some tires. At first I draw the carriage of the car.

Then I translate the modelview-matrix to positioning the tires. As you can see in my example,

I dont realy understand how to call push, pop or uniform. Thats because I am not too familiar with these

methods. In my understanding I have to push a matrix for every tire, uniform it, translate it, draw it and pop it back.

Maybe I am wrong.

this.draw = function(){

// draw carriage

mvPushMatrix();

setMatrixUniforms();

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

this.gl.bindBuffer(gl.ARRAY_BUFFER, this.carPositionBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texPositionAttribute, this.carPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.carColorBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texColorAttribute, this.carColorBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.drawArrays(gl.TRIANGLES, 0, this.carPositionBuffer.numItems);

// draw tires

var idx;

for(idx = 0; idx<4; idx++){

mvPushMatrix();

setMatrixUniforms();

if(idx==0) mat4.translate(mvMatrix, [1.4, 0, 1]);

if(idx==1) mat4.translate(mvMatrix, [2, 0, 2 ]);

if(idx==2) mat4.translate(mvMatrix, [3, 0, 3 ]);

if(idx==3) mat4.translate(mvMatrix, [4, 0, 4 ]);

this.gl.bindBuffer(gl.ARRAY_BUFFER, this.tirePositionBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texPositionAttribute, this.tirePositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.tireColorBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texColorAttribute, this.tireColorBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.drawArrays(gl.TRIANGLES, 0, this.tirePositionBuffer.numItems);

mvPopMatrix();

}

mvPopMatrix();

};

Here is a link to my project: http://agrarkollektiv.com/WebGL/index.html

Could anybody try to explain what my missunderstanding is? Or does anybody have can tell me where I can find a tutorial about push/pop/uniform?

That would be to nice! Thank you!

I try to describe my problem even if my english skills are moderate. I am a bit confused about the matrix-functions in my project. I use mvPushMatrix, mvPopMatrix and setMatrixUniforms like seen in the "learning WebGL" lessons.

var mvMatrix = mat4.create();

var pMatrix = mat4.create();

var mvMatrixStack = [];

function mvPushMatrix() {

var copy = mat4.create();

mat4.set(mvMatrix, copy);

mvMatrixStack.push(copy);

}

function mvPopMatrix() {

if(mvMatrixStack.length == 0) {

throw "Invalid popMatrix!";

}

mvMatrix = mvMatrixStack.pop();

}

function setMatrixUniforms() {

gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);

gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);

}

I like to draw a simple car and some tires. At first I draw the carriage of the car.

Then I translate the modelview-matrix to positioning the tires. As you can see in my example,

I dont realy understand how to call push, pop or uniform. Thats because I am not too familiar with these

methods. In my understanding I have to push a matrix for every tire, uniform it, translate it, draw it and pop it back.

Maybe I am wrong.

this.draw = function(){

// draw carriage

mvPushMatrix();

setMatrixUniforms();

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

this.gl.bindBuffer(gl.ARRAY_BUFFER, this.carPositionBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texPositionAttribute, this.carPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.carColorBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texColorAttribute, this.carColorBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.drawArrays(gl.TRIANGLES, 0, this.carPositionBuffer.numItems);

// draw tires

var idx;

for(idx = 0; idx<4; idx++){

mvPushMatrix();

setMatrixUniforms();

if(idx==0) mat4.translate(mvMatrix, [1.4, 0, 1]);

if(idx==1) mat4.translate(mvMatrix, [2, 0, 2 ]);

if(idx==2) mat4.translate(mvMatrix, [3, 0, 3 ]);

if(idx==3) mat4.translate(mvMatrix, [4, 0, 4 ]);

this.gl.bindBuffer(gl.ARRAY_BUFFER, this.tirePositionBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texPositionAttribute, this.tirePositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, this.tireColorBuffer);

this.gl.vertexAttribPointer(this.shaderProgram.ver texColorAttribute, this.tireColorBuffer.itemSize, this.gl.FLOAT, false, 0, 0);

this.gl.drawArrays(gl.TRIANGLES, 0, this.tirePositionBuffer.numItems);

mvPopMatrix();

}

mvPopMatrix();

};

Here is a link to my project: http://agrarkollektiv.com/WebGL/index.html

Could anybody try to explain what my missunderstanding is? Or does anybody have can tell me where I can find a tutorial about push/pop/uniform?

That would be to nice! Thank you!