search

pixijs / pixi-projection

MIT License
191 stars 34 forks source link

sprite3d as a mask #28

Open gizmooo opened 5 years ago

gizmooo commented 5 years ago

Can I use the sprite3d as a mask? I do it and get an error

https://gizmooo.github.io/pixi-test/index.html

ivanpopelyshev commented 5 years ago

nope, it wont work because i didnt override pixi SpriteMaskFilter to work with it. Why do you need it as mask? perhaps i can give you another solution.

ivanpopelyshev commented 5 years ago

Actually I can do the same thing for 3d: https://github.com/pixijs/pixi-projection/tree/master/src/proj2d/z_masks

I did it for 2d projections.

gizmooo commented 5 years ago

Hi! I have some shapes in which lines are drawn and they move

screenshot

I found a closed issue with sprite2d and thought it was for sprite3d. :confused: If you did that, I would appreciate it! :smile:

ivanpopelyshev commented 5 years ago

OK, done, it works now. Please get latest version from this repo or from npm.

gizmooo commented 5 years ago

It's really cool! Thank you very much!

https://gizmooo.github.io/pixi-test/index-working.html

Native anti-aliasing does not work due to post-processing. Right? I added a custom shader to the sprite3d and it turned out the same

ivanpopelyshev commented 5 years ago

No, but you can swap it to filtering: add transparent pixel edge to the image and it will solve it for points that has scale near 1. If you need scale near 0.5, make 2 transparent pixel edge and add mipmaps (make it pow2), if 0.25 then 4 pixels, and so on. If the image is too skewed, you'll need anisotropic filtration, pixi textureManager cant do that, sorry.

ivanpopelyshev commented 5 years ago

Oh, wait, we need AA for mask edge, right? My shader already has that, I don't know why it doesnt work, for PIXI.Texture.WHITE, upscaled 10x10, it needs to have VERY blurry edge. lets see the source: https://github.com/pixijs/pixi-projection/blob/master/src/proj2d/z_masks/SpriteMaskFilter.ts#L20

Oh wait, now i see that - it doesnt have AA on edge like old pixi spriteMask did. i'll try to fix it for your example.

ivanpopelyshev commented 5 years ago

Try switch "WHITE" to something with transparent edge and more close to your source width/height

gizmooo commented 5 years ago

Oh yeah! I added a transparent edge to the mask texture and it looks good.

https://gizmooo.github.io/pixi-test/index-working-antialiasing.html

anito commented 4 years ago

Pixi v5.2.1 pixi-projection v0.3.7

I'd like to be able to use Sprite3d as mask, however keep stumbling over the following:

Pen 1 Using Regular PIXI.Container and PIXI.Sprite as mask ( no projection loaded ) works just fine.

Pen 2 Same code as above. Eventhough nowhere used in the code, the fact pixi-projection is loaded here, breaks mask

There I'd love to get: Pen 3 Same thing as above, only difference is using PIXI.projection.Container3d and PIXI.projection.Sprite3d as mask (not surprisingly also breaks mask)

Note: pixi-projection v.0.3.7 was loaded from another pen (since I didn't know a better way to include the lastest version)

I'm quite sure @gizmooo was achieving exactly this at mogney.com, however I guess with different pixijs / pixi-projection version sets...?

I'd appreciate if you could you point me in the right direction. Thx

ivanpopelyshev commented 4 years ago

Note: pixi-projection v.0.3.7 was loaded from another pen (since I didn't know a better way to include the lastest version)

I usually put it in https://pixijs.io/examples/pixi-plugins/pixi-projection.js , to pixi examples page.

Thank you for report, I'll look into it but i dont know when :(

gizmooo commented 4 years ago

@anito, if it helps you, I used these versions "pixi-projection": "0.2.7", "pixi.js": "4.8.8",

anito commented 4 years ago

Thanks @ivanpopelyshev :), I really appreciate all your hard work you're putting into all that!

I usually put it in https://pixijs.io/examples/pixi-plugins/pixi-projection.js , to pixi examples page.

This version shows 31 differences to the newer one I'm using. I think you updated this 2 month ago in order to fix mask Sprite problem

The reason I'm using the newer pixi-projection is because I'm getting this error on the version you suggested: screenshot 1 screenshot 2

@gizmooo Hi Anton, awesome job, really! :) Thanks for providing your versions to me! I actually ment to use the most recent versions in my set, but I think I will have to go your way :)

ivanpopelyshev commented 4 years ago

OK, fixed, new version is 3.0.8 , also re-published in examples.

There was extra copy of this.renderer.filter.push(target, alphaMaskFilter); I dont know how did you guys miss it. I cant possibly maintain my 10 pixi plugins without bugs. I dont even have visual tests for them.

anito commented 4 years ago

Wow - working!!!!!!!! I'm completely speechless... T H A N K S :)