Pixel-pefect 3D sprite outlines?

UnknownUserUnknownUser Posts: 1,389
edited July 2020 in Shaders

I've been stuck on this for like a day now, even though it seems so simple.
Basically, I'm working on a top-down "2.5D" game, where the world is full 3D with perspective, and all characters and such are simple billboard sprites.
The game runs at a very low resolution, and thanks to our friend the 3rd dimension, sprites get bigger or smaller depending on how far away they are, which can noticeably distort the sprite. I personally find this quite charming. Or, I would if it wasn't for the sprite's outline being distorted too, sometimes disappearing completely, like this:

Now, this could be solved by removing the outline from the sprite itself, and making a shader that always draws an outline that's exactly 1 viewport pixel thick. I just can't figure out how.
I've seen a lot of stuff about using multiple viewports, like rendering the sprite layer onto its own texture, and applying a simple outline shader to that, but my attempts at this were pretty unsuccessful. It also feels super hacky, but I could just be doing it wrong.

So, what's the correct way to do this? Is using viewports really the only way? And if so, how would I set them up properly?


  • MegalomaniakMegalomaniak Posts: 3,244Admin

    seems like what you are looking for is integer scaling?

  • UnknownUserUnknownUser Posts: 1,389

    @Megalomaniak said:
    seems like what you are looking for is integer scaling?

    Integer scaling doesn't fit what I'm going for here. I'm okay with the sprites themselves scaling and distorting, just not the outline around them. They should remain 1 pixel thick regardless of how big/small/distorted the sprite is, like this:

    Left is the desired result. The "sprite" (in this case, just the black portion) is still distorted, but the outline remains intact.

    Also, I realize the original picture is just an incomprehensible mess of shapes and colors, so I've added a video instead.

  • MegalomaniakMegalomaniak Posts: 3,244Admin

    Then yes, some shader to draw a one pixel outline is likely the way to go.

  • UnknownUserUnknownUser Posts: 1,389

    The problem is that I don't know how to do that in godot. Just an outline shader is simple, but it would have to be screen-space, while also only affecting only the sprites, not the world. How would I apply a screen space shader to a specific object or group of objects?

  • MegalomaniakMegalomaniak Posts: 3,244Admin

    I recon you might have to have your sprite in a 2D scene and render that to a viewport applied to the 3D plane or have a shader on your 3D plane. Haven't tried doing such a specific outline thing myself tho.

Leave a Comment

BoldItalicStrikethroughOrdered listUnordered list
Align leftAlign centerAlign rightToggle HTML viewToggle full pageToggle lights
Drop image/file