使用OpenGL ES在运行时为图像添加鱼眼效果 [英] Add Fisheye effect to images at runtime using OpenGL ES

问题描述

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

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

我的幻觉是，我可以建立一个圆顶物体，然后在图像附加到它上面。

<如果有人可以给我任何指向正确方向的指示，我会很感激。

Paul Bourke的OpenGL代码示例？我不知道它是否与OpenGL-ES兼容。注意关于使用glCopyTexSubImage2D而不是慢速glReadPixels的反馈。

AFAICT，Paul Bourke基本上按照您的说法做了，创建了一个扭曲的网格（您的圆顶对象）打下形象。
根据这个问题，这就是一个很好的方法。

更新：

或者，由于iPhone的OpenGL-ES支持着色器（至少在某些版本中），使用平面变形技术（如这个。您只需要更改 uv.x 和 uv.y 的公式。那么你不需要担心将图像分解成小多边形网格......你可以免费获得单像素分辨率。 ： - ）

嗯......也许你需要定义你正在寻找什么样的鱼眼效果。似乎有不止一个。

另请参阅此问题。

再次更新：

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

  #ifdef GL_ES 
 precision高浮动; 
 #endif 
 
统一的vec2分辨率; 
统一的vec4鼠标; 
 uniform sampler2D tex0; 
 
 //镜头
 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））; //从鼠标到像素的距离
 
 vec2 uv; 
 if（r> = lensSize）{
 uv = p; 
} else {
 //感谢Paul Bourke提供这些公式;请参阅
 // http://paulbourke.net/miscellaneous/lenscorrection/ 
 //和... / lenscorrection / lens.c 
 //选择一个公式以取消注释：
 // SQUAREXY：
 // uv = m + vec2（dx * abs（dx），dy * abs（dy））; 
 // 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）; 
} 
  

要测试它，请将其粘贴到 ShaderToy 。将输入0设置为像 http://www.iquilezles.org/apps /shadertoy/presets/tex0.jpg 或 http：// www .quilezles.org / apps / shadertoy / presets / tex4.jpg

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

my situation is that i receive different images from the server onto the iPhone client.

what i need to do is to add a Fisheye effect to those images.

what my hallucination is that i can build a dome object, then attach images to it as they come to me.

if anyone can give me any pointers to the right direction i'll be thankful.

解决方案

Have you tried looking at Paul Bourke's example code for OpenGL? I don't know if it's compatible with OpenGL-ES. Note the feedback about using "glCopyTexSubImage2D instead of doing a slow glReadPixels".

AFAICT, Paul Bourke is doing essentially what you said, creating a distorted grid (your "dome object") to lay the image on. According to this question, that's a good approach.

Updated:

Or, since iPhone's OpenGL-ES supports shaders (at least in some versions), you could get better performance using a plane distortion technique like this. You'd just have to change the formulas for uv.x and uv.y. Then you wouldn't need to be concerned about breaking up the image into a grid of small polygons... you'd have single-pixel resolution for free. :-)

Hm... maybe you need to define what kind of "fisheye" effect you are looking for. Seems there is more than one.

See also this question.

Updated again:

Here is some GLSL code I wrote to do a lens effect in a shader. I believe it's a hemispherical fisheye lens. It runs under WebGL, which uses OpenGL ES, so it should be adaptable for 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);
}

To test this, paste it into ShaderToy in a WebGL-enabled browser. Set input 0 to a texture like http://www.iquilezles.org/apps/shadertoy/presets/tex0.jpg or http://www.iquilezles.org/apps/shadertoy/presets/tex4.jpg

Click the play button, and drag the mouse around on the rendering area. The lens is centered on the mouse pointer.

这篇关于使用OpenGL ES在运行时为图像添加鱼眼效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！