WebGL texture coordinates for cylinders

I have a problem calculating texture space coordinates for a cylinder in raw webgl (without using frames). I was able to create a polygon list of cylinders and normal vectors, but somehow I am struggling with the u, v textures. I was going to do this:

tex_step_x = 1 / divisions;

for(var u = 0; u < divisions; u++)
{   
    // Top plate
    textureCoordData.push(0.5); textureCoordData.push(0.5);
    textureCoordData.push(1); textureCoordData.push(0.5);
    textureCoordData.push(1); textureCoordData.push(0);

    // The walls
    textureCoordData.push(tex_step_x*u); textureCoordData.push(1);
    textureCoordData.push(tex_step_x*u+tex_step_x); textureCoordData.push(1);
    textureCoordData.push(tex_step_x*u); textureCoordData.push(0);

    textureCoordData.push(tex_step_x*u); textureCoordData.push(0);
    textureCoordData.push(tex_step_x*u+tex_step_x); textureCoordData.push(0);
    textureCoordData.push(tex_step_x*u+tex_step_x); textureCoordData.push(1);

    // Code for the bottom circle
    textureCoordData.push(0); textureCoordData.push(1);
    textureCoordData.push(1); textureCoordData.push(0);
    textureCoordData.push(1); textureCoordData.push(1);
}

      

The cylinder is made of "cake slices" for the bottom and top slabs (with different heights) and two triangles for each wall segment. Any ideas on how to calculate the correct u, v coordinates?

+3


source to share





All Articles