Show HN: Krita RGBA Tech – Bringing Realistic Metal to Life in Open-Source Art

269 pointsposted 7 days ago
by draneria
(github.com)

33 Comments

atmanactive

7 days ago

Just a small favor please: in your README.md file, on the first mention of word Krita, make a link to Krita repository or website. Thanks.

draneria

6 days ago

Added! Thank you for pointing that out (´｡• ᵕ •｡`)

solfleur

7 days ago

It's always amazing to see what neat brushes are out there; being able to interface with a practically limitless assortment of different artistic mediums through a single universal method (simple and intuitive, no less) never ceases to amaze me. Kudos! I'll definitely give it a try!

draneria

7 days ago

Thank you! Last year there was a special breakthrough for Krita, because a contributor called Memileo figured out a way to bake light into the brushes using Blender. They made a beautiful Impasto set (https://krita-artists.org/t/rotating-light-brushtips-wip/649...), their work was a huge help for my own brushes :)

itishappy

6 days ago

Memileo's results and your own are both incredible. Wow.

How baked in is the light position? I'd imagine it's possible to rotate the light in editor but not change it's height (without some work in Blender).

draneria

6 days ago

Ah, you would need to ask them for a concrete answer, but my understanding is that it is completely baked in.

Long optional explanation:

I say that because I think Memileo sculpted the actual brushstroke in Blender (https://krita-artists.org/uploads/default/original/3X/5/7/57...) and rendered lighting at different angles, and exported each as an image.

Each rendered image becomes 1 frame of the "animated brushtip", with the option that each frame matches "direction" rather then being "incremental", and thats how you get the faux-light!

The cool thing is that you can extract and edit the animated brushtip in Krita e.g. this one "https://github.com/Draneria/Metallics-by-Draneria_Krita-Brus..."

Which means theoretically, you could use photo editing to change the height I think!

stuaxo

6 days ago

Great stuff, it's good to hear how brushes work in these programs, reminds me of a great chat with one of the MyPaint devs.

itishappy

6 days ago

Coolest thing I've seen all day. Thanks!

michael0x11

6 days ago

Pretty neat tech - the RGBA brush engine in Krita is doing something fundamentally different from PS's basic alpha masks. Being able to encode directional data in the brush tip itself opens up some interesting rendering possibilities. Been messing with similar effects in PS using layer styles but this seems way more efficient.

draneria

6 days ago

Exactly! it is really incredible. I've not used Photoshop much, I'd be curious to know how the two face-off in the realm of brush features haha

Llamamoe

7 days ago

So what does it do? Create a normal map while drawing?

draneria

6 days ago

On the right track but not quite! Every brush in art software uses an image (raster or auto-generated) to paint with, called a "brushtip". Usually, the brushtip only gives information about which bits are opaque, and which arent - the shape! However in Krita, theres another dimension you can define; value, or lightness.

So there's nothing being generated or created while drawing, its just that some very smart people have coded Krita for the "brushtips" to do more as a baseline.

Not every software works exactly the same ofcourse! This is just my beginner level understanding of it all, I hope that helps

short_sells_poo

6 days ago

Photoshop and other painting software had "intelligent" brushes for a while now. These try to simulate stuff like paint mixing (even watercolor), opacity and texture.

draneria

6 days ago

Could you give me an example? I'd love to know more about the watercolour paint mixing. If you meant the "live tip" settings of Photoshop, you can do all that in Krita too, using the "texture", and "mask tip" features. RGBA seems to definitely be something Krita has over Photoshop, but I could well be wrong!

by the way, there are other softwares like Rebelle that try to truly simulate traditional mediums - bordering on a whole-ass physics engine that works completely different in the backend from PSD/Krita. Unfortunately its a paid software so yeah :s

getToTheChopin

7 days ago

Lovely textures, thank you for sharing. Will try them out in some generative art projects I'm working on!

isodev

6 days ago

Krita is fantastic, and these look gorgeous! Thank you so much for your work.

retSava

7 days ago

Thanks for sharing! These look amazing and I look forward to trying them out.

bloopernova

6 days ago

This is fantastic, the paint looks great, excellent job :)

Aeolun

7 days ago

Honestly, I’m most impressed by that fantastic demo gif.

lttlrck

6 days ago

Amazing. This motivates me to try Krita. Well done.

metallicss

7 days ago

Great work! I have been looking for an excuse to try out Krita. This just might be it. Shameless plug: I am also a sucker for metallic aesthetics, and I made this FOSS library to enable realistic metal textures on the web (for buttons, cards, input elements, etc.): https://www.metallicss.com

esperent

7 days ago

Very nice, I approve of anything that goes against the Material Design hegemony.

One question though: there's a (relatively) large delay updating the demo when I change the convexity. Is this something that comes from the update script or is the effect itself slow? Because I don't think I've ever seen a CSS effect that takes a half second to update before.

jraph

6 days ago

There are a lot of canvas in there, I doubt CSS is involved much in drawing this effect.

esperent

6 days ago

I checked out the source, there's only a single canvas being used to render a base64 PNG. The PNG is just a 400x400 spherical reflection map, which is basically a required component of any metallic effect. I don't think that would cause a slowdown.

mattkevan

6 days ago

Very cool! It'd be fun to use the webcam to create live reflections.

bloopernova

6 days ago

A very long time ago in the 90s I spent far too long creating gradients to make buttons in a software UI match those in the physical control panel. This was for a video editing research project. Both metallic and rubber buttons were used, and I wish I'd kept a screenshot somewhere, but NDAs and suchlike mean it has disappeared from the world.

This looks great, it'd be so nice to be able to just define buttons rather than painstakingly drawing them out (thank you for making it, and thanks for the nostalgia trip!)

draneria

6 days ago

When I get around to making my website I will now be able to create a big, shiny, beautiful gold "Download Here" button!! thank you so much for sharing \╭◜◝ ᵕ ◜◝╮/

draneria

6 days ago

wow, that's amazing! I'm gobsmacked you can make something like this with CSS, that is so cool

kroltan

6 days ago

Not just CSS, it's used to set parameters but looks like the actual rendering is done in a <canvas> element controlled by JS.

draneria

6 days ago

My apologies Kroltan, I accidentally replied to the wrong comment earlier! It's a shame the project disapeared I would have loved to have seen that :D

Rubber is a hard thing to get right imo, I was trying to paint it for one of the brush thumbnails of a rubber stamp (https://www.mediafire.com/view/46tten5kkzh2i99/Stamp_Diamond...) - and it was really difficult, I still don't think I got it quite right xD So I can't imagine how tough it would have been to try and create that texture using only CSS and JS back then