To use a custom fragment shader with spine-player (spine-ts), you will indeed need to dive a bit deeper into the spine-webgl rendering pipeline. The spine-player does not expose direct hooks for modifying the WebGL context in the way you are attempting. However, you can achieve this by using the spine-webgl runtime directly, which provides more control over the rendering process.

Here is an example of how you can integrate a custom shader with spine-webgl:

1. Set up the basic rendering pipeline using spine-webgl:

import { SpineCanvas, AssetManager, SkeletonRenderer, PolygonBatcher, Shader } from '@esotericsoftware/spine-webgl';

// Create the canvas and WebGL context
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

// Load the skeleton and atlas
const assetManager = new AssetManager(gl);
assetManager.loadText('path/to/your/skeleton.json');
assetManager.loadTextureAtlas('path/to/your/atlas.atlas');

assetManager.loadAll().then(() => {
    const atlas = assetManager.get('path/to/your/atlas.atlas');
    const skeletonJson = assetManager.get('path/to/your/skeleton.json');
    const skeletonData = new SkeletonJson(new AtlasAttachmentLoader(atlas)).readSkeletonData(skeletonJson);

    const skeleton = new Skeleton(skeletonData);
    const animationState = new AnimationState(new AnimationStateData(skeletonData));

    // Set up the custom shader
    const vertexShaderSource = `
        attribute vec4 a_position;
        void main() {
            gl_Position = a_position;
        }
    `;
    const fragmentShaderSource = `
        void main() {
            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // all black for testing
        }
    `;
    const shader = new Shader(gl, vertexShaderSource, fragmentShaderSource);

    // Set up the renderer
    const batcher = new PolygonBatcher(gl);
    const skeletonRenderer = new SkeletonRenderer(gl);
    skeletonRenderer.premultipliedAlpha = true;

    // Render loop
    function render() {
        gl.clear(gl.COLOR_BUFFER_BIT);
        shader.bind();
        batcher.begin(shader);
        skeletonRenderer.draw(batcher, skeleton);
        batcher.end();
        requestAnimationFrame(render);
    }

    render();
});

2. Integrate this with your existing setup:

You can replace the SpinePlayer initialization with the above code, ensuring you load the same skeleton and atlas files. This approach gives you full control over the WebGL context and allows you to use custom shaders as needed.

3. Handling multiple skeletons:

If you need to render multiple skeletons, you can reuse the same WebGL context, shaders, and batcher. Just ensure you update the skeleton and animation state for each render call.

By using spine-webgl directly, you can achieve the desired customization with your shaders while maintaining the flexibility to manage the rendering pipeline as needed.

MattSalsa

If you only need to change the color, isn't it sufficient to use skeleton.color like this:

success: (player) => {
    player.skeleton.color.set(1, 0, 0, 1); // tint the skeleton red
}

Alternatively, you could try to monkey patch the Shader.newTwoColoredTextured method, as the player uses that one.
If you need to do more than that, it would be better if you showed us your fragment shader.

MattSalsa

I expected the color change to be easier. That is way more complicated than I expected.
Have you tried monkey patching the shader? Doing that you can modify the shader using the already available attributes/uniforms.

Anyway, I expect the easier way to test it is by cloning the repo and directly modifying the newTwoColoredTextured shader.

Once you are satisfied, you can do a custom build or use the monkey patching approach mentioned above.

MattSalsa

I've quickly looked into it, and allowing a custom shader should only require a couple of lines.

Before thinking to implement that, I need to know if you've added any custom attributes or uniforms to your shader, or if your modifications are based on the current attributes and uniforms.

The easiest thing would probably be for you to paste your custom shader here so that I can directly try what I have in mind.