如何从 OpenGL 着色器中的纹理贴图绘制贴图？答案

【问题标题】：How I can draw a tile from a texture tilemap in an OpenGL shader?如何从 OpenGL 着色器中的纹理贴图绘制贴图？
【发布时间】：2021-03-31 16:40:24
【问题描述】：

所以我有一个 AtlasTexture，其中包含绘制瓦片地图所需的所有瓦片。

现在我通过制服传递 AtlasTexture，想法是更改纹理坐标以仅从图集中选择我需要的部分。

问题是我只能在片段着色器上指定从零原点切割纹理，是否可以指定一个 offsetX 来告诉着色器我想从哪里开始绘制？

float vertices[] = {
    // aPosition     // aTextureCoordinate
    0.0f,   0.0f,    0.0f, 0.0f,
    100.0f, 0.0f,    1.0f, 0.0f,
    0.0f,   100.0f,  0.0f, 1.0f,
    100.0f, 100.0f,  1.0f, 1.0f,
};

uint32_t indices[] = {0, 1, 2, 2, 3, 1};

顶点着色器

#version 330 core

layout(location = 0) in vec2 aPosition;
layout(location = 1) in vec2 aTextureCoordinate;
out vec2 textureCoordinate;

void main() {
    gl_Position = vec4( aPosition.x, aPosition.y, 1.0f, 1.0f);
    textureCoordinate = vec2(
    aTextureCoordinate.x / 3.0f, // This selects the first tile in the uAtlasTexture
    aTextureCoordinate.y
    );
}

片段着色器

#version 330 core

in vec2 textureCoordinate;
uniform sampler2D uAtlasTexture; // Has 3 tiles
out vec4 color;

void main() {
    color = texture(uAtlasTexture, textureCoordinate);
}

【问题讨论】：

使用Uniform 变量作为偏移量。
但是我如何应用偏移量？我只能从左侧选择纹理的一部分
vec2(1.0/3.0 + aTextureCoordinate.x / 3.0f, aTextureCoordinate.y); 选择第二个图块。使用制服代替1.0/3.0
顺便说一句。如果您所有的图块都具有相同的大小，您可能会发现数组纹理（不要与纹理数组混淆）更方便。
感谢@Andrea，是的，我所有的瓷砖尺寸都一样。如何使用数组纹理？

标签： c++ opengl glsl shader

【解决方案1】：

使用Uniform 变量作为偏移量。 `vec2(1.0/3.0 + aTextureCoordinate.x / 3.0f, aTextureCoordinate.y); “选择2第二个瓷砖。使用制服而不是1.0/3.0：

#version 330 core

layout(location = 0) in vec2 aPosition;
layout(location = 1) in vec2 aTextureCoordinate;
out vec2 textureCoordinate;

uniform float textureOffsetX;

void main() {
    gl_Position = vec4( aPosition.x, aPosition.y, 1.0f, 1.0f);
    textureCoordinate = vec2(
        textureOffsetX + aTextureCoordinate.x / 3.0f, 
        aTextureCoordinate.y
    );
}

【讨论】：