Hi all,
I'm currently working on a web project, where I need to display a vast amount of markers on a map. I am using a package called leaflet-pixi-overlay, which lets one add a PIXI overlay on top of a leaflet map. My markers are sprites which I build from a few svg images (I need to compose these markers, as I change the tint of the svg's). The result is quite pixelated. The issue being that, given the number of players involved (react / leaflet / react-leaflet / leaflet-pixi-overlay / pixijs), I have no clue which layer is not optimal!
One element which I believe to be interesting is that if I zoom the browser's display, reload my page, then zoom back to 100%, then my sprites look just fine.
This is one of these svg's displayed elsewhere in the browser, as an svg:
The same inside my sprite:
And finally the same if I do the zoom in - refresh - zoom back trick:
(these png captures are not as sharp as the actual display, the difference is much more noticeable on my display)
Mainly, the steps I follow to create these sprites are (simplified version):
- import the svg at a resolution higher than what I want (to be able to scale up and down these sprites)
texture = await PIXI.Texture.fromURL( url, { resourceOptions: { width: 200, }, }, );
- create a first sprite at 200px:
const markerSprite = new PIXI.Sprite(texture);
const renderTexture = PIXI.RenderTexture.create({ width: markerSprite.width, height: markerSprite.height, });
- render that sprite:
renderer.render(markerSprite, renderTexture, true);
- create a sprite at the desired size (45px in the capture example):
const displaySprite = new PIXI.sprite(renderTexture);
displaySprite.scale.set(/* scale based on desired size */);
Do you see anything wrong with what I'm doing here? My SVG's do not have backgrounds (I can't have one; as I need to change the different layers's tint), does it prevent ani-aliasing? Does the browser zoom / unzoom trick give any hint as to where the problem might be?
Thanks for reading!