GLSL 纹理

1. 纹理坐标

什么是纹理坐标（uv）？

一个纹理实际上就是一个位图。可以在绘制的物体上进行贴图，那么这个图如何贴，反着贴，还是正着贴，就取决于纹理坐标和顶点坐标的对应关系。
2D纹理坐标在x和y轴上，范围为0到1之间。使用纹理坐标获取纹理颜色叫做采样(Sampling)。纹理坐标起始于(0, 0)，也就是纹理图片的左下角，终始于(1, 1)，即纹理图片的右上角。

纹理坐标和顶点坐标的对应关系

顶点坐标是以中心为原点，纹理坐标是以左下角为原点。它们之间的映射关系
这个将纹理反转时因为，opengl 屏幕坐标系是以左下角为原点，而android 屏幕坐标系是以左上角为原点。

纹理坐标和顶点坐标是一一对应的。

//    //顶点坐标
    public float position[] = {
            -1.0f,  1.0f,
            -1.0f, -1.0f,
            1.0f, 1.0f,
            1.0f,  -1.0f,
    };
 
 
    public float texCoord[] = {
            0.0f , 0.0f,
            0.0f , 1.0f,
            1.0f , 0.0f,
            1.0f , 1.0f
    };

纹理坐标纹在顶点着色器中和片元着色器中的处理方式

• 顶点着色器
  纹理坐标输入是4个点，并且和顶点是对应的， v_texCoord 变量负责将纹理坐标传递给片元着色器。这时会生成 4个 v_texCoord 。

public float texCoord[] = {
            0.0f , 0.0f,
            0.0f , 1.0f,
            1.0f , 0.0f,
            1.0f , 1.0f
 };
    
char vShaderStr[] =
			"#version 300 es                            \n"
			"layout(location = 0) in vec4 a_position;   \n"
			"layout(location = 1) in vec2 a_texCoord;   \n"             // 这里只有4个纹理坐标值
			"out vec2 v_texCoord;                       \n"
			"void main()                                \n"
			"{                                          \n"
			"   gl_Position = a_position;               \n"
			"   v_texCoord = a_texCoord;               \n"
			"}                                          \n";
	

char fShaderStr[] =
            "#version 300 es\n"
            "precision mediump float;\n"
            "in vec2 v_texCoord;\n"
            "layout(location = 0) out vec4 outColor;\n"
            "uniform sampler2D s_TextureMap;\n"
            "void main()\n"
            "{\n"
            "    outColor = texture(s_TextureMap, v_texCoord);\n"   //v_texCoord这里有好多个纹理坐标值
			"out vec2 v_texCoord;                       \n"
            "}";

注意：在传递到片元着色器前，这4个v_texCoord 数据会进行插值算法，为每个图元像素点【顶线坐标插值而来】，生成对应的纹理坐标值 【v_texCoord】

所以UV坐标值，也可以理解成当前像素点（顶点） 对应 图片的位置的百分比。

GLSL 代码中贴图的另外一种方式

在正方形中贴图时，一般时需要传递的顶点信息有 顶点坐标和纹理坐标。如上述代码。
如果当我们不想手动去写纹理坐标时，还可以根据 position，在shader.vs 中，将顶点的位置信息作为纹理坐标进行使用。

char vShaderStr[] =
			"#version 300 es                            \n"
			"layout(location = 0) in vec4 a_position;   \n"
			"layout(location = 1) in vec2 a_texCoord;   \n"
			"out vec2 v_texCoord;                       \n"
			"void main()                                \n"
			"{                                          \n"
			"   gl_Position = a_position;               \n"
			"   v_texCoord = a_position.xy* 0.5 + 0.5;               \n"
		// "   v_texCoord = vec2(v_texCoord .x,1.0-v_texCoord .y)) ; \n"
			"}                                          \n";

char fShaderStr[] =
            "#version 300 es\n"
            "precision mediump float;\n"
            "in vec2 v_texCoord;\n"
            "layout(location = 0) out vec4 outColor;\n"
            "uniform sampler2D s_TextureMap;\n"
            "void main()\n"
            "{\n"
            "    outColor = texture(s_TextureMap, v_texCoord);\n"
            "}";

注意： v_texCoord = a_position.xy* 0.5 + 0.5; 这里生成的贴图是反的，将图片反转过来vec2(v_texCoord .x,1.0-v_texCoord .y)) 即可。

这里我想说一下下片元着色器的输入。基础概念和内置变量在我的另外一篇文章shader。 片元着色器的输入为图元的像素，但是具体在代码中是看不见的，GPU 自动帮助我们运行，片元着色器的代码程序 是每一个图元像素都会执行的。如果想要获取正在执行的像素信息，可以通过内置变量。

uv- 0.5 的操作通常是为了将纹理坐标的中心从默认的(0,0)点移动到图像的中心。‌

UV 的范围是【0-1】 ， 原点（0，0）为左下角。

uv- 0.5 范围是【-0.5 ，0.5】 则（0，0）来到了图形的中心位置。UV 本来的范围是【0，1】那小于0的部分，就需要去看纹理的环绕方式。
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/df87f235fac0449d9bd1c80348086cd3.png

应用的场景：

https://www.codersrc.com/archives/20344.html
https://blog.csdn.net/sinat_34014668/article/details/127465475