Why does the rendered object appear distorted?

Question

I'm getting a distorted red triangle when trying to display a red triangle with 3 vertices (at (-0.5,-0.5) (0.5,-0.5) (0,0.5)) I'm passing to the shader with this code

public void LoadData<T>(BufferConfig<T> config) where T : struct, IVertex
    {
        Bind();

        GL.BufferData(config.Target, config.VertexCount * config.Layout.SizeOfVertex, config.Vertices, config.Usage);

        int offset = 0;

        for (int i = 0; i < config.Layout.Attribs.Length; i++)
        {
            GL.EnableVertexAttribArray(i);
            GL.VertexAttribPointer(
                i, 
                config.Layout.Attribs[i].ElementCount, 
                config.Layout.Attribs[i].ElementType, 
                config.Layout.Attribs[i].IsNormalized, 
                config.Layout.Attribs[i].Stride,
                offset
                );

            offset += config.Layout.Attribs[i].Stride;
        }

        Unbind();
    }

The vertex consists of 2 Vector4's respectively representing position and colour, I have tried debugging it and the values seem fine as there are 2 attributes, position and color, the loop runs 2 times,

1st iteration: index = 0, count = 4, type = float, normalized = false, stride = 16, pointer = 0

2nd iteration: index = 1, count = 4, type = float, normalized = false, stride = 16, pointer = 16

Why exactly does this look like in the image ?

EDIT:

Vertex shader

#version 450 core

layout(location = 0) in vec4 position;
layout(location = 1) in vec4 color;

out vec4 vs_color;

void main(void)
{
    gl_Position = position;
    vs_color = color;
}

Fragment shader

#version 450 core

in vec4 vs_color;
out vec4 fragColor;

void main(void)
{
    fragColor = vs_color;
}

Vertices

r1.AddVertices(new CVertex[] {
            new CVertex(new Vector4(-0.5f,-0.5f,0f,1f), new Vector4(1f,0f,0f,1f)),
            new CVertex(new Vector4(0.5f,-0.5f,0f,1f), new Vector4(0f,1f,0f,1f)),
            new CVertex(new Vector4(0f,0.5f,0f,1f), new Vector4(0f,0f,1f,0f))
        });

Please provide a [MCVE] so that we can a) rest assured you're not doing 3D openGL and b) we can reproduce the problem — Thomas Weller, Jan 01 '18 at 20:39
Do you see what might be happening? The first point matches the first vertex position, but the second vertex point seems to match the first vertex colour, that's the rightmost one (1f,0f,0f,1f). Your layout must be wrong in some way. — Zebrafish, Jan 01 '18 at 21:21
Oh really, so now when someone actually read the post does anyone know what is incorrect? — , Jan 01 '18 at 21:24
I've just noticed that the triangle vertex positions looks as if they're made up from your first vertex position, your first colour vector, and your second vertex position. — Zebrafish, Jan 01 '18 at 21:27
Well this post is about literaly this, the fun part is why is it happening because it donesnt make sense to me. — , Jan 01 '18 at 21:29

sterin · Accepted Answer · 2018-01-02T04:00:06.510

The stride is incorrect. The stride should be the number of bytes to skip for the next vertex attribute.

In your case, to reach the next position you have to skip 4 floats for position and 4 floats for the color, to a total of 32 bytes (and similarly for the color).

If you have multiple attributes in a single buffer, the stride should be the sum of the sizes of the attributes.

Using a stride of 16 bytes instead of 32 results in the triangle: (-0.5, -0.5, 0)-(1, 0, 0)-(0.5, -0.5, 0). As pointed out by @Zebrafish in the comments, these are the position of the first vertex, the color of the first vertex, and the position of the second vertex.

Instead of advancing from the position of the first vertex to the position of the second vertex (which are 32 bytes apart), it advances to the color of the first vertex, and then to the position of the second vertex.

Why does the rendered object appear distorted?

1 Answers1