Цей сайт найкраще переглядати в сучасному браузері з включеним JavaScript.

Artefacts between parts of the body

Nineseven

We use HTML5 Embeddable Widget and have artefact in models between different parts of the body http://c2n.me/3FFVd3z.
Live preview http://aviasales.nineseven.by/. How we can fix this? Maybe some export settings?

Nate

Try PMA or no PMA in your atlas.

Pharan

Looks more like depth/alpha cutoff stuff.
It could also just be some strange blendfunc.

Or images saved as PNG-8 instead of PNG-24?

Nineseven

Thanks for your response. I have tried PMA/noPMA. It affects only the color of this artefacts. On screenshot they are dark, and other way they are light. We use png24.
Also i dont see any artefacts through the spine (attached the image). So maybe it's runtime render bug, or export settings.
Any ideas?

Nate

Is that spine-ts with Canvas? Are you using meshes and SkeletonRenderer.useTriangleRendering?
spine-runtimes/spine-ts at master
"Mesh attachments are supported by setting spine.canvas.SkeletonRenderer.useTriangleRendering to true. Note that this method is slow and may lead to artifacts on some browsers." Unfortunately this is a browser limitation, there is no workaround for Canvas. Meshes work fine with spine-ts WebGL.

Nineseven

How can we use spine.canvas.SkeletonRenderer.useTriangleRendering for js-widget?

Or this is only for WebGL? Can we use WebGL as DOM-element with transparent background?

Mario

You can't. The widget only works with a WebGL canvas I'm afraid. You can set the background color of the WebGL canvas of the widget to transparent and add the canvas anywhere in your DOM. See the widget docs on how to set the background color spine-runtimes/spine-ts at master.

When you tried PMA, did you enable it via data-premultiplied-alpha in the widget configuration (or the corresponding JavaScript configuration)?

Nineseven

We use widget this way (attached). After it fills with the canvas. Maybe i need to add some properties?
We did transparency using alpha 0.

Mario

Ah, that explains why PMA didn't fix the issue. Please do the following:

Export your Spine project using pre-multiplied alpha in the texture atlas export settings enabled http://sht.tl/ROHzxZ
Add the following to your JavaScript widget configuration

new spine.SpineWidget(..., {
   ...,
   premultipliedAlpha: true,
   ...
});

That should do the trick.

Pharan

Why are the outlines blue though?

Nineseven

badlogic написав
Ah, that explains why PMA didn't fix the issue. Please do the following:

Export your Spine project using pre-multiplied alpha in the texture atlas export settings enabled http://sht.tl/ROHzxZ

Add the following to your JavaScript widget configuration
new spine.SpineWidget(..., {
   ...,
   premultipliedAlpha: true,
   ...
});
That should do the trick.

It works! Thanks!