understanding textures

Hi,

I am trying to create a checkerbord pattern with a constant declared array (texture). Later I want this to be procedural, but I am not that far yet.
My problem is with the texture coordinates. They way I understand them is, that I assign a range (0.0f - 1.0f) of them between two or more vertices. The fragment shader then colors all the pixels with the corresponding texels. If nessesary interpolation is used. Did I get the idea right so far?

So I wanted to use 4 vertices in the corner of a window and create a plane with GL_TRIANGLE_FAN. The fragment shader was then supposed to create the checkerboard pattern by reading from the defined texture and filling the area by interpolation. Unfortunetly this is how my “checkerboard” looks like (red is just the background):

A big thing I dont understand is what happens if I change my UV coordinates. My defined texture has a size of 8x8. So I would think I can switch the starting color of the pattern by changing my texelcoord in steps of 0.125f (1/8). Instead the area of my checkfields get bigger. This must have something to do with interpolation, but I dont know how and where to change interpolation behavoir. But I guess this is important for my checkerboard to work. (in the fragment shader?)

I am trying to learn this with the help of the redbook v8, which i liked so far, but not so much the segment about texturing. if anyone has tip on a well explained tutorial/section of a book about this topic, I would be eager to hear about it.

So here goes my code. (I am wrting this in Java using JOGL)

First I create my texture


        checkerBoardTexture = Buffers.newDirectByteBuffer(256);       
       
        for(int i = 0; i < 32; i++) {
            checkerBoardTexture.putInt(0xFF);
            checkerBoardTexture.putInt(0x00);
        }
        checkerBoardTexture.rewind();

Next I create my 4 vertices and their 4 texture coordinates.

verticies = Buffers.newDirectFloatBuffer(20);       
        verticies.put(new float[] {
         
          // vPosition       
          -0.8f, -0.8f, 0.0f,  //bottom-left
           0.8f, -0.8f, 0.0f,  //bottom-right
           0.8f,  0.8f, 0.0f,  //top-right
          -0.8f,  0.8f, 0.0f,  //top-left
         
           // Tex Coords
           0.0f, 0.0f,
           0.0f, 0.0f,
           1.0f, 1.0f,
           0.0f, 0.0f
        });
       
        verticies.rewind();

Now I generate and bind my buffers

gl.glGenTextures(numTextures, Textures, 0);
       
        gl.glBindTexture (GL.GL_TEXTURE_2D, Textures[0]);
        // Allocate storage for the texture data
        gl.glTexStorage2D(GL.GL_TEXTURE_2D, 4, GL4.GL_R8, 8, 8);
        // Specify the data for the texture
        gl.glTexSubImage2D(GL.GL_TEXTURE_2D, 0, 0, 0, 8, 8, GL4.GL_RED, GL.GL_UNSIGNED_BYTE, checkerBoardTexture);
       
        int swizzles[] = { GL4.GL_RED,  GL4.GL_RED,  GL4.GL_RED, GL4.GL_ONE };
        gl.glTexParameteriv(GL4.GL_TEXTURE_2D, GL4.GL_TEXTURE_SWIZZLE_RGBA, swizzles, 0);
        gl.glTexParameteri(GL4.GL_TEXTURE_2D, GL4.GL_TEXTURE_MIN_FILTER, GL4.GL_NEAREST);
        gl.glTexParameteri(GL4.GL_TEXTURE_2D, GL4.GL_TEXTURE_MAG_FILTER, GL4.GL_NEAREST);
        gl.glTexParameteri(GL4.GL_TEXTURE_2D, GL4.GL_TEXTURE_WRAP_S, GL4.GL_CLAMP_TO_EDGE);
        gl.glTexParameteri(GL4.GL_TEXTURE_2D, GL4.GL_TEXTURE_WRAP_T, GL4.GL_CLAMP_TO_EDGE);
          
        gl.glGenVertexArrays(numVAOs, VAOs, 0);
        gl.glBindVertexArray(VAOs[0]);
           
        gl.glGenBuffers(numVBOs, VBOs, 0);
        gl.glBindBuffer(GL.GL_ARRAY_BUFFER, VBOs[0]);      
        gl.glBufferData(GL.GL_ARRAY_BUFFER, verticies.capacity()*(Float.SIZE/8), verticies, GL.GL_STATIC_DRAW);

        gl.glVertexAttribPointer(vPosition, 3, GL.GL_FLOAT, false, 0, 0L);
        gl.glVertexAttribPointer(tPosition, 2, GL.GL_FLOAT, false, 0, (long)12*(Float.SIZE/8));
        gl.glEnableVertexAttribArray(vPosition);
        gl.glEnableVertexAttribArray(tPosition);

Lastly I draw using


        gl.glBindVertexArray(VAOs[0]);
        gl.glDrawArrays(GL4.GL_TRIANGLE_FAN, 0, 4);

My shaders look like this

[CODE=Vertex Shader]#version 430 core
layout (location = 1) in vec4 in_position;
layout (location = 2) in vec2 in_tex_coord;
out vec2 vs_tex_coord;

void main(void) {
gl_Position = in_position;
vs_tex_coord = in_tex_coord;
}



[CODE=Fragment Shader]#version 430 core
uniform sampler2D tex;
in vec2 vs_tex_coord;
out vec4 color;

void main(void) {
  color = texture(tex, vs_tex_coord);
}

Hi,

first of all:
[ATTACH=CONFIG]541[/ATTACH] :slight_smile:

So there were two major things wrong with my code. First I wasnt even generating a checkerboard texture… it was just stripes. :tired: and secondly I wasnt adding bytes to my buffer.

Now I also understand what how texelcoords and vertexcoords work together. With the texelcoords I can select a position of the texure which will then be dragged to the position of the vertex. So the texture behaves like spandex-tissue.

Alright, until my next question: Bye for now