Question

我正在尝试在我的移动uisng farment着色器上渲染一个圆圈。也跟着this as i got the best answer。

顶点着色器：

attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 varying vec2 textureCoordinate;

 void main()
 {
    gl_Position = position;
    textureCoordinate = inputTextureCoordinate.xy;
 }

Fragment Shader：

 varying highp vec2 textureCoordinate;

 const highp vec2 center = vec2(0.5, 0.5);
 const highp float radius = 0.5;

 void main()
 {
     highp float distanceFromCenter = distance(center, textureCoordinate);
     lowp float checkForPresenceWithinCircle = step(distanceFromCenter, radius);

     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0) * checkForPresenceWithinCircle;     
 }

属性vec4位置;传递-1到+1 和属性vec4 inputTextureCoordinate;传递0到1。

但是在渲染时我在移动屏幕上得到一个椭圆？我想这可能是因为屏幕宽高比。如何在屏幕上呈现完美的圆圈？

Answer 1

我认为这可能是因为屏幕宽高比。

是的，这正是问题所在。

所有3个维度中的视图都是[-1,1]。它被映射到窗口空间坐标的视口。由于您不使用任何其他转换，因此您可以在剪辑空间中直接绘制，并且剪辑空间与NDC空间相同。

要做到这一点，您必须考虑宽高比。您可以直接更改属性值，也可以在顶点着色器中对其进行校正，或者仍然绘制全屏四边形并在片段着色器中考虑它。

后者是效率最低的方式。我实际上建议在顶点着色器中添加2D比例矢量均匀。

attribute vec4 position;
attribute vec4 inputTextureCoordinate;

varying vec2 textureCoordinate;

uniform vec2 scale;

void main()
{
    gl_Position = vec4(scale, 1.0, 1.0) * position;
    textureCoordinate = inputTextureCoordinate.xy;
}

在您的客户端，如果(1.0/aspect_ratio, 1.0)为aspect_ratio，您可以将制服设置为>= 1.0，如果低于1，则可以设为(1.0, aspect_ratio)。这样，无论如何您使用的屏幕方向，圆圈将始终为圆形并适合屏幕。

GLSL Circle在屏幕上渲染时会出现问题吗？

1 个答案: