Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Composite Operation on StageGL? #1029

Open
danzen opened this issue Jun 29, 2019 · 11 comments
Open

Composite Operation on StageGL? #1029

danzen opened this issue Jun 29, 2019 · 11 comments

Comments

@danzen
Copy link
Contributor

danzen commented Jun 29, 2019

Hey folks - does compositeOperation work on StageGL? I can't seem to get it working. It might be related to #943.

@Pi-Bouf
Copy link

Pi-Bouf commented Aug 5, 2019

Yes, it's working !
Look the 3.4.1. The mix-blend-mode property part at this link: https://drafts.fxtf.org/compositing/

You can use: normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue |
saturation | color | luminosity

@danzen
Copy link
Contributor Author

danzen commented Aug 5, 2019

Thanks @Pi-Bouf - how do we apply the mix-blend-mode property to an object in CreateJS?

@Pi-Bouf
Copy link

Pi-Bouf commented Aug 16, 2019

Like this:

bitmap.compositeOperation = "multiply";

@danzen
Copy link
Contributor Author

danzen commented Aug 16, 2019

Hi @Pi-Bouf compositeOperation is what I am using and it is not working. Is there an update since Easel V1 that needs to be used? If I set the stage to stageGL obj.compositeOperation = "difference"; does not work - if I use a regular stage then it works. I am applying it to a cached shape. If this should work or works for you guys, then I can put together a CreateJS based test - right now I am testing in ZIM which makes the CreateJS objects in the background. Thanks - sorry to be a bother.

@Pi-Bouf
Copy link

Pi-Bouf commented Aug 20, 2019

No problem my dude ! :D @danzen

I never touch the StageGL (because i can't make a linear background), so i can't help you on it... I only use compositeOperation on regular stage, sorry !

@Pi-Bouf
Copy link

Pi-Bouf commented Jan 19, 2020

Hello @danzen

Have you find a solution ? I have same problem now, I understand x)

@danzen
Copy link
Contributor Author

danzen commented Jan 20, 2020

@Pi-Bouf Just did some more checking around and am not sure. I could not find anything specific that said it can't be done in general. I saw some posts saying you can apply composite operation on a 2D canvas and then write to the gpu canvas - but they all say it is slow. So... let us know if anyone has any thoughts. For now... if I need it I overlay a 2D canvas - or just use the 2D canvas and not a GPU one. I an sure @gskinner or @lannymcnie would know off the top of their head...

@Pi-Bouf
Copy link

Pi-Bouf commented Jan 20, 2020

Oh shit... x)

But I have an idea: if you make sprite and you cache it, it works !
So we can do that:
Make a sprite instead of bitmap, cache it and reuse it like a BitmapCache :D

I will try today...

@Pi-Bouf
Copy link

Pi-Bouf commented Jan 20, 2020

OK, it don't work like this, it's just more... lighted !

@danzen
Copy link
Contributor Author

danzen commented Jan 20, 2020

Do you have a background shape on the canvas? You might need that to get the proper composite operation effect...

@Pi-Bouf
Copy link

Pi-Bouf commented Jan 20, 2020

Yes ! :/ It don't work !

I try with Easeljs NEXT, there are some other WebGL things for the composites operations

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants