java - OpenGl 中的 2D 图像纹理无法按预期工作

Question

我有一个关于纹理的作业，我尝试在我的立方体上加载图片。尽管如此，当我编译时，我只看到我的立方体颜色为灰色，但我不明白为什么。

这是我的Java代码，其中立方体坐标和uv坐标是传递给着色器:

import static org.lwjgl.opengl.GL11.GL_FLOAT;
import static org.lwjgl.opengl.GL11.GL_TRIANGLES;
import static org.lwjgl.opengl.GL11.glDrawArrays;
import static org.lwjgl.opengl.GL15.GL_ARRAY_BUFFER;
import static org.lwjgl.opengl.GL15.GL_STATIC_DRAW;
import static org.lwjgl.opengl.GL15.glBindBuffer;
import static org.lwjgl.opengl.GL15.glBufferData;
import static org.lwjgl.opengl.GL15.glGenBuffers;
import static org.lwjgl.opengl.GL20.glEnableVertexAttribArray;
import static org.lwjgl.opengl.GL20.glVertexAttribPointer;
import static org.lwjgl.opengl.GL30.*;

import lenz.opengl.AbstractOpenGLBase;
import lenz.opengl.ShaderProgram;
import lenz.opengl.Texture;

public class Aufgabe3undFolgende extends AbstractOpenGLBase {
public Matrix4 matrix = new Matrix4();
public Matrix4 projMatrix = new Matrix4(0.8f,500f);
//Coordinates for cube, which is in the center of the screen
    float[] cube = {
        -1.0f,-1.0f,-1.0f, // triangle 1 : begin
        -1.0f,-1.0f, 1.0f,
        -1.0f, 1.0f, 1.0f, // triangle 1 : end

         1.0f, 1.0f,-1.0f, // triangle 2 : begin
        -1.0f,-1.0f,-1.0f,
        -1.0f, 1.0f,-1.0f, // triangle 2 : end

         1.0f,-1.0f, 1.0f,
        -1.0f,-1.0f,-1.0f,
         1.0f,-1.0f,-1.0f,

         1.0f, 1.0f,-1.0f,
         1.0f,-1.0f,-1.0f,
        -1.0f,-1.0f,-1.0f,

        -1.0f,-1.0f,-1.0f,
        -1.0f, 1.0f, 1.0f,
        -1.0f, 1.0f,-1.0f,

         1.0f,-1.0f, 1.0f,
        -1.0f,-1.0f, 1.0f,
        -1.0f,-1.0f,-1.0f,

       -1.0f, 1.0f, 1.0f,
       -1.0f,-1.0f, 1.0f,
        1.0f,-1.0f, 1.0f,

        1.0f, 1.0f, 1.0f,
        1.0f,-1.0f,-1.0f,
        1.0f, 1.0f,-1.0f,

        1.0f,-1.0f,-1.0f,
        1.0f, 1.0f, 1.0f,
        1.0f,-1.0f, 1.0f,

         1.0f, 1.0f, 1.0f,
         1.0f, 1.0f,-1.0f,
        -1.0f, 1.0f,-1.0f,

         1.0f, 1.0f, 1.0f,
        -1.0f, 1.0f,-1.0f,
        -1.0f, 1.0f, 1.0f,

        1.0f, 1.0f, 1.0f,
       -1.0f, 1.0f, 1.0f,
        1.0f,-1.0f, 1.0f
    };

//UV Coordinates for texturing
float[] uvKoord = {
        0.0f, 0.0f,  // lower-left corner  
           1.0f, 0.0f,  // lower-right corner
          0.5f, 1.0f 
};

private ShaderProgram shaderProgram;


public static void main(String[] args) {
    new Aufgabe3undFolgende().start("CG Aufgabe 3", 700, 700);
}

@Override
protected void init() {

    shaderProgram = new ShaderProgram("aufgabe3");
    glUseProgram(shaderProgram.getId());
    //vao bauen
    int vaold = glGenVertexArrays();
    glBindVertexArray(vaold);
    makeVBOS(0,3,cube);
    makeVBOS(1,2,uvKoord);
        glEnable(GL_DEPTH_TEST); // z-Buffer activate
        Texture texture = new Texture("pikatcu.png");
        glBindTexture(GL_TEXTURE_2D, texture.getId());
}


//vbos bauen (jeder vbo ist ein Objekt) -- delete
public void makeVBOS(int index, int size, float[] name) {
    int vbold = glGenBuffers();
    glBindBuffer(GL_ARRAY_BUFFER, vbold);
    glBufferData(GL_ARRAY_BUFFER, name, GL_STATIC_DRAW);
    glVertexAttribPointer(index,size, GL_FLOAT, false, 0,0);
    glEnableVertexAttribArray(index);       
}

@Override
public void update() {
    matrix = new Matrix4();
    matrix.translate(0, 0, -3);
    matrix.rotateZ(0.1f);

  }

@Override
protected void render() {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    int loc 
          =glGetUniformLocation(shaderProgram.getId(),"viewMatrix");
             glUniformMatrix4fv(loc,false, 
    matrix.getValuesAsArray()); 
    int loc2 
     =glGetUniformLocation(shaderProgram.getId(),"projMatrix");
              glUniformMatrix4fv(loc2,false, 
   projMatrix.getValuesAsArray()); 


    glDrawArrays(GL_TRIANGLES, 0, 36); // 12*3 indices starting at 
  0 -> 12 triangles -> 6 squares
}


@Override
public void destroy() {
}
   }

