Weird alpha issue

brettstack

Hi team,

I have some assets that should show with a light glow around them, but when I render them they don't have enough opacity. Any idea what setting I need to do (either in export or runtime) to fix this?

Thanks!
Brett.

Here's another example to show that there is some alpha going on here, but it's way more intense than when viewing this image normally

And here's the asset by itself and the atlas text

Equipment/MeleeWeapon1H/Basic/Wand/WaterAdeptWand2.png
size: 512,512
format: RGBA8888
filter: Linear,Linear
repeat: none
Equipment/MeleeWeapon1H/Basic/Wand/WaterAdeptWand2
rotate: false
xy: 0, 0
size: 512, 512
orig: 512, 512
offset: 0, 0
index: -1

Correct image

Nate

when I render them

How are you rendering them? Are you exporting a PNG? Please note that additive blending may not make sense when exporting a PNG with a transparent background, see here:
Export - Spine User Guide: Additive blending

brettstack

I'm rendering by dynamically loading assets and attaching them to skeleton:


const atlas = new spine.TextureAtlas(atlasText, textureLoader)
const atlasLoader = new spine.AtlasAttachmentLoader(atlas)
const placeholderAttachmentName = PLACEHOLDER_ATTACHMENTS_MAP[slotName].attachmentName
const attachmentSkinEntry = skeleton.data.defaultSkin.getAttachments().find((skinEntry) => skinEntry.name === placeholderAttachmentName)
const placeholderAttachment = attachmentSkinEntry.attachment
const attachment = atlasLoader.newRegionAttachment(skeleton.data.defaultSkin, attachmentName, attachmentName)
const textureRegion = atlas.findRegion(attachmentName)
attachment.setRegion(textureRegion)
attachment.width = textureRegion.width
attachment.height = textureRegion.height

attachment.rotation = placeholderAttachment.rotation
attachment.x = placeholderAttachment.x
attachment.y = placeholderAttachment.y
attachment.updateOffset()

In this image when I use gl.clearColor(1, 1, 1, 1) you can see that the staff in the left hand is correct and there's a faint blue glow (though it's hard to see). However, when it's rendered over other areas in the right hand you can see it still has this issue.

It sounds like it might be the additive blending you mentioned

"When a slot uses additive blending, its attachment is rendered additively when the image or video has a background color. If the background is transparent, the attachment is rendered additively when over other images, but it is not rendered additively where it is over the transparent background. If the attachment image uses opaque black, the black will be seen where it is over the transparent background. To avoid this, use transparent instead of opaque black."

What's the solution here? Thank you so much!

Nate

The docs I linked are for export, when Spine writes an image or video frame. Since you are rendering at runtime, it doesn't apply.

It's hard to understand what exactly you want to render and then what you are seeing instead. My guess is that you are simply seeing additive blending, which is where the colors in the attachment's image and added to the colors in the background. When your background is white, any colors added to it will be white. That's because white is 255,255,255 which is the highest values you can have for red, green, blue. Try rendering on top of a black or gray background, then you'll likely see your images render closer to what you expected or what you see in Spine, which has a gray background by default.

brettstack

Okay so with some console.log I was able to find console.log('slot.data.blendMode', slot.data.blendMode) yields 0. By doing slot.data.blendMode = 2 it fixes the staff but breaks everything else. Does this give you any hints on how to solve?

image

And here it is on black background which has the same issue

The expected output is the black background image, but with the staffs emitting a very subtle glow like you can (barely) see in the image above it.

Nate

There's not really a solution because what you are seeing is how additive blending is supposed to work. On a white background you'll get white, because white + any color = white. On a black background you'll get the color of the attachment image, because black is zero, so black + any color = the same color. You only get more interesting blending between white and black.

Try gray. Try using an actual game background instead of white, black, or gray. If you don't like the additive blending effect, you'll have to get the effect another way. You can try using both a non-additive image and an additive image, so when it is over white you'll still see the non-additive image.

brettstack

"On a black background you'll get the color of the attachment image, because black is zero, so black + any color = the same color" - the issue is that those big blue circles shouldn't exist at all. I've attached a zoomed in image of the staff tip as well as how it renders with a game background (same issue)

Nate

Ah, I finally get it, thanks. All your images appear at the bottom of your post, then it's hard to tell which image your text refers to.

It looks like you use the spine-ts runtime. Are you rendering with canvas, threejs, webgl, or a game toolkit like pixijs?

Likely the next thing I'll need to ask is to please provide the skeleton JSON, atlas file, and images. You can send them to contact@esotericsoftware.com if you'd rather not post them publicly.

brettstack

Thanks! Haha I thought there was a bit of miscommunication. I'll send it through. Using spine-ts (v3.x) with webgl.

Sent!

Fixed with gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true)

Nate

Ah, sorry, I wasn't familiar with that issue! I'll keep it in mind for the future.

Turns out spine-webgl has a global setting for this, GLTexure.DISABLE_UNPACK_PREMULTIPLIED_ALPHA:
https://github.com/EsotericSoftware/spine-runtimes/blob/d521339bfe7ae6329a9ad75b7c3f7ef45755fe6e/spine-ts/spine-webgl/src/GLTexture.ts#L80
You can use it by running this code early on:

GLTexture.DISABLE_UNPACK_PREMULTIPLIED_ALPHA_WEBGL = true;

When that is true, spine-webgl will set gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);, which may solve your problem.