鱼眼扭曲鼠标位置-片段着色器

问题描述

我试图创建鱼眼效果，但只能在鼠标位置周围的小半径范围内。我已经能够修改this code来处理鼠标位置（demo），但是我无法弄清楚缩放的来源。我期望输出与此类似地扭曲图像（出于这个问题，忽略颜色反转）：

相关代码：

// Check if within given radius of the mouse
vec2 diff = myUV - u_mouse - 0.5;
float distance = dot(diff,diff); // square of distance,saves a square-root

// Add fish-eye 
if(distance <= u_radius_squared) {
  vec2 xy = 2.0 * (myUV - u_mouse) - 1.0;
  float d = length(xy * maxFactor);
  float z = sqrt(1.0 - d * d);
  float r = atan(d,z) / PI;
  float phi = atan(xy.y,xy.x);
    
  myUV.x = d * r * cos(phi) + 0.5 + u_mouse.x;
  myUV.y = d * r * sin(phi) + 0.5 + u_mouse.y;
}

vec3 tex = texture2D(tMap,myUV).rgb;

gl_FragColor.rgb = tex;

这是我的第一个着色器，因此除了解决此问题外，还欢迎进行其他改进。

解决方法

计算从当前片段到鼠标的向量以及向量的长度：

vec2 diff = myUV - u_mouse;
float distance = length(diff);

新的纹理坐标是鼠标位置和缩放方向矢量的和：

myUV = u_mouse + normalize(diff) * u_radius * f(distance/u_radius);

例如：

uniform float u_radius;
uniform vec2 u_mouse;

void main()
{
    vec2 diff = myUV - u_mouse;
    float distance = length(diff);

    if (distance <= u_radius)
    {
        float scale = (1.0 - cos(distance/u_radius * PI * 0.5));
        myUV = u_mouse + normalize(diff) * u_radius * scale;
    }

    vec3 tex = texture2D(tMap,myUV).rgb;
    gl_FragColor = vec4(tex,1.0);
}