[ts][pixi] Fix dark tint + alpha not working. Closes #2550.

This commit is contained in:
Davide Tantillo 2024-06-17 16:02:13 +02:00
parent d1bbb102d3
commit cc6fc1f5b4
3 changed files with 33 additions and 7 deletions

View File

@ -99,6 +99,7 @@ export class DarkSlotMesh extends DarkTintMesh implements ISlotMesh {
this.tint = DarkSlotMesh.auxColor;
}
this.blendMode = SpineTexture.toPixiBlending(slotBlendMode);
this.alpha = DarkSlotMesh.auxColor[3];
if (this.geometry.indexBuffer.data.length !== finalIndices.length) {
this.geometry.indexBuffer.data = new Uint32Array(finalIndices);

View File

@ -338,6 +338,20 @@ export class Spine extends Container {
pixiObject.mask = null;
}
}
/*
* Colors in pixi are premultiplied.
* Pixi blending modes are modified to work with premultiplied colors. We cannot create custom blending modes.
* Textures are loaded as premultiplied (see assers/atlasLoader.ts: alphaMode: `page.pma ? ALPHA_MODES.PMA : ALPHA_MODES.UNPACK`):
* - textures non premultiplied are premultiplied on GPU on upload
* - textures premultiplied are uploaded on GPU as is since they are already premultiplied
*
* We need to take this into consideration and calculates final colors for both light and dark color as if textures were always premultiplied.
* This implies for example that alpha for dark tint is always 1. This is way in DarkTintRenderer we have only the alpha of the light color.
* We implies alpha of dark color as 1 and just respective alpha byte to 1.
* (see DarkTintRenderer: const darkargb = (0xFF << 24) | darkTintRGB;)
* If we ever want to load texture as non premultiplied on GPU, we must add a new dark alpha parameter to the TintMaterial and set the alpha.
*/
private renderMeshes (): void {
this.resetMeshes();
@ -403,15 +417,20 @@ export class Spine extends Container {
const slotColor = slot.color;
const alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
this.lightColor.set(
skeletonColor.r * slotColor.r * attachmentColor.r,
skeletonColor.g * slotColor.g * attachmentColor.g,
skeletonColor.b * slotColor.b * attachmentColor.b,
skeletonColor.r * slotColor.r * attachmentColor.r * alpha,
skeletonColor.g * slotColor.g * attachmentColor.g * alpha,
skeletonColor.b * slotColor.b * attachmentColor.b * alpha,
alpha
);
if (slot.darkColor != null) {
this.darkColor.setFromColor(slot.darkColor);
this.darkColor.set(
slot.darkColor.r * alpha,
slot.darkColor.g * alpha,
slot.darkColor.b * alpha,
1,
);
} else {
this.darkColor.set(0, 0, 0, 0);
this.darkColor.set(0, 0, 0, 1);
}
let finalVertices: NumberArrayLike;
@ -443,6 +462,7 @@ export class Spine extends Container {
verts[tempV++] = this.darkColor.r;
verts[tempV++] = this.darkColor.g;
verts[tempV++] = this.darkColor.b;
verts[tempV++] = this.darkColor.a;
}
}
finalVertices = this.verticesCache;

View File

@ -99,8 +99,13 @@ export class DarkTintRenderer extends BatchRenderer {
const vertexData = element.vertexData;
const textureId = element._texture.baseTexture._batchLocation;
const alpha = Math.min(element.worldAlpha, 1.0);
const argb = Color.shared.setValue(element._tintRGB).toPremultiplied(alpha, (element._texture.baseTexture.alphaMode ?? 0) > 0);
const darkargb = Color.shared.setValue(element._darkTintRGB).toPremultiplied(alpha, (element._texture.baseTexture.alphaMode ?? 0) > 0);
const alphaInt = Math.round(alpha * 255) & 0xFF;
const tintRGB = element._tintRGB & 0xFFFFFF;
const argb = (alphaInt << 24) | tintRGB;
const darkTintRGB = element._darkTintRGB & 0xFFFFFF;
const darkargb = (0xFF << 24) | darkTintRGB;
// lets not worry about tint! for now..
for (let i = 0; i < vertexData.length; i += 2) {