Question about pixi-spine

[rhythmras]

The color of the blush on the face does not seem to be displayed correctly, what should I do?

[ivan.popelyshev]

I'm trying to return to pixi-spine, i can look at your case later. Does it have new custom blending modes or something from latest-latest version?

[ivan.popelyshev]

Are you sure that you are exporting correct atlas (NO pma) ?

[rhythmras]

18 分鐘前，ivan.popelyshev 說：

您確定要導出正確的圖集（無 pma）嗎？

thanks for being able to answer me,I am Chinese, English is not good, the following content is translated by google

The version I use is

pixi.js:6.3.2  

pixi-spine:3.0.13

Sorry I need to explain, I don't know the structure of the spine.The data for the spine is what I got through elsewhere,I don't know what PMA is

When I select Unpremultiply alpha in the texture unpacker of spine, it can be displayed normally, I think this is the reason,I can get the normal display effect by re-exporting in spine, but the generated images will be much more,Is there a way for pixi-spine to solve this

[rhythmras]

This is all the code I use

[rhythmras]

[ivan.popelyshev]

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

Edited June 2, 2022 by ivan.popelyshev

[rhythmras]

35 minutes ago, ivan.popelyshev said:

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

Awesome, successfully solved my problem, thank you very much!!

[rhythmras]

sorry,I have a problem again,I have high GPU usage when loading,Roughly bounces between 15% and 100%

These 2 pictures are like this when I opened it for the first time,

in vue component:

import { spine2d } from '@/assets/spine'

 methods: {

async createSpine2d (spine) {

      let result = await this.API.musumeaccess(spine)

      musume = spine2d(result.data)

      this.$refs.spimewidth.appendChild(musume.view);

    }

 

 

[rhythmras]

  beforeDestroy () {

      musume.destroy(true)

  }

I try to destroy him when leaving the component,Also used PIXI.utils.clearTextureCache(),but didn't solve my problem,what should I do

On 6/2/2022 at 5:48 PM, ivan.popelyshev said:

Yes, you can tell spine that texture is already premultiplied. Specify alphaMode for all baseTexture that pixi loads. I remember that there's also a special flag 

res.spineboypro.spineAtlas.pages[0].baseTexture.alphaMode = PIXI.ALPHA_MODES.PMA;

Alternatively, I remember there's also special metadata in loader for that

.add('spineboypro', 'lalala.json', 
         { metadata: { imageMetadata: { alphaMode: PIXI.ALPHA_MODES.PMA } }
})

 

 

[rhythmras]

I also tried this way of writing, but it doesn't seem to be the correct way to write it,

I repeatedly jump from a route to the route rendered by pixi, he will prompt

ContextSystem.ts?fffe:141 WARNING: Too many active WebGL contexts. Oldest context will be lost.

n this way, the GPU is normal, but the CPU usage is very high, and there is still a lag

[ivan.popelyshev]

If you are asking how to make sure that your memory is OK and all objects are destroyed - sorry, that's a big topic. Really big. I cant answer on that just in one post.

As for CPU usage, try to use profiler?

[rhythmras]

35 minutes ago, ivan.popelyshev said:

If you are asking how to make sure that your memory is OK and all objects are destroyed - sorry, that's a big topic. Really big. I cant answer on that just in one post.

As for CPU usage, try to use profiler?

I want to cache the loaded png, so that I don't need to reload the existing png in the process of repeatedly entering the component, only load .skel and .atlas, the above loadTexture function is that .skel, .atlas and png are all cached , but the warning WARNING: Too many active WebGL contexts. Oldest context will be lost. I don't know what to do with it, I use destroy(true) when leaving the component only to get him back to the initial state, which doesn't seem to fix it.

I feel that the way I write is not correct, but I really do not know how to write,This problem bothered me for 3 days and finally I gave up.Because itself is also a relatively small projec

I may rewrite it in vue3+vite later,Then try to solve the problem again.

Finally, thanks for your answer,I am very happy because almost no one answered me in other forums,Thank you ! ?

[ivan.popelyshev]

Yes, its possible, people did that many times, please look through issues in pixi-spine github. 

Using same IMAGE: according to https://github.com/pixijs/spine/blob/c7859f31d0653ac4a4ba81a79572c93ad0479e1e/packages/loader-base/src/loaders.ts#L152 , if there's existing entry in resources, it wont. You can just manually copy the resource many times there, wait when it loads and then

Using same ATLAS: its easier, preload atlas before everything and pass it to metadata. Use devtools debug to correct names for those options:

Here's the doc: https://github.com/pixijs/spine/blob/master/examples/single_atlas_multiple_models.md

> This problem bothered me for 3 days and finally I gave up

Maybe the next guy will actually make better docs for this case. 

Edited June 16, 2022 by ivan.popelyshev

[rhythmras]

On 6/16/2022 at 9:41 PM, ivan.popelyshev said:

Maybe the next guy will actually make better docs for this case. 

Hello, I'm back again, the previous problem has been solved, it was caused by a problem with my own writing, every time I jump to the route, I call new PIXI.Application.

Now, I have a new problem.It still seems to be a problem with Unpremultiply alpha, how can I fix it

[ivan.popelyshev]

1. There's flag in spine export

2. There's setting in spine loader that i mentioned

Play with those two things, something has to work

[rhythmras]

1 hour ago, ivan.popelyshev said:

2. There's setting in spine loader that i mentioned

Isn't that so, but even if I give him all the settings, it still doesn't work.

This is the spine file

https://drive.google.com/file/d/1WkTkCsQQ33JHiXJ-RjPk4fmiSuTNDX8z/view?usp=sharing

[rhythmras]

On 8/14/2022 at 8:21 PM, ivan.popelyshev said:

Play with those two things, something has to work

I found that this needs to be set, but I can't find this on pixi

I tried modifying blendMode but nothing works

I really can't find a solution

[ivan.popelyshev]

I'll look but im quite busy at the moment )

[rhythmras]

On 8/18/2022 at 4:25 PM, ivan.popelyshev said:

I'll look but im quite busy at the moment )

Sorry I just found out why

Blending will have no effect if backgroundAlpha is transparent

But i need transparent background,Besides modifying png, is there any good way to solve this problem

Edited August 20, 2022 by rhythmras

[ivan.popelyshev]

I'm the expert on blending but i need more details for that  Why do you need transparent background in your pixijs canvas? I believe i submitted a bug about it to chrome devs and they said "wont fix". 

Edited August 24, 2022 by ivan.popelyshev

[rhythmras]

I just want to do a simple spine display, not going to do something too complicated

On 8/25/2022 at 2:04 AM, ivan.popelyshev said:

Why do you need transparent background in your pixijs canvas?

I have added a background image to the body element. If there is a background on the canvas, it will not look good ╯︿╰

It seems that there is no mix with transparent background together with the normal use of the method, I do not know if you have read the spine file I sent above

Currently I have added another image to the stage to solve this problem

[ivan.popelyshev]

OK, then its defeinitely wont work that way  Because I wanted the same way for another project and chrome guys told me they cant support "alpha=0 R=x G=x B=x" premultiplied rgba emulating additive effect. Depending on OS and graphics driver implementation of layer compositing differs.

[ivan.popelyshev]

In case you want details: https://bugs.chromium.org/p/chromium/issues/detail?id=103412

[rhythmras]

Thanks, but I'm not going to go deep into it, and it's a bit difficult for me