基于模型的扩散效果(学习精神小伙
的代码)
最终效果:
shadertoy:
// 应用: 基于模型的扩散效果
#define PI 3.1415926
float lerp (float x,float y,float t ) {
return ( 1.0 - t ) * x + t * y;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// 当前像素的位置
vec2 uv = (fragCoord.xy/iResolution.xy-0.5);
// 圆环扩散的速度
const float u_speed = .05;
// 扩散的最大半径
const float u_radius = 0.5;
// 圆环的宽度
const float u_width = 0.08;
// 圆环内的颜色
const vec3 hightColor = vec3(1.,0.,0.);
// 圆环外的颜色
const vec3 baseColor = vec3(.3,.3,.3);
vec3 vColor;
float u_time = u_speed * iTime;
// rangeLen: 0~u_radius之间周期变化
float rangeLen = mod(u_time, u_radius);
// 当前像素点到中心(0,0)的距离
float distance = length(uv);
// 满足在圆环内部的像素,高亮着色
if ( distance> rangeLen && distance < rangeLen + u_width) {
// 占整个圆环宽度的百分比
float i = (distance-rangeLen) / u_width;
// 过渡更平滑一些,圆环两边模糊,中间清楚
float d = sin(i*PI);
// 线性差值
float r = lerp(baseColor.r, hightColor.r, d);
float g = lerp(baseColor.g, hightColor.g, d);
float b = lerp(baseColor.b, hightColor.b, d);
vColor = vec3(r, g, b);
} else {
// 圆环外部的点,正常颜色着色
vColor = baseColor;
}
fragColor = vec4(vColor,1.);
}
绘图模型:
关键步骤解释:
float d = sin(i*PI);
取sin:
效果:
实际应用
把距离换成是模型的相对距离在顶点着色器中传过来就行.
顶点:
varying vec3 v_position;
void main() {
v_position = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
片元:
vec2 curr = vec2(v_position.x, v_position.z);
float distance = distanceTo(vec2(0.0, 0.0), curr);