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

简而言之：不是这样的！

顾名思义，顶点着色器中的代码每顶点执行一次。因此，如果绘制一个正方形，则仅为您为绘制调用指定的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) ? ...

顶点着色器如何工作？

1 个答案: