2D SDF(1): Basis and Circle - OhBonsai/art GitHub Wiki

How Computer Drawing

At the end of the 19th century, a genre named Pointillism appeared in European painting. This style emphasized the separation of picture colors. Pure colors were applied to canvas in the form of small dots, which produced detailed hue under the visual mix.

the painting method of this genre is computer painting. The screen consists of pixel points, which can use a coordinate. ( x , y ), For example, this point has several pixels from the upper edge of the screen and several pixels from the left edge of the screen. In computer drawing, this coordinate is generally used for habitual reasons. ( u , v ) to indicate. Each dot can display a different color. Red, green, blue different proportions of can be combined with any color, so any color can be used ( r , g , b ) to indicate. So if we want the computer to draw a picture, we need to tell the computer where to draw a color. The so-called graphic program is a function $color=f(position)$ location ( u , v ) is a self-scalar, color ( r , g , b) is dependent Variable

Languages and Tools

Engineers communicate with computers through different programming languages to let computers handle work. The text of different programming languages is a program.

  • Shader is a program that tells computers how to draw pictures. shader it runs on a graphics processing unit (GPU) and is responsible for rendering graphics and special effects. shader it is mainly used for lighting, shadow, color and other effects of computer graphics. They are an indispensable part of modern graphics rendering pipelines. With the development of graphics processing hardware, shaders have become more and more powerful, allowing developers to achieve complex and realistic visual effects.
  • ShaderToy is a Shader online platform, specially designed for graphic programming enthusiasts, artists and developers. It allows users to create, share, and learn shaders. ShaderToy provides a unique environment where you can write shaders online and view their graphic effects in real time. This is very useful for learning graphic programming, experimenting with new visual effects and exploring the application of mathematics and algorithms in visual arts.
  • GeoGebra is a multifunctional mathematical software , specially designed for learning and teaching mathematics, covering everything from junior high school mathematics to university level. It combines geometry, algebra, tables, graphic drawing, statistics, calculus and other mathematical functions.

These are all the tools I used in the whole exploration process. , I will using ShaderToy write GLSL, use Geobebra to understand Shader . The following figure shows GeoGebra indicates the display screen.

Draw a rectangle

If you want to draw a rectangle, how to express this function? $color=f(position)$. This rectangle takes the origin of the coordinate system as the center point, And Length=1.2 Width=0.8 like below

A very simple idea is that when x is at [-0.4, 0.4] and y is at [-0.6, 0.6], the color is painted black, and the others are all turned white. Try to turn this idea into a function.

# current poisition
position = [x, y]

# draw function
if -0.6 < position.x < 0.6 and -0.4 < position.y < 0.4:
    draw(black)
else
    draw(white)

And It is very similar to write in glsl

#define WHITE vec3(1.0)
#define BLACK vec3(0.0)

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{	
    // convert screen to [-1, 1] coordinate
    vec2 point = (2.0*fragCoord-iResolution.xy)/iResolution.y;
    if ( point.x < 0.6 && 
         point.x > -0.6 && 
         point.y < 0.4 && 
         point.y > -0.4) {  
        fragColor = vec4(BLACK,1.0);
    } else {
        fragColor = vec4(WHITE, 1.0);
    }
}

Draw a circle

If you want to draw a rectangle, how to express this function? $color=f(position)$. This circle takes the origin of the coordinate system as the center point and raidus=0.5

A very simple idea is that when position **distance **if the center point is less than 0.5, draw black; Otherwise, draw White

# current poisition
position = [x, y]
center = [0, 0]
distance = distance(position, center)

# draw function
if distance < 0.5:
    draw(BLACK)
else:
    draw(WHITE)

Distance From Edge

the distance calculated in the previous part is the distance from the center. What if the target becomes the edge of the circle?

If we use the distance from the edge as the color, the closer to the edge, the darker. You will get the blow picture

    float radius = 0.8;
    float dist = abs(length(point) - radius);
    
    float grayColor = floor(dist * 20.0) / 20.0;
    fragColor = vec4(vec3(grayColor), 0.);

What is SDF

This leads to the concept of the title of this article. 2D SDF(Signed Distance Field) refers to a two-dimensional Signed Distance Field. SDF is a technique of computational geometry, which is used to represent the shortest distance between points and surfaces in a shape or scene, where "signed" means that the distance can be positive or negative. Positive numbers indicate that the point is outside the shape, negative numbers indicate that the point is inside the shape, and zero usually refers to the boundary of the shape. SDF is a function defined at every point in two-dimensional space and is often used to quickly and easily represent complex shapes and scenes, especially in graphics and physical simulation. In two-dimensional space, SDF can describe the edges, inside and outside of lines, curves, polygons, etc. SDF has the following advantages

  • simplified operation : SDF can make collision detection, light projection, and shape merging simple.
  • rendering efficiency : in graphics rendering, SDF can be used to quickly render high-quality smooth edges, especially in text rendering and vector graphics.
  • easy to deform and combine : SDF can easily implement shape deformation and Boolean operations between different shapes (such as intersection, union, and difference sets)