plunkerでshadertoy sandbox その27

概要

plunkerでshadertoyのglsl動かしてみた。
TUTORIAL、やってみる。

TUTORIAL 18

ANTI-ALIASING WITH SMOOTHSTEP

float linearstep(float edge0, float edge1, float x) {
	float t = (x - edge0) / (edge1 - edge0);
	return clamp(t, 0.0, 1.0);
}
float smootherstep(float edge0, float edge1, float x) {
	float t = (x - edge0) / (edge1 - edge0);
	float t1 = t * t * t * (t * (t * 6. - 15.) + 10.);
	return clamp(t1, 0.0, 1.0);
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
	vec2 r = 2.0 * vec2(fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
	float xMax = iResolution.x / iResolution.y;
	vec3 bgCol = vec3(0.3);
	vec3 col1 = vec3(0.216, 0.471, 0.698);
	vec3 col2 = vec3(1.00, 0.329, 0.298);
	vec3 col3 = vec3(0.867, 0.910, 0.247);
	vec3 pixel = bgCol;
	float m;
	float radius = 0.4;
	if (r.x < -0.5 * xMax)
	{
		m = step( radius, length(r - vec2(-0.5 * xMax - 0.4, 0.0)));
		pixel = mix(col1, bgCol, m);
	}
	else if (r.x < -0.0 * xMax)
	{
		m = linearstep(radius - 0.005, radius + 0.005, length(r - vec2(-0.0 * xMax - 0.4, 0.0)));
		pixel = mix(col1, bgCol, m);
	}
	else if (r.x < 0.5 * xMax)
	{
		m = smoothstep(radius - 0.005, radius + 0.005, length(r - vec2(0.5 * xMax - 0.4, 0.0)));
		pixel = mix(col1, bgCol, m);
	}
	else if (r.x < 1.0 * xMax)
	{
		m = smootherstep(radius - 0.005, radius + 0.005, length(r - vec2(1.0 * xMax - 0.4, 0.0)));
		pixel = mix(col1, bgCol, m);
	}
	fragColor = vec4(pixel, 1.0);
}

写真

成果物

以上。