I have an HTML5 animation app that uses the Spine HTML5 WebGL runtime for rendering. The image below shows the issue I'm having...
The head is rendered onto a canvas element. The top and bottom halves of the head have a "seam" between them. It looks possibly like a 50% alpha effect at the top edge of the mouth. I would like the two parts to be joined seamlessly as I see them within the Spine editor.
Things I've looked at and or tried to get rid of the seam:
- All tests in HTML5 app are performed with a clean cache before execution.
- Verified that the part images within the exported atlas PNG do not contain translucent (alpha < 1) pixels at their edges.
- Aligning the translation X/Y of slots in the Spine editor on even numbers.
- Trying Y+1, Y+2, Y-1, Y-2 variations of positioning in the Spine editor.
- Combinations of export settings - PNG format, aliasing, rotation, strip whitespace, edge padding.
- Adding an empty row of alpha-0 pixels in the part asset as padding.
- Upgrading to latest version of HTML5 runtime. (@todays version)
- Loading in a different skeleton to HTML5 app that uses entirely different assets (it shows the same seam problem).
I'm running out of ideas! My code is based on what I found here: spine-runtimes/index.html at 3.6
I suspect the shader may be introducing the artifact. But I will be honest
that is a fairly difficult part of the code for me to understand.
Any ideas? Maybe someone has asked a similar question already?
-Erik