javascript - 编写片段着色器 : cannot make sense of how the uniforms are defined

Question

我正在尝试使用 Phaser 制作自定义滤镜，但我不知道如何指定制服，尤其是 vTextureCoord。 Here's a JSFiddle (编辑:忽略图像，最小情况位于方形渐变中):

• 为什么右上角不是白色的？我已将过滤器分辨率和 Sprite 大小都设置为 256，但 vTextureCoord 仅从 [0,0] 变为 [.5,.5](或看起来如此)
• 尝试拖动 Sprite :它似乎被顶部和左侧边界的墙挡住了。它只是与着色器相关，因为游戏对象本身被正确拖动。怎么会？

我在上次 Ludum Dare 期间在这个问题上扯了扯头发，试图找出 Sprite 中的像素位置(即左下角的 [0,0] 和左下角的 [sprite.w, sprite.h]右上角)...但是我找不到任何可靠的方法来计算 Sprite 的位置和大小。

感谢您的帮助!

---

编辑:正如emackey 指出的那样，Phaser 或Pixi(不确定在哪个级别处理它？)似乎使用中间纹理。因此，我得到的 uSampler 不是原始纹理，而是经过修改的纹理，例如，如果 Sprite 超出屏幕左上角，则进行移动/裁剪。 uSampler 和 vTextureCoord 可以很好地协同工作，所以只要我做一些简单的事情，比如颜色调整，一切看起来都很好，但是对于玩弄纹理坐标来说，它根本不可靠。

Phaser/Pixi 大师能否解释为什么它会这样工作，以及我应该如何获得清晰的坐标并使用我的实际源纹理？ I managed to hack a shader通过“修复 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;
}

上面的过滤器着色器是原始纹理(添加了一些灰色)和您的颜色的组合，因此您可以同时看到纹理和 UV。

vTextureCoord 只到达 0.5 是正确的，因此是上面的 * 2.，但这不是全部:尝试将您的 Sprite 拖离左上角。纹理滑动但纹理坐标不移动!

这怎么可能？我的猜测是原始 Sprite 纹理被渲染为中间纹理，使用一些 Sprite 的位置信息进行转换。当您的自定义过滤器运行时，您的过滤器 GLSL 代码正在运行现在已转换的中间纹理，并且纹理坐标与原始 Sprite 纹理不再具有已知关系。

如果您运行 Chrome Canvas Inspector您可以看到确实有多个 channel ，包括渲染到纹理 channel 。您还可以看到，过滤器 channel 使用的坐标似乎是过滤器区域大小与游戏区域大小的比率，在本例中，两个维度上都是 0.5。

我对 Phaser 的了解还不够深，不知道是否有快速解决这些问题的方法。也许您可以向过滤器添加一些制服，从而为着色器提供所需的额外变换，前提是您能弄清楚它的确切来源。或者也许有一种方法可以将着色器直接附加到 Sprite 本身(有一个同名的空字段)，这样您就可以在那里而不是在过滤器中运行您的 GLSL 代码。我希望这个答案至少已经解释了您上面两个问题的“原因”。