这是我的顶点着色器:

    #version 330
    layout(location=0) in vec3 vertex;
    layout(location=1) in vec2 uvKoord;


   uniform mat4 viewMatrix;
   uniform mat4 projMatrix;

   out vec3 vertexColor;
   out vec2 uv;

   void main(){


  vertexColor = vec3(1.0, 0.0, 0.0);        
  uv=uvKoord;   
  gl_Position = projMatrix*viewMatrix*vec4(vertex, 1.0);

  }

这是我的片段着色器:

#version 330
in vec3 vertexColor;
in vec2 uv;
out vec3 pixelColor;
uniform sampler2D smplr;
void main(){

    vec4 texel = texture(smplr,uv);
    pixelColor = texel.rgb;
 }

有人可以帮助我理解我做错了什么吗？我真的很感激一个解释，而不仅仅是代码，因为我想理解我的错误，而不仅仅是复制代码。提前致谢。

PS:纹理类(class)是我的讲师讲授的。我没有上传这个，因为我认为帖子会太长，但如果需要的话我可以提供。我正在加载的图片是这张https://mytoys.scene7.com/is/image/myToys/ext/7980544-01.jpg ?$rtf_mt_prod-main_xl$，我已将其分辨率更改为 256x256。

Answer 1

顶点坐标及其属性是一组日期。这意味着每个顶点坐标需要一个纹理坐标(u，v)。
因为你有 36 个顶点坐标元组 (x, y, z)，所以你也需要 36 个纹理坐标元组 (u, v):

float[] uvKoord = {
//  left bottom  right bottom  right top   left bottom  right top    left top
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f, 
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f, 
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f, 
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f, 
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f, 
    0.0f, 0.0f,  0.0f, 1.0f,   1.0f, 1.0f, 0.0f, 0.0f,  1.0f, 1.0f,  1.0f, 0.0f 
};

注意，纹理坐标的顺序与顶点坐标的顺序相匹配:

float[] cube = {

    // left
    -1.0f,  1.0f, -1.0f,
    -1.0f, -1.0f, -1.0f,
    -1.0f,  1.0f,  1.0f,

    -1.0f,  1.0f, -1.0f,
    -1.0f,  1.0f,  1.0f,
    -1.0f,  1.0f, -1.0f,

     // right
     1.0f, -1.0f, -1.0f,
     1.0f,  1.0f, -1.0f,
     1.0f,  1.0f,  1.0f,

     1.0f, -1.0f, -1.0f,
     1.0f,  1.0f,  1.0f,
     1.0f, -1.0f,  1.0f,

     // front
     1.0f, -1.0f, -1.0f,
    -1.0f, -1.0f, -1.0f,
     1.0f, -1.0f,  1.0f,

     1.0f, -1.0f, -1.0f,
     1.0f, -1.0f,  1.0f,
     1.0f, -1.0f, -1.0f,

     // back
     -1.0f, 1.0f, -1.0f,
      1.0f, 1.0f, -1.0f,
      1.0f, 1.0f,  1.0f,

     -1.0f, 1.0f, -1.0f,
      1.0f, 1.0f,  1.0f,
     -1.0f, 1.0f,  1.0f,

      // bottom
     1.0f, -1.0f, -1.0f,
    -1.0f, -1.0f, -1.0f,
     1.0f,  1.0f, -1.0f,

     1.0f, -1.0f, -1.0f,
     1.0f,  1.0f, -1.0f,
     1.0f, -1.0f, -1.0f,

     // top
     -1.0f, -1.0f, 1.0f,
      1.0f, -1.0f, 1.0f,
      1.0f,  1.0f, 1.0f,

     -1.0f, -1.0f, 1.0f,
      1.0f,  1.0f, 1.0f,
     -1.0f,  1.0f, 1.0f,
};