3D转2:1等轴测投影出现1像素偏差问题排查

问题描述 #

将1×1的3D立方体投影至2:1等轴测空间，期望对应64×64的等轴测瓦片，但光栅化后输出65×65的结果；调整缩放值为31.5强制得到64×64时，形状扭曲无法对齐素材。投影逻辑：

iso_x = (x-z)*scale
iso_y = (((x + z) / 2) - y) * scale

问题解答 #

1. 问题根源与修正方案 #

是光栅化的像素边界规则导致的问题。你的立方体顶点范围是-0.5到0.5（对应1单位边长），投影后得到的是连续浮点坐标，但Pygame的绘制函数会将这些坐标对齐到像素边界，导致实际覆盖的像素范围是闭区间，比理论长度多1个像素（比如64单位长度对应65个像素点）。

修正方法：给投影后的屏幕坐标减去0.5，让浮点坐标的整数部分对应像素中心而非边界，修改代码中的坐标计算部分：

screen_x = iso_x + RESOLUTION[0] / 2 - 0.5
screen_y = iso_y + RESOLUTION[1] / 2 - 0.5

这样处理后，连续坐标的范围会被正确映射到64个像素区间，不会多占像素，同时保持形状对称。

2. 能否实现像素完美的64×64结果 #

可以实现。从数学上看，1单位3D立方体在你的投影逻辑下：

• X方向投影长度：(0.5 - 0.0) - (-0.5 - 1.0) = 2，乘以scale=32后正好是64像素；
• Y方向投影长度：(((0.5+0.0)/2)-(-0.5)) - (((-0.5+1.0)/2)-(0.5)) = 2，乘以32也为64像素。

之前的65×65是光栅化的离散化误差，通过像素中心偏移修正后，就能得到严格64×64、形状对称的投影结果。

3. 经典等轴测引擎的精确对齐方案 #

经典引擎普遍通过以下步骤实现精确瓦片尺寸与对齐：

• 像素中心偏移：和上述修正方法一致，解决光栅化边界导致的像素多占问题；
• 坐标量化：将投影后的浮点坐标取整（或偏移后取整），确保顶点落在整数像素位置，避免半像素偏移；
• 网格对齐：将整个场景的投影坐标与瓦片网格的整数倍绑定，确保每个瓦片的位置都是scale的整数倍，保证素材拼接无缝隙。

修改后的完整代码 #

import pygame

vertices = [(-0.5, 0.5, 1.0), (-0.5, -0.5, 1.0), (-0.5, 0.5, 0.0), (-0.5, -0.5, 0.0), (0.5, -0.5, 1.0), (0.5, 0.5, 1.0), (0.5, -0.5, 0.0), (0.5, 0.5, 0.0)]

faces = [[0, 2, 1], [2, 3, 1], [4, 6, 5], [6, 7, 5], [4, 5, 1], [5, 0, 1], [7, 6, 2], [6, 3, 2], [5, 7, 0], [7, 2, 0], [1, 3, 4], [3, 6, 4]]

RESOLUTION = (800,600)

scale = 32

window = pygame.display.set_mode(RESOLUTION)

running = True

while running:

    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False

        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_ESCAPE:
                running = False

            if event.key == pygame.K_p:
                pygame.image.save(window,"screenshot.png")

    window.fill(0)

    to_draw = []

    for face in faces:

        poly = []

        for v in face:

            vertex = vertices[v]

            iso_x = (vertex[0] - vertex[2]) * scale
            iso_y = (((vertex[0] + vertex[2]) / 2) - vertex[1]) * scale

            # 添加像素中心偏移修正
            screen_x = iso_x + RESOLUTION[0] / 2 - 0.5
            screen_y = iso_y + RESOLUTION[1] / 2 - 0.5

            poly.append((screen_x, screen_y))

        if len(poly) >= 3: # BACKFACE CULLING
            x0, y0 = poly[0]
            x1, y1 = poly[1]
            x2, y2 = poly[2]

            culling_val = (x1 - x0) * (y2 - y1) - (y1 - y0) * (x2 - x1)
            
            if culling_val > 0:
                continue

        to_draw.append(poly)

    for poly in to_draw:

        pygame.draw.polygon(window,(255,255,255),poly)

    pygame.display.flip()

内容的提问来源于stack exchange，提问作者URMOM.COM