[rlgl] Drawing triangles breaks rendering when using more than one texture

[MilesVII]

Issue description

When drawing textured triangles with rlTexCoord2f and rlVertex2f functions from rlgl as in textured polygon example, after setting the second texture, every following drawing in the frame has texcoords and vertices corrupted, including those made with rshapes and rtextures rlDraw* functions.

Environment

Desktop, Win10 22H2, OpenGL 4.6, tested on two devices

Issue Screenshots

When drawing in TRIANGLES mode (broken)

When drawing in QUADS mode (as expected)

The fox and background are drawn before the tiles. When rendered after the tiles, the fox sprite gets corrupted too. Black tiles are drawn before the red ones, and only the red ones are broken

Minimal example; triangles vs quads, blue tile is drawn after the red one:

Code Example

I prepared a minimal example in Odin (repo), can port to C if needed

package main

import rl "vendor:raylib"
import rlgl "vendor:raylib/rlgl"

SIZE     := [2]f32 {  50, 50 }
ORIGIN_A := [2]f32 {  50, 75 }
ORIGIN_B := [2]f32 { 100, 75 }

main :: proc() {
	rl.SetTraceLogLevel(.WARNING)
	rl.InitWindow(200, 200, "fops")
	defer rl.CloseWindow()

	rl.SetTargetFPS(60)

	texA := rl.LoadTexture("./a.png")
	texB := rl.LoadTexture("./b.png")

	for !rl.WindowShouldClose() {
		rl.BeginDrawing()
		rl.ClearBackground(rl.WHITE)

		// the goal is to draw two textures by specifying their vertices

		buggyTriangles(texA, texB)
		// niceQuads(texA, texB)

		rl.EndDrawing()
	}
}

buggyTriangles :: proc(texA: rl.Texture2D, texB: rl.Texture2D) {
	rlgl.Begin(rlgl.TRIANGLES)
	rlgl.Color4ub(255, 255, 255, 255)
		draw(texA, ORIGIN_A, SIZE, true) // first call always works fine
		draw(texB, ORIGIN_B, SIZE, true) // the second one is always bad
	rlgl.End()
	rlgl.SetTexture(0)
	// doesn't matter how batch is managed, drawing stuff in separate begin/end pairs doesn't help
	// textures must be different to fail, but the order doesn't matter
}
niceQuads :: proc(texA: rl.Texture2D, texB: rl.Texture2D) {
	rlgl.Begin(rlgl.QUADS)
	rlgl.Color4ub(255, 255, 255, 255)
		draw(texA, ORIGIN_A, SIZE, false)
		draw(texB, ORIGIN_B, SIZE, false)
	rlgl.End()
	rlgl.SetTexture(0)
}

draw :: proc(tex: rl.Texture2D, origin: [2]f32, size: [2]f32, useTriangles: bool) {
	vertesex := [4][2]f32 {
		origin + { 0, 0 } * size,
		origin + { 0, 1 } * size,
		origin + { 1, 1 } * size,
		origin + { 1, 0 } * size
	}
	uv := [4][2]f32 {
		{ 0, 0 },
		{ 0, 1 },
		{ 1, 1 },
		{ 1, 0 }
	}

	// indices are used to pick texcoords and vertices data
	// when drawing with .TRIANGLES set, 3x2 vertices are used
	trindesex := []int {
		1, 2, 0,
		2, 3, 0
	}
	// when drawing with .QUADS set, just 4 vertices are used
	quindesex := []int {
		0, 1, 2, 3
	}

	rlgl.SetTexture(tex.id)
	for i in (useTriangles ? trindesex : quindesex) {
		rlgl.TexCoord2f(uv[i].x, uv[i].y)
		rlgl.Vertex2f(vertesex[i].x, vertesex[i].y)
	}
}

Backstory

Basically, I just needed to draw a tilemap. The only reason I had to resort to drawing with rlgl was that I needed to draw tiles by specifying vertices instead of tile size in order to guarantee that adjacent corners have same vertices, otherwise there would be tearing visible in some camera positions due to rounding errors. There is no rectangle drawing function in rshapes that can do that, and none of triangle drawing functions I tried align texture coordinates correctly when drawing a quad.

