webgl rotate texture on the face of cube around itself

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;


in the script:


    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.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.bindTexture(gl.TEXTURE_2D, crateTextures1[0]);
    gl.uniform1i(shaderProgram.samplerUniform, 0);

    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);

A rotation matrix rotates around the origin. If you want to rotate about some point (x,y,z), you need the equivalent of:


I’m not familiar with the matrix library you’re using, but I suspect that you need

    if(text_rot_flag) {
        mat4.translate(TMatrix,[0.5, 0.5, 0.0]); 
        mat4.rotate(TMatrix,degToRad(xRot3), [0.0, 0.0, 1.0]);
        mat4.translate(TMatrix,[-0.5, -0.5, 0.0]);