<p>Picking up from step 2, where you generated line segments to represent individual stitches, I would first suggest that you apply rounded ends to each segment, rather than square ends.</p>

<p>I would then convert each segment to an <strong>outline</strong>, (i.e. each rounded stitch becomes an separate poly-line representing the outer boundary.)</p>

<p>For example, suppose you start with point A &amp; point B, representing a single stitch in line segment form. We can derive the rounded outline of this segment with the following Javascript code using <strong>THREE.js</strong>:</p>

<pre><code>    function outlineSegment (Ax, Ay, Bx, By, radius){
        var radius = radius || 0.5; //millimeters?
        var A = new THREE.Vector2(Ax, Ay);
        var B = new THREE.Vector2(Bx, By);
        var C = B.clone().sub(A).normalize().multiplyScalar(radius);
        var angle = C.angle();
        var outline = new THREE.Shape();
        outline.moveTo( B.x + C.y, B.y - C.x );
        outline.absarc(B.x, B.y, radius, angle-Math.PI/2, angle+Math.PI/2);
        outline.lineTo(A.x - C.y, A.y + C.x);
        outline.absarc(A.x, A.y, radius, angle+Math.PI/2, angle+Math.PI*3/2);
        outline.autoClose = true;
        return new THREE.ShapeGeometry(outline);
    }
</code></pre>

<p>The above function finishes by <strong>triangulating</strong> the polyline into faces, (See the orange area in the included picture.)</p>

