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;
}