写片段着色器:无法理解制服的定义

Question

我正在尝试使用移动器进行自定义过滤器，但是我没有明确指定制服，尤其是vTextureCoord。这是一个JSFIDDLE（编辑：忽略图像，最少的案例放在正方形梯度中）：

• 为什么不右上角是白色的？我已经将过滤器分辨率和精灵大小设置为256，但是vTextureCoord仅从[0,0]变为[.5，.5]
• 尝试拖动精灵：它似乎被顶部和左边框的墙壁堵住。但是，这只是与阴暗器相关的，因为游戏对象本身已正确拖动。怎么来？

我在最后一个Ludum Dare上将头发拉到这头，试图找出精灵内的像素位置（即左下角的[0,0]，[Sprite.W，Sprite.H]右上一个）...但是我找不到任何可靠的方法来计算任何精灵位置和大小是什么。

感谢您的帮助！

---

edit ：如 emackey 指出，看起来像是Phaser或Pixi（不确定在哪个级别上处理？）使用中间纹理。因此，我得到的uSampler不是原始纹理，而是修改后的纹理，也就是说，如果Sprite超出了屏幕的左上角，则可以移动/裁剪。uSampler和vTextureCoord可以很好地工作，因此，只要我制作简单的颜色调整似乎都很好，但是对于使用纹理坐标的玩具，它根本不可靠。

移相器/Pixi Guru可以解释为什么它是这样起作用的，以及我应该做什么来获得清晰的坐标并使用我的实际源纹理？我设法通过"修复vTextureCoord"并在iChannel0中插入纹理来破解着着色器，但这感觉有些骇客。

谢谢。

Answer 1

我对Phaser不太熟悉，但是我们可以阐明该碎片着色器的真正要做的事情。加载您的JSFIDDLE并用以下方式更换GLSL主体：

void main() {
    gl_FragColor = vec4(vTextureCoord.x * 2., vTextureCoord.y * 2., 1., 1.);
    gl_FragColor *= texture2D(uSampler, vTextureCoord) * 0.6 + 0.4;
}

上面的滤清器着色器是原始纹理的组合（添加了一些灰色）和您的颜色，因此您可以同时看到纹理和紫外线。

您是正确的，vTextureCoord仅适用于0.5，因此上面的* 2.，但这不是整个故事：尝试将您的精灵拖出左上角。纹理滑动，但纹理坐标不会移动！

那怎么可能？我的猜测是，使用某些Sprite的位置信息用于转换，将原始的Sprite纹理呈现为中间纹理。当您的自定义过滤器运行时，您的过滤器GLSL代码正在运行在现在转换的中间纹理上，并且纹理不再与原始Sprite纹理有已知关系。

如果您运行Chrome Canvas Inspector，您可以看到确实有多个通行证，包括呈现呈呈纹理通行证。您还可以看到，过滤器通行证正在使用似乎是滤波器区域大小与游戏区域大小的比率的坐标，在这种情况下，这是两个维度的0.5。

我不太了解Phaser，以至于是否有任何快速修复。也许您可以在过滤器中添加一些制服，如果您可以弄清楚那些来自何处，则可以为着色器提供所需的额外变换。或者，也许有一种方法可以直接在精灵本身上附加着着色器（有一个名称的空字段），因此您可以在此处而不是在滤镜中运行GLSL代码。我希望这个答案至少可以解释您上面两个问题的"为什么"。