[lukan]

"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/

[graftak]

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

[culopatin]

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”

[octacat]

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

[lukan]

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?

[octacat]

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 ;)

[lukan]

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)