WebGL：如何获取片段着色器中每个像素的位置？ [英] WebGL: How do I get the position of every pixel in fragment shader?

问题描述

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

I know I could use gl_Position to get every vertex's position, but if it's possible to get every pixel's position in fragment shader ?

我想更改某个像素区域的alpha值。

I want to change the alpha value of some pixel area.

推荐答案

vec2 gl_FragCoord

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

It will return you position of the fragment on the screen in pixels. If you pass uniform vec2 screenResolution then you could play with that two values to determine where exactly on the screen is pixel, in which part and such.

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

This is a built-in variable, so you can use it whenever you want in fragment shader.

这是一个例子用法仅用于演示： http://goo.gl/AG7UO

Here's one example of usage just to demonstrate: http://goo.gl/AG7UO

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

If you want woorld coordinate of the fragment, then you should use varying variable.

顶点着色器：

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
}

希望这会有所帮助。

这篇关于WebGL：如何获取片段着色器中每个像素的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！