顶点着色器如何工作？

Question

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

#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;
}

它没有按我的意愿工作。为什么？

Answer 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) ? ...

顶点着色器如何工作？

How vertex shader works?

shader

glsl

webgl