<p>Next, send these faces to be rendered by the <strong>GPU</strong>, applying a <strong>vertex shader</strong> which sets a <strong><em>vec2</strong> varying variable</em> (sounds redundant, but it's not) indicating the vertex position relative to the original line segment (which we have included as <em>vertex attributes</em>) </p>

<p>Now, we move on to the <strong>fragment shader</strong>, where we use the varying variable created in the vertex shader to derive a <strong>normal</strong>.</p>

<p>Let's say that "linePos" is the position along the line segment, (i.e. the x-value, if the line is horizontal. y-value if it is vertical, etc.) </p>

<p>Furthermore, let's say "lineDist" is the distance from the central line segment, e.g. -2 if it's 2 units to the left of the line (purple arrows) or +5 if it's on the right (blue arrows).</p>

<p>We can use these two values, derived from the varying variable, to create a normal for the point on the thread. </p>

<p>A bit of this code might be:</p>

<pre><code>abs(sin(linePos+lineDist))
</code></pre>

<p>but there's a fair bit more than that to write.
I can't go through and write the entire program for you here &amp; now, but hopefully these ideas &amp; diagram will shine some light in the right direction.</p>

<p>Best of luck.</p>

<p><a href="https://i.sstatic.net/0nXwY.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/0nXwY.png" alt="embroidery geometry diagram"></a></p>

CC BY-SA 4.0
2018-10-19T19:42:02.563Z
2018-10-20T16:06:47.707Z
2018-10-20T16:06:47.707Z
Jack
<p>I am building an algorithm which takes a bitmap image as input and render the image as an embroidery design. </p>

<p>The different steps are : </p>

<ul>
<li>Vectorize the image, I keep only 5 colors  (Done) </li>
<li>Generate
stitches lines (Done) </li>
<li>Apply wire embroidery texture to the lines,
add lights and show a realistic rendering ( It's this step that I am
having trouble with)</li>
</ul>

<p>Let's take an example.
The original image is : </p>

<p><img src="https://i.sstatic.net/ETD2t.png" alt="Original image"></p>

<p>From there, I vectorize the image and obtain an SVG file.</p>

<p>After that, I generate stitches lines automatically which you can find here (svg file): <a href="https://www.dropbox.com/s/jmi6rz1ixgkjjpb/flowers_fill_0.7_vLongShort_space_randomLength.svg?dl=0" rel="nofollow noreferrer">https://www.dropbox.com/s/jmi6rz1ixgkjjpb/flowers_fill_0.7_vLongShort_space_randomLength.svg?dl=0</a></p>

<p>When you zoom in, it looks like this : </p>

<p><img src="https://i.sstatic.net/MwAwL.png" alt="stitches"></p>

<p>If I export the svg as png, I get : </p>

<p><img src="https://i.sstatic.net/QdxRV.png" alt="ExportPng"></p>

<p>As you can see; having this result is not enough to render realistically the embroidery design. </p>

<p>I am looking to have a texture more like this : </p>

<p><img src="https://s3.amazonaws.com/threadsmagazine.s3.tauntoncloud.com/app/uploads/4411/86/11133110/86-machine-embroidery-03.jpg" alt="Real"></p>

<p>I tried generating a normal map and the use it adds some depth, but again, the result looks very plastic ... : </p>

<p><img src="https://i.sstatic.net/IZSit.png" alt="Rendering with normal map"></p>

<p>I don't know what I should do now to have a realistic rendering ...
At first, it wasn't supposed to be a computer graphic problem so I am not a specialist in the area, but I think using webgl or opengl is the best choice. </p>

<p>However, I don't know how to give the rights textures to the lines ...</p>

<opengl><rendering><texture><2d-graphics><three.js>
How to apply wire texture for realistic rendering of embroidery?
pensfute
# How to apply wire texture for realistic rendering of embroidery?

(Asked by: username_0 on 2018-10-16)

I am building an algorithm which takes a bitmap image as input and render the image as an embroidery design.

The different steps are :

* Vectorize the image, I keep only 5 colors (Done)
* Generate
  stitches lines (Done)
* Apply wire embroidery texture to the lines,
  add lights and show a realistic rendering ( It's this step that I am
  having trouble with)

Let's take an example.
The original image is :

![Original image](https://i.sstatic.net/ETD2t.png)

From there, I vectorize the image and obtain an SVG file.

After that, I generate stitches lines automatically which you can find here (svg file): <https://www.dropbox.com/s/jmi6rz1ixgkjjpb/flowers_fill_0.7_vLongShort_space_randomLength.svg?dl=0>

When you zoom in, it looks like this :

![stitches](https://i.sstatic.net/MwAwL.png)

If I export the svg as png, I get :

![ExportPng](https://i.sstatic.net/QdxRV.png)

As you can see; having this result is not enough to render realistically the embroidery design.

I am looking to have a texture more like this :

![Real](https://s3.amazonaws.com/threadsmagazine.s3.tauntoncloud.com/app/uploads/4411/86/11133110/86-machine-embroidery-03.jpg)

I tried generating a normal map and the use it adds some depth, but again, the result looks very plastic ... :

![Rendering with normal map](https://i.sstatic.net/IZSit.png)

I don't know what I should do now to have a realistic rendering ...
At first, it wasn't supposed to be a computer graphic problem so I am not a specialist in the area, but I think using webgl or opengl is the best choice.

However, I don't know how to give the rights textures to the lines ...

**Tags:** opengl, rendering, texture, 2d-graphics, three.js


---

## 1 answers

### Answer by username_1 on 2018-10-19. Score: 2

Picking up from step 2, where you generated line segments to represent individual stitches, I would first suggest that you apply rounded ends to each segment, rather than square ends.

I would then convert each segment to an **outline**, (i.e. each rounded stitch becomes an separate poly-line representing the outer boundary.)

For example, suppose you start with point A & point B, representing a single stitch in line segment form. We can derive the rounded outline of this segment with the following Javascript code using **THREE.js**:

```
    function outlineSegment (Ax, Ay, Bx, By, radius){
        var radius = radius || 0.5; //millimeters?
        var A = new THREE.Vector2(Ax, Ay);
        var B = new THREE.Vector2(Bx, By);
        var C = B.clone().sub(A).normalize().multiplyScalar(radius);
        var angle = C.angle();
        var outline = new THREE.Shape();
        outline.moveTo( B.x + C.y, B.y - C.x );
        outline.absarc(B.x, B.y, radius, angle-Math.PI/2, angle+Math.PI/2);
        outline.lineTo(A.x - C.y, A.y + C.x);
        outline.absarc(A.x, A.y, radius, angle+Math.PI/2, angle+Math.PI*3/2);
        outline.autoClose = true;
        return new THREE.ShapeGeometry(outline);
    }

```

The above function finishes by **triangulating** the polyline into faces, (See the orange area in the included picture.)

Next, send these faces to be rendered by the **GPU**, applying a **vertex shader** which sets a ***vec2*** varying variable (sounds redundant, but it's not) indicating the vertex position relative to the original line segment (which we have included as *vertex attributes*)

Now, we move on to the **fragment shader**, where we use the varying variable created in the vertex shader to derive a **normal**.

Let's say that "linePos" is the position along the line segment, (i.e. the x-value, if the line is horizontal. y-value if it is vertical, etc.)

Furthermore, let's say "lineDist" is the distance from the central line segment, e.g. -2 if it's 2 units to the left of the line (purple arrows) or +5 if it's on the right (blue arrows).

We can use these two values, derived from the varying variable, to create a normal for the point on the thread.

A bit of this code might be:

```
abs(sin(linePos+lineDist))

```

but there's a fair bit more than that to write.
I can't go through and write the entire program for you here & now, but hopefully these ideas & diagram will shine some light in the right direction.

Best of luck.

[![embroidery geometry diagram](https://i.sstatic.net/0nXwY.png)](https://i.sstatic.net/0nXwY.png)


---

