GLSL Circle 在屏幕上呈现椭圆形？答案

【问题标题】：GLSL Circle gets eliptical on Rendering on screen?GLSL Circle 在屏幕上呈现椭圆形？
【发布时间】：2014-11-19 13:01:34
【问题描述】：

我正在尝试在我的移动 uisng 农场着色器上渲染一个圆圈。还关注this as i got the best answer。

顶点着色器：

attribute vec4 position;
 attribute vec4 inputTextureCoordinate;

 varying vec2 textureCoordinate;

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

片段着色器：

 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。

但是在渲染时我在移动屏幕上得到一个椭圆？我认为这可能是因为屏幕纵横比。如何在屏幕上渲染完美的圆？

【问题讨论】：

标签： android opengl-es glsles

【解决方案1】：

我认为这可能是因为屏幕纵横比。

是的，这正是问题所在。

viewinf voulme 在所有 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;
}

在您的客户端，如果aspect_ratio 是>= 1.0，您可以将uniform 设置为(1.0/aspect_ratio, 1.0)，如果小于1，则设置为(1.0, aspect_ratio)。这样，无论您使用什么屏幕方向，圆圈将始终是一个圆圈并适合屏幕。

【讨论】：