【The book of Shaders】Shapes

如有需要，请先阅读原文

Rectangle

我制作长方形的思路：用step对x和y轴分别隔断出三个范围：

九个部分

这样我想要的部分是(1,1)，其他部分都会至少有一个0，把这两个乘起来得到1的就是我需要的部分：

1
2
3
4
5


vec3 fun3(float x1,float y1,float x2,float y2,float stx,float sty,vec3 color){
    float a = (step(x1,stx)-step(x2,stx));
    float b = (step(y1,sty)-step(y2,sty));
    return (a*b) * color;
}

尝试创作Piet Mondria的作品：

Piet Mondria - Tableau (1921)

代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


// Author @DorinXL - 2024

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

vec3 fun3(float x1,float y1,float x2,float y2,float stx,float sty,vec3 color){
    float a = (step(x1,stx)-step(x2,stx));
    float b = (step(y1,sty)-step(y2,sty));
    return (a*b) * color;
}

vec3 newColor(vec2 st)
{
	vec3 color = vec3(0.0);
    
    vec3 white = vec3(0.890,0.829,0.719);
    vec3 blue = vec3(0.155,0.382,0.770);    
    vec3 red = vec3(0.810,0.000,0.108);
    vec3 yellow = vec3(0.895,0.673,0.009);

	color += fun3(0.0,0.0,0.2,0.7,st.x,st.y,white);
    color += fun3(0.0,0.75,0.05,0.85,st.x,st.y,red);
    color += fun3(0.0,0.9,0.05,1.0,st.x,st.y,red);
    color += fun3(0.1,0.75,0.2,0.85,st.x,st.y,red);
    color += fun3(0.1,0.9,0.2,1.0,st.x,st.y,red);

    color += fun3(0.25,0.0,0.7,0.1,st.x,st.y,white);
    color += fun3(0.25,0.15,0.7,0.7,st.x,st.y,white);
    color += fun3(0.25,0.75,0.7,.85,st.x,st.y,white);
    color += fun3(0.25,0.9,0.7,1.0,st.x,st.y,white);
    color += fun3(0.75,0.75,0.92,.85,st.x,st.y,white);
    color += fun3(0.75,0.9,0.92,1.0,st.x,st.y,white);
    color += fun3(0.96,0.75,1.0,.85,st.x,st.y,yellow);
    color += fun3(0.96,0.9,1.0,1.0,st.x,st.y,yellow);
    
    color += fun3(0.75,0.15,0.92,0.7,st.x,st.y,white);
    color += fun3(0.97,0.15,1.0,0.7,st.x,st.y,white);
    color += fun3(0.75,0.0,0.92,0.1,st.x,st.y,blue);
    color += fun3(0.97,0.0,1.0,0.1,st.x,st.y,blue);

    return color;
}

void main(){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);
    color += newColor(st);

    gl_FragColor = vec4(color,1.0);
}

最终效果：

最终效果