I have a 9-slice shader working mostly nicely:

Here, both the sprites are separate images, so the shader code works well:

varying vec4 color;
varying vec2 texCoord;

uniform sampler2D tex;

uniform vec2 u_dimensions;
uniform vec2 u_border;

float map(float value, float originalMin, float originalMax, float newMin, float newMax) {
    return (value - originalMin) / (originalMax - originalMin) * (newMax - newMin) + newMin;
}

// Helper function, because WET code is bad code
// Takes in the coordinate on the current axis and the borders 
float processAxis(float coord, float textureBorder, float windowBorder) {
    if (coord < windowBorder)
        return map(coord, 0, windowBorder, 0, textureBorder) ;
    if (coord < 1 - windowBorder) 
        return map(coord,  windowBorder, 1 - windowBorder, textureBorder, 1 - textureBorder);
    return map(coord, 1 - windowBorder, 1, 1 - textureBorder, 1);
} 

void main(void) {
    vec2 newUV = vec2(
        processAxis(texCoord.x, u_border.x, u_dimensions.x),
        processAxis(texCoord.y, u_border.y, u_dimensions.y)
    );
    // Output the color
    gl_FragColor = texture2D(tex, newUV);
}

External from the shader, I upload vec2(slice/box.w, slice/box.h) into the u_dimensions variable, and vec2(slice/clip.w, slice/clip.h) into u_border. In this scenario, box represents the box dimensions, and clip represents dimensions of the 24x24 image to be 9-sliced, and slice is 8 (the size of each slice in pixels).

This is great and all, but it's very disagreeable if I decide I'm going to organize the various 9-slice images into a single image sprite sheet.

Because OpenGL works between 0.0 and 1.0 instead of true pixel coordinates, and processes the full images rather than just the contents of the clipping rectangles, I'm kind of stumped about how to tell the shader to do what I need it to do. Anyone have pro advice on how to get it to be more sprite-sheet-friendly? Thank you!

Thanks! @Wyrframe Here is my current result:

It seems a little nearer to correct, but there's also some visible stretching on the left now, and the right border is still missing. I definitely think you're onto something with the use of subsprites, though! Also, what does the mix function do in this? Do you have any links to further reading on the use of subsprites and how mix plays in? Thanks!

Update:

With some additional fiddling around with the shader code, I was able to get this result:

Current shader code, for anyone in the future trying to do the same thing:

varying vec4 color;
varying vec2 texCoord;

uniform sampler2D tex;

uniform vec2 u_dimensions;
uniform vec2 u_border;

float map(float value, float originalMin, float originalMax, float newMin, float newMax) {
    return (value - originalMin) / (originalMax - originalMin) * (newMax - newMin) + newMin;
}

// Helper function, because WET code is bad code
// Takes in the coordinate on the current axis and the borders 
float processAxis(float coord, float textureBorder, float windowBorder) {
    if (coord < windowBorder)
        return map(coord, 0, windowBorder, 0, textureBorder) ;
    if (coord < 1 - windowBorder) 
        return map(coord,  windowBorder, 1 - windowBorder, textureBorder, 1 - textureBorder);
    return map(coord, 1 - windowBorder, 1, 1 - textureBorder, 1);
}

void main(void) {
    vec2 newUV = vec2(
        processAxis(texCoord.x, u_border.x, u_dimensions.x),
        processAxis(texCoord.y, u_border.y, u_dimensions.y)
    );
    newUV.x+=2.0; // which image to use: 0, 1, or 2
    newUV.x*=24.0/120; // clip.w / texture.w
    newUV.y*=24.0/48; // clip.h / texture.h
    gl_FragColor = texture2D(tex, newUV);
}

I still have to figure out how to go about using the 48x48 sprite instead of one of the three 24x24 ones, and update the code to omit the need for hard-coded math, but it looks like the most confusing part is finally out of the way! Fun stuff!

Thanks for clarifying what mix does in your code! @Wyrframe

I never had any luck figuring out how to set it up that way, so I just did this:

void main(void) {
    vec2 newUV = vec2(
        processAxis(texCoord.x, u_border.x, u_dimensions.x),
        processAxis(texCoord.y, u_border.y, u_dimensions.y)
    );
    newUV.xy+=u_clip.xy/u_clip.wz;
    newUV.xy*=u_clip.zw/u_texsize.xy;
    gl_FragColor = texture2D(tex, newUV);
}

Now it works for all the possible clipping coordinates and sizes. I'll probably move the division from the shader into the CPU part of the program so it only has to be evaluated once per draw call instead of once per pixel, but yeah, very cool!

@delicatetreefrog Is it possible to explain your end result as for the vertex and the fragment shader? I understand that this might be a topic that is way back for you, but I tried to implement this, but I still get skewing of the texture and I am so confused and don't know what to do.