Android OpenGL ES 2.0 晕影蒙版答案

【问题标题】：Android OpenGL ES 2.0 Vignette MaskAndroid OpenGL ES 2.0 晕影蒙版
【发布时间】：2012-09-15 10:02:57
【问题描述】：

我使用的是 Android API 级别 9。我将相机预览加载到 SurfaceView 中。我正在尝试在此之上绘制一个晕影面具。为此，我使用了 GLSurfaceView。我使用以下片段着色器代码（或者它是像素着色器吗？）在 XCode 着色器构建器中准备了一个掩码，到目前为止编译成功：

uniform sampler2D tex;

void main()
{ 
float innerAlpha = 0.0;
float outerAlpha = 1.0;
float len = 1.7;
float startAdjustment = -0.2;
float diff = 0.4;
float alphaStep = outerAlpha / len;
vec2 center = vec2(0.5, 0.5);
vec2 foc1 = vec2(diff,0.);
vec2 foc2 = vec2(-diff,0.);
float r = distance(center+foc1,gl_TexCoord[0].xy) + distance(center+foc2,gl_TexCoord[0].xy);
float alpha = r  - (diff * 2.0) * alphaStep - startAdjustment;
vec4 vColor = vec4(0.,0.,0., innerAlpha + alpha);
gl_FragColor = vColor;
}

但是，我不知道如何在 Android 代码中实现这一点。基本上我认为我需要创建一个矩形，它将覆盖整个视图并在其上应用这种代码生成的纹理。我只是无法弄清楚实际的代码。理想情况下，它应该在 OpenGL ES 2.0 中。

编辑1：

@Tim - 我尝试按照这里的教程进行操作 http://developer.android.com/training/graphics/opengl/draw.html 和这里 http://www.learnopengles.com/android-lesson-one-getting-started/ 我基本上明白了，如何画一个三角形。但我不明白，如何绘制矩形 - 我的意思是我真的需要实际绘制两个三角形还是我可以立即定义矩形（或其他复杂形状）？至于纹理 - 在我见过的所有教程中，纹理实际上是从图像文件中加载的，但我很想知道，我怎样才能真正使用上面的像素着色器生成一个。

【问题讨论】：

您是否尝试过任何教程，或者您是否有任何 OpenGL 经验？我认为“我如何在 OpenGL 中绘图”可能有点超出了单个问题的范围。或者，如果您认为您可能很接近，您能否展示您的尝试？
我真的需要画两个三角形还是我可以只定义矩形 是的，如果你想要一个四边形，你需要画两个三角形。这听起来像你试图做太多太快。只需专注于绘制一个纯色的四边形，一旦您了解了基础知识，您就可以逐步添加内容。

标签： android opengl-es-2.0

【解决方案1】：

同时，我找到了答案，如何绘制椭圆形蒙版。

实际上，问题是，我认为 gl_FragCoord 的范围在 0.0 到 1.0 之间，但它们必须以实际像素指定，例如600.0 x 900.0 等。

通过一些小调整（将 vec2 更改为浮点数），我已经能够在 OpenGL 的整个屏幕上绘制漂亮的椭圆形蒙版。这是最终的片段着色器。请注意，您必须在绘制之前指定制服。如果您要尝试此操作，请确保将 uSlope 保持在 0.1 和 2.0 之间以获得有意义的结果。另外，请注意，对于这段特定的代码，uInnerAlpha 必须低于 uOuterAlpha。对于一个典型的小插曲， uInnerAlpha 为 0.0，uOuterAlpha 为 1.0。

precision mediump float;

uniform float uWidth;
uniform float uHeight;
uniform float uSlope;
uniform float uStartAdjustment;
uniform float uEllipseLength;
uniform float uInnerAlpha;
uniform float uOuterAlpha;

void main() {

float gradientLength = uHeight * uSlope;
float alphaStep = uOuterAlpha / gradientLength;
float x1 = (uWidth / 2.0);
float y1 = (uHeight / 2.0) - uEllipseLength;
float x2 = (uWidth / 2.0);
float y2 = (uHeight / 2.0) + uEllipseLength;

float dist1 = sqrt(pow(abs(gl_FragCoord.x - x1), 2.0) + pow(abs(gl_FragCoord.y - y1), 2.0));
float dist2 = sqrt(pow(abs(gl_FragCoord.x - x2), 2.0) + pow(abs(gl_FragCoord.y - y2), 2.0));
float dist = (dist1 + dist2);

float alpha = ((dist - (uEllipseLength * 2.0)) * alphaStep - uStartAdjustment) + uInnerAlpha;
if (alpha > uOuterAlpha) {
    alpha = uOuterAlpha;
}
if (alpha < uInnerAlpha) {
    alpha = uInnerAlpha;
}

vec4 newColor = vec4(1.0, 1.0, 1.0, alpha);

gl_FragColor = newColor;

}

【讨论】：