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 & 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>
