6 ms·

Yes, some of it may be network lag (asset prefetching can help) but some of it is also just UI jank that has nothing to do with the network. I wouldn't really

Yes, some of it may be network lag (asset prefetching can help) but some of it is also just UI jank that has nothing to do with the network. I wouldn't really call it smooth compared to an optimized mapping lib like the other ones. Have you done any benchmarking by FPS, or even just noticing what happens visually when you pan (things blink in and out of existence, for example). Keep in mind that it's already more optimized than any code I could write on my own (kudos!), just not as smooth as the big solutions. If you don't want to use them, more power to ya! Just providing one opinion because you asked for it. Not necessarily trying to convince you to do it differently if you don't want to. Typically people will have made up their minds already anyway, lol.

Farer 2y ago
Okay, thanks. I have one question. What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail? Actually, when zooming in or out quickly, there’s a momentary effect where what was previously rendered lingers for a bit. I don't see this as a major issue, considering it aligns with the concept of eventual consistency. Also, what exactly is the large-scale solution you mentioned? Regarding the movement of the rabbits’ coordinates, it might not appear smooth when zoomed in significantly. This isn't necessarily a performance issue but rather something related to how the animals' coordinates are processed. I plan to improve that part in the future. Anyway, thanks for your interest. I'll definitely consider your feedback!
- solardev 2y ago
  > What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail? When you pan (click and drag, or touch and drag on a phone), all the bushes and the background disappear for what feels like a second or two, even if they're the same bushes as before. No network connections are happening during that pan, it's just a redraw that causes them to blip in and out: https://share.cleanshot.com/KvwXCVl7ZpLYk8KzFBN1 https://share.cleanshot.com/KvwXCVl7ZpLYk8KzFBN1 On Firefox the panning (before mouseup) is itself much laggier than Chrome. (Firefox generally has slower graphics, in my experience). It also suffers from the disappearing graphics on mouseup issue. Same thing happens if I zoom in and out, one mousewheel notch at a time - everything momentarily disappears before rerendering. > Also, what exactly is the large-scale solution you mentioned? By "big", I just meant literally the larger libraries I mentioned earlier (Leaflet, OpenLayers, OpenSeadragon, Konva, Pixi.js, etc.). They're bigger in both in popularity/mindshare, but also in filesize and complexity, which is what you're trying to avoid. However, they do have optimizations for the graphics rendering pipeline that maybe you can borrow from, if you look at their source code. Some examples: * https://openlayers.org/en/latest/examples/icon-sprite-webgl.html https://openlayers.org/en/latest/examples/icon-sprite-webgl.... (this one in particular is super smooth for me compared to your app's current version, but it uses WebGL) * https://openlayers.org/en/latest/examples/synthetic-points.html https://openlayers.org/en/latest/examples/synthetic-points.h... (demo without WebGL, much laggier) * https://konvajs.org/docs/sandbox/20000_Nodes.html https://konvajs.org/docs/sandbox/20000_Nodes.html * https://www.goodboydigital.com/pixijs/bunnymark/ https://www.goodboydigital.com/pixijs/bunnymark/ * http://fabricjs.com//group-dragging http://fabricjs.com//group-dragging * Benchmarks: https://github.com/slaylines/canvas-engines-comparison?tab=readme-ov-file https://github.com/slaylines/canvas-engines-comparison?tab=r... (current build seems broken)
  - Farer 2y ago
    And the map UX isn’t complete yet. I also plan to finish a smooth map UX like Google Maps or the ones you mentioned. I’d appreciate it if you could keep an eye on it a bit longer.
  - Farer 2y ago
    Oh, I get it now! Currently, when dragging or zooming in and out, the ground, weeds, and rabbits are being redrawn. Of course, for the weeds, the browser is using a cache of about a minute, but due to network latency, this part might be even more noticeable to you. I personally really like Firefox as a browser, but as you mentioned, I'm quite disappointed to see that its rendering performance is relatively poor. I'm also a bit worried about whether it will continue to receive good updates. (A long time ago, I even bought a smartphone that came with Firefox OS. lol) I'll definitely need to take a proper look at the solutions you mentioned this time. I also remember Konva being very useful in the past. Thank you for the detailed and kind response.
  - Farer 2y ago
    Since this project is just starting to implement canvas, there might not be any noticeable visual performance improvements yet. I imagine I’ll probably start using WebGL as more animals are added.

