Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

konvajs.org

Post reply on HN
Print view View original

71–76 of 76 posts

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#71

Post by octacat »

lukan wrote: post #50
sebdufbeau wrote: post #3

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…

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

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

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#72

Post by lukan »

octacat wrote: post #71
lukan wrote: post #50

Earlier quoted context omitted.

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

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?

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#73

Post by culopatin »

graftak wrote: post #62
lukan wrote: post #50

Earlier quoted context omitted.

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

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#74

Post by tbo47 »

Konva at esm format https://www.npmjs.com/package/konva-es

It's not a fork, just a different way to build the same project.

ES2015 module is more efficient than the other formats and can facilitate the creation of smaller bundle size through tree-shaking technique.

https://github.com/konvajs/konva/issues/1829

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#75

Post by octacat »

lukan wrote: post #72
octacat wrote: post #71

Earlier quoted context omitted.

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

Re: Konva.js - Declarative 2D Canvas for React, Vue, and Svelte

#76

Post by lukan »

octacat wrote: post #75
lukan wrote: post #72

Earlier quoted context omitted.

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 p…

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)
Post reply on HN