顶点着色器如何工作？答案

【问题标题】：How vertex shader works?顶点着色器如何工作？
【发布时间】：2015-01-06 03:14:01
【问题描述】：

我是一个初学者，我尝试通过画一个正方形来画一个圆形。但是失败了！这是我的顶点着色器：

#define RADIUS 0.5
#define WHITE vec4(1.0,1.0,1.0,1.0)
#define RED vec4(1.0,0.0,0.0,1.0)
attribute vec2 a_position;
varying vec4 v_color; //defines color in fragment shader
....
void main(){
    gl_Position = a_position;
    v_color = (a_position[0]*a_position[0]+a_position[1]*position[1]<RADIUS*RADIUS) ? RED : WHITE;
}

它不能按我的意愿工作。为什么？

【问题讨论】：

因为这个颜色计算应该在片段着色器中，而不是在顶点一中。顶点着色器可以重新对齐您的顶点，但无论您多么努力，您都无法仅从四个顶点制作几何圆。
This might be helpful

标签： glsl webgl shader

【解决方案1】：

简而言之：不是这样的！

顾名思义，vertex 着色器中的代码对每个vertex 执行一次。因此，如果您绘制一个正方形，那么顶点着色器只会针对您为绘制调用指定的 4 个顶点执行。

需要为每个片段执行您在着色器代码中的表达式（至少在本次讨论中，您可以假设片段与像素相同）。您想评估每个像素是在圆圈内还是在圆圈外。因此，逻辑需要在片段着色器中。

要使这项工作正常进行，最简单的方法是将原始位置传递给片段着色器。片段着色器中的可用位置有一个内置变量（gl_FragCoord），但它以像素为单位，这使您的计算更加复杂。

所以你的顶点着色器看起来像这样：

attribute vec2 a_position;
varying vec2 v_origPosition;
...
void main() {
    gl_Position = a_position;
    v_origPosition = a_position;
}

您在顶点着色器中拥有的大部分内容然后进入片段着色器：

...
varying vec2 v_origPosition;
...
void main() {
    gl_FragColor = (dot(v_origPosition, v_origPosition) < RADIUS * RADIUS) ? ...

【讨论】：

您的回答对我有帮助，谢谢。我想知道虽然顶点着色器每个顶点执行一次，但命令是“v_origPosition = a_position;”吗？每个顶点（或片段）执行一次。
在顶点着色器中为每个顶点分配一次值。 varying 变量然后由顶点着色器之后的固定功能块进行插值，并且插值进入片段着色器，正如预期的那样，每个片段（像素）调用一次。