It would be nice to have a rectangle drawing function in rshapes and a texture drawing function in rtextures that accept vertex coordinates like rlDrawTriangle, also an option to specify texcoords for each vertex when drawing triangles and, ideally, triangle fans would be really useful too

[sleeptightAnsiC]

@MilesVII

I prepared a minimal example in Odin (repo), can port to C if needed

Could you please provide smaller and less complex repro, preferably in C ? This one is really obfuscated. No need for helper functions which lead to the same code paths, just inline everything and remove the quad branch. I believe, there is simply a programmer error somewhere in this code and it just happen to work with quads. Notice that you're writing multiple primitives inside of one rlgl.Begin/End block. Also the order of vertex does matter as you can see in the example that you linked:

raylib/examples/textures/textures_polygon.c

Lines 113 to 115 in 7103703

	// Draw textured polygon, defined by vertex and texture coordinates
	// NOTE: Polygon center must have straight line path to all points
	// without crossing perimeter, points must be in anticlockwise order

[MilesVII]

Done

snippet

#include "raylib.h"

#include "rlgl.h"

int main(void)
{
	InitWindow(200, 200, "");
	SetTargetFPS(60);

	Texture tex0 = LoadTexture("a.png");
	Texture tex1 = LoadTexture("b.png");

	Vector2 vx0[4] = {
		{ 50.0f, 75.0f },
		{ 50.0f, 125.0f },
		{ 100.0f, 125.0f },
		{ 100.0f, 75.0f }
	};
	Vector2 vx1[4] = {
		{ 100.0f, 75.0f },
		{ 100.0f, 125.0f },
		{ 150.0f, 125.0f },
		{ 150.0f, 75.0f }
	};
	Vector2 uv[4] = {
		{ 0.0f, 0.0f },
		{ 0.0f, 1.0f },
		{ 1.0f, 1.0f },
		{ 1.0f, 0.0f }
	};
	int indexes[6] = { 1, 2, 0, 2, 3, 0 };

	while (!WindowShouldClose())    // Detect window close button or ESC key
	{
		BeginDrawing();
			ClearBackground(RAYWHITE);
			
			// tile 0
			rlBegin(RL_TRIANGLES);

				rlSetTexture(tex0.id);
				rlColor4ub(255, 255, 255, 255);
				for (int i = 0; i < 6; ++i) {
					int ix = indexes[i];
					rlTexCoord2f(uv[ix].x, uv[ix].y);
					rlVertex2f(vx0[ix].x, vx0[ix].y);
				}
			rlEnd();
			rlSetTexture(0);

			// tile 1
			rlBegin(RL_TRIANGLES);

				rlSetTexture(tex1.id);
				rlColor4ub(255, 255, 255, 255);
				for (int i = 0; i < 6; ++i) {
					int ix = indexes[i];
					rlTexCoord2f(uv[ix].x, uv[ix].y);
					rlVertex2f(vx1[ix].x, vx1[ix].y);
				}
			rlEnd();
			rlSetTexture(0);
		EndDrawing();
	}

	UnloadTexture(tex0);
	UnloadTexture(tex1);

	CloseWindow();
	return 0;
}

Notice that you're writing multiple primitives inside of one rlgl.Begin/End block

