<p>I've been reading up on a vulkan tutorial online, here: <a href="https://vulkan-tutorial.com" rel="nofollow noreferrer">https://vulkan-tutorial.com</a>. This question should apply to any 3D rendering API however.</p>
<p>In this lesson <a href="https://vulkan-tutorial.com/Vertex_buffers/Index_buffer" rel="nofollow noreferrer">https://vulkan-tutorial.com/Vertex_buffers/Index_buffer</a>, the tutorial had just covered using indexed rendering in order to reuse vertices when drawing the following simple two-triangle quad:</p>
<p><img src="https://vulkan-tutorial.com/images/indexed_rectangle.png" alt="Text" /></p>
<p>The four vertices were assigned red, green, blue and white colours as vertex attributes and the fragment shader had those colours interpolated across the triangles as expected. This leads to the ugly visual artefact on the diagonal where the two triangles meet. As I understand it, the interpolation will only be happening across each triangle, and so where the two triangles meet the interpolation doesn't cross the boundary.</p>
<p>How could you, generally in any rendering api, have the colours smoothly interpolated over all four corners for a nice colour wheel affect without having this hard line?</p>

CC BY-SA 4.0
2020-08-07T17:01:23.460Z
By not using linear interpolation. What you are seeing is the discontinuity in the first derivative. Try bilinear interpolation over quads, it will fix it. For polygons with more vertices read up on generalized barycentric coordinates.
lightxbulb
CC BY-SA 4.0
2020-08-07T17:03:47.310Z
@lightxbulb thank you for responding - I have had a week of radio silence on stack overflow!
FShrike
CC BY-SA 4.0
2020-08-07T20:46:49.543Z
I did bilinear interpolation for UV coordinates on quads here: http://www.reedbeta.com/blog/quadrilateral-interpolation-part-2/ I just used those UVs to sample a texture, but they could also be used to interpolate color values, or any other attribute values.
Nathan Reed
CC BY-SA 4.0
2020-08-07T20:50:40.590Z
@NathanReed Thank you that looks like a very thorough response!
FShrike
<glsl><color><vulkan><interpolation><fragment-shader>
How could I remove this colour interpolation artefact across a quad?
FShrike
# How could I remove this colour interpolation artefact across a quad?

(Asked by: username_0 on 2020-08-07)

I've been reading up on a vulkan tutorial online, here: <https://vulkan-tutorial.com>. This question should apply to any 3D rendering API however.

In this lesson <https://vulkan-tutorial.com/Vertex_buffers/Index_buffer>, the tutorial had just covered using indexed rendering in order to reuse vertices when drawing the following simple two-triangle quad:

![Text](https://vulkan-tutorial.com/images/indexed_rectangle.png)

The four vertices were assigned red, green, blue and white colours as vertex attributes and the fragment shader had those colours interpolated across the triangles as expected. This leads to the ugly visual artefact on the diagonal where the two triangles meet. As I understand it, the interpolation will only be happening across each triangle, and so where the two triangles meet the interpolation doesn't cross the boundary.

How could you, generally in any rendering api, have the colours smoothly interpolated over all four corners for a nice colour wheel affect without having this hard line?

**Tags:** glsl, color, vulkan, interpolation, fragment-shader

> **Comments:**
> **username_1**: By not using linear interpolation. What you are seeing is the discontinuity in the first derivative. Try bilinear interpolation over quads, it will fix it. For polygons with more vertices read up on generalized barycentric coordinates.  
> **username_0**: @username_1 thank you for responding - I have had a week of radio silence on stack overflow!  
> **username_2**: I did bilinear interpolation for UV coordinates on quads here: http://www.reedbeta.com/blog/quadrilateral-interpolation-part-2/ I just used those UVs to sample a texture, but they could also be used to interpolate color values, or any other attribute values.  
> **username_0**: @username_2 Thank you that looks like a very thorough response!  

---

## 0 answers

