Javascript 编写片段着色器：无法理解制服是如何定义的

我正在尝试使用Phaser制作自定义过滤器，但我不知道如何指定制服，尤其是

vTextureCoord

。（编辑：忽略图像，最小大小写位于方形渐变中）：

• 为什么右上角不是白色的？我已经将过滤器分辨率和精灵大小设置为256，但是

  vTextureCoord

  仅从[0,0]到[5,5]（或者看起来是这样）
• 尝试拖动精灵：它似乎被顶部和左侧边界的墙挡住了。不过，这只是与着色器相关的，因为游戏对象本身已正确拖动。为什么

在最后一次Ludum Dare中，我在这张照片上拉了拉头发，试图找出精灵中的像素位置（即左下角的[0,0]和右上角的[sprite.w，sprite.h]）。。。但我找不到任何可靠的方法来计算，无论精灵的位置和大小是什么

谢谢你的帮助

---

编辑：正如emackey指出的那样，Phaser或Pixi（不确定在哪个级别处理它？）似乎使用了中间纹理。因此，我得到的

uSampler

不是原始纹理，而是经过修改的纹理，例如，如果精灵超出屏幕左上角，则会移动/剪切。

uSampler

和

vTextureCoord

配合得很好，所以只要我做一些简单的事情，比如颜色调整，看起来都不错，但玩弄纹理坐标就不可靠

Phaser/Pixi大师能解释为什么它是这样工作的吗？我该怎么做才能获得清晰的坐标并处理我的实际源纹理？通过“修复

vTextureCoord

”并将我的纹理插入

iChannel0

，但这感觉有点粗糙

---

谢谢。

我对Phaser不太熟悉，但我们可以稍微了解一下片段着色器的真正作用。加载JSFIDLE并用以下内容替换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.

，但这并不是全部内容：尝试将精灵从左上方拖动。纹理会滑动，但纹理坐标不会移动

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

如果运行，可以看到确实存在多个过程，包括“渲染到纹理”过程。您还可以看到，过滤过程使用的坐标似乎是过滤区域大小与游戏区域大小的比率，在这种情况下，两个维度上的值都是

0.5

---

我对Phaser不太了解，不知道是否有一个快速解决方案。也许你可以给过滤器添加一些制服，这会给着色器提供它所需要的额外变换，如果你能弄清楚它的确切来源的话。或者有一种方法可以将着色器直接附加到精灵本身（有一个同名的空字段），这样您就可以在那里而不是在过滤器中运行GLSL代码。我希望这个答案至少解释了上述两个问题的“原因”。

关于第二点：似乎每当对精灵应用过滤器时，拖动都会受到限制。我尝试了多个过滤器并搜索了文档，但没有找到任何符合它的内容。也许这是向开发团队的任何人询问这件事的最佳方式。顺便说一句，我提到了窥探WebGL调用的方法，还有更多类似的工具，例如。我认识的人写了一篇很好的文章。谢谢你的解释和背后的理由。你说得对，我失去的是这个中间纹理，它改变/裁剪/调整原始纹理的大小。不知道为什么会这样（可能是因为性能问题吧？），至少我现在有正确的问题要问Phaser/PixiJS人员。由于默认纹理不可靠，通过一些修改，我成功地将这些

vTextureCoord

边界牢记在心，并添加了我想要的作为自定义制服的纹理，从而使事情顺利进行。结果是：我将这个问题保留更长的时间，看看是否可以获得一些Phaser/Pixi特定的信息，希望能够理解为什么事情是这样的。