Just like in mentioned textured polygon example. In fact, you can just modify the example to load another texture (even from the same file, doesn't matter) and call DrawTexturePoly twice at different positions, the issue will show.

  Texture texture  = LoadTexture("resources/cat.png");
+ Texture texture2 = LoadTexture("resources/cat.png");

 DrawTexturePoly(texture, (Vector2){ GetScreenWidth()/2.0f, GetScreenHeight()/2.0f },
                positions, texcoords, MAX_POINTS, WHITE);
+ DrawTexturePoly(texture2, (Vector2){ GetScreenWidth() * .75f, GetScreenHeight()/2.0f },
+               positions, texcoords, MAX_POINTS, WHITE);

Also the order of vertex does matter

All vertices are aligned counter-clockwise

[maiconpintoabreu]

Hi @MilesVII just a workaround, try to add:

rlBegin(RL_QUADS);
rlEnd();

in between each set of triangles that are not connected.

[maiconpintoabreu]

            // tile 0
			rlBegin(RL_TRIANGLES);

				rlSetTexture(tex0.id);
				rlColor4ub(255, 255, 255, 255);
				for (int i = 0; i < 6; ++i) {
					int ix = indexes[i];
					rlTexCoord2f(uv[ix].x, uv[ix].y);
					rlVertex2f(vx0[ix].x, vx0[ix].y);
				}
			rlEnd();
			rlSetTexture(0);
                        
+                        rlBegin(RL_QUADS);
 +                       rlEnd();

			// tile 1
			rlBegin(RL_TRIANGLES);

				rlSetTexture(tex1.id);
				rlColor4ub(255, 255, 255, 255);
				for (int i = 0; i < 6; ++i) {
					int ix = indexes[i];
					rlTexCoord2f(uv[ix].x, uv[ix].y);
					rlVertex2f(vx1[ix].x, vx1[ix].y);
				}
			rlEnd();
			rlSetTexture(0);

[MilesVII]

Yep, can confirm that the workaround works, thanks

[JeffM2501]

the issue is the last triangle does not seem to be submited. There is code in rlSetTexture that is supposed to be flushing the batches on a texture change, but it is failing. It only happens for triangles, not quads. There is special padding code for triangles that doesn't seem to handle the case where there are only 3 verts in the batch buffer.

I can duplicate the issue with this bare minimum code

#include "raymath.h"
#include "rlgl.h"

int main()
{
    SetConfigFlags(FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE);
    InitWindow(1200, 800, "TEST");

    Texture tx1 = LoadTexture("resources/raylib_logo.png");
    Texture tx2 = LoadTexture("resources/wabbit_alpha.png");

    while (!WindowShouldClose())
    {
        BeginDrawing();
        ClearBackground(LIGHTGRAY);
        DrawFPS(0, 0);

        rlBegin(RL_QUADS);
        rlSetTexture(tx1.id);
        rlColor4f(1, 1, 1, 1);
        rlNormal3f(0, 0, 1);
        rlTexCoord2f(0, 0);
        rlVertex3f(100, 100, 0);
        rlTexCoord2f(0, 1);
        rlVertex3f(100, 200, 0);
        rlTexCoord2f(1, 1);
        rlVertex3f(200, 200, 0);
        rlTexCoord2f(1, 0);
        rlVertex3f(200, 100, 0);

        rlEnd();

        rlBegin(RL_QUADS);
        rlSetTexture(tx2.id);
        rlColor4f(1, 1, 1, 1);
        rlNormal3f(0, 0, 1);
        rlTexCoord2f(0, 0);
        rlVertex3f(300, 100, 0);
        rlTexCoord2f(0, 1);
        rlVertex3f(300, 200, 0);
        rlTexCoord2f(1, 1);
        rlVertex3f(400, 200, 0);
        rlTexCoord2f(1, 0);
        rlVertex3f(400, 100, 0);
        rlEnd();

        rlBegin(RL_TRIANGLES);
        rlSetTexture(tx1.id);
        rlColor4f(1, 1, 1, 1);
        rlNormal3f(0, 0, 1);
        rlTexCoord2f(0, 0);
        rlVertex3f(100, 300, 0);
        rlTexCoord2f(0, 1);
        rlVertex3f(100, 400, 0);
        rlTexCoord2f(1, 1);
        rlVertex3f(200, 400, 0);

        rlEnd();

  //      rlDrawRenderBatchActive();
        rlBegin(RL_TRIANGLES);
        rlSetTexture(tx2.id);
        rlColor4f(1, 1, 1, 1);
        rlNormal3f(0, 0, 1);
        rlTexCoord2f(0, 0);
        rlVertex3f(300, 300, 0);
        rlTexCoord2f(0, 1);
        rlVertex3f(300, 400, 0);
        rlTexCoord2f(1, 1);
        rlVertex3f(400, 400, 0);
        rlEnd();
        rlSetTexture(0);

        EndDrawing();
    }

    UnloadTexture(tx1);
    UnloadTexture(tx2);
    CloseWindow();
}

That code produces this

If you uncomment out the rlDrawRenderBatchActive call, you get the correct results.

[sleeptightAnsiC]

I was wondering if this is a regression but raylib5.0 was also affected
EDIT: 4.0.0 was also affected by this bug

screenshot

[sleeptightAnsiC]

This is so strange, drawcalls are totally broken here (Jeff's repro)
It makes glDrawElements(30) as first drawcall and glDrawElements(0) as the last one

screenshots