Hacker News Reader

Comment by sebdufbeau | Hacker News Reader

I joined a project last year which uses Konva inside an Angular application. It was my first time doing any kind of canvas programming, but the ergonomics of konva can be picked up quite rapidly and I've been enjoying quite a lot.

We're working on performance-sensitive project, so one lesson we learned is that all shapes listen to all mouse events by default. We didn't even have lots of shapes, but this was enough to have a noticeable performance hit due to all the event handlers being registered. We pivoted to an opt-in approach instead and that fixed most of our problems.

View on HN

"We're working on performance-sensitive project"

Konva looks awesome, but canvas based. For more performance I switched from canvas to pixi, which is webgl/webgpu based.

Drawing can be also expensive there(in some cases even more so), but if you can manage to put it in a texture in time, you can have looooots of moving animated shapes even on mediocre mobile phones.

https://www.goodboydigital.com/pixijs/bunnymark/

Impressive, it took me 113K bunnies for a single frame drop on an iPhone 14pro

At 105 I started seeing dips while adding, but would level back to 60 during bounce. iPad Air 4.

Is this the new benchmark? “The new iPad can handle 200k bunnies”

true, also declarative approach is amazing for wegbl, you need to draw many lines - pass start/end points in a buffer at once.

I wanted to do something like this, but have not found a nice way, yet. You do this by hand? Meaning writing the shader code yourself?

By hand or regl library (almost by hand). I tried THREE, but it feels it gives me more pain than benefits (and you still end up tweaking their shaders sometimes). AI is pretty good at small tasks like tweaking shaders. I needed to draw a spectroscope, like a line connecting all pixels on the image one by one on the colorspace projection. Ended up 100 times more efficient in webgl comparing to browser API. But it is pretty low level. On another hand once you dig deeper into shaders, they are actually more powerful. Let's just say, API is just painful too :). Also, there is some fun with how transparency works and order of elements displayed (because of parallel processing). Oh, ideally I want web canvas API, but which allows to pass a buffer of lines to draw instead of one ;)

Thanks. I started getting into shaders with WebGPU, but that is not widespread yet and WebGL I did not liked, so I likely will get back to writing WebGPU shaders for better performance, once there is decent support. (And my current solution works, just could be more performant)

Reply on news.ycombinator.com