Method to get Smooth Pixel Perfect on 3d rendering

I’m working on a method to pixelate and Smooth the rendering to get that perfect look without any jittering from the pixels.

You can see the comparison between classic pixel art and Smooth Pixel Perfect :

The project will be available for free to anyone on the Epic store, it works with any direction, resolution or size.

3 Likes

I’ve been searching for something like this lately and your approach looks very promising. Looking forward to it when it gets released and many thanks in advance for sharing it.

You’re welcome ! It should be ready before the end of the year, I’m just polishing things

Hi there @Kevep45 !

I’m a little shocked I didn’t see this sooner, but I would like to say I absolutely love this. As someone who can suffer from eyestrain due to some pixel jitters the smoothing render you showcase doesn’t hurt my eyes as much if any at all! I’m excited to see the release method and will certainly be telling some friends I know who would be interested all about it!

Hi ! Thanks a lot, I hope the final product will be good enough ! For now this technique works only with 4 fixed angles (the ones needed to do isometric), any elevation or resolution.

Do you think I should publish it as it is or wait till I got it working from any angle?
@The_M0ss_Man

Hey there @Kevep45 !

If you feel like it’s good to publish now so you can get some early feedback ,I think that would be a very good idea. It depends on how comfortable you feel at this given moment as it seems like you have the most necessary angles done currently.

Hi @The_M0ss_Man !
So I’ve just finished the project and it works perfectly, I managed to make it works at any angle, any direction or resolution.

It’s really polished,well explained and easy to use and setup but I seem to be unable to publish it as Epic games tells me there is not enough content.
I don’t know what more I can do, if you had any clue.
Thanks!

1 Like

Hi there @Kevep45 !

I’m glad you’ve finished and polished the project to a point you’re happy with. I unfortunately am unsure what can be done when it comes to the publishing side of things involving content specific items. I will do some general reading on my end and see if there’s anything I can find throughout the forums and will let you know if I am able to locate something!

Many thanks ! It’ll be a great help !
The mail that informed me didn’t said anything precise and the guidelines are very vague.

I hope that we’ll be able to resolve this issue quickly.
Thanks again !

Hi everyone !
My project is available for free on Itch.io ! Check it out :
Smooth Pixel Perfect Camera by LordKevep

@The_M0ss_Man feel free to test it yourself !

1 Like

Again, many thanks for sharing, it is much appreciated.

I’ve been playing around with your system a little, and it seems to be working mostly as expected. I have encountered one issue so far. I have some widgets created in the scene using widget components, so they are 3d widgets attached to actors but are working in screen space. The issue is that since your system occludes the entire screen and it is added to the player’s viewport, I can’t find a way to have these widgets draw on top of your system. Any suggestions about this?

Hi @GoldenWander !

It’s a pleasure to share ideas that can help other people!

In regard to your problem, you can send me your project if you want I can search a solution (it’s always better if I can improve my project by finding solution to yours).

What comes to mind is : try to mess with the far plane of the camera (not the scene capture), and set a greater distance.

I’m my setup the far plane is set to 1 for optimization purpose so obviously the widget that are far away are not even rendered.
If you plan to use only the orthographic mode you can even shorter the target arm component length (you do not need the camera at 10000 away).

And you said that it was working mostly as intended, is there any other problems?

So after a bit of testing and research, it appears that scene capture can’t see screen space widget (or anything in the viewport for that matter).

World space still works but you need to orient the widget towards the camera to get the same effect.

But for a reason that I don’t know, screen space widget can’t put themselves in front of the other widget’s image.
I tried messing with the z order layers but it didn’t work.

I’ll try to help you with that as much as I can

Many thanks for having a look at it.

Yeah, I think screen space widgets are on a different buffer than viewport widgets, I found this request from a few years ago Zorder of WidgetComponent to bring it in front of UMG Widget and seems like there is nothing much to do on that front for the time being.

I have been playing around with the Shared Layers but I think they only bundle together other widget components, excluding viewport widgets.

I have tried as well using world space after your last comment. I got it working, facing the camera is not an issue since you can do it pretty easily by modifying the material applied to the widget in the widget component. More info here Widget component in world space to face camera The issue then becomes that you are downscaling the widget, which is a behaviour that I don’t want because the widgets would be already using pixel-art and it would generate a tug-of-war between the downscale and the art itself.

The other workaround would be to use only viewport widgets and simulate the behaviour of a screen space widget by projecting a world position into the screen, it would be cumbersome but doable as well.

Another workaround (I haven’t thought much about it tbh) would be to try to render the screen capture as a widget component in screen space instead of as a viewport widget, maybe including the component into the player character or another actor that follows the player character. In this way, it would be possible to have the screen capture under the rest of the screen space widgets and obviously under the viewport widgets. It sounds crazy in my head but I think it might work.

To provide some more feedback about the system:

  • I wasn’t familiar myself with the Scene Capture Component 2D, so it would have been nice to mention that you can change the Capture Source in the Scene Capture Component 2D. Your example has it set to “SceneColor (HDR) in RGB, Inv Opacity in A” but in my case, I needed a Final Color since I have some more postprocess running.

  • In the example project (UE 5 version), I have noticed jiggling on the skybox, if you move the character close to the side edge of the scene and you move up and down you will notice it in the skyline. I am not sure from where is it coming or if it is just something from the skybox itself.

  • In the example project (UE 5 version), the controls of the character (Input system) were completely messed up, instead of AWSD it was AZQD or something like that. Nothing important but annoying at first.

  • I would include an ON/OFF toggle in your example project, not just for the pixel-perfect algorithm but for the whole effect, you can connect it to a key if you want or just expose another boolean, I think it would be a nice addition to have.

  • Finally and this is probably the biggest inconvenience for me at the moment, the system needs a way to modify the resolution dynamically. The final output resolution doesn’t need to be exposed to the final user (the virtual or downscaled resolution, the one that you have in the Canvas Render Target) but the resolution of the image in the widget must be connected to the viewport and/or screen resolutions somehow. While playing the game in the editor it should be possible to maximize and restore the window size without issues. If I have time I will try to explore it a bit more.

Hope this helps to improve it even further but so far I think it is a nice system.

1 Like

That what I thought, but anyway thanks for your response and your feedback!

I’ll post an updated version soon on itch

If you have any more things to add, don’t hesitate!

1 Like