Trying to find a library for pixel art shader

[Xenos]

Hi!

 

I did a Game Jam recently, our group used the p5 library because someone suggested it to us, and indeed it helped us develop an ok prototype in a short amount of time. The game wasn't perfect at all of course, because 48 hours is still really short, but one of the main flaws that bothered me was the graphic integration; our graphistes liked working with pixel art, and we used a tileset to create the background map, which didn't tile right, with grey line appearing between tiles; on top of that, the other sprites didn't look nice at high resolution either, because of linear filtering.

After the Jam ended, I decided to try to fix these. I found the way to activate nearest filter in p5, which made the graphics look way better, but still not as nice as I wanted it to be. After googling a bit, I found this article, which was exactly what I was looking for. Then I noticed... in order to use shaders, I needed to switch the context to WebGL, which meant changing most of the code. This didn't actually bother me, so I started working on it, it was quite a nightmare (because of p5's bugs and lacks of integration...) but when I got to the point where I had basically the same game then before, but switched to a WebGL context (without the shaders), I noticed HUGE performance drops (I'm talking 10 FPS for displaying something 400 sprites in a 500 * 500 context!!!). That's when I decided that I needed to switch to a different library.

A little more googling later, I opted for the PIXI library, which, I must agree, is a nice library to work with, even though the official documentation is lacking a bit of informations. I started recoding the game from scratch once again, and as soon as I could draw the map on screen, I tried to implement the pixel art shader; I copy-pasted the code and... Magic! It didn't work. I was actually not that surprised, and decided to play around with the GLSL to see where the problem was. That's when I started noticing strange things: weird texture offsets that I tried to adjust for manually, which didn't work because the offset changed depending on the scaling of the image... and then the texture itself, scaling itself up and down when I scaled the sprite... After a while and thanks to more googling, I found out that Pixi did some pre-processing on both the texture and the texture coordinates which were passed to the fragment shaders. I tried adjusting for it, I tried a lot, I got close, but it's still really messy, and float precision starts doing strange things that makes the textures look even worst then before.

That's where I am now. I tried searching for others libraries, but most of them seemed to be either 3D libraries, or probably as weak as p5, so I'm here to ask, is there a good library that I can work with which won't bring me such problems? Or is there something I can do to fix my problem with PIXI? Or should I just resort to using webGL without any additional library (which at this point seems like the best solution to me)?