基于模型的扩散效果(学习`精神小伙`的代码)

基于模型的扩散效果(学习精神小伙的代码)

最终效果:

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);