如何在片段着色器中平铺部分纹理

Posted 2023-02-22

【中文标题】如何在片段着色器中平铺部分纹理

【英文标题】：How to tile part of texture in fragment shader

【发布时间】：2019-06-25 14:47:57

【问题描述】：

使用 Defold 游戏引擎，它会强制图集中的纹理为 2 的幂（384x216 -> 512x256）。 Defold 不支持视差背景，只有以下选项：

使用代码管理多个精灵定位 在单个精灵上使用着色器对其进行管理。

第一个选项不是一种优雅和优化的方式，所以我选择选项 Nr.2。

我有一个非常简单的着色器代码，它采用初始精灵的比例和偏移量。如果精灵的大小是 2 的幂，它可以工作。但我几乎没有比这更多的知识，所以我不知道如何平铺纹理的一部分（原来不是 2 的幂）。我可以计算并给出比例为 vec2(384/512, 216/256) 的制服。

varying mediump vec2 var_texcoord0;
uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;
uniform lowp vec4 scale;
uniform lowp vec4 offset;
void main()

   // Pre-multiply alpha since all runtime textures already are
   lowp vec2 uv = vec2(var_texcoord0.x *scale.x +offset.x, var_texcoord0.y *scale.y +offset.y);
   gl_FragColor = tint * texture2D( texture_sampler, uv);

我希望得到平铺背景，但由于 2 的强制幂，它有空白空间。

【问题讨论】：

那么你的问题是什么？您的着色器代码似乎是合理的，请记住，内部 GL 纹理坐标在每个方向上的范围从 0.0 到 1.0，而超出该范围的任何内容都将根据纹理环绕模式进行环绕。

【参考方案1】：

所以我在 Defold 社区得到了帮助，最终得到了这样的片段着色器：

varying mediump vec2 var_texcoord0;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;
uniform lowp vec4 size; //actually vec2 of pecentage (x,y)
uniform lowp vec4 scale;
uniform lowp vec4 offset;

void main()

    lowp vec2 uv = vec2(var_texcoord0.x *scale.x +offset.x, var_texcoord0.y *scale.y +offset.y);
    uv = vec2(mod(uv.x, size.x), mod(uv.y, size.y));
    gl_FragColor = tint * texture2D( texture_sampler, uv);