3D轉換2D

一、基礎知識

在介紹3D轉換2D之前，我們需要先了解一些基礎知識。在計算機圖形學中，3D圖形指的是三維空間中的圖形，而2D圖形指的是二維平面中的圖形。而3D轉換2D就是將3D圖形轉換成2D圖形，也就是將三維空間中的圖形投影到二維平面上。

在計算機圖形學中，3D圖形通常使用三維坐標系表示，也就是(x, y, z)，其中x表示垂直於屏幕的方向，y表示水平方向，z表示垂直於屏幕的深度方向。而2D圖形則通常使用二維坐標系表示，也就是(x, y)。

二、3D坐標轉2D坐標

將3D圖形轉換成2D圖形的過程通常分為兩個階段：投影和映射。在投影階段，我們需要根據觀察視角，將3D坐標系中的點投影到二維平面上，得到一個二維坐標系中的點。在映射階段，我們將二維坐標系中的點映射到屏幕上，得到最終的圖像。

在投影階段，通常使用的方法是透視投影和正交投影。透視投影是指利用視角，將三維圖形投影到一個透視平面上，得到二維圖形。正交投影是指將三維圖形的每個點沿視角垂直於投影面的方向進行投影，得到二維圖形。

float3 ProjectTo2D(float3 pt, float4x4 view, float4x4 projection, float viewportWidth, float viewportHeight)
{
    // 投影變換
    float4 projPt = mul(projection, mul(view, float4(pt, 1.0)));

    // 歸一化坐標系
    float2 normPt = projPt.xy / projPt.w;

    // 視口變換
    float2 screenPt = (normPt + 1.0) * 0.5 * float2(viewportWidth, viewportHeight);

    return float3(screenPt, projPt.z);
}

三、矩陣變換

由於在計算機圖形學中，我們通常使用矩陣變換來進行坐標的轉換。因此，在3D轉換2D中，我們也需要運用矩陣變換來對圖形進行變換。具體包括平移、旋轉、縮放等操作。

float4x4 CreateTranslationMatrix(float3 translation)
{
    return float4x4(
        float4(1.0, 0.0, 0.0, 0.0),
        float4(0.0, 1.0, 0.0, 0.0),
        float4(0.0, 0.0, 1.0, 0.0),
        float4(translation, 1.0)
    );
}

float4x4 CreateRotationMatrix(float3 axis, float angle)
{
    axis = normalize(axis);
    float s = sin(angle);
    float c = cos(angle);
    float4 r0 = float4(c + axis.x * axis.x * (1.0 - c), axis.x * axis.y * (1.0 - c) - axis.z * s, axis.x * axis.z * (1.0 - c) + axis.y * s, 0.0);
    float4 r1 = float4(axis.y * axis.x * (1.0 - c) + axis.z * s, c + axis.y * axis.y * (1.0 - c), axis.y * axis.z * (1.0 - c) - axis.x * s, 0.0);
    float4 r2 = float4(axis.z * axis.x * (1.0 - c) - axis.y * s, axis.z * axis.y * (1.0 - c) + axis.x * s, c + axis.z * axis.z * (1.0 - c), 0.0);
    float4 r3 = float4(0.0, 0.0, 0.0, 1.0);
    return float4x4(r0, r1, r2, r3);
}

float4x4 CreateScaleMatrix(float3 scale)
{
    return float4x4(
        float4(scale.x, 0.0, 0.0, 0.0),
        float4(0.0, scale.y, 0.0, 0.0),
        float4(0.0, 0.0, scale.z, 0.0),
        float4(0.0, 0.0, 0.0, 1.0)
    );
}

四、實例

下面是一個簡單的實例，展示了如何使用矩陣變換實現一個旋轉立方體的過程。

float3x3 RotationMatrix(float yaw, float pitch, float roll)
{
    float3x3 mPitch = float3x3(
        float3(1.0, 0.0, 0.0),
        float3(0.0, cos(pitch), -sin(pitch)),
        float3(0.0, sin(pitch), cos(pitch))
    );
    float3x3 mYaw = float3x3(
        float3(cos(yaw), 0.0, sin(yaw)),
        float3(0.0, 1.0, 0.0),
        float3(-sin(yaw), 0.0, cos(yaw))
    );
    float3x3 mRoll = float3x3(
        float3(cos(roll), -sin(roll), 0.0),
        float3(sin(roll), cos(roll), 0.0),
        float3(0.0, 0.0, 1.0)
    );
    return mul(mul(mPitch, mYaw), mRoll);
}

void RenderCube(float time)
{
    float3 cameraPos = float3(0.0, 0.0, -10.0);
    float3 targetPos = float3(0.0, 0.0, 0.0);
    float3 up = float3(0.0, 1.0, 0.0);
    float4x4 view = CreateLookAtMatrix(cameraPos, targetPos, up);

    float aspectRatio = GetAspectRatio();
    float4x4 projection = CreatePerspectiveMatrix(PI / 3.0f, aspectRatio, 0.1f, 100.0f);
    float4x4 world = CreateRotationMatrix(float3(1.0, 1.0, 1.0), time);

    float4x4 worldViewProj = mul(projection, mul(view, world));

    float3 cubeVertices[8] = {
        float3(-1.0, 1.0, -1.0),
        float3(1.0, 1.0, -1.0),
        float3(1.0, -1.0, -1.0),
        float3(-1.0, -1.0, -1.0),
        float3(-1.0, 1.0, 1.0),
        float3(1.0, 1.0, 1.0),
        float3(1.0, -1.0, 1.0),
        float3(-1.0, -1.0, 1.0)
    };

    float4 cubeColors[8] = {
        float4(1.0, 0.0, 0.0, 1.0),
        float4(0.0, 1.0, 0.0, 1.0),
        float4(0.0, 0.0, 1.0, 1.0),
        float4(1.0, 1.0, 0.0, 1.0),
        float4(1.0, 0.0, 1.0, 1.0),
        float4(0.0, 1.0, 1.0, 1.0),
        float4(1.0, 1.0, 1.0, 1.0),
        float4(0.0, 0.0, 0.0, 1.0)
    };

    int cubeIndices[36] = {
        0, 1, 2, 2, 3, 0,
        1, 5, 6, 6, 2, 1,
        5, 4, 7, 7, 6, 5,
        4, 0, 3, 3, 7, 4,
        3, 2, 6, 6, 7, 3,
        4, 5, 1, 1, 0, 4
    };

    for (int i = 0; i < 36; i += 3)
    {
        float3 v0 = cubeVertices[cubeIndices[i]];
        float3 v1 = cubeVertices[cubeIndices[i + 1]];
        float3 v2 = cubeVertices[cubeIndices[i + 2]];

        float4 c0 = cubeColors[cubeIndices[i]];
        float4 c1 = cubeColors[cubeIndices[i + 1]];
        float4 c2 = cubeColors[cubeIndices[i + 2]];

        DrawTriangle(
            TransformTo2D(v0, worldViewProj, GetViewportWidth(), GetViewportHeight()),
            TransformTo2D(v1, worldViewProj, GetViewportWidth(), GetViewportHeight()),
            TransformTo2D(v2, worldViewProj, GetViewportWidth(), GetViewportHeight()),
            c0, c1, c2);
    }
}