const TimelineVShader =`#version 300 es

#define CANVAS_BORDER 1.0
#define SAMPLE_HEIGHT 16.0
#define SAMPLE_BORDER 1.0
#define SAMPLE_Y_SPACING (SAMPLE_HEIGHT + SAMPLE_BORDER * 2.0)
#define SAMPLE_Y_OFFSET (CANVAS_BORDER + 1.0)

struct Viewport
{
    float width;
    float height;
};

struct TimeRange
{
    float usStart;
    float usPerPixel;
};

struct Row
{
    float yOffset;
};

uniform Viewport inViewport;
uniform TimeRange inTimeRange;
uniform Row inRow;

in vec4 inSample_TextOffset;
in vec4 inColour_TextLength;

out vec4 varColour_TimeMs;
out vec4 varPosInBoxPx_TextEntry;
out float varTimeChars;

//#define PIXEL_ROUNDED_OFFSETS

float PixelOffset(float time_us)
{
    float offset = (time_us - inTimeRange.usStart) * inTimeRange.usPerPixel;
    #ifdef PIXEL_ROUNDED_OFFSETS
        return floor(offset);
    #else
        return offset;
    #endif
}

float PixelSize(float time_us)
{
    float size = time_us * inTimeRange.usPerPixel;
    #ifdef PIXEL_ROUNDED_OFFSETS
        return floor(size);
    #else
        return size;
    #endif
}

void main()
{
    // Unpack input data
    float us_start = inSample_TextOffset.x;
    float us_length = inSample_TextOffset.y;
    float depth = inSample_TextOffset.z;
    float text_buffer_offset = inSample_TextOffset.w;
    vec3 box_colour = inColour_TextLength.rgb;
    float text_length_chars = inColour_TextLength.w;

    // Determine pixel range of the sample
    float x0 = PixelOffset(us_start);
    float x1 = x0 + PixelSize(us_length);

    // Calculate box to render
    float offset_x = x0;
    float offset_y = inRow.yOffset + SAMPLE_Y_OFFSET + (depth - 1.0) * SAMPLE_Y_SPACING;
    float size_x = max(x1 - x0, 1.0);
    float size_y = SAMPLE_HEIGHT;

    // Box range
    float min_x = offset_x;
    float min_y = offset_y;
    float max_x = offset_x + size_x;
    float max_y = offset_y + size_y;

    // Quad indices are:
    //
    //  2        3
    //    +----+
    //    |    |
    //    +----+
    //  0        1
    //
    vec2 position;
    position.x = (gl_VertexID & 1) == 0 ? min_x : max_x;
    position.y = (gl_VertexID & 2) == 0 ? min_y : max_y;

    //
    // NDC is:
    //    -1 to 1, left to right
    //    -1 to 1, bottom to top
    //
    vec4 ndc_pos;
    ndc_pos.x = (position.x / inViewport.width) * 2.0 - 1.0;
    ndc_pos.y = 1.0 - (position.y / inViewport.height) * 2.0;
    ndc_pos.z = 0.0;
    ndc_pos.w = 1.0;

    // Calculate number of characters required to display the millisecond time
    float time_ms = us_length / 1000.0;
    float time_ms_int = floor(time_ms);
    float time_chars = time_ms_int == 0.0 ? 1.0 : floor(log(time_ms_int) / 2.302585092994046) + 1.0;

    gl_Position = ndc_pos;

    varColour_TimeMs = vec4(box_colour / 255.0, time_ms);
    varPosInBoxPx_TextEntry = vec4(position.x - offset_x, position.y - offset_y, text_buffer_offset, text_length_chars);
    varTimeChars = time_chars;
}
`;

