如何用GLSL实现示例所示的透视扭曲效果？

问题分析 #

你当前的代码仅实现了简单的坐标镜像翻转，并未涉及透视变换的核心逻辑——通过模拟近大远小的视觉效果来扭曲图像。

实现思路 #

透视扭曲的核心是基于深度模拟调整UV坐标：

• 定义透视消失点（比如屏幕中心或顶部中心）
• 计算每个像素到消失点的"深度"（可用Y轴坐标或距离表示）
• 根据深度对UV坐标进行缩放，越靠近消失点（模拟远处），图像越收缩

修改后的代码示例 #

void mainImage( out vec4 fragColor, in vec2 fragCoord ){
    vec2 uv = fragCoord.xy / iResolution.xy;
    uv = uv * 2.0 - 1.0; // 将UV转换为[-1,1]范围，方便计算中心
    
    // 定义透视消失点（这里设为顶部中心：(0,1)）
    vec2 vanishingPoint = vec2(0.0, 1.0);
    // 模拟深度：使用Y轴坐标，越靠近顶部（y=1）深度越大
    float depth = 1.0 - uv.y; // depth范围[0,2]
    depth = clamp(depth, 0.1, 2.0); // 避免除以0
    
    // 应用透视变换：基于深度缩放UV，靠近消失点时收缩
    uv.x = uv.x / depth;
    
    // 将UV转换回[0,1]范围
    uv = (uv + 1.0) * 0.5;
    
    // 采样纹理，超出范围的部分用边缘像素填充
    fragColor = texture(iChannel0, clamp(uv, 0.0, 1.0));
}

代码说明 #

• 先将UV转换到[-1,1]的标准化范围，便于以屏幕中心为基准计算
• vanishingPoint可自定义（比如设为vec2(0.0,0.0)即屏幕中心）
• depth的计算逻辑可根据需求调整：如果要做底部透视，可改为depth = uv.y + 1.0
• 最终通过clamp确保UV在[0,1]范围内，避免纹理采样出错

如果你的目标透视效果是其他类型（比如斜向透视、角落消失点），可以调整消失点位置和深度计算方式。

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