Shadertoy basic teaching 01. Circle drawing (explanation of smoothstep() function)

1、 Link to the original teaching video
2、Shadertoy Website links

---

Edit the pixel shader code on this website , There are two things to understand ：

• The input of the pixel shader is shown in the following figure , These properties can be used directly
  
• function void mainImage(out vec4 fragColor, in vec2 fragCoord)
  • out vec4 fragColor ： The color value of the current pixel output
  • in vec2 fragCoord： In the screen space of the current pixel x,y coordinate

---

1 A circle

1.1 Basic explanation

First , We map the screen space coordinates to the texture coordinate space [0,1]. Can pass Divide by viewport resolution To achieve

    vec2 uv = fragCoord/iResolution.xy;	

For convenience , You can select the origin of the coordinate system (0,0) Move to the center of the screen

	uv -= vec2(0.5, 0.5);

Our viewports are not usually square , such as 800x600 This resolution , therefore x The number of pixels on the axis is greater than y More shafts 200 One of the , And ours x,y The range of coordinate values is [0,1], This will lead to For each pixel ,x The length of the shaft is longer than y Smaller on the shaft . therefore ： On the vertical axis ,(0,0) To (0,3) Yes 3 Pixel , And on the horizontal axis (0,0) To (3,0) Yes 4 Pixel . In this case, draw a circle directly , What you get is an ellipse , Because the pixels on the final display are Square . On vertical axis 3 Pixel , On the horizontal axis 4 Pixel , You must get an ellipse

therefore , You need to turn the pixels in the texture space into squares , Obviously, the horizontal length of each pixel is Width It's not enough. , Therefore, the texture coordinates of the x Component times Viewport aspect ratio

	uv.x *= iResolution.x / iResolution.y;

1.2 smoothstep() Use of built-in functions ( Optional )

Make the boundary of the circle smoother , Let's not talk about the principle , It's simple , You can refer to This article . I didn't search its source code , But its pseudo code is as follows .

It's very common with clamp() The only difference between the two is

• Those outside the boundary do not directly return the boundary value , It is 0 、1
• Values within the bounds do not directly range t Oneself , But a little operation , Make the curve smoother

float smoothstep(float t1, float t2, float t)
{
    
	//  The case of equality in the branch is not written , indifferent , You can put it in any section 
	if (t1 < t2)
	{
    
		if (t < t1)
			return 0;
		else if (t > t1 && t < t2)
			return f(t);	
		else if (t > t2)
			return 1;
	}
	if (t1 > t2)
	{
    
		if (t < t1)
			return 1;
		else if (t > t1 && t < t2)
			return f(t);	
		else if (t > t2)
			return 0;
	}
	if (t1 == t2)
	{
    
		if (t < t1)
			return 0;
		else
			return 1;
	}
	
}

1.3 Complete code

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    
    vec2 uv = fragCoord/iResolution.xy;		
    
    uv -= 0.5;     //  The lower left corner (-0.5,-0.5), Upper right corner (0.5,0.5)
    uv.x *= iResolution.x / iResolution.y; //  Make pixels square ,  The interval has also changed , Don't bother to forget , The obvious x The upper limit of the axis is larger 
    
    float d = length(uv);
    float r = 0.3;
    if (d > r) 
    	c = 1.0; 
    else 
    	c = 0.0;
    fragColor = vec4(vec3(c), 1.0);
}

Result chart , serrate

---

If the smoothstep() Smooth over

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    
    vec2 uv = fragCoord/iResolution.xy;// [0,1]
    
    uv -= 0.5;// [-0.5,0.5]
    uv.x *= iResolution.x / iResolution.y; //  Make pixels square 
    
    float d = length(uv);
    float r = 0.3;
    float c = smoothstep(r, r + .2, d);

    fragColor = vec4(vec3(c), 1.);
}

Is it very slippery

If you change the parameters , You can also achieve a more blurred effect