无法理解此示例中点积的使用吗?

发布于 2024-11-13 23:06:14 字数 966 浏览 3 评论 0原文

通常,我使用两个向量的点积来找出它们的垂直程度或它们之间角度的余弦。在这个着色器(一个香椿着色器)中,点积用于两种颜色,我无法理解它到底在做什么。

uniform vec2 resolution;
uniform sampler2D backBuffer;

void main(void)
{

  vec4 to_gray = vec4(0.3,0.59,0.11,0);
  float x1 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(1.0,1.0)) /resolution.xy)).rgba);
  float x0 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(-1.0,-1.0)) /resolution.xy)).rgba);
  float x3 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(1.0,-1.0)) /resolution.xy)).rgba);
  float x2 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(-1.0,1.0)) /resolution.xy)).rgba);
  float edge = (x1 - x0) * (x1 - x0);
  float edge2 = (x3 - x2) * (x3 - x2);
  edge += edge2;
  vec4 color =  texture2D(backBuffer,vec2(gl_FragCoord.xy  / resolution.xy));

    gl_FragColor = max(color - vec4(edge, edge, edge, edge) * 12.0,
        vec4(0,0,0,color.a));
}

Usually, I use the dot product of 2 vectors either to find out how perpendicular they are or the cosine of the angle between them. In this shader, a toon shader, the dot product is used on 2 colors and I cannot wrap my head around what exactly this is doing.

uniform vec2 resolution;
uniform sampler2D backBuffer;

void main(void)
{

  vec4 to_gray = vec4(0.3,0.59,0.11,0);
  float x1 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(1.0,1.0)) /resolution.xy)).rgba);
  float x0 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(-1.0,-1.0)) /resolution.xy)).rgba);
  float x3 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(1.0,-1.0)) /resolution.xy)).rgba);
  float x2 = dot(to_gray,  texture2D(backBuffer,vec2((gl_FragCoord.xy
      + vec2(-1.0,1.0)) /resolution.xy)).rgba);
  float edge = (x1 - x0) * (x1 - x0);
  float edge2 = (x3 - x2) * (x3 - x2);
  edge += edge2;
  vec4 color =  texture2D(backBuffer,vec2(gl_FragCoord.xy  / resolution.xy));

    gl_FragColor = max(color - vec4(edge, edge, edge, edge) * 12.0,
        vec4(0,0,0,color.a));
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

安稳善良 2024-11-20 23:06:14

在这种情况下,“几何”标量(点)积属性并不重要。这里是根据公式将一些(R, G, B)颜色转换为相应的灰度强度I

I = R * 0.30 + G * 0.59 + B * 0.11

(您可以了解更多关于这些这里的系数:https://en.wikipedia.org/wiki/Grayscale#Luma_coding_in_video_systems )。

正如您立即看到的,这个公式看起来像是两个向量的标量积:一个是我们的颜色 (R, G, B),另一个是 (0.30, 0.59, 0.11)代码>.因此,代码的作者只是使用“点积”函数来评估在四个不同点获得的四个不同颜色值的公式:点 gl_FragCoord.xy 向四个不同方向移动(就像 <代码> x 模式)。

换句话说,这种情况下的点积并不像您最初假设的那样用于“两种颜色”。它用于颜色(在某些坐标处从 backBuffer 获取的像素)和转换系数向量 (0.30, 0.59, 0.11)(恰当地命名为 to_gray)代码>)。后者并不是真正的颜色。它只是转换系数的向量。如果你愿意的话,你可以把它想象成一种“颜色”,但它没有多大意义。

这就是点积。

然后,他们进行一些额外的计算,将四个灰度值组合成一个灰度值。然后,他们使用该灰度值修改 gl_FragCoord.xy 点处的原始颜色(从 gl_FragCoord.xy 处的 RGB 值减去灰度值)。如果没有上下文,这一切的目的并不完全清楚。

The "geometric" scalar (dot) product properties don't really matter in this case. What you have here is an ordinary conversion of some (R, G, B) color to the corresponding grayscale intensity I in accordance with the formula

I = R * 0.30 + G * 0.59 + B * 0.11

(You can learn more about these coefficients here: https://en.wikipedia.org/wiki/Grayscale#Luma_coding_in_video_systems).

As you can immediately see this formula looks like a scalar product of two vectors: one is our color (R, G, B) and the other is (0.30, 0.59, 0.11). So, the author of the code just used the "dot product" function to evaluate this formula for four different color values obtained at four different points: point gl_FragCoord.xy shifted in four different directions (like an x pattern).

In other words, the dot product in this case is not used on "two colors", as you seemed to assume initially. It is used on a color (pixel taken from backBuffer at some coordinates) and a conversion coefficient vector (0.30, 0.59, 0.11) (aptly named to_gray). The latter is not really a color. It just a vector of conversion coefficients. You can think of it as a "color" if you want, but there's not much sense in it.

That's it for the dot product.

Then they do some extra computations to combine the four grayscale values into a single grayscale value. Then they use that grayscale value to modify the original color at point gl_FragCoord.xy (gray values are subtracted from RGB values at gl_FragCoord.xy). The purpose of all this is not fully clear without context.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文