html - WebGL:如何获取片段着色器中每个像素的位置？

Question

我知道我可以使用 gl_Position 来获取每个顶点的位置，但是是否有可能在片段着色器中获取每个像素的位置？

我想改变一些像素区域的alpha值。

Answer 1

vec2 gl_FragCoord

它将以像素为单位返回片段在屏幕上的位置。 如果您传递统一的 vec2 screenResolution，那么您可以使用这两个值来确定像素在屏幕上的确切位置，在哪个部分等等。

这是一个内置变量，因此您可以在片段着色器中随时使用它。

这里有一个用法示例只是为了演示:http://goo.gl/AG7UO

如果你想要片段的世界坐标，那么你应该使用varying变量。

顶点着色器:

varying vec3 vPos;
attribute vec3 aVertexCoord;
uniform mat4 uMVMat;
uniform mat4 uProjMat;

void main() {
    vPos = uMVMat * aVertexPos;
    gl_Position = uProjMat * vPos;
}

片段着色器:

varying vec3 vPos;
void main() {
    // do something
}

希望这对您有所帮助。