Chankse Posted August 9, 2021 Share Posted August 9, 2021 Hello friends. My first post here. So, I'm working on a small project with around hundred images on big ViewPort. I have basic drag-and-drop functionality of images and I'm using manual requestAnimationFrame to render stage only during image dragging. Now I need to add drop-shadow on all Images. I have tried @Pixi/filters-drop-shadow package by bigtimebuddy but during dragging it significantly drops frame rate. Can anyone please suggest any other way to make drop-shadows with good performance. (P.S. I have thought of using pieces of shadow as a png and scale and skew them and assembly them in a way to look as real drop-shadow on any size of image on any zoom factor. But, that's kind of ridiculously complicated idea and I'm hoping for better suggestions. ) Thank you in advance. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 9, 2021 Share Posted August 9, 2021 its possible to generate SDF in runtime and then you can do any blur within very small price. I'll try to find my old example, we did it somewhere here or in pixijs issues Quote Link to comment Share on other sites More sharing options...
Chankse Posted August 10, 2021 Author Share Posted August 10, 2021 @ivan.popelyshevHey Ivan, Thank you very much for so quick response. Is there any way you can link that example? or give me some advice where to start studing/researching about SDF, because I'm not really familiar with WebGL. One more question, as much as I understand SDF is WebGL based thing, so, if for some reason I will need to use CanvasRenderer in Pixi instead of WebGL based Renderer, will it still work? Quote Link to comment Share on other sites More sharing options...
Chankse Posted August 10, 2021 Author Share Posted August 10, 2021 Also, Canvas 2D context has different variables for shadows. Is there any way i can use that in pixi app? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 10, 2021 Share Posted August 10, 2021 > if for some reason I will need to use CanvasRenderer in Pixi instead of WebGL based Renderer, will it still work? No. SVG filters are the only way for you then. > Canvas 2D context has different variables for shadows. Is there any way i can use that in pixi app? Its hell for performance. You have to cache everything. OK, then do it through caching, renderTextures and stuff. use pixi filters for webgl, use canvas2d for other, ot just put every small thing in canvas2d, spawn shadow and Texture.from() it. Quote Link to comment Share on other sites More sharing options...
Chankse Posted August 10, 2021 Author Share Posted August 10, 2021 No, I don't need Canvas Renderer right now and I don't think I will, I just asked. If there is a good and performant way with SDF, I prefer to do it that way. Today I was trying to create my own shaders based custom filter, but i could not really figure it out as well. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 10, 2021 Share Posted August 10, 2021 blur with 5x5 base that can achieve any strength: https://www.pixiplayground.com/#/edit/HqCi0OZQaf53blo_WlokB unfortunately, not all mobile devices can handle it. same with 4x4: https://www.pixiplayground.com/#/edit/H5O1kXzlaqtobuGfEVaIy Quote Link to comment Share on other sites More sharing options...
Chankse Posted August 11, 2021 Author Share Posted August 11, 2021 Thanks a lot Ivan. I have some other staff to do right now and once I'll be able to, I'll try that out and get back with results Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.