7 ms·
Show HN: I built an online image editor using WebGL and CSS transforms
- Gehinnn 7y agoNice ;) How come you use WebGL rather than e.g. SVG?
- w56rjrtyu6ru 7y agoCorrect 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.
- rikschennink 7y agoYou're absolutely right, you either go for CSS 3D Transforms, or WebGL, WebGL being faster still.
- aloer 7y agoWhat’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?
- rikschennink 7y agoEvery 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.
- onion2k 7y agoPerformance.
- rikschennink 7y agoInitially 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.
- sharma_pradeep 7y agoGreat work. Checked out your other products, they are cool as well.
- rikschennink 7y agoThanks!
- tomashubelbauer 7y agoWell done, the app is really smooth even on mobile and I can definitely see it being used for the most common types of image processing. I like the premise of using WebGL and CSS filters. Are you going to open source it? I'd love to see how you implemented that. Edit: Never mind, I just realized this showcases Doka, a commercial component for image processing on the client so that you don't need to do the image processing in the server. Neat product as well.
- rikschennink 7y agoThanks! And indeed, it's a full feature instance of Doka, I figured it might be useful for some people to do quick image editing and offering it for free feels good. It isn't open source, I do use income from Doka to finance my other open source products (like FilePond).
- ybahubali2018 7y agoLooks great. Excellent work.
- rikschennink 7y agoThank you :-)
- janaagaard 7y agoYou forgot to add that it works well on a phone! Amazing work.
- rikschennink 7y agoI specifically build it to work well across multiple different contexts :)
- sokoloff 7y agoVery nice. Suggestion: in the aspect ratio constraint picker, change “free” to “unconstrained”, “variable”, or “fully variable” to avoid the confusion with “no charge”.
- rikschennink 7y agoThanks! And excellent idea, added to the todo list.
- mgoetzke 7y agoand free is not actually free. i had a very wide image which i chose 16:9 for then back to free and I could not actually move the box back to the original content
- rikschennink 7y agoI think you had to zoom out the image (scale down with scroll wheel or multi-touch), maybe this needs to be more clear.
- BilalBudhani 7y agoThis looks great. I'm working on a small experimental project which will allow multiple users to collaborate on an image. I will fiddle around with Doka to see how this can fit in with our use case. Great work!
- rikschennink 7y agoAwesome, let me know if you have any questions, just use that chat widget thingy on the product page.
- leokennis 7y agoNice, and cool name too (I suspect you mean doka = Donkere Kamer = Dark Room?)
- rikschennink 7y agoYes, it's the perfect fit, I have someone else to thank for that as I'm horrible at naming things.
- fareesh 7y agoLooks good. I clicked crop, dragged the handles, then clicked resize, but it zoomed in and the image went underneath the menu. Browser: Brave on Ubuntu
- rikschennink 7y agoIt'll show the actual output size of the image, I'm not a 100% happy with this yet. The fact that you report it here (as a bug) is a good indicator that it needs to be changed.
- daliusd 7y agoAs I'm doing something very similar (but different) for my new product so I definitely checked it out. What I like: * Image orientation (from EXIF) support * I like how intuitive it is * I will absolutely use some minor ideas in my product that I have not considered using. What I dislike: * I have uploaded 10000 x 6672 image (this one https://unsplash.com/photos/2S4FDh3AtGw https://unsplash.com/photos/2S4FDh3AtGw) and I see that you scale it down. My experience shows that both Firefox and Chrome handles such large image without problems. * Delay between action and reaction is too high for my taste. It feels unnecessary sluggish. UPDATE: tested with Chromium and it feels response. Only Firefox is sluggish. * Flip does not center around zoom Anyway, awesome work as I know some pain points you might have experienced :)
- rikschennink 7y agoHi, Thanks for feedback! In my experience loading huge images like those and animating them is way too slow so the preview is limited to 1500x1500 pixels (I'm testing on a MacBook from 2014). I have some ideas to work around that. With the recent switch from CSS transforms to WebGL (for the image preview) I've added some additional options. Good luck with your project!
- zawerf 7y agoI don't work with webgl much but I remember there being a max texture size of around 2048 or 4096 on many devices. Wouldn't you end up needing to tile the texture and stuff?
- rikschennink 7y agoThere is a limit on canvas size in most browsers, unfortunately it's rather low on iOS, more than 12 megapixels (4000x3000) will result in empty canvas elements. Indeed progressively loading high res textures or tiling is a solution to this.
- eternalny1 7y ago> UPDATE: tested with Chromium and it feels response. Only Firefox is sluggish. If you're feeling up to it you might want to file an issue with Mozilla on this.
- danvesma 7y agoThis is lush – great work
- HyperTalk2 7y agoYou're trying to charge people money for this? $1999 per year for unrestricted access? You can't be serious? https://pqina.nl/doka/#pricing https://pqina.nl/doka/#pricing
- rikschennink 7y agoNope, not for the online image editor, you can edit as many images as you like.
- deleted 7y ago[deleted]
- tomhoward 7y agoThat charge is for cases where a company with at least 25 developers wants to include this as a component in their own apps. It's a pretty normal and reasonable charge for that kind of scenario, in which the company licensing it would likely be charging/earning vastly more than this from their clients or end-users.
- ceejayoz 7y agoThere's a charge if you want to use the image editor in your own app. You're buying a library, and if your organization has more than 20 developers working on implementing it $2k is peanuts.
- jermaustin1 7y agoHonestly, if you have a single developer working on an implementation, $2000 isn't that much, so $109 is practically a steal!
- tobiaswk 7y agoCool! Can't help but to mention photopea; https://www.photopea.com/ https://www.photopea.com/ Pretty impressive stuff made by one guy (it was initially). Basically a viable alternative to photoshop in a browser.
- denisovan 7y agoAnd Picozu - https://www.picozu.com https://www.picozu.com
- nickjj 7y agoI started to use Photopea for making thumbnails for my videos and blog posts a few months ago but I wish it were more stable. Sometimes it has network connectivity issues that prevents the app from working -- even if you download the "offline" app. Like 2 days ago I couldn't add text to an image because the font list couldn't be loaded over the network due to the site having connectivity issues (and it doesn't work when offline). I had to resort to using gimp otherwise it would have delayed a video from being published. Of all of the online or offline non-Flash image editors that try to replace Photoshop this one is my favorite. I hope it continues to get more developed. It lacks a lot of things but it's good enough for whipping together basic multi-layer layouts. Little things like being able to auto-center things vertically and horizontally by just dragging things around saves so much time. Also supporting Photoshop style layers for doing outlines and shadows speed things up.
- IvanK_net 7y agoHi, I am the author of Photopea :) Photopea is used by 120,000 people every. We rarely get reports about the site not loading correctly. We received one in June from a user from Malaysia. After some communication, we noticed that it worked well when he used his mobile data, and did not work only on WiFi, so probably the problem was with ISP. If it happens again, just let us know!
- skykooler 7y agoHi! Would it be possible to add something like GIMP's "Color to Alpha" filter to Photopea?
- mk89 7y agoIt doesn't work in Firefox 69.0 :/ Am I the only one? I select one of the images provided in the webpage and it gets stuck on "Loading image...". Sigh...
- rikschennink 7y agoHey, thanks for reporting, that's very odd, if you're familiar with web development can you check if your browser is throwing any errors?
- OJFord 7y agoIt sat there maybe 2-3 seconds, but then loaded fine for me.
- djsumdog 7y agoGets stuck for me too on 68.0.2 (64-bit/Linux). Works in Chrome. Looking at the console I get: <SetDimensions>: Failed to create WebGL context: WebGL creation failed: * Refused to create native OpenGL context because of blacklist entry: FEATURE_FAILURE_GLXTEST_FAILED * Exhausted GL driver options. This is my work laptop so I never bothered to setup Mesa/GL correctly .. probably the issue. The app should still do a check and report that WebGL isn't enable to the user.
- rikschennink 7y agoThanks, I'll look into this. If I understand correctly you do get the "WebGL isn't enabled" message?
- zerm778 7y agowow so creative
- zergione 7y agoCool tool. Also I like the animations, improves the experience a lot!
- lucasverra 7y agoi've been looking for an online web tool that allows me to : - paste image 1 from clipboard on canvas - paste image 2 from clipboard on canvas - play with canvas overall size to adjust surface of ima1+ima2 - anotate (text, arrow, square) - maybe some template background colors - copy entire canvas to clipboard or download png today i've came back to native powerpoint on my machine with a template that i have to clean on startup (no blank template possible :() Can you help ? - https://whimsical.com/a https://whimsical.com/a => not quick and dirty enought - https://screenzy.io/ https://screenzy.io/ => do not manage 2 images
- zamadatix 7y agoSounds more like diagramming functionality, have you tried draw.io or alike?
- lucasverra 7y agoi have indeed, but i thing you've hit it in the middle (of the problem). My need is much more like https://screenzy.io/ https://screenzy.io/ than draw.io.
- deft 7y agoYep, looking for the same thing. This is so close that I feel adding image splicing capabilities wouldn't be too hard. Powerpoint is ok but too bulky and hard to get the dimensions you want.
- pgt 7y agoThis is cool. Please consider adding a way to increase the size of the artboard and compose images on it. Put differently, let me "uncrop" the image or add margins. Multiple times this week I had to pad height or width to a trimmed image to look good on apps like Instagram, or Tinder, or a Facebook cover page.
- MarcScott 7y agoThis is perfect, thank you. I need to crop and annotate images all the time for work. I used to use Skitch when I had a Mac, but since moving over to Linux there seems to be a complete lack of simple tools to do basic editing and markup.
- gvinter 7y agoI've really enjoyed watching Rik build this library. Congrats, Rik!
- rikschennink 7y agoThanks :)
- bitL 7y agoCool! Congrats! Welcome to the club! ;-) BTW, does anyone know if there is a transpiler I could use to write an image processing/geometry algorithm/animation algorithm once and then target whatever output language/platform combo is desired? I really dislike JavaScript, I am way more productive in e.g. C++, but I need to rewrite my algorithms from C++ into Java/Swift/JavaScript/Python/CUDA/Kotlin, depending on a platform I address, and frankly I am getting tired of that. I just want to have a vanilla algorithmic code that is pretty transferable across platforms (desktop/web/iOS/Android) automatically transpiled to another language as I need (with platform-specific stuff done in a custom fashion of course); I don't care about performance optimizations for that (no time for that per platform anyway). WebAssembly is supposed to help but it's still not there yet. Thanks for any advice!
- zawerf 7y agoFigma is pretty successful and is written in C++ compiled to webassembly: https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to... https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/ https://www.figma.com/blog/webassembly-cut-figmas-load-time-...
- monssoen 7y agoHave a look at Haxe. It transpiles to C++, Java, Javascript and Python. https://haxe.org https://haxe.org
- brailsafe 7y agoAbsolutely wonderful UI design. Though I'm not sure if there's any contrast controls etc...
- deft 7y agoReally nice and simple, loads quickly unlike competitors and seems more useful for making memes / simple image changes. Please add splicing images together, and freeform drawing.
- mfbx9da4 7y agoWould be cool to make as a PWA so I could use it offline
- gwarn 7y agoNIce job. Tested with Chrome. Excellent performance. Great work.