Godot 4：如何让CanvasItem着色器不随相机移动保持世界位置

你的思路方向是对的——问题出在你用了屏幕/控件空间的UV，而不是世界空间坐标。当相机移动时，SCREEN_UV和ColorRect的UV都会跟着相机走，所以雾才会同步移动。要让雾固定在世界位置，得用基于游戏世界的坐标来计算噪声。

下面是修改后的着色器代码，核心是把顶点的世界坐标传递给片段着色器，用它来生成雾效：

shader_type canvas_item;

// 细节层级
uniform int octaves = 4;

// 雾的初始不透明度
uniform float starting_amplitude: hint_range(0.0, 0.5) = 0.5;

// 雾的图案密度（注意：世界空间下数值要调小，比如0.1）
uniform float starting_frequency = 0.1;

// 雾的稀疏程度（向透明偏移）
uniform float shift: hint_range(-1.0, 0.0) = -0.2;

// 雾的移动方向和速度
uniform vec2 velocity = vec2(1.0, 1.0);

// 雾的颜色
uniform vec4 fog_color: source_color = vec4(0.0, 0.0, 0.0, 1.0);

// 噪声纹理（推荐用OpenSimplexNoise，开启重复）
uniform sampler2D noise: repeat_enable;

// 把世界坐标从顶点着色器传递到片段着色器
varying vec2 world_pos;

float noise_fbm(vec2 uv) {
    float amplitude = starting_amplitude;
    float frequency = starting_frequency;
    float output = 0.0;
    for (int i = 0; i < octaves; i++) {
        output += texture(noise, uv * frequency).x * amplitude;
        amplitude /= 2.0;
        frequency *= 2.0;
    }
    return clamp(output + shift, 0.0, 1.0);
}

void vertex() {
    // 将顶点的局部坐标转换为世界坐标
    world_pos = (WORLD_MATRIX * vec3(VERTEX, 0.0)).xy;
}

void fragment() {
    // 用世界坐标 + 时间偏移来计算雾的动态效果
    vec2 moving_uv = world_pos + TIME * velocity;
    float fog_strength = noise_fbm(moving_uv);
    COLOR = mix(vec4(0.0), fog_color, fog_strength);
}

关键修改说明： #

• 添加varying vec2 world_pos：用来在顶点和片段着色器之间传递世界坐标。顶点着色器里通过WORLD_MATRIX把局部顶点坐标转换成世界空间坐标，这样每个像素对应的世界位置是固定的，相机移动不会影响它。
• 替换UV为world_pos：片段着色器里用world_pos + TIME * velocity作为噪声的UV，这样雾会在世界空间里按设定的速度移动，而不是跟着相机走。
• 调整starting_frequency：世界空间的单位是游戏里的物理单位（比如米），所以原来的1.0会让雾的图案非常密集，建议改成0.05~0.2之间，根据你的游戏比例尺调整。

额外注意事项： #

• 你的ColorRect挂在相机上是没问题的，只要它的尺寸覆盖整个相机视口就行（可以把ColorRect的锚点设为(0,0)，大小设为相机的分辨率，比如1920x1080）。
• 如果雾的移动速度太快/太慢，直接调整velocity参数即可，它的单位是“世界单位/秒”。

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