I have a few thousand black PNG icons on a transparent background. I would like to be able to reuse those, but I need them to be white.
With CSS I can easily invert an image with filter: invert(1); . It’s even possible to use a value like 0.5 to achieve some nice effect.
I’ve read about procedural textures, but find them a bit complex. Is there no easier way to achieve results like the CSS-filters? Maybe processing them on a separate canvas first and use the ArrayBuffer (no idea how to do this though!) ?
Wow, that’s even more complex than I thought
Using a shader and a separate canvas seems so overkill to just invert a simple PNG.
I use XnConvert now to batch convert all the icons to webp, resize them to 128x128 and invert them. Somehow I get strange results though (some artifacts like very tiny flickering horizontal lines), when using the converted images with BabylonJS. That’s why I asked if there’s maybe a builtin method in BabylonJS.
UPDATE
The strange flickering horizontal line is NOT caused by the image conversion. It’s also happening with the original 512x512 PNG file from Flaticon.
Somehow it seems using a StandardMaterial with a transparent texture gives some render problems. This is what I use:
mat = new BABYLON.StandardMaterial('symbolMat', scene);
mat.diffuseTexture = new BABYLON.Texture('/images/symbols/star.png');
mat.diffuseTexture.hasAlpha = true;
Around the edges of the transparent images tiny flickering artifacts appear, especially when the mesh is moving. I didn’t notice this with the black icons, but with the white icons it became very noticable.
Could I use some kind of anti-alias to avoid these issues?
It depends. You write the function once and use multiple times. A quickie while holding a cigarette in my left hand with a reusable InvertedColors procedural texture class.
Thank you very much. This helps a lot to understand how it works.
However, with your examples I see the same artifact at the left side of the icon! It appears as a small thin line that flickers when the camera rotates. It’s around where the two horizontal ‘speed lines’ of the car are. To me it seems like it’s caused by the pixels that are at the OTHER side of the image bordering the edge of the image. The thin line is exactly as high as the front of the car.
In my own test it happens with icons that have pixels on the bottom, and then I see the flickering line at the TOP.
With the anti-alias example the effect is less noticable, but still visible.
Maybe it’s a WebGL or driver issue on my system only. My graphics card is old (AMD Radeon HD5750). I tried in both Chrome, Brave, Firefox and Edge and the problem is the same.
Quite strange. Maybe I should just create icons with more transparent space around them!
You(rs) know what? Call me ‘old school’ if you want but, here’s my moto: “a shit source with fx will always remain a shit source flavored with some fx or post”. You want an inverted texture? Here’s my advice: Create one! It’s as simple as it gets. I know you ‘devs’ always think you’re gonna ‘fix things’ with some procedural/post/node/shader automagical trick . I say, to end ‘right’ there’s nothing better than to start ‘right’. Of course this is (as always) just my small designer’s opinion only
I already converted all icons to white with XnConvert. However, this didn’t fix the issue with the artifact.
I thought it was because of XnConvert though, so I figured it maybe would be better to use the original Flaticon image and do it in realtime.
Now I know it’s because of pixels that border the edge of the icon
Hum? Inverted is inverted. If your white image is not grayscale (but RBG or CMYK) and the edges are semi-transparent, then… what do you expect? Don’t you have PSD or similar? Just a quick check on it (and eventually a fix if necessary) with a batch processing would do the trick in I believe just about no time… A lot less time anyway than trying to set-up a node, a shader or whatever fancy trick I did read about above.
Well, at least it’s working (sort of ) I can still see it a fair bit less smooth than the original. May be it’s my eyes playing trick …I’m not gonna put another layer on top of what I already said. In fine, it’s your choice. Personally, I’d rather stick to my original thought (especially considering all what you(rs) have gone through to achieve something that should have remained very simple (again, my opinion only )
Yes, of course it does. My bad. 'Shouldn’t have quoted your post. The clamping is just fine (and necessary). I’m still amazed to see for how long this ‘simple’ thread can go on Don’t you Guys have something better to do on your holidays?
with a reusable 
. I say, to end ‘right’ there’s nothing better than to start ‘right’. Of course this is (as always) just my small designer’s opinion only 
…I’m not gonna put another layer on top of what I already said. In fine, it’s your choice. Personally, I’d rather stick to my original thought (especially considering all what you(rs) have gone through to achieve something that should have remained very simple (again, my opinion only 
not the smoothness!
Don’t you Guys have something better to do on your holidays? 
