Custom Text Renderer + Text Render Layer not working as expected

[wild flax]

Hello!

The tag doesn't quite fit but there isn't something better than this and since it's connect with block entities, I thought entities would be the best fit.

I am trying to make a custom text render layer to account for z-fighting problems I recently had and adding .layering() to the render layer seems to work for images at least and I also am trying to add this to the text currently but it does not work as expected. The text is just a bunch of pixel as in the image shows. I put the code into paste bin. The links are here:

https://pastebin.com/mU212uwY - CustomTextRenderer
https://pastebin.com/60tpRRhA - CustomRenderLayer

This is how I use the TextRenderer:

        TextRenderer textRenderer = getTextRendererByPath(this.getFont().getFontPath());
        CustomTextRenderer cTextRenderer = new CustomTextRenderer(textRenderer);

        cTextRenderer.draw(
                this.getText(),
                0,0, 2.5f,
                Color.toHexARGB(color),
                false,
                positionMatrix,
                vertexConsumers,
                CustomRenderLayer.TextLayering.LayeringType.VIEW_OFFSET_Z_LAYERING_BACKWARD,
                0,
                light
        );

I tried to exactly replicate how the vanilla one works but obviously it doesn't work.

The vanilla one is creating RenderLayers for all fonts at initialization but this is not possible for me since I need to adjust the z coordinate dynamically depending on how far up it is in the render list. Currently, I am not doing that since I am just testing but later on this will be mandatory. I'm also implementing a cache for it once I get it working to reduce lag.

That's everything. Thanks for any help!

[cyan stone]

Instead of doing all this complex render type stuff. Why not just offset the rendering position slightly so that its rendering on top?

Just add 0.01 to the axis that its z-fighting on

[wild flax]

This is actually my problem. When I do this, it starts flickering worse the further you go away. And this fixes it because even when it's far away, the renderlayer with the higher .layering value will be preferred.

Images work, just the text doesn't for some reason

[cyan stone]

Ya im not sure why it wouldn't work if using the normal font rendertype works

[wild flax]

Okay, thanks for responding though!

[wild flax]

Progress

Apparently, I use the wrong ID

Colour still doesn't fit and background isn't transparent but that's okay for now. At least it works

[wild flax]

Okay... So this works pretty well except for the colour:

        @Override
        public void drawGlyphs() {
            List<GlyphAtlasTexture> glyphAtlasTextures = this.textRenderer.getFontStorage(Style.DEFAULT_FONT_ID).glyphAtlases;

            for (BakedGlyph.DrawnGlyph drawnGlyph : this.glyphs) {
                BakedGlyph bakedGlyph = drawnGlyph.glyph();
                
                GlyphAtlasTexture textureInList = glyphAtlasTextures.stream() //-------------------------------------------------------------------------------------------------->  // Get all registered glyph atlas textures
                        .filter(glyphAtlasTexture -> glyphAtlasTexture.textRenderLayers.equals(bakedGlyph.textRenderLayers)) //----------------------------------->  // Filter out the one that has the same text render layers
                        .toList() //---------------------------------------------------------------------------------------------------------------------------------------------->  // Collect in list
                        .getFirst(); //------------------------------------------------------------------------------------------------------------------------------------------->  // Get the first one in list
                
                
                int index = glyphAtlasTextures.indexOf(textureInList); // Get the index of this texture in the official texture atlas list
                Identifier id = this.id.withSuffixedPath("/" + index); // Construct Identifier with index that points to the correct texture
                
                VertexConsumer vertexConsumer = this.vertexConsumers.getBuffer(CustomRenderLayer.TextLayering.getTextRenderLayer(id)); // Get the vertex consumer for the correct texture
                bakedGlyph.draw(drawnGlyph, this.matrix, vertexConsumer, this.light); // Draw the glyph
            }
        }

Don't mind the errors. IntelliJ just doesn't recognize my AccessWidener for some reason

Works pretty well from far away too now:

[rose wasp]

Hm can't you make the black background transparent ?

[wild flax]

I copied the exact code the normal RenderLayer has too expect that I added the .layering(); property. Dunno what's wrong

        public static final Function<Identifier, RenderLayer> TEST_TEXT_RENDER_LAYER = Util.memoize(
                texture -> RenderLayer.of(
                        "text",
                        VertexFormats.POSITION_COLOR_TEXTURE_LIGHT,
                        VertexFormat.DrawMode.QUADS,
                        786432,
                        false,
                        false,
                        RenderLayer.MultiPhaseParameters.builder()
                                .program(TEXT_PROGRAM)
                                .texture(new RenderPhase.Texture(texture, TriState.FALSE, false))
                                .transparency(TRANSLUCENT_TRANSPARENCY)
                                .layering(CustomRenderLayer.Layering.getRenderPhaseZLayeringBackward(4f))
                                .lightmap(ENABLE_LIGHTMAP)
                                .build(false)
                )
        );``` <-- Mine

    private static final Function<Identifier, RenderLayer> TEXT = Util.memoize(
        texture -> of(
                "text",
                VertexFormats.POSITION_COLOR_TEXTURE_LIGHT,
                VertexFormat.DrawMode.QUADS,
                786432,
                false,
                false,
                RenderLayer.MultiPhaseParameters.builder()
                    .program(TEXT_PROGRAM)
                    .texture(new RenderPhase.Texture(texture, TriState.FALSE, false))
                    .transparency(TRANSLUCENT_TRANSPARENCY)
                    .lightmap(ENABLE_LIGHTMAP)
                    .build(false)
            )
    );
```<--- Original

Maybe because I use the same RenderLayer name

Maybe it's conflicting somehow

[rose wasp]

could be possible but i doubt it

[wild flax]

Nope, that's not it. You were right

[wild flax]

I just can't find what's wrong...

Everything looks correct

[wild flax]

I fucking solved it

I can't believe it

I fucking solved it

not even one single line of code that was causing all this trouble

I should've used it since the beginning

ANYWAYS

This is the fix:

Instead of the normal TEXT_PROGRAM: java private static final Function<Identifier, RenderLayer> TEXT = Util.memoize( texture -> of( "text", VertexFormats.POSITION_COLOR_TEXTURE_LIGHT, VertexFormat.DrawMode.QUADS, 786432, false, false, RenderLayer.MultiPhaseParameters.builder() .program(TEXT_PROGRAM) .texture(new RenderPhase.Texture(texture, TriState.FALSE, false)) .transparency(TRANSLUCENT_TRANSPARENCY) .lightmap(ENABLE_LIGHTMAP) .build(false) ) );

I just used the TEXT_INTENSITY_PROGRAM: ```java
private static final Function<Identifier, RenderLayer> TEXT = Util.memoize(
texture -> RenderLayer.of(
"text_test",
VertexFormats.POSITION_COLOR_TEXTURE_LIGHT,
VertexFormat.DrawMode.QUADS,
786432,
false,
false,
RenderLayer.MultiPhaseParameters.builder()
.program(TEXT_INTENSITY_PROGRAM)
.texture(new RenderPhase.Texture(texture, TriState.FALSE, false))
.transparency(TRANSLUCENT_TRANSPARENCY)
.lightmap(ENABLE_LIGHTMAP)
.build(false)
)
);

And it fucking worked

[sage girder]

Yay