【OpenGL】7-纹理2

发表于 | 更新于：

参考教程

【中文版】第五课：带纹理的立方体

【英文版】Tutorial 5 : A Textured Cube

学习目录

  1. 调整上一篇文章的代码，进行坐标的翻转使得正方体正确的显示
  2. 纹理的解析

学习笔记

  • 调整上一篇文章的代码，进行坐标的翻转使得正方体正确的显示

      在上一篇中将纹理通过UV坐标贴到了正方体上，我们运行之后是这样子的。

    WX20180216-224238@2x

      我们在使用压缩纹理时，将UV坐标里的V修改为1.0-V，进行坐标反转。即将

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    // Two UV coordinatesfor each vertex. They were created with Blender.
        static const GLfloat g_uv_buffer_data[] = {
                0.000059f, 0.000004f,
                0.000103f, 0.336048f,
                0.335973f, 0.335903f,
                1.000023f, 0.000013f,
                0.667979f, 0.335851f,
                0.999958f, 0.336064f,
                0.667979f, 0.335851f,
                0.336024f, 0.671877f,
                0.667969f, 0.671889f,
                1.000023f, 0.000013f,
                0.668104f, 0.000013f,
                0.667979f, 0.335851f,
                0.000059f, 0.000004f,
                0.335973f, 0.335903f,
                0.336098f, 0.000071f,
                0.667979f, 0.335851f,
                0.335973f, 0.335903f,
                0.336024f, 0.671877f,
                1.000004f, 0.671847f,
                0.999958f, 0.336064f,
                0.667979f, 0.335851f,
                0.668104f, 0.000013f,
                0.335973f, 0.335903f,
                0.667979f, 0.335851f,
                0.335973f, 0.335903f,
                0.668104f, 0.000013f,
                0.336098f, 0.000071f,
                0.000103f, 0.336048f,
                0.000004f, 0.671870f,
                0.336024f, 0.671877f,
                0.000103f, 0.336048f,
                0.336024f, 0.671877f,
                0.335973f, 0.335903f,
                0.667969f, 0.671889f,
                1.000004f, 0.671847f,
                0.667979f, 0.335851f
        };

      修改为

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    // Two UV coordinatesfor each vertex. They were created with Blender.
    static const GLfloat g_uv_buffer_data[] = {
            0.000059f, 1.0f-0.000004f,
            0.000103f, 1.0f-0.336048f,
            0.335973f, 1.0f-0.335903f,
            1.000023f, 1.0f-0.000013f,
            0.667979f, 1.0f-0.335851f,
            0.999958f, 1.0f-0.336064f,
            0.667979f, 1.0f-0.335851f,
            0.336024f, 1.0f-0.671877f,
            0.667969f, 1.0f-0.671889f,
            1.000023f, 1.0f-0.000013f,
            0.668104f, 1.0f-0.000013f,
            0.667979f, 1.0f-0.335851f,
            0.000059f, 1.0f-0.000004f,
            0.335973f, 1.0f-0.335903f,
            0.336098f, 1.0f-0.000071f,
            0.667979f, 1.0f-0.335851f,
            0.335973f, 1.0f-0.335903f,
            0.336024f, 1.0f-0.671877f,
            1.000004f, 1.0f-0.671847f,
            0.999958f, 1.0f-0.336064f,
            0.667979f, 1.0f-0.335851f,
            0.668104f, 1.0f-0.000013f,
            0.335973f, 1.0f-0.335903f,
            0.667979f, 1.0f-0.335851f,
            0.335973f, 1.0f-0.335903f,
            0.668104f, 1.0f-0.000013f,
            0.336098f, 1.0f-0.000071f,
            0.000103f, 1.0f-0.336048f,
            0.000004f, 1.0f-0.671870f,
            0.336024f, 1.0f-0.671877f,
            0.000103f, 1.0f-0.336048f,
            0.336024f, 1.0f-0.671877f,
            0.335973f, 1.0f-0.335903f,
            0.667969f, 1.0f-0.671889f,
            1.000004f, 1.0f-0.671847f,
            0.667979f, 1.0f-0.335851f
    };

      其实这两个就是互相相反的UV反转的结果，就是将V变成1.0-V而已。

    WX20180214-215454@2x

  • 纹理的解析

      纹理本质上就是特殊的色彩贴图，我们在GLSL中对片段着色器的着色就是用的texture( myTextureSampler, UV ).rgb。相当于我们在一张贴图上取其中一片像素点，将其颜色覆盖到我们的模型上，比起纯色来说更加好看一些。

  在这篇文章之前，没有太多了解关于模型（Model），视图（View），投影（Projection），下篇文章中会再学习一遍。

0%