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