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