Initially I rendered the image preview with CSS 3D transforms, while super fast on Safari, it turned out this wasn't as performant on Chrome when viewing on a retina display (weird right?). So I switched to WebGL, which sits closer (closest?) to the hardware and therefor yields better results. It's now super fast, it can animate filter transitions at 60FPS.

SVGs currently don't support hardware acceleration, so that's why I went with CSS transforms for other parts of the UI. The only things rendered with SVG at the moment are the markup, the UI icons, and the rotation control.

Correct me if I'm wrong, but I think WebGL is the most performant graphics pipeline available in browsers today.

I'm hooked on SVG's promise of semantic graphics, but every time I tried building something with SVG in a browser the performance just wasn't there, especially on low-end devices.

You're absolutely right, you either go for CSS 3D Transforms, or WebGL, WebGL being faster still.

What’s your take on 2d canvas? I always see these 2d Toole using webgl and wonder how big of a difference it is.

Filters of course work best in webgl. But the rest?

Also, do you use offscreencanvas in chrome?

Every operation is just way faster in WebGL.

I currently use WebGL for display preview and 2D canvas for generating the actual image.

I suspect you'll run into performance issues if you plan to animate the image in a 2D canvas context (like I do when rotating / flipping / etc.)

I've been planning to use offscreencanvas but haven't gotten around to it yet.

Performance.