<p>You can calculate the perpendicular distance from each edge, and then take the minimum of the three edges. This is related to barycentric coordinates (which are normalized edge distances). If you already have the barycentrics <span class="math-container">$a, b, c$</span>, you can calculate <span class="math-container">$3 \cdot \min(a, b, c)$</span>. The 3 is to normalize the gradient to the [0, 1] range, since the centroid of the triangle lies at barycentrics <span class="math-container">$(\tfrac{1}{3}, \tfrac{1}{3}, \tfrac{1}{3})$</span>.</p>
<p>The UV mapping you mentioned makes <span class="math-container">$u, v$</span> equal to two of the barycentrics, so you can then calculate the gradient coordinate as <span class="math-container">$3 \cdot \min(u, v, 1 - u - v)$</span>.</p>
<p>This coordinate runs from 0 at the edges to 1 at the center, so to go from black at the enter to white at the edges, you could take 1 minus that. And of course, you can do any other gradient using this coordinate to interpolate the desired colors.</p>

CC BY-SA 4.0
2022-09-25T21:31:38.343Z
2022-09-25T21:31:38.343Z
Nathan Reed
<p>I'm looking for an effect similar to this image. Assuming the UV coordinates of the triangle are known, such as:</p>
<pre><code>p0 = [0, 0]
p1 = [1, 0]
p2 = [0, 1]
</code></pre>
<p>I know the centroid of the triangle formed by these UV coordinates is [0.33333, 0.33333]</p>
<p>How do I output a color from black in the center to white at the edges, such as it follows the gradient pattern in this image?</p>
<p><a href="https://i.sstatic.net/xCknT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/xCknT.png" alt="enter image description here" /></a></p>

<opengl><triangulation><gradient>
How to generate a gradient to the edges of a triangle in GLSL?
user24950814234
# How to generate a gradient to the edges of a triangle in GLSL?

(Asked by: username_0 on 2022-09-25)

I'm looking for an effect similar to this image. Assuming the UV coordinates of the triangle are known, such as:

```
p0 = [0, 0]
p1 = [1, 0]
p2 = [0, 1]

```

I know the centroid of the triangle formed by these UV coordinates is [0.33333, 0.33333]

How do I output a color from black in the center to white at the edges, such as it follows the gradient pattern in this image?

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

**Tags:** opengl, triangulation, gradient


---

## 1 answers

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

You can calculate the perpendicular distance from each edge, and then take the minimum of the three edges. This is related to barycentric coordinates (which are normalized edge distances). If you already have the barycentrics $a, b, c$, you can calculate $3 \cdot \min(a, b, c)$. The 3 is to normalize the gradient to the [0, 1] range, since the centroid of the triangle lies at barycentrics $(\tfrac{1}{3}, \tfrac{1}{3}, \tfrac{1}{3})$.

The UV mapping you mentioned makes $u, v$ equal to two of the barycentrics, so you can then calculate the gradient coordinate as $3 \cdot \min(u, v, 1 - u - v)$.

This coordinate runs from 0 at the edges to 1 at the center, so to go from black at the enter to white at the edges, you could take 1 minus that. And of course, you can do any other gradient using this coordinate to interpolate the desired colors.


---

