LibGDX非正方形视口下波纹Shader拉伸变形问题求助

问题根源 #

波纹变椭圆的核心原因是：片段Shader计算波纹时使用的纹理坐标未适配世界视图的宽高比。当世界宽度大于高度时，纹理坐标的X轴被拉伸，导致圆形波纹在X方向被拉长为椭圆。

解决方案步骤 #

1. 在自定义Filter中传递宽高比Uniform #

在你继承Filter的波纹特效类中，添加宽高比参数，并在渲染前将世界视图的宽高比传递给Shader：

public class RippleFilter extends Filter<RippleFilter> {
    public RippleFilter() {
        super(你的顶点Shader代码, 你的片段Shader代码);
    }

    @Override
    public void update(float delta) {
        super.update(delta);
        // 获取当前Stage的ExtendViewport宽高比
        Viewport viewport = 你的Stage实例.getViewport();
        float aspectRatio = viewport.getWorldWidth() / viewport.getWorldHeight();
        // 将宽高比传入Shader的uniform变量
        setUniformf("u_aspectRatio", aspectRatio);
    }
}

2. 修改顶点Shader校正纹理坐标 #

修改你提供的顶点Shader，添加宽高比Uniform，并对纹理坐标的X轴进行缩放，让纹理坐标的宽高比统一为1:1：

#ifdef GL_ES
    #define PRECISION mediump
    precision PRECISION float;
#else
    #define PRECISION
#endif

attribute vec4 a_position;
attribute vec2 a_texCoord0;
varying vec2 v_texCoords;
uniform float u_aspectRatio; // 新增宽高比uniform

void main()
{
    // 校正X轴纹理坐标，抵消宽高比带来的拉伸
    v_texCoords = vec2(a_texCoord0.x * u_aspectRatio, a_texCoord0.y);
    gl_Position = a_position;
}

3. （可选）在片段Shader中校正距离计算 #

如果不想修改顶点Shader，也可以直接在片段Shader的波纹计算逻辑中，对X方向的坐标乘以宽高比来校正距离：

假设你的片段Shader中原本计算波纹中心距离的代码是：

vec2 center = vec2(0.5, 0.5); // 示例中心坐标
float dist = length(v_texCoords - center);

修改为：

uniform float u_aspectRatio;
vec2 center = vec2(0.5, 0.5);
// 对X坐标应用宽高比校正，确保距离计算为正圆
float dist = length(vec2(v_texCoords.x * u_aspectRatio, v_texCoords.y) - vec2(center.x * u_aspectRatio, center.y));

关键说明 #

• 若你的波纹中心是基于世界坐标转换的，需要同步对中心坐标的X值乘以宽高比后再传入Shader，确保中心位置与校正后的纹理坐标匹配。
• 宽高比的计算必须使用世界尺寸（getWorldWidth()/getWorldHeight()）而非屏幕像素尺寸，因为你使用的是ExtendViewport，世界尺寸是你自定义的棋盘+UI大小。

内容的提问来源于stack exchange，提问作者user38725