spine-canvaskit rendering dark outline on textures

Jjoo · 8 авг 2024

Hi there,

I'm looking into using spine-canvaskit for server side rendering, but I'm noticing that it renders a faint dark outline on the textures (see the cheeks and clothing)

Whereas it looks fine on spine-webgl:

Any ideas? Here is the code, I just used the provided canvaskit examples but with own whole spine rig:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../index.css">
    <script src="https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.js"></script>
    <script src="../dist/iife/spine-canvaskit.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body class="flex flex-col items-center p-4">
    <h1>Skins Mix &amp; Match Example</h1>
    <canvas id=foo style="margin: 0 auto; width: 600px; height: 400px;"></canvas>
</body>

<script type="module">
    async function readFile(path) {
        const response = await fetch(path);
        if (!response.ok) throw new Error("Could not load file " + path);
        return await response.arrayBuffer();
    }

    const canvasElement = document.querySelector("#foo");
    const dpr = window.devicePixelRatio || 1;
    canvasElement.width = canvasElement.clientWidth * dpr;
    canvasElement.height = canvasElement.clientHeight * dpr;

    const ck = await CanvasKitInit();
    const surface = ck.MakeCanvasSurface('foo');
    surface.getCanvas().scale(dpr, dpr);

    const atlas = await spine.loadTextureAtlas(ck, "assets/chibi_15.atlas", readFile);
    const skeletonData = await spine.loadSkeletonData("assets/animee.skel", atlas, readFile);

    const drawable = new spine.SkeletonDrawable(skeletonData);
    drawable.skeleton.scaleX = drawable.skeleton.scaleY = 0.4;
    drawable.skeleton.x = 300;
    drawable.skeleton.y = 380;

    drawable.animationState.setAnimation(0, "Ani_AngryDemonic", true);

    // Create a custom, empty skin
    const skin = new spine.Skin("custom");

    // Add other skins to the custom skin
    skin.addSkin(skeletonData.findSkin('Hair/Hair_Flowy'));
      skin.addSkin(skeletonData.findSkin('Body/Body_Kimono'));
    // Set the skin and the skeleton to the setup pose
    drawable.skeleton.setSkin(skin);
    drawable.skeleton.setSlotsToSetupPose();

    const renderer = new spine.SkeletonRenderer(ck);
    let lastTime = performance.now();
    function drawFrame(canvas) {
        canvas.clear(ck.Color4f(0, 0, 0, 0));

        const now = performance.now();
        const deltaTime = (now - lastTime) / 1000;
        lastTime = now;

        drawable.update(deltaTime);
        renderer.render(canvas, drawable);

        surface.requestAnimationFrame(drawFrame);
    }
    surface.requestAnimationFrame(drawFrame);
</script>

</html>

Misaki · 9 авг 2024

joo spine-canvaskit automatically applies premultiplied alpha to atlas images, so export your atlases without premultiplied alpha. To export your atlases without premultiplied alpha, open the Texture Packer Settings window and uncheck Premultiply alpha. (This is checked by default.)

Jjoo · 9 авг 2024

Misaki
That worked! Thank you so much

Jjoo · 9 авг 2024

@Misaki
Hmm now spine-webgl looks like this. Is there a setting I should apply in code in spine-webgl to get it to work with none Premultiply alpha textures?

Misaki · 9 авг 2024

joo If you use spine-webgl, you can specify whether to use premultiplied alpha when drawing skeletons. If you want to draw the skeleton using the exported atlas without premultiplied alpha, set the second parameter of the drawSkeleton method to false like this:
renderer.drawSkeleton(this.skeleton, false);

Jjoo · 9 авг 2024

ah gotcha. thanks!