Farer 2y ago

Okay, thanks. I have one question. What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail? Actually, when zooming in or out quickly, there’s a momentary effect where what was previously rendered lingers for a bit. I don't see this as a major issue, considering it aligns with the concept of eventual consistency. Also, what exactly is the large-scale solution you mentioned? Regarding the movement of the rabbits’ coordinates, it might not appear smooth when zoomed in significantly. This isn't necessarily a performance issue but rather something related to how the animals' coordinates are processed. I plan to improve that part in the future. Anyway, thanks for your interest. I'll definitely consider your feedback!

solardev 2y ago
> What exactly do you mean by something disappearing and reappearing when panning? Could you explain the phenomenon in a bit more detail? When you pan (click and drag, or touch and drag on a phone), all the bushes and the background disappear for what feels like a second or two, even if they're the same bushes as before. No network connections are happening during that pan, it's just a redraw that causes them to blip in and out: https://share.cleanshot.com/KvwXCVl7ZpLYk8KzFBN1 https://share.cleanshot.com/KvwXCVl7ZpLYk8KzFBN1 On Firefox the panning (before mouseup) is itself much laggier than Chrome. (Firefox generally has slower graphics, in my experience). It also suffers from the disappearing graphics on mouseup issue. Same thing happens if I zoom in and out, one mousewheel notch at a time - everything momentarily disappears before rerendering. > Also, what exactly is the large-scale solution you mentioned? By "big", I just meant literally the larger libraries I mentioned earlier (Leaflet, OpenLayers, OpenSeadragon, Konva, Pixi.js, etc.). They're bigger in both in popularity/mindshare, but also in filesize and complexity, which is what you're trying to avoid. However, they do have optimizations for the graphics rendering pipeline that maybe you can borrow from, if you look at their source code. Some examples: * https://openlayers.org/en/latest/examples/icon-sprite-webgl.html https://openlayers.org/en/latest/examples/icon-sprite-webgl.... (this one in particular is super smooth for me compared to your app's current version, but it uses WebGL) * https://openlayers.org/en/latest/examples/synthetic-points.html https://openlayers.org/en/latest/examples/synthetic-points.h... (demo without WebGL, much laggier) * https://konvajs.org/docs/sandbox/20000_Nodes.html https://konvajs.org/docs/sandbox/20000_Nodes.html * https://www.goodboydigital.com/pixijs/bunnymark/ https://www.goodboydigital.com/pixijs/bunnymark/ * http://fabricjs.com//group-dragging http://fabricjs.com//group-dragging * Benchmarks: https://github.com/slaylines/canvas-engines-comparison?tab=readme-ov-file https://github.com/slaylines/canvas-engines-comparison?tab=r... (current build seems broken)
- Farer 2y ago
  And the map UX isn’t complete yet. I also plan to finish a smooth map UX like Google Maps or the ones you mentioned. I’d appreciate it if you could keep an eye on it a bit longer.
- Farer 2y ago
  Oh, I get it now! Currently, when dragging or zooming in and out, the ground, weeds, and rabbits are being redrawn. Of course, for the weeds, the browser is using a cache of about a minute, but due to network latency, this part might be even more noticeable to you. I personally really like Firefox as a browser, but as you mentioned, I'm quite disappointed to see that its rendering performance is relatively poor. I'm also a bit worried about whether it will continue to receive good updates. (A long time ago, I even bought a smartphone that came with Firefox OS. lol) I'll definitely need to take a proper look at the solutions you mentioned this time. I also remember Konva being very useful in the past. Thank you for the detailed and kind response.
- Farer 2y ago
  Since this project is just starting to implement canvas, there might not be any noticeable visual performance improvements yet. I imagine I’ll probably start using WebGL as more animals are added.