hey @Davide sorry to bother you. If you could help here it will really be appreciated. Thanks

@Davide If it's not possible using runtime. Is there anything we can do in spine editor to make this a looping background ?

@Davide In the 'html-id' component only I want multiple same skeletons to be filled. could it be happening that they are overlapping? Is there a way to check this where are the other skeletons being rendered on my screen ?

Davide Thanks for the code @Davide. Let me try this. I didn't realise you replied so I pasted my current code here. Please have a look at that. Meanwhile I am trying this.

Thanks @Davide, now i have figured out where to find it and yes it's right, it's definitely easier to work with .

Hi @Davide i am wondering as i was looking into the source code in the pixi spine v8 repo under

Spine.ts

readonly _slotsObject: Record<string, { slot: Slot, container: Container, followAttachmentTimeline: boolean } | null>

Do you think it will work if i iterate over the slots which has the pixijs Container and apply my normal filter map there?

In my filter, i pass in the original texture (the atlas) so i can remap the vTextureCoord to the original texture coordinate to sample the normal map.

Im not sure if theres more things that goes on behind the hood, but do you think this would work?

precision mediump float;

in vec2 vTextureCoord;

uniform vec4 uInputSize;
uniform vec4 uOutputFrame;
uniform sampler2D uTexture;
uniform sampler2D uNormalTexture;
uniform vec3 uLight; // x, y, intensity
uniform float uAmbient;

void main(void)
{
    // Sample the original texture using vTextureCoord
    vec4 color = texture2D(uTexture, vTextureCoord);

    if (color.a < 0.0001) {
        discard;
    }

    if(uLight[2] > 0.0) {
        // Sample the normal map (the UVs for uNormalTexture is not vTextureCoord, need to recalculate)
        // See https://github.com/pixijs/pixijs/issues/6266
        // See https://github.com/pixijs/pixijs/wiki/v5-Creating-filters#conversion-functions
        vec4 normalColor = texture2D(uNormalTexture, vTextureCoord * uInputSize.xy /  uOutputFrame.zw);
        
        // Convert normal map color from [0,1] to [-1,1] range
        vec3 normal = normalize(normalColor.rgb * 2.0 - 1.0);
        
        // Create light direction vector
        vec3 lightDir = normalize(vec3(uLight.xy, 1.0));
        
        // Calculate dot product between normal and light direction
        float lightIntensity = max(dot(normal, lightDir), 0.0);
        
        // Apply light intensity and user-defined light strength
        float finalLightIntensity = mix(uAmbient, 1.0, lightIntensity * uLight[2]);
        
        // Apply lighting to color
        color.rgb *= finalLightIntensity;
    }

    gl_FragColor = color;
}

Hi @Davide

const sprite = new Sprite(texture);

const container = new Container();

container.addChild(sprite);

sprite.angle = bone.localToWorldRotation(
    bone.rotation
);

this.avatar.spine.addSlotObject(slot, container);

this works, however for some animations the weapon flips 180 degrees, even though it is correct in spine not sure if you have experience this before?

As @Davide said, a few solutions have been posted. TLDR: You need to use a viewport node to render your 2d sprite. It is not ideal but it supports shadows, lighting and web export (among other things). I did a performance stress test and I could render 80 sprites at 60fps on both desktop and web. It would dip after.

Davide That works, @Davide! Just a small thing—right now, the keydown event plays an animation on its track as expected, but play() plays the first animation in a loop.

Hmm, that's because setViewport sets the animation:
EsotericSoftware/spine-runtimesblob/4.2/spine-ts/spine-player/src/Player.ts#L731

@Davide, why does it do that?

@Davide so, I still didnt understand what do I have to do?

it renders like this if I provide viewport width & height values and also the same if I dont provide width and height

And if I change resolution, one of them becomes bigger

@Davide i think its because of a mesh trace, one character is s bit wider. And its mesh is a bit wider.

To fit both of them in a 600x600 container spine player scales the wider one a bit down.

I want to override this behavior somehow, or what is the correct flow?

hh_x Your question was originally posted as a reply to the question thread about physics issues in Unity, but I split the thread since the runtime you are using is spine-pixi.

Note that updateWorldTransform(spine.Physics.reset) should be called after the next animation has been applied, because when this is called, the physics are reset for the current pose. In other words, if it is called before the next animation is set, it may not work because the physics will just be reset for the previous animation pose. I am not very familiar with how to specify the order of execution in spine-pixi, so if you are not sure about that, you might want to wait for an answer from @Davide .

@Davide
Thank you for your prompt and perfect work!!
I could add shadows to SkeletonMesh, when I updated npm packages.
sample page: https://t-tonyo-maru.github.io/pub_web_spine2d-threejs_test/

Thank you for updating sample HTML too.
I will try various things!!

Davide The thing is most of the time this request comes directly from the clients "hey dont use alpha animation our engine doesn't render it" and I am not the one who can help them to find the issue they already decided to not use it and we move forward. (phaser runtime - spine 4.2.36)

Once I've received a request from a client to never set alpha 0% instead use 1% if I want to make it transparent(3.8.53)

However for this project where we use spine player client asked me initially to fix black edges I turned off premultiplied alpha instead I should have asked them to turn PMA on their side. now it works fine thanks to your advice @Davide

Indeed, what @Davide said should just work. No need to reinstantiate anything. Similarly, if you have a custom shader, just outfit it with uniforms and change the uniforms. No need to reinstantiate anything in that case either.

@Davide Sounds like a nice feature request to me While making vertex attributes customizable would be challenging, making shaders + uniform access customizable seems straight forward.

@SilverStraw @Davide Thanks! Working!

@Davide was spine-pixi removed? I can't find github page anymore

@Davide hey i've created a minimal reproducible repository:

git clone AndonMitev/phaser-nextjs
npm install
npm start dev