Pixel Perfect Sprite Stacking Edges in 3D

I’m working on recreating NIUM-like in 3D Godot.

The original effect is done in 2D by creating a stack of sprites one pixel apart.

Getting 90% there is simple enough. Set the viewport to be smaller than native and the stretch mode to Viewport. Set all texture filtering to be Nearest. Create an orthogonal camera and set a size relative to the PPU, and tilt the camera’s rotation.x -30 degrees. The issue is due to rounding when converting vertices to view space, the edges of each sprite end up slightly different.

This shader solves the problem by ignoring the world Y when transforming into view space. The Y value is then applied after the fact. This makes the Y value an expression of screen Y pixels rather than a fuzzy expression of world space.

(Just make sure to disable the shader if you start messing around the camera’s rotation.x or rotation.z)

 

Shader code
shader_type spatial;
render_mode skip_vertex_transform;

void vertex() {
    // Assumes camera is always at rotation.x = -30 and rotation.z is 0
    vec4 world_vertex = MODEL_MATRIX * vec4(VERTEX, 1.0);
    float up = world_vertex.y;
    world_vertex.y = 0.0;
    vec4 view_vertex = VIEW_MATRIX * world_vertex;
    view_vertex.y += up;
    VERTEX = view_vertex.xyz;
}
Tags
3d, Isometric, pixel perfect, Spatial, sprite, Sprite Stacking
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from KarlTheCool

Move object’s DEPTH value relative to camera

Related shaders

Clean pixel perfect outline via material

Pixel Perfect outline Shader

Pixel perfect dissolving

Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments