i need help with webgl using gl matrix.
i draw a simple cube and apply texture on each face of cube,and i am rotating the texture on the each face of the cube but the problem is:
the texture does not rotate around itself it rotate’s around left bottom corner of the cube:
full code is on graficd . tk / press T on the keyboard to see the problem.
here is my code relative to rotation :
in the vertex shader :
<script id="shader-vs" type="x-shader/x-vertex">
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = ((uTMatrix) * vec4(aTextureCoord, 0.0 , 1.0)).xy;
}
</script>
in the script:
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [-4.0, 0.0, -10.0]);
mat4.scale(mvMatrix, [1, 1, 1]);
mat4.rotate(mvMatrix, degToRad(xRot2), [1, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
mat4.identity(TMatrix);
if(text_rot_flag){
mat4.rotate(TMatrix,degToRad(xRot3), [0.0, 0.0, 1.0]);
}
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer1);
gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, 2, gl.FLOAT, false, 0.0, 0.0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, crateTextures1[0]);
gl.uniform1i(shaderProgram.samplerUniform, 0);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);