WebGL - Texture is not showing correctly

Question

Following webglacademy 5th tutorial at creating textures (http://www.webglacademy.com/#5), the point is to load the texture on the cube object which works, kinda.

Look at the result -

Can anyone tell me why the texture looks like this while it should be fit perfectly on cube side?

Demo here - http://kgpk.esy.es/WebGL/ (Hold mouse button and drag to move the cube; mousewheel to zoom in/out)

Texture used - http://kgpk.esy.es/WebGL/texture.png

Code - http://kgpk.esy.es/WebGL/WEBGL.js (Texture gets loaded in f_IniatializeTextures function [line 209] which uses f_GetTexture function [line 255] to load the texture and the texture is thrown into stream at f_Animate function [line 427]

Vertex and fragment can be found in function f_InitializeShaders [line 215]

        base.m_ShaderVertex = [
            "attribute vec3 position;", // The position of the point.
            "uniform mat4 Pmatrix;",    // Projection matrix.
            "uniform mat4 Vmatrix;",    // Movement matrix from object reference to view reference.
            "uniform mat4 Mmatrix;",    // Movement matrix.
            "attribute vec2 uv;",
            "varying vec2 vUV;",

            "void main(void) {",
                "gl_Position = Pmatrix * Vmatrix * Mmatrix * vec4(position, 1.0);",
                "vUV = uv;", // Set color.
            "}"
        ].join("\n");

        base.m_ShaderFragment = [
            "precision mediump float;",
            "uniform sampler2D sampler;",
            "varying vec2 vUV;",

            "void main(void) {",
                "gl_FragColor = texture2D(sampler, vUV);", // Assign the color to pixel with total opaque.
            "}"
        ].join("\n"); 

Thanks.

Answer 1

Your vertex buffer is not setup correctly. Just follow tutorial's code:

var cube_vertex=[
-1,-1,-1,    0,0,
1,-1,-1,     1,0,
1, 1,-1,     1,1,
-1, 1,-1,    0,1,

-1,-1, 1,    0,0,
1,-1, 1,     1,0,
1, 1, 1,     1,1,
-1, 1, 1,    0,1,

-1,-1,-1,    0,0,
-1, 1,-1,    1,0,
-1, 1, 1,    1,1,
-1,-1, 1,    0,1,

1,-1,-1,     0,0,
1, 1,-1,     1,0,
1, 1, 1,     1,1,
1,-1, 1,     0,1,

-1,-1,-1,    0,0,
-1,-1, 1,    1,0,
1,-1, 1,     1,1,
1,-1,-1,     0,1,

-1, 1,-1,    0,0,
-1, 1, 1,    1,0,
1, 1, 1,     1,1,
1, 1,-1,     0,1

];

First 3/5 values in each row are used for vertex's position, and other two values for its UV coord. You have some extra values for UVs that mess up the rest.

This part of the code takes care of the offset inside the buffer (last param):

GL.vertexAttribPointer(_position, 3, GL.FLOAT, false, 4*(3+2), 0) ;
GL.vertexAttribPointer(_uv,       2, GL.FLOAT, false, 4*(3+2), 3*4) ;

EDIT:

From webGL spec:

void vertexAttribPointer(GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, GLintptr offset)

Assign the WebGLBuffer object currently bound to the ARRAY_BUFFER target to the vertex attribute at the passed index. Size is number of components per attribute. Stride and offset are in units of bytes. Passed stride and offset must be appropriate for the passed type and size or an INVALID_OPERATION error will be generated; see Buffer Offset and Stride Requirements. If offset is negative, an INVALID_VALUE error will be generated. If no WebGLBuffer is bound to the ARRAY_BUFFER target, an INVALID_OPERATION error will be generated. In WebGL, the maximum supported stride is 255; see Vertex Attribute Data Stride.

Last two params are used when you pack multiple attributes into same buffer, as in your example. Stride (second param from the end) tells you how much byte data is there per vertex, which is 5 values, times 4 bytes per value = 20. Offset tells you what's the byte offset inside those per-vertex values that are to be bound to certain VBO. In your example you can see:

[pos] [pos] [pos] [uv] [uv]
[4B ] [4B ] [4B ] [4B] [4B]
[   12B         ] [  8B   ]

So you want position to be on every 20*i+0 bytes in the buffer, and your UVs to be on every 20*i + 3*4 bytes in the buffer. And that is where 0 and 3*4 come from.