GLSL Fragment shader 基于世界空间的UV置换

Question

我正在尝试为网站上的图像创建 rgb 偏移效果。我有基本功能，但问题是通道与纹理的 uv 偏移。因此，如果图像尺寸不同，则每个图像的偏移量在视觉上是不同的。

这是我的片段着色器。

uniform sampler2D texture;
varying vec2 vUv; // vertex uv


void main() {
    vec2 uv = vUv;

    float red = texture2D(texture, vec2(uv.x, uv.y - .1)).r;
    float green = texture2D(texture, uv).g;
    float blue = texture2D(texture, vec2(uv.x, uv.y + .1)).b;
    float alpha = texture2D(texture, uv).a;

    gl_FragColor = vec4(vec3(red, green, blue), alpha);

}

以及它在页面上的呈现方式。

如何在不传入统一值的情况下标准化 uv 偏移量？

Answer 1

传入偏移量等更多信息是正常的

uniform float offset1;
uniform float offset2;
uniform sampler2D texture;
varying vec2 vUv; // vertex uv


void main() {
    vec2 uv = vUv;

    float red = texture2D(texture, vec2(uv.x, uv.y + offset1)).r;
    float green = texture2D(texture, uv).g;
    float blue = texture2D(texture, vec2(uv.x, uv.y + offset2)).b;
    float alpha = texture2D(texture, uv).a;

    gl_FragColor = vec4(vec3(red, green, blue), alpha);

}

然后您可以在 JavaScript 中进行调整。例如

  const uniforms = {
    offset1:  { value: 0 },
    offset2:  { value: 0 },
    ...
  };

  ...

  uniforms.offset1.value =  2 / textureHeight;
  uniforms.offset2.value = -2 / textureHeight;

如果是我，我可能会这样做

uniform vec2 channelOffsets[4];
uniform vec4 channelMult[4];
uniform sampler2D texture;
varying vec2 vUv; // vertex uv


void main() {
    vec2 uv = vUv;

    vec4 channel0 = texture2D(texture, uv + channelOffset[0]);
    vec4 channel1 = texture2D(texture, uv + channelOffset[1]);
    vec4 channel2 = texture2D(texture, uv + channelOffset[2]);
    vec4 channel3 = texture2D(texture, uv + channelOffset[3]);

    gl_FragColor = 
        channelMult[0] * channel0 +
        channelMult[1] * channel1 +
        channelMult[2] * channel2 +
        channelMult[3] * channel3 ; 
}

并设置它们

  const uniforms = {
    channelOffsets:  { value: [
      new THREE.Vector2(),
      new THREE.Vector2(),
      new THREE.Vector2(),
      new THREE.Vector2(),
    ]},
    channelMults: { value: [
      new THREE.Vector4(1, 0, 0, 0),
      new THREE.Vector4(0, 1, 0, 0),
      new THREE.Vector4(0, 0, 1, 0),
      new THREE.Vector4(0, 0, 0, 1),
    ]},
    ....
  }

...

  uniforms.channelOffsets.value[0].y = -2 / textureHeight;
  uniforms.channelOffsets.value[2].y =  2 / textureHeight;

举一个不那么硬编码的例子。我什至可以使用纹理矩阵而不是偏移量，这将允许旋转和缩放每个通道，并将它们与允许交换通道的矩阵组合。

Answer 2

如果您要使用WebGL 2.0 上下文（请参阅How to use WebGL2），那么您可以使用textureSize 来获取纹理的大小。例如：

#version 300 es

uniform sampler2D tex;
in      vec2      vUv;
out     vec4      color;

void main() {
    vec2 uv = vUv;

    vec2  size   = vec2(textureSize(tex, 0));
    float pixel  = 10.0;
    float offset = pixel / size.y;

    float red   = texture(tex, vec2(uv.x, uv.y - offset)).r;
    float green = texture(tex, uv).g;
    float blue  = texture(tex, vec2(uv.x, uv.y + offset)).b;
    float alpha = texture(tex, uv).a;

    color = vec4(red, green, blue, alpha);
}

注意，您必须更改纹理采样器制服的名称

Answer 3

如果您需要知道您在屏幕空间（不是 3D 世界空间）中的哪个像素，您可以使用gl_FragCoord。例如，在 1080p 显示器中，gl_FragCoord.x 将从左侧的 0 开始，并在屏幕右侧增加到 1920。 gl_FragCoord.y 的范围会比 [0, 1080] 短一点（由于 OS 菜单栏）。您可以像这样在片段着色器中提取这些坐标：

vec2 coord = gl_FragCoord.xy;

这样您就可以知道您在屏幕空间中的哪个像素，而无需传递另一个制服。有关详细信息，请参见此处：

https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/gl_FragCoord.xhtml