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

腾讯IVWEB团队

发布于 2020-06-24 11:05:05

2910

发布于 2020-06-24 11:05:05

文章被收录于专栏：腾讯IVWEB团队的专栏

DEMO

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

心得

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

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

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

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

抽象绘制十字架的逻辑

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

return