<p>The <strong>Nine Patches</strong> algorithm is a really nice and powerful solution if you are using textures but I ended up by using a fully procedural solution.</p>

<p>I am just drawing a round box like this.</p>

<pre><code>float udRoundBox( vec3 p, vec3 b, float r )
{
  return length(max(abs(p)-b,0.0))-r;
}
</code></pre>

<p>You can simply avoid the 3rd dimension if you don't need it.
This method comes from the <a href="http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm" rel="nofollow noreferrer">Distance function article</a> from <strong>Inigo Quilez</strong>.</p>

CC BY-SA 3.0
2017-06-06T09:12:49.437Z
2017-06-06T09:12:49.437Z
MaT
<p>I am trying to achieve a special texture stretching effect in my shader.
Here is how I define my uv before sampling my texture, nothing really special.</p>

<pre><code>// uv_ST contains the tiling and offset values
uv.xy = uv.xy * uv_ST.xy + uv_ST.zw
</code></pre>

<p>This gives the standard tiling/stretching and offset behaviour when you tile/stretche a clamped texture as you can see in the image below. First is normal, second is offset and last is stretching.</p>

<p><a href="https://i.sstatic.net/Zwj4l.jpg" rel="noreferrer"><img src="https://i.sstatic.net/Zwj4l.jpg" alt="enter image description here"></a></p>

<p>But I want to avoid the deformation behaviour when stretching, I want to keep margins when stretching my texture or simply cut it in the middle and stretching it. Here is an illustration below.</p>

<p><a href="https://i.sstatic.net/HdUgs.jpg" rel="noreferrer"><img src="https://i.sstatic.net/HdUgs.jpg" alt="enter image description here"></a></p>

<p>How could I do that inside my shader when defining my uvs before sampling the texture ?</p>

CC BY-SA 3.0
2017-04-21T15:32:46.923Z
It looks like you're stretching the texture rather than tiling. Tiling wouldn't deform the rounded corners, but it would give you multiple copies of the rounded corners, and you wouldn't be able to fix it the way you propose.
Dan Hulme
CC BY-SA 3.0
2017-04-21T15:38:52.257Z
@DanHulme Yeah my bad, I misspoke. Instead of increasing the tiling, I am lowering it, that's why I am having the stretch effect. But this is the expected effect behaviour. I just want to avoid the deformation caused by the stretching.
MaT
CC BY-SA 3.0
2017-04-21T15:40:55.090Z
I edited my question. Sorry about that.
MaT
CC BY-SA 3.0
2017-04-21T17:01:04.310Z
I realise your example textures are quite simple, but if you ever have to do something more complex and still want to avoid the "distortion", [Seam Carving might be of interest:](http://www.win.tue.nl/~wstahw/edu/2IV05/seamcarving.pdf) When I saw it presented it almost seemed like magic.
Simon F
CC BY-SA 3.0
2017-04-24T05:24:39.583Z
User interfaces like Android use something call 'nine patches' which breaks the texture into a 3x3 grid with different scaling rules such that the corners are preserved and only the interiors are scaled in 1 or both axis. Further reading here: http://en.miui.com/thread-26099-1-1.html
PaulHK
<shader><texture><glsl><hlsl><uv-mapping>
Special Texture Stretching without deformation
MaT
# Special Texture Stretching without deformation

(Asked by: username_0 on 2017-04-21)

I am trying to achieve a special texture stretching effect in my shader.
Here is how I define my uv before sampling my texture, nothing really special.

```
// uv_ST contains the tiling and offset values
uv.xy = uv.xy * uv_ST.xy + uv_ST.zw

```

This gives the standard tiling/stretching and offset behaviour when you tile/stretche a clamped texture as you can see in the image below. First is normal, second is offset and last is stretching.

[![enter image description here](https://i.sstatic.net/Zwj4l.jpg)](https://i.sstatic.net/Zwj4l.jpg)

But I want to avoid the deformation behaviour when stretching, I want to keep margins when stretching my texture or simply cut it in the middle and stretching it. Here is an illustration below.

[![enter image description here](https://i.sstatic.net/HdUgs.jpg)](https://i.sstatic.net/HdUgs.jpg)

How could I do that inside my shader when defining my uvs before sampling the texture ?

**Tags:** shader, texture, glsl, hlsl, uv-mapping

> **Comments:**
> **username_1**: It looks like you're stretching the texture rather than tiling. Tiling wouldn't deform the rounded corners, but it would give you multiple copies of the rounded corners, and you wouldn't be able to fix it the way you propose.  
> **username_0**: @username_1 Yeah my bad, I misspoke. Instead of increasing the tiling, I am lowering it, that's why I am having the stretch effect. But this is the expected effect behaviour. I just want to avoid the deformation caused by the stretching.  
> **username_0**: I edited my question. Sorry about that.  
> **username_2**: I realise your example textures are quite simple, but if you ever have to do something more complex and still want to avoid the "distortion", [Seam Carving might be of interest:](http://www.win.tue.nl/~wstahw/edu/2IV05/seamcarving.pdf) When I saw it presented it almost seemed like magic.  
> **username_3**: User interfaces like Android use something call 'nine patches' which breaks the texture into a 3x3 grid with different scaling rules such that the corners are preserved and only the interiors are scaled in 1 or both axis. Further reading here: http://en.miui.com/thread-26099-1-1.html  

---

## 1 answers

### Answer by username_0 on 2017-06-06. Score: 2 | Accepted answer

The **Nine Patches** algorithm is a really nice and powerful solution if you are using textures but I ended up by using a fully procedural solution.

I am just drawing a round box like this.

```
float udRoundBox( vec3 p, vec3 b, float r )
{
  return length(max(abs(p)-b,0.0))-r;
}

```

You can simply avoid the 3rd dimension if you don't need it.
This method comes from the [Distance function article](http://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm) from **Inigo Quilez**.


---

