shadertoy-Sake shader

参考链接：https://www.shadertoy.com/view/XtVfzd

碗的绘制

1. 蓝白相间的图案

-->sdf距离场函数

float sdf_circle(vec2 p, vec2 o, float r) {
    return length(p - o) - r;
}

float sdf_ring(vec2 p, float r, float lineWidth) {
    float outer = sdf_circle(p, vec2(0, 0), r + 0.5 * lineWidth);
    float inner = sdf_circle(p, vec2(0, 0), r - 0.5 * lineWidth);
    
    return max(-inner, outer);
}

float sdf(vec2 p) {
    return min(sdf_ring(p, 0.75, 0.175), sdf_ring(p, 0.35, 0.175));
}

–>sdf_circle可以用于绘制2d圆

fragColor = vec4(vec3(sdf_circle(pos, vec2(0.0), 0.6) < 0.0 ? 1.0:0.0 ), 1.0);

–>sdf_ring通过两个sdf_circle“差”运算得到环

fragColor = vec4(vec3(sdf_ring(pos, 0.75, 0.175) < 0.0 ? 1.0:0.0 ), 1.0);

–>sdf通过两个sdf_ring“并”运算得到两个环

fragColor = vec4(vec3(sdf(pos) < 0.0 ? 1.0:0.0 ), 1.0);

–>对sdf进行着色，为了使“环”更加真实，以距离场为参量对“环”进行进行边缘处理

vec3 ring_color = vec3(0.1, 0.1, 0.6);
vec3 ring_edge_color = vec3(0.3, 0.6, 0.9);
ring_color = mix(ring_edge_color, ring_color, smoothstep(-0.02, 0.02, -sdf(pos)));

–>间白的渲染

vec3 ring_color = vec3(0.1, 0.1, 0.6);
vec3 ring_edge_color = vec3(0.3, 0.6, 0.9);
ring_color = mix(ring_edge_color, ring_color, smoothstep(-0.02, 0.02, -sdf(pos)));

vec3 cup_color = vec3(0.98, 0.98, 0.98);  
vec3 color = mix(ring_color, cup_color, smoothstep(0.0, 0.02, sdf(pos)));
fragColor = vec4(color, 1.0);

2. 碗

–>碗沿渲染（碗内部的截取）

vec3 ring_color = vec3(0.1, 0.1, 0.6);
vec3 ring_edge_color = vec3(0.3, 0.6, 0.9);
ring_color = mix(ring_edge_color, ring_color, smoothstep(-0.02, 0.02, -sdf(pos)));

vec3 cup_color = vec3(0.98, 0.98, 0.98);  
vec3 color = mix(ring_color, cup_color, smoothstep(0.0, 0.02, sdf(pos)));

//碗沿
color = mix(color, cup_color * 0.6, smoothstep(0.86, 0.87, length(pos)));
fragColor = vec4(color, 1.0);

–>碗“厚度”渲染

vec3 ring_color = vec3(0.1, 0.1, 0.6);
vec3 ring_edge_color = vec3(0.3, 0.6, 0.9);
ring_color = mix(ring_edge_color, ring_color, smoothstep(-0.02, 0.02, -sdf(pos)));

vec3 cup_color = vec3(0.98, 0.98, 0.98);  
vec3 color = mix(ring_color, cup_color, smoothstep(0.0, 0.02, sdf(pos)));

//碗沿
color = mix(color, cup_color * 0.6, smoothstep(0.86, 0.87, length(pos)));
//“碗的厚度”
color = mix(color, cup_color * 0.1, smoothstep(0.91, 0.92, length(pos)));

fragColor = vec4(color, 1.0);

–>垂直点光源衰减近似模拟

vec3 ring_color = vec3(0.1, 0.1, 0.6);
vec3 ring_edge_color = vec3(0.3, 0.6, 0.9);
ring_color = mix(ring_edge_color, ring_color, smoothstep(-0.02, 0.02, -sdf(pos)));

vec3 cup_color = vec3(0.98, 0.98, 0.98);  
vec3 color = mix(ring_color, cup_color, smoothstep(0.0, 0.02, sdf(pos)));

//碗沿
color = mix(color, cup_color * 0.6, smoothstep(0.86, 0.87, length(pos)));
//“碗的厚度”
color = mix(color, cup_color * 0.1, smoothstep(0.91, 0.92, length(pos)));
//垂直点光源衰减近似模拟
color *= 1.0 - 0.5 * length(uv) * length(uv);

fragColor = vec4(color, 1.0);