使用GLSL 绘制程序员的格子衫

DEMO

https://codepen.io/numerhero/pen/WmLexj

心得

1. 为了绘制浅色调得黑色，我学习到了 rgba 转化 成rgb 的算法

代码语言：javascript复制

vec3 rgba2rgb (vec4 source, vec3 bgColor) {
vec3 result = vec3(0.);

result.r = ((1. - source.a) * bgColor.r)   (source.a * source.r);
result.g = ((1. - source.a) * bgColor.g)   (source.a * source.g);
result.b = ((1. - source.a) * bgColor.b)   (source.a * source.b);

return result;
}

1. 对于图案的绘制，首先要先绘制一个，再使用 tile 复制多个，tile 函数很强大,它允许将画布分割成多个小格，并将小格区间return

代码语言：javascript复制

vec2 tile (vec2 _st, float _zoom) {
	_st *= _zoom;
	return fract(_st);
}

1. 抽象绘制十字架的逻辑

代码语言：javascript复制

float rect (vec2 st, float t, float r, float b, float l) {
	vec3 color_default = vec3(1.);
	float pct = step(t, 1. - st.y) * step(r, 1.0 - st.x) * step(b, st.y) * step(l, st.x);
	return pct;
}

float cross (vec2 st, vec2 offset, vec2 lineThickness) {
	return rect(st, 0., 1. - offset.x - lineThickness.x , 0., offset.x)  
	rect(st, 1. - offset.y - lineThickness.y, 0., offset.y ,0.);
}

return rgb 函数 算法

0 人点赞