Shader代码详解 漩涡

漩涡 Shader

受这篇文章启发，故在这里写一个自己的漩涡shader，原文章中详细的解释了漩涡方程是怎样成立的。以及uv空间和实际渲染空间的映射关系。由于原文章的漩涡有一点点小小不足，漩涡的曲率不是均匀分布在各个角度，所以看起来并不是很完美的漩涡，这里我做了一点点扩展，让其更加完美

代码

这里我直接上代码，效果可以在https://www.shadertoy.com/view/Ml2GDR复制粘贴代码可以直接看到
解释也写在下面代码里了

const float PI = 3.14159265;
float nd(float dist){
	return exp(-(dist * dist / (2.))) / (sqrt(2. * PI));
}


void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
	
	// 计算出鼠标uv比例坐标
    vec2 center = iMouse.xy / iResolution.xy;
    
	// 计算出贴图的uv坐标，同时减去鼠标的uv坐标
	// 目的是将鼠标的坐标为uv起始点
    vec2 uv = fragCoord.xy / iResolution.xy - center;
    
    // 这里计算uv点到鼠标点的距离
    // 相乘的是一个x轴 缩放比例 因为实际比例可能不是1比1这里要进行一定程度的缩放
    float dist = length(uv * vec2(iResolution.x / iResolution.y, 1.));
    
    // 这里是影响因子
    float effect_factor = 5.;
    // 由于angle+dist影响曲率，同时也影响半径
    float effect_all = dist * PI * effect_factor;

    float angle = atan(uv.y, uv.x) + effect_all;
    
    // 这里 nd是正太分布函数，目的是为了限制半径
    uv += vec2( nd(effect_all)*cos(angle),
                nd(effect_all)*sin(angle));
	
	// 这里将起始点还给真正的渲染空间
    fragColor = texture(iChannel0,uv + center);
}

效果图

不过这个函数还是稍有不足，因为半径和曲率完全控制在一起了

另一个版本

const float PI = 3.14159265;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	// 半径
    float effectRadius = .1;
    // 曲率
    float effectAngle = 3. * PI;
    
    vec2 center = iMouse.xy / iResolution.xy;
    vec2 uv = fragCoord.xy / iResolution.xy - center;
    
    float len = length(uv * vec2(iResolution.x / iResolution.y, 1.));
    float angle = atan(uv.y, uv.x) + effectAngle * smoothstep(effectRadius, 0., len);
    // 为什么这个uv不进行畸变补正
    // 因为这里实际上是一个trick， 漩涡的uv空间是进行过畸变补正的
    // 但是 非漩涡的uv空间是没有进行过畸变补正的
    // 所以最终显示上 非漩涡空间是没有偏移的
    // 而漩涡区域是有偏移的
    float radius = length(uv);
	
	// 这里为啥是半径乘以一个各自的三角函数就可以
	// 实际上在angle这里有一个smoothstep，这个东西控制了半径
	// effectAngle控制了曲率， 将两者分开。当距离中心点很远时，就是正常的角度
	// 可以直接通过半径乘以三角函数计算出没有扭曲的uv点
	// 小于指定半径时，这个时候 angle = angle + 曲率
	// 不过有一点不足的是中心曲率小，越远曲率越大, 不过在半径小时看不出很大的差别
	uv = vec(radius * cos(angle), radius * sin(angle));
	
    fragColor = texture(iChannel0, uv + center);
}

效果图

其他参考
https://www.shadertoy.com/view/lllGDl
https://www.shadertoy.com/view/Xscyzn