<p>Not enough triangles. The situation is analogous to the sampling theorem that states that you can not reconstruct a signal if your sample frequency is below a certain threshold. Although in this, case you're not attempting to rebuild the signal with a higher order filter so the result is even more dramatic. And it results in interpolation errors.</p>

<p>You can alleviate the problem with less points if your point wavefront follows your waves. So you may want to shift points towards the gradient maximum in other directions than UP.</p>

CC BY-SA 3.0
2017-08-05T15:09:50.207Z
I believe you're looking for the [Nyquist rate](https://en.wikipedia.org/wiki/Nyquist_rate). Also, he is very much attempting to rebuild a signal. That signal being a radial sine wave. This is very much a case of aliasing: the digital sampling of an analog signal with fewer samples than required to reconstruct it.
Nicol Bolas
CC BY-SA 3.0
2017-08-05T15:35:13.690Z
Wow I never realized the nyquist limit applied to graphics (I'm an ex-sound engineer turned programmer) :) Can I ask more details (or a link) when you refer to shifting points toward the gradient maximum?
scx
CC BY-SA 3.0
2017-08-05T17:19:52.283Z
@NicolBolas I meant he is just linear interpolating points not recosntructing the signal with a higher order fuction.
joojaa
CC BY-SA 3.0
2017-08-05T17:23:59.407Z
@scx points in space are signals. Shader shards are signals. Antialiasing is exactly the same in sound as in images... etc. A lot of signal processing applies to images. Scaling, rotating etc. same things.
joojaa
CC BY-SA 3.0
2017-08-05T06:50:10.237Z
2017-08-05T17:26:16.053Z
2017-08-05T17:26:16.053Z
joojaa
<p>I am experimenting on a simple wave tessellation shader. I ported it from a working vertex shader. When my frequency is higher than 1, I get strange "saw-tooth" artifacting at peaks of the wave. Here are some images with a frequency of 3.</p>

<p><a href="https://i.sstatic.net/evCYZ.jpg" rel="noreferrer"><img src="https://i.sstatic.net/evCYZ.jpg" alt="Wireframe artifacts"></a></p>

<p><a href="https://i.sstatic.net/gGZdw.png" rel="noreferrer"><img src="https://i.sstatic.net/gGZdw.png" alt="Artifacts"></a></p>

<p>If I keep the frequency lower, it is smooth as butter. Any ideas what the problem could be?</p>

<pre><code>#version 410 core
layout(quads, equal_spacing, ccw) in;
in vec2 teUv[];
out vec2 fUv;
out vec4 fWorld_pos;
uniform mat4 VP;
uniform mat4 M;
uniform sampler2D water_disp;
uniform float time;
const float M_PI = 3.1415926535;

float water_displacement(vec2 pos) {
    const float freq = 3.0; // &lt;-- This is the problematic value.
    float d = length(pos);
    return (0.5 + 0.5 * sin(-M_PI * d * freq + time));
}

void main() {
    vec4 p1 = mix(gl_in[0].gl_Position,
            gl_in[1].gl_Position,
            gl_TessCoord.x);
    vec4 p2 = mix(gl_in[2].gl_Position,
            gl_in[3].gl_Position,
            gl_TessCoord.x);
    vec4 local_pos = mix(p1, p2, gl_TessCoord.y);
    fWorld_pos = M * local_pos;
    fWorld_pos.y += water_displacement(fWorld_pos.xz);

    gl_Position = VP * fWorld_pos;

    vec2 uv1 = mix(teUv[0], teUv[1], gl_TessCoord.x);
    vec2 uv2 = mix(teUv[2], teUv[3], gl_TessCoord.x);
    fUv = mix(uv2, uv1, gl_TessCoord.y);
}
</code></pre>

<p>And more examples:</p>

<p><a href="https://i.sstatic.net/QE8Xq.png" rel="noreferrer"><img src="https://i.sstatic.net/QE8Xq.png" alt="Smooooth (freq = 0.5)"></a>
<a href="https://i.sstatic.net/dM5X5.jpg" rel="noreferrer"><img src="https://i.sstatic.net/dM5X5.jpg" alt="Not so smooth (freq = 8)"></a></p>

<opengl><glsl><artifacts><tesselation><distortion>
Tesselation sine distortion?
scx
# Tesselation sine distortion?

(Asked by: username_0 on 2017-08-05)

I am experimenting on a simple wave tessellation shader. I ported it from a working vertex shader. When my frequency is higher than 1, I get strange "saw-tooth" artifacting at peaks of the wave. Here are some images with a frequency of 3.

[![Wireframe artifacts](https://i.sstatic.net/evCYZ.jpg)](https://i.sstatic.net/evCYZ.jpg)

[![Artifacts](https://i.sstatic.net/gGZdw.png)](https://i.sstatic.net/gGZdw.png)

If I keep the frequency lower, it is smooth as butter. Any ideas what the problem could be?

```
#version 410 core
layout(quads, equal_spacing, ccw) in;
in vec2 teUv[];
out vec2 fUv;
out vec4 fWorld_pos;
uniform mat4 VP;
uniform mat4 M;
uniform sampler2D water_disp;
uniform float time;
const float M_PI = 3.1415926535;

float water_displacement(vec2 pos) {
    const float freq = 3.0; // <-- This is the problematic value.
    float d = length(pos);
    return (0.5 + 0.5 * sin(-M_PI * d * freq + time));
}

void main() {
    vec4 p1 = mix(gl_in[0].gl_Position,
            gl_in[1].gl_Position,
            gl_TessCoord.x);
    vec4 p2 = mix(gl_in[2].gl_Position,
            gl_in[3].gl_Position,
            gl_TessCoord.x);
    vec4 local_pos = mix(p1, p2, gl_TessCoord.y);
    fWorld_pos = M * local_pos;
    fWorld_pos.y += water_displacement(fWorld_pos.xz);

    gl_Position = VP * fWorld_pos;

    vec2 uv1 = mix(teUv[0], teUv[1], gl_TessCoord.x);
    vec2 uv2 = mix(teUv[2], teUv[3], gl_TessCoord.x);
    fUv = mix(uv2, uv1, gl_TessCoord.y);
}

```

And more examples:

[![Smooooth (freq = 0.5)](https://i.sstatic.net/QE8Xq.png)](https://i.sstatic.net/QE8Xq.png)
[![Not so smooth (freq = 8)](https://i.sstatic.net/dM5X5.jpg)](https://i.sstatic.net/dM5X5.jpg)

**Tags:** opengl, glsl, artifacts, tesselation, distortion


---

## 1 answers

### Answer by username_1 on 2017-08-05. Score: 5 | Accepted answer

Not enough triangles. The situation is analogous to the sampling theorem that states that you can not reconstruct a signal if your sample frequency is below a certain threshold. Although in this, case you're not attempting to rebuild the signal with a higher order filter so the result is even more dramatic. And it results in interpolation errors.

You can alleviate the problem with less points if your point wavefront follows your waves. So you may want to shift points towards the gradient maximum in other directions than UP.

> **Comments:**
> **username_2**: I believe you're looking for the [Nyquist rate](https://en.wikipedia.org/wiki/Nyquist_rate). Also, he is very much attempting to rebuild a signal. That signal being a radial sine wave. This is very much a case of aliasing: the digital sampling of an analog signal with fewer samples than required to reconstruct it.  
> **username_0**: Wow I never realized the nyquist limit applied to graphics (I'm an ex-sound engineer turned programmer) :) Can I ask more details (or a link) when you refer to shifting points toward the gradient maximum?  
> **username_1**: @username_2 I meant he is just linear interpolating points not recosntructing the signal with a higher order fuction.  
> **username_1**: @username_0 points in space are signals. Shader shards are signals. Antialiasing is exactly the same in sound as in images... etc. A lot of signal processing applies to images. Scaling, rotating etc. same things.  

---