const TimelineFShader = `#version 300 es

precision mediump float;

#define SAMPLE_HEIGHT 16.0

struct TextBufferDesc
{
    float fontWidth;
    float fontHeight;
    float textBufferLength;
};

uniform sampler2D inFontAtlasTextre;
uniform sampler2D inTextBuffer;
uniform TextBufferDesc inTextBufferDesc;

in vec4 varColour_TimeMs;
in vec4 varPosInBoxPx_TextEntry;
in float varTimeChars;

out vec4 outColour;

vec4 LookupCharacter(float char_ascii, float pos_x, float pos_y, float font_width_px, float font_height_px)
{
    // 2D index of the ASCII character in the font atlas
    float char_index_y = floor(char_ascii / 16.0);
    float char_index_x = char_ascii - char_index_y * 16.0;

    // Start UV of the character in the font atlas
    float char_base_uv_x = char_index_x / 16.0;
    float char_base_uv_y = char_index_y / 16.0;

    // UV within the character itself, scaled to the font atlas
    float char_uv_x = pos_x / (font_width_px * 16.0);
    float char_uv_y = pos_y / (font_height_px * 16.0);

    vec2 uv;
    uv.x = char_base_uv_x + char_uv_x;
    uv.y = char_base_uv_y + char_uv_y;

    // Apply colour to the text in premultiplied alpha space
    vec4 t = texture(inFontAtlasTextre, uv);
    vec3 colour = vec3(1.0, 1.0, 1.0) * 0.25;
    return vec4(colour * t.a, t.a);
}

void main()
{
    // Font description
    float font_width_px = inTextBufferDesc.fontWidth;
    float font_height_px = inTextBufferDesc.fontHeight;
    float text_buffer_length = inTextBufferDesc.textBufferLength;

    // Text range in the text buffer
    vec2 pos_in_box_px = varPosInBoxPx_TextEntry.xy; 
    float text_buffer_offset = varPosInBoxPx_TextEntry.z;
    float text_length_chars = varPosInBoxPx_TextEntry.w;
    float text_length_px = text_length_chars * font_width_px;

    // Text placement offset within the box
    const vec2 text_offset_px = vec2(4.0, 3.0);

    vec4 box_colour = vec4(varColour_TimeMs.rgb, 1.0);

    // Add a subtle border to the box so that you can visually separate samples when they are next to each other
    vec2 top_left = min(pos_in_box_px.xy, 2.0);
    float both = min(top_left.x, top_left.y);
    box_colour.rgb *= (0.8 + both * 0.1);

    vec4 text_colour = vec4(0.0);

    float text_end_px = text_length_px + text_offset_px.x + font_width_px;
    float time_length_px = (varTimeChars + 4.0) * font_width_px;
    if (pos_in_box_px.x > text_end_px && pos_in_box_px.x < text_end_px + time_length_px)
    {
        float time_ms = varColour_TimeMs.w;

        vec2 time_pixel_pos;
        time_pixel_pos.x = max(min(pos_in_box_px.x - text_end_px, time_length_px), 0.0);
        time_pixel_pos.y = max(min(pos_in_box_px.y - text_offset_px.y, font_height_px - 1.0), 0.0);

        float time_index = floor(time_pixel_pos.x / font_width_px);
        if (time_index < varTimeChars)
        {
            // Use base-10 integer digit counting to calculate the divisor needed to bring this digit below 10
            float time_divisor = 1.0;
            for (int i = 0; i < int(varTimeChars - time_index - 1.0); i++)
            {
                time_divisor *= 10.0;
            }

            // Calculate digit
            float time_shifted_int = floor(time_ms / time_divisor);
            float time_digit = floor(mod(time_shifted_int, 10.0));

            text_colour = LookupCharacter(48.0 + time_digit,
                time_pixel_pos.x - time_index * font_width_px,
                time_pixel_pos.y,
                font_width_px, font_height_px);
        }
        else if (time_index == varTimeChars)
        {
            text_colour = LookupCharacter(46.0,
                time_pixel_pos.x - time_index * font_width_px,
                time_pixel_pos.y,
                font_width_px, font_height_px);
        }
        else if (time_index == varTimeChars + 1.0)
        {
            float time_digit = floor(mod(time_ms * 10.0, 10.0));
            text_colour = LookupCharacter(48.0 + time_digit,
                time_pixel_pos.x - time_index * font_width_px,
                time_pixel_pos.y,
                font_width_px, font_height_px);
        }
        else if (time_index == varTimeChars + 2.0)
        {
            float time_digit = floor(mod(time_ms * 10.0, 10.0));
            text_colour = LookupCharacter(109.0,
                time_pixel_pos.x - time_index * font_width_px,
                time_pixel_pos.y,
                font_width_px, font_height_px);
        }
        else if (time_index == varTimeChars + 3.0)
        {
            float time_digit = floor(mod(time_ms * 10.0, 10.0));
            text_colour = LookupCharacter(115.0, time_pixel_pos.x - time_index * font_width_px, time_pixel_pos.y, font_width_px, font_height_px);
        }
    }
    else
    {
        // Text pixel position clamped to the bounds of the full word, allowing leakage to neighbouring NULL characters to pad zeroes
        vec2 text_pixel_pos;
        text_pixel_pos.x = max(min(pos_in_box_px.x - text_offset_px.x, text_length_px), -1.0);
        text_pixel_pos.y = max(min(pos_in_box_px.y - text_offset_px.y, font_height_px - 1.0), 0.0);

        // Index of the current character in the text buffer
        float text_index = text_buffer_offset + floor(text_pixel_pos.x / font_width_px);

        // Sample the 1D text buffer to get the ASCII character index
        vec2 char_uv = vec2((text_index + 0.5) / text_buffer_length, 0.5);
        float char_ascii = texture(inTextBuffer, char_uv).a * 255.0;

        text_colour = LookupCharacter(char_ascii,
            text_pixel_pos.x - (text_index - text_buffer_offset) * font_width_px,
            text_pixel_pos.y,
            font_width_px, font_height_px);
    }

    // Bring out of premultiplied alpha space and lerp with the box colour
    float inv_alpha = text_colour.a == 0.0 ? 1.0 : 1.0 / text_colour.a;
    outColour = mix(box_colour, vec4(text_colour.rgb * inv_alpha, 1.0), text_colour.a);
}
`;