Shader-Part 2 笑脸

效果

过程

将画圆整合成函数，根据uv进行位置偏移

float Circle(vec2 uv, vec2 p, float r, float blur) {
	float d = length(uv - p);
	float c = smoothstep(r, r - blur, d);
	return c;
}

 两个眼睛，作差，在圆中扣除两个小圆

float c = Circle(uv, vec2(.0, .0), .4, .05);// 大圆

c -= Circle(uv, vec2(-.15, .1), .1, .05); // 两个眼睛
c -= Circle(uv, vec2(.15, .1), .1, .05);

半月，注意clamp函数

float mooth = Circle(uv, vec2(.0, .0), .24, .05); // 半月为两个圆相减
mooth -= Circle(uv, vec2(.0, .1), .3, .05);

mooth = clamp(mooth, 0.0, 1.0);
c -= mooth;

不用clamp函数会出现这种情况 ，负数的区域通过减法放大了

代码-shadertoy/Godot

#GDScript
extends ColorRect
func _ready():
	material.set_shader_parameter("resolution", Vector2($".".size))
	print($".".size)

#Shader
shader_type canvas_item;

uniform vec2 resolution; // 用于存储画布分辨率
uniform vec3 vec_col : source_color = vec3(0.4,0.6,0.8);

float Circle(vec2 uv,vec2 p,float r ,float blur){
	float d = length(uv - p);
	float c = smoothstep(r,r-blur,d);
	return c;
}

void fragment() {
	vec2 uv = UV - 0.5;
	uv.x *= resolution.x / resolution.y;
	float c = Circle(uv,vec2(0.0,0.0),0.4,0.05);
	c -= Circle(uv, vec2(-.15, .1), .1, .05);
	c -= Circle(uv, vec2(.15, .1), .1, .05);

	float mooth = Circle(uv, vec2(.0, .0), .24, .05);
	mooth -= Circle(uv, vec2(.0, .1), .3, .05);

	mooth = clamp(mooth, 0.0, 1.0);
	c -= mooth;
	vec3 col = vec_col*c;
	COLOR = vec4(col,1.0);
}