<p>The typical solution is to compute a bounding structure using triangles that would be transformed by the vertex shader. The bounding structure is computed to be large enough to fit the entire curve that will be drawn inside of it. It can be anything from a simple quad to a tightly fitted polygon.</p>
<p>The fragment shader then does the work of deciding which fragments get colored by figuring out if a fragment lies in the area shaded by the curve. If a fragment isn't shaded then either the fragment is discarded, it is set to some background color, or it's alpha value is set to be fully transparent depending on programs needs. And of course if it is shaded the color is set to the curve color.</p>
<p>Normally the computations are done in object space to help simplify some of the logic/computations in the fragment shader.</p>
<p>There are a variety of approach's used to determine if a fragment should be discarded or not for Bezier curves. Such as computing the winding of each curve segment and determining which side of the winding the fragment falls on. Usually the winding is reduced to having a positive and a negative side. If a fragment falls on the positive side of every curve it is kept, otherwise it is discarded.</p>
<p>BTW this is a <em>very</em> general description of how fonts can be drawn directly from font outlines.</p>
<p>The reason you don't find a lot of information about this on the web is because it generally falls under more advanced techniques, there have also been attempts to create generalized algorithms that have several aliasing problems resulting from numerical instability.</p>

CC BY-SA 4.0
2022-01-02T03:33:38.430Z
_"...by figuring out if a fragment lies in the area shaded by the curve"_ Thanks for the answer, would you please point the equation for that statement?
Thor-x86_128
CC BY-SA 4.0
2022-01-01T20:30:56.857Z
2022-01-01T20:30:56.857Z
pmw1234
<p>As an information, Vulkan is a low-level abstraction layer thru modern GPU. It allows programmers to program the GPU and assemble <a href="https://vulkan-tutorial.com/Drawing_a_triangle/Graphics_pipeline_basics/Introduction" rel="nofollow noreferrer">rendering pipeline</a>. On that pipeline, there are modules of program which are called &quot;shaders&quot;. As a programmer, we only have control on programmable shaders, not fixed shaders. For simplicity, let's only use two types of programmable shaders:</p>
<ol>
<li><p>Vertex Shader</p>
<p>A program for calculating geometric transformation for each point. Every 3 points always represent a triangle, but can be configured to be 3 lines or 3 dots.</p>
</li>
<li><p>Fragment Shader</p>
<p>This is per-pixel program to calculate color for each pixel on that triangles (or lines).</p>
</li>
</ol>
<p>From those shaders, I would like to implement <a href="https://www.tutorialspoint.com/computer_graphics/computer_graphics_curves.htm" rel="nofollow noreferrer">bezier curve</a> (for shape) and <a href="https://www.tutorialspoint.com/computer_graphics/polygon_filling_algorithm.htm" rel="nofollow noreferrer">scanline algorithm</a> for fill color, rendered with GPU. The planned result would be like this.</p>
<p><a href="https://i.sstatic.net/CwOhU.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/CwOhU.png" alt="Heart shape drawn with bezier and scanline" /></a></p>
<h2>The Problem</h2>
<ol>
<li>To draw Bezier lines, pixel position must be set. Whereas in fragment shader, the pixel position <a href="https://stackoverflow.com/a/17945094/3730834">cannot be set by programmer</a> because  GPU already set the position.</li>
<li>As far as I know, generating curved lines is not possible by only set control points as vertices. Any workaround for this problem?</li>
<li>Even if the bezier can be drawn by GPU, how do I implement scanline algorithm for adding fill color with fragment shader?</li>
</ol>
<p><strong>NOTE:</strong> I already explored learning resources via internet. However, none of them actually talks about bezier curve + scanline algorithm implementation with Vulkan. Perhaps I missed something? Please let me know</p>

<gpu><vulkan><2d-graphics><bezier-curve><scanline>
Is drawing Bezier curve with scanline algorithm possible with Vulkan?
Thor-x86_128
# Is drawing Bezier curve with scanline algorithm possible with Vulkan?

(Asked by: username_0 on 2022-01-01)

As an information, Vulkan is a low-level abstraction layer thru modern GPU. It allows programmers to program the GPU and assemble [rendering pipeline](https://vulkan-tutorial.com/Drawing_a_triangle/Graphics_pipeline_basics/Introduction). On that pipeline, there are modules of program which are called "shaders". As a programmer, we only have control on programmable shaders, not fixed shaders. For simplicity, let's only use two types of programmable shaders:

1. Vertex Shader

   A program for calculating geometric transformation for each point. Every 3 points always represent a triangle, but can be configured to be 3 lines or 3 dots.
2. Fragment Shader

   This is per-pixel program to calculate color for each pixel on that triangles (or lines).

From those shaders, I would like to implement [bezier curve](https://www.tutorialspoint.com/computer_graphics/computer_graphics_curves.htm) (for shape) and [scanline algorithm](https://www.tutorialspoint.com/computer_graphics/polygon_filling_algorithm.htm) for fill color, rendered with GPU. The planned result would be like this.

[![Heart shape drawn with bezier and scanline](https://i.sstatic.net/CwOhU.png)](https://i.sstatic.net/CwOhU.png)

## The Problem

1. To draw Bezier lines, pixel position must be set. Whereas in fragment shader, the pixel position [cannot be set by programmer](https://stackoverflow.com/a/17945094/3730834) because GPU already set the position.
2. As far as I know, generating curved lines is not possible by only set control points as vertices. Any workaround for this problem?
3. Even if the bezier can be drawn by GPU, how do I implement scanline algorithm for adding fill color with fragment shader?

**NOTE:** I already explored learning resources via internet. However, none of them actually talks about bezier curve + scanline algorithm implementation with Vulkan. Perhaps I missed something? Please let me know

**Tags:** gpu, vulkan, 2d-graphics, bezier-curve, scanline


---

## 1 answers

### Answer by username_1 on 2022-01-01. Score: 1 | Accepted answer

The typical solution is to compute a bounding structure using triangles that would be transformed by the vertex shader. The bounding structure is computed to be large enough to fit the entire curve that will be drawn inside of it. It can be anything from a simple quad to a tightly fitted polygon.

The fragment shader then does the work of deciding which fragments get colored by figuring out if a fragment lies in the area shaded by the curve. If a fragment isn't shaded then either the fragment is discarded, it is set to some background color, or it's alpha value is set to be fully transparent depending on programs needs. And of course if it is shaded the color is set to the curve color.

Normally the computations are done in object space to help simplify some of the logic/computations in the fragment shader.

There are a variety of approach's used to determine if a fragment should be discarded or not for Bezier curves. Such as computing the winding of each curve segment and determining which side of the winding the fragment falls on. Usually the winding is reduced to having a positive and a negative side. If a fragment falls on the positive side of every curve it is kept, otherwise it is discarded.

BTW this is a *very* general description of how fonts can be drawn directly from font outlines.

The reason you don't find a lot of information about this on the web is because it generally falls under more advanced techniques, there have also been attempts to create generalized algorithms that have several aliasing problems resulting from numerical instability.

> **Comments:**
> **username_0**: _"...by figuring out if a fragment lies in the area shaded by the curve"_ Thanks for the answer, would you please point the equation for that statement?  

---

