Could FMG use canvas to draw objects rather than svg?
mosuzi opened this issue · comments
Problem
Hi Azgaar,
I am your fan about this fantastic tool. It's doing a pretty cool job which I dreams to do the same since I was a child who was loved to draw on maps.
The more I play on FMG, the more I wish it to be smoother. Then use it to make a huge map and to imagine dramatic stories. However, to be frank, even though I tried all performace optimizations you listed in here, I still got performance problem.
It seems to blame to SVG. Therefore I wonder if this tool could draw objects on a canvas. This breaking change is hard, obviously, but deserved.
I still appreciate your work and your tools if this change is not available.
Again, thanks for your great work.
Solution
Could FMG use canvas to draw objects rather than svg?
Alternatives
Maybe this action will happen after all major features are finished.
Hello,
As for now it cannot as both code and UI highly depend on SVG. Potentially the generation should be completely separated from the presentation and graphics mode can be switched to WebGL or even WebGPU. But this change complexity is more that just creating a new tool, so it's unlikely to come soon.
It's OK now. What a nice tool you have built!
@Azgaar
Ha, I found a performance solution.
The #loading element contains several animated SVG. It still renders on dom after map loaded. This wastes GPU because even though we cannot see it, it still calls GPU to render animations.
Another found is #statePaths seems to cause more GPU wastes. Once I remove it from dom, CPU and GPU costs decrease immediately while dragging map smooths a lot. I guess here may be several solutions to solve the performance issue. It seems to blame to some clip-path.
May be you could found a better solution.
Hello,
#loading is tiny and should not cause significant issues. But it would make sense to remove it when it's not required.
clip-path is slow, but we need it. We can replace it with mask, but it's even slower. SVG engine is not fast in general. Reducing the number of elements and removing some will help, but the map will be too simple. Like we already had to remove some filters and relief elements to improve the performance.
Well, at least I could experiance a smoother FMG lol :D.
I think '#statePaths' is still suspicious and I will check this element later for optimizing it.
Looks weird. #statePaths limits the blur of #statesHalo. But if I remove #statePaths and change 'filter' of #statesHalo into 'none' and change 'stoke-width' of #statesHalo into '2px', map movion becomes faster and there is no obvious huge difference compared to before.
I don't know how this modification influences the whole generator.
Btw, I hosted a fork of your FMG into my own site FMG. And I am going to test my modification of performance on it. I will share you more feedback.
What interesting!