PDA

View Full Version : webgl rotate texture on the face of cube around itself



sam_team
02-25-2017, 03:35 AM
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.vertexPositio nAttribute, 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.textureCoordA ttribute, 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);

GClements
02-25-2017, 06:11 PM
the texture does not rotate around itself it rotate's around left bottom corner of the cube:

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

glTranslate(x,y,z)
glRotate(...)
glTranslate(-x,-y,-z)

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]);
}