Rendering

rendering.js

registerFeature("Custom Rendering", "Rendering example", (feature) => {
    const colorProperty = feature.addColorProperty("Test Color", Color16.RED);

    feature.subscribe("draw_overlay", (event) => {
        Gfx.textBatch(event.modelMatrix, "sf_pro_bold", (text) => {
            let scale = 20.0;

            for (let i = 0; i < 5; i++) {
                text.push({
                    text: "Batched String! " + i,
                    coloring: Coloring.fading(Color16.RED, colorProperty.get()),
                    x: 200.0,
                    y: 100.0 + (scale * i),
                    scale: scale,
                    shadow: false
                });
            }
        });

        Gfx.text(event.modelMatrix, {
            font: "sf_pro_bold",
            text: "Single §fString!",
            coloring: Coloring.solid(Color16.RED),
            x: 200.0,
            y: 50.0,
            scale: 15.0,
            shadow: true
        });

        let bluetooth = "";
        let bolt = "";
        let computer = "";

        Gfx.text(event.modelMatrix, {
            font: "material_icons",
            text: `${bluetooth} ${bolt} ${computer}`,
            coloring: Coloring.rainbow(),
            x: 200.0,
            y: 65.0,
            scale: 25.0,
            shadow: true
        });

        Gfx.rectangleBatch(
            event.modelMatrix,
            (rect) => {
                rect.push(
                    200.0,
                    200.0,
                    50.0,
                    50.0,
                    Coloring.solid(Color16.RED)
                );

                rect.push(
                    260.0,
                    200.0,
                    50.0,
                    50.0,
                    Coloring.fading(Color16.RED, colorProperty.get())
                );
            }
        );

        Gfx.rectangle(
            event.modelMatrix,
            320.0,
            200.0,
            50.0,
            50.0,
            Coloring.rainbow()
        );

        Gfx.roundRectangleBatch(
            event.modelMatrix,
            (rect) => {
                rect.push(
                    380.0,
                    200.0,
                    50.0,
                    50.0,
                    20.0,
                    Coloring.rainbow()
                );

                rect.push(
                    380.0,
                    260.0,
                    50.0,
                    50.0,
                    20.0,
                    Coloring.fading(Color16.RED, colorProperty.get())
                );
            }
        );

        // any other opengl function can be used here as well..
    });

    // anything drawn here will be used as a mask for the Blur & Shadow
    feature.subscribe("post_process", (event) => {
        Gfx.rectangle(
            event.overlay.modelMatrix,
            200.0,
            260.0,
            170.0,
            50.0,
            Coloring.rainbow()
        );
    });
});