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.vertexPositionAttribute, this.carPositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.carColorBuffer);
this.gl.vertexAttribPointer(this.shaderProgram.vertexColorAttribute, 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.vertexPositionAttribute, this.tirePositionBuffer.itemSize, this.gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.tireColorBuffer);
this.gl.vertexAttribPointer(this.shaderProgram.vertexColorAttribute, 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!