0

我在片段着色器中围绕一个点计算一个圆圈。问题是纹理中发生变化的部分不是一个圆圈，它是一个椭圆形。形式实际上取决于纹理的形式。如果纹理是一个完美的正方形，我会得到一个完美的圆形，但当它是一个矩形时，我会得到一个椭圆形。这是当前的片段着色器：

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;

uniform highp vec2 center;
uniform highp float radius;
uniform highp float scale;


void main()
{
   highp vec2 textureCoordinateToUse = textureCoordinate;
   highp float dist = distance(center, textureCoordinate);
   textureCoordinateToUse -= center;
   if (dist < radius)
   {
     highp float percent = 1.0 - ((radius - dist) / radius) * scale;
     percent = percent * percent;

     textureCoordinateToUse = textureCoordinateToUse * percent;
     textureCoordinateToUse += center;

     gl_FragColor = texture2D(inputImageTexture, textureCoordinateToUse );
   }

   textureCoordinateToUse += center;
   gl_FragColor = texture2D(inputImageTexture,textureCoordinate);   
}

更新着色器代码：

highp float aspectRatio = 854.0 / 480.0;
     //highp vec2 textureCoordinateToUse = textureCoordinate;
     highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y *    aspectRatio + 0.5 - 0.5 * aspectRatio));
   highp float dist = distance(center, textureCoordinateToUse);
   textureCoordinateToUse -= center;
   if (dist < radius)
   {
     highp float percent = 1.0 - ((radius - dist) / radius) * scale;
     percent = percent * percent;

     textureCoordinateToUse = textureCoordinateToUse * percent;
     textureCoordinateToUse += center;

     gl_FragColor = texture2D(inputImageTexture, textureCoordinateToUse );
     return;
   }

   textureCoordinateToUse += center;
   gl_FragColor = texture2D(inputImageTexture,textureCoordinate);
4

1 回答 1

1

我看到您正在尝试使用我的凸出失真片段着色器。虽然您实际上没有问过问题，但我想我可能知道您在这里想要什么。

如果您为矩形输入纹理提供标准化 0.0 - 1.0 范围内的纹理坐标，则上述将在椭圆区域而不是圆形区域上运行。那是因为上述计算是在纹理坐标空间中工作的，而不是在图像坐标空间中。

要纠正此问题，您可以执行以下两项操作之一。首先，您可以提供说明图像纵横比的纹理坐标（其中一个不能最大为 1.0）。

其次，您可以执行我在此答案中所做的操作，并将图像的纵横比作为统一输入，并使用它来校正图像的矩形性质。如果您为aspectRatio着色器提供了一个统一的图像宽度和高度之间的比率，您可以将着色器正文中的第一行替换为

 highp vec2 textureCoordinateToUse = vec2(textureCoordinate.x, (textureCoordinate.y * aspectRatio + 0.5 - 0.5 * aspectRatio));

它会在一个圆形区域内运行。

于 2012-08-24T21:53:38.430 回答