iphone - 使用 OpenGL ES 在运行时向图像添加鱼眼效果

Question

我的情况是我从服务器接收不同的图像到 iPhone 客户端。

我需要做的是为这些图像添加鱼眼效果。

我的幻觉是我可以构建一个圆顶对象，然后在图像出现时将图像附加到它上面。

如果有人能给我任何正确方向的指示，我将不胜感激。

Answer 1

您是否尝试过查看 Paul Bourke's example code for OpenGL ？我不知道它是否与OpenGL-ES兼容。请注意有关使用“glCopyTexSubImage2D 而不是执行缓慢的 glReadPixels”的反馈。

AFAICT，Paul Bourke 基本上就是按照你所说的做的，创建一个扭曲的网格(你的“圆顶对象”)来放置图像。根据 this question ，这是一个很好的方法。

更新:

或者，由于 iPhone 的 OpenGL-ES 支持着色器(至少在某些版本中)，因此您可以使用 this 等平面扭曲技术获得更好的性能。您只需更改 uv.x 和 uv.y 的公式即可。那么您就不需要担心将图像分解成小多边形网格......您将免费获得单像素分辨率。 :-)

嗯...也许您需要定义您正在寻找哪种“鱼眼”效果。似乎有 more than one 。

另请参阅 this question 。

再次更新:

这是我编写的一些 GLSL 代码，用于在着色器中实现透镜效果。我相信这是一个半球形鱼眼镜头。它在使用 OpenGL ES 的 WebGL 下运行，因此它应该适用于 iPhone。

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 resolution;
uniform vec4 mouse;
uniform sampler2D tex0;

// lens
void main(void)
{
    vec2 p = gl_FragCoord.xy / resolution.xy;
    vec2 m = mouse.xy / resolution.xy;
    float lensSize = 0.4;

    vec2 d = p - m;
    float r = sqrt(dot(d, d)); // distance of pixel from mouse

    vec2 uv;
    if (r >= lensSize) {
        uv = p;
    } else {
        // Thanks to Paul Bourke for these formulas; see
        // http://paulbourke.net/miscellaneous/lenscorrection/
        // and .../lenscorrection/lens.c
        // Choose one formula to uncomment:
        // SQUAREXY:
        // uv = m + vec2(d.x * abs(d.x), d.y * abs(d.y));
        // SQUARER:
        uv = m + d * r; // a.k.a. m + normalize(d) * r * r
        // SINER:
        // uv = m + normalize(d) * sin(r * 3.14159 * 0.5);
        // ASINR:
        // uv = m + normalize(d) * asin(r) / (3.14159 * 0.5);
    }

    vec3 col = texture2D(tex0, vec2(uv.x, -uv.y)).xyz;

    gl_FragColor = vec4(col, 1.0);
}

要对此进行测试，请将其粘贴到支持 WebGL 的浏览器中的 ShaderToy 中。将输入 0 设置为纹理，例如 http://www.iquilezles.org/apps/shadertoy/presets/tex0.jpg 或 http://www.iquilezles.org/apps/shadertoy/presets/tex4.jpg

单击播放按钮，然后在渲染区域上拖动鼠标。镜头以鼠标指针为中心。