2024年11月11日玄貓（BlackCat）

二維三維圖形旋轉變換與投影技術

本文深入探討二維和三維圖形旋轉的數學原理與 Python 實作，涵蓋矩形、圓形旋轉，並解析三維座標系統、旋轉矩陣、正交投影和透視投影等關鍵技術，提供程式碼範例與圖表說明，最後展望三維圖形旋轉技術的未來應用方向。

電腦圖學演算法

旋轉矩陣 Python NumPy Matplotlib 投影三維圖形

在電腦圖學中，圖形旋轉是 fundamental 的操作，本文將解析二維與三維圖形的旋轉變換技術，並深入探討其數學原理和實作細節。二維旋轉仰賴旋轉矩陣進行座標變換，矩形旋轉涉及各頂點的旋轉計算，而圓形旋轉則需考量圓心和圓週上的點的變換。三維圖形旋轉則更為複雜，涉及繞 x、y、z 軸的旋轉，並需結合投影技術將三維物件顯示在二維螢幕上。程式碼範例使用 Python 與 NumPy、Matplotlib 函式庫，實作了矩形、圓形和三維物件的旋轉與投影，並以圖表輔助說明。

二維圖形中的旋轉技術詳解

在電腦圖學領域中，二維圖形的旋轉是一項基礎且重要的技術。本文將深入探討如何使用Python實作二維圖形的旋轉，包括矩形和圓形的旋轉，並詳細解析其背後的數學原理和實作細節。

二維旋轉的數學基礎

二維旋轉的核心是利用旋轉矩陣來實作座標的變換。旋轉矩陣的定義如下：

import numpy as np

def rotz(xp, yp, rz):
    c11 = np.cos(rz)
    c12 = -np.sin(rz)
    c21 = np.sin(rz)
    c22 = np.cos(rz)
    
    xpp = xp * c11 + yp * c12
    ypp = xp * c21 + yp * c22
    
    xg = xc + xpp
    yg = yc + ypp
    
    return [xg, yg]

內容解密：

此函式實作了二維座標的旋轉變換。首先計算旋轉矩陣的元素，然後對輸入座標(xp, yp)進行旋轉，最後將旋轉後的座標轉換到全域座標系統(xg, yg)。函式中使用了NumPy函式庫來進行三角函式運算。

矩形旋轉實作

矩形旋轉是二維圖形旋轉的一個基本應用。以下是一個完整的矩形旋轉實作範例：

import matplotlib.pyplot as plt
import numpy as np

# 定義旋轉中心
xc = 55
yc = 55

# 定義矩形頂點相對於旋轉中心的座標
xp1, yp1 = 0, 0
xp2, yp2 = 50, 0
xp3, yp3 = 50, 50
xp4, yp4 = 0, 50

# 旋轉角度
rz = np.pi / 4  # 45度

# 旋轉函式
def rotz(xp, yp, rz):
    c11 = np.cos(rz)
    c12 = -np.sin(rz)
    c21 = np.sin(rz)
    c22 = np.cos(rz)
    
    xpp = xp * c11 + yp * c12
    ypp = xp * c21 + yp * c22
    
    xg = xc + xpp
    yg = yc + ypp
    
    return [xg, yg]

# 對各個頂點進行旋轉
[xg1, yg1] = rotz(xp1, yp1, rz)
[xg2, yg2] = rotz(xp2, yp2, rz)
[xg3, yg3] = rotz(xp3, yp3, rz)
[xg4, yg4] = rotz(xp4, yp4, rz)

# 繪製旋轉後的矩形
xg = [xg1, xg2, xg3, xg4, xg1]
yg = [yg1, yg2, yg3, yg4, yg1]

plt.plot(xg, yg, color='r')
plt.show()

圖表翻譯：

此圖展示了一個矩形繞其左下角旋轉45度的結果。旋轉中心標示為點c，座標軸顯示了全域座標系統。透過旋轉矩陣的應用，矩形的各個頂點被正確地旋轉和定位。

圖表翻譯：

此圖表展示了矩形旋轉的流程。首先定義旋轉中心和矩形頂點座標，接著設定旋轉角度。然後透過旋轉函式進行座標變換，最後繪製出旋轉後的矩形。

圓形旋轉實作

圓形旋轉的實作比矩形更為複雜，因為需要考慮圓形本身的旋轉和其中心點的旋轉。以下是一個圓形旋轉的範例：

import matplotlib.pyplot as plt
import numpy as np

# 定義旋轉中心
xc = 80
yc = 30

# 定義圓形引數
xcc = 25
ycc = 0
r = 10

# 角度引數
p1 = 0
p2 = 2 * np.pi
dp = (p2 - p1) / 100

# 旋轉角度序列
alpha1 = 0
alpha2 = 2 * np.pi
dalpha = (alpha2 - alpha1) / 5

# 旋轉函式
def rotz(xp, yp, rz):
    c11 = np.cos(rz)
    c12 = -np.sin(rz)
    c21 = np.sin(rz)
    c22 = np.cos(rz)
    
    xpp = xp * c11 + yp * c12
    ypp = xp * c21 + yp * c22
    
    xg = xc + xpp
    yg = yc + ypp
    
    return [xg, yg]

# 繪製旋轉圓形
for alpha in np.arange(alpha1, alpha2, dalpha):
    for p in np.arange(p1, p2, dp):
        xp = xcc + r * np.cos(p)
        yp = ycc + r * np.sin(p)
        [xg, yg] = rotz(xp, yp, alpha)
        
        if p < np.pi:
            plt.scatter(xg, yg, s=1, color='r')
        else:
            plt.scatter(xg, yg, s=1, color='g')

plt.show()

內容解密：

此程式碼實作了一個圓形繞特定中心旋轉的效果。圓形本身也進行了旋轉，透過改變圓上各點的顏色來展現旋轉效果。程式中使用了雙重迴圈結構，外迴圈控制圓心繞旋轉中心的軌跡，內迴圈則負責繪製圓形本身。

二維旋轉技術是三維圖形處理的基礎，未來可以進一步應用於：

三維物體的旋轉投影
動畫製作中的物件運動控制
虛擬實境中的場景渲染

透過深入理解二維旋轉的原理和實作，可以為更複雜的圖形處理任務打下堅實的基礎。

三維圖形學：三維空間中的物件旋轉與投影

在前一章中，我們探討瞭如何在二維空間中建立、平移和旋轉物件。本章將進一步延伸這些概念至三維空間，學習如何在三維空間中建立、轉換和旋轉物件，並將其投影到二維的電腦螢幕上。

三維座標系統

在討論二維旋轉時，我們是在二維的x,y平面上旋轉二維物件。現在，我們將這些概念擴充套件到三維空間，引入z軸，如圖3-1所示。請注意，z軸指向螢幕內部，而不是向外。這並非任意選擇，而是遵循右手定則慣例。根據這個慣例，將右手的拇指、食指和中指分別指向x、y和z軸的正方向，可以發現正z軸的方向與右手螺旋前進的方向一致。在這種情況下，螺絲會朝螢幕內部前進，這就是正z軸的方向。

import matplotlib.pyplot as plt
import numpy as np
from mpl_toolkits.mplot3d import Axes3D

# 定義三維座標系
fig = plt.figure()
ax = fig.add_subplot(111, projection='3d')

# 繪製座標軸
ax.quiver(0, 0, 0, 50, 0, 0, color='r', arrow_length_ratio=0.1)
ax.quiver(0, 0, 0, 0, 50, 0, color='g', arrow_length_ratio=0.1)
ax.quiver(0, 0, 0, 0, 0, 50, color='b', arrow_length_ratio=0.1')

# 標記座標軸
ax.text(50, 0, 0, 'X', color='r')
ax.text(0, 50, 0, 'Y', color='g')
ax.text(0, 0, 50, 'Z', color='b')

# 設定座標軸範圍
ax.set_xlim(-10, 60)
ax.set_ylim(-10, 60)
ax.set_zlim(-10, 60)

plt.show()

圖表翻譯：

此圖表展示了一個標準的三維直角座標系，包括X、Y和Z軸。座標軸的正方向分別用紅色（X軸）、綠色（Y軸）和藍色（Z軸）表示。根據右手定則，Z軸的正方向指向螢幕內部。

三維旋轉的基本原理

在三維空間中，旋轉變得更加複雜，因為物件可以在多個平面上旋轉。為了簡化問題，我們將重點放在單一軸的旋轉上。首先，我們來探討如何繞Z軸旋轉一個三維物件。

繞Z軸旋轉

繞Z軸旋轉本質上是在x,y平面上進行旋轉，與二維旋轉類別似。旋轉矩陣可以表示為：

import numpy as np

def rotz(xp, yp, rz):
    c11 = np.cos(rz)
    c12 = -np.sin(rz)
    c21 = np.sin(rz)
    c22 = np.cos(rz)
    
    xpp = xp * c11 + yp * c12
    ypp = xp * c21 + yp * c22
    
    return xpp, ypp

# 示例用法
xp = 10
yp = 5
rz = np.radians(45)  # 旋轉45度

xpp, ypp = rotz(xp, yp, rz)
print(f"旋轉後的座標：({xpp}, {ypp})")

內容解密：

此函式實作了繞Z軸的旋轉操作。輸入引數包括待旋轉點的x和y座標（xp, yp）以及旋轉角度（rz）。函式內部構建了旋轉矩陣，並將其應用於輸入座標，最終傳回旋轉後的座標（xpp, ypp）。這個過程與二維旋轉中的座標變換原理相同。

三維物件的投影

要將三維物件顯示在二維螢幕上，需要進行投影。最簡單的投影方法是正交投影，即直接丟棄Z座標。

import matplotlib.pyplot as plt
import numpy as np

# 定義三維物件的點
points_3d = np.array([
    [-1, -1, -1],
    [1, -1, -1],
    [1, 1, -1],
    [-1, 1, -1],
    [-1, -1, 1],
    [1, -1, 1],
    [1, 1, 1],
    [-1, 1, 1]
])

# 正交投影到XY平面
points_2d = points_3d[:, :2]

# 繪製投影結果
plt.scatter(points_2d[:, 0], points_2d[:, 1])
plt.gca().set_aspect('equal', adjustable='box')
plt.show()

圖表翻譯：

此圖展示了一個簡單的三維立方體及其在XY平面上的正交投影。透過丟棄Z座標，三維物件被投影到二維平面上。

進階投影技術：透視投影

除了正交投影外，透視投影是另一種常見的投影技術。它能夠產生更真實的視覺效果，因為它模擬了人類眼睛的視覺特性。

圖表翻譯：

此流程圖展示了從三維物件到螢幕顯示的透視投影過程。首先，三維物件經過透視投影轉換成二維投影結果，最後顯示在螢幕上。

三維圖形中的座標系統與投影技術

在三維圖形學中，座標系統的建立是基礎且關鍵的一環。為了精確描述三維空間中的物體位置與變換，需要建立一個符合右手定則的xyz座標系統。這種系統的建立確保了在進行旋轉、平移等操作時能夠保持正確的方向性。

右手座標系統的建立

在三維空間中，座標軸的方向遵循右手定則：當右手的手指彎曲方向與旋轉方向一致時，大拇指所指的方向即為旋轉軸的正方向。這種座標系統的建立方式確保了在進行後續的圖形變換時能夠保持正確的空間關係。

# 定義一個簡單的函式來展示右手座標系統
def right_hand_rule():
    # 假設x、y、z軸的單位向量
    x_axis = [1, 0, 0]
    y_axis = [0, 1, 0]
    z_axis = [0, 0, 1]
    return x_axis, y_axis, z_axis

x, y, z = right_hand_rule()
print("x軸:", x)
print("y軸:", y)
print("z軸:", z)

內容解密：

此程式碼定義了一個名為right_hand_rule的函式，用於展示右手座標系統中x、y、z軸的單位向量。函式傳回三個列表，分別代表x、y、z軸的方向。這種表示方法簡潔明瞭地展示了三維座標系統的基礎構成。

三維物體的投影技術

要將三維物體顯示在二維的電腦螢幕上，需要使用投影技術。常見的投影方法包括將三維座標投影到x,y、x,z或y,z平面上。以下是一個簡單的例子，展示如何將一個三維線段投影到x,y平面上：

import matplotlib.pyplot as plt

# 定義三維空間中的兩個點
xA, yA, zA = 1, 2, 3
xB, yB, zB = 4, 5, 6

# 投影到x,y平面
plt.plot([xA, xB], [yA, yB], color='b')
plt.show()

內容解密：

此程式碼首先匯入了matplotlib.pyplot模組，用於繪圖。然後定義了三維空間中的兩個點A和B。最後，將這兩個點的x和y座標提取出來，並使用plt.plot函式繪製出投影在x,y平面上的線段。這種方法簡單直觀地展示了三維物體在二維平面上的投影效果。

投影至不同座標平面的技術細節

在進行三維物體的投影時，可以選擇不同的座標平面。以下是將三維線段投影到x,z和y,z平面的範例：

# 投影到x,z平面（檢視從上往下看）
plt.plot([xA, xB], [zA, zB], color='r')

# 投影到y,z平面
plt.plot([yA, yB], [zA, zB], color='g')

plt.show()

內容解密：

此程式碼展示瞭如何將三維線段投影到x,z和y,z平面上。透過調整座標的選擇，可以實作不同的投影檢視。這種靈活性使得在不同應用場景下能夠選擇最合適的投影方式。

Plantuml圖表展示投影過程

圖表翻譯：

此圖示展示了三維物體投影到不同座標平面的流程。首先，三維物體進入系統，接著選擇要投影的座標平面。根據選擇，可以投影到x,y、x,z或y,z平面上。最終，這些投影結果都會被顯示出來。這種流程圖清晰地展示了三維投影技術的關鍵步驟和不同投影選項。

三維圖形中的旋轉變換

在三維圖形學中，旋轉是一種基本的幾何變換，用於將物件繞某一軸旋轉特定的角度。本文將詳細介紹三維空間中的旋轉變換，包括繞y軸、x軸和z軸的旋轉。

繞y軸旋轉

繞y軸旋轉是指將一個點或物件繞y軸旋轉某一角度。圖1展示了繞y軸旋轉的單位向量幾何關係。

圖表翻譯：

此圖表展示了繞y軸旋轉的基本過程。首先，物件從初始位置開始，然後繞y軸進行旋轉，最後將旋轉後的結果投影到x-z平面上。這個過程說明瞭三維旋轉的基本步驟。

數學推導

假設有一個點P，其在三維空間中的座標為(x, y, z)。當這個點繞y軸旋轉一個角度Ry時，其新的座標(x’, y’, z’)可以透過以下公式計算：

import numpy as np

def rotate_about_y_axis(x, y, z, angle):
    # 將角度轉換為弧度
    angle_rad = np.deg2rad(angle)
    
    # 繞y軸旋轉的變換矩陣
    rotation_matrix = np.array([
        [np.cos(angle_rad), 0, np.sin(angle_rad)],
        [0, 1, 0],
        [-np.sin(angle_rad), 0, np.cos(angle_rad)]
    ])
    
    # 原始座標
    point = np.array([x, y, z])
    
    # 進行旋轉變換
    rotated_point = np.dot(rotation_matrix, point)
    
    return rotated_point

# 示例用法
x, y, z = 1, 2, 3
angle = 45  # 旋轉45度
rotated_point = rotate_about_y_axis(x, y, z, angle)
print("旋轉後的座標：", rotated_point)

內容解密：

此程式碼定義了一個名為rotate_about_y_axis的函式，用於計算一個點繞y軸旋轉後的座標。函式首先將輸入的角度從度轉換為弧度，然後構建繞y軸旋轉的變換矩陣。接著，將原始座標與變換矩陣相乘，得到旋轉後的座標。最後，傳回旋轉後的座標。這個函式展示瞭如何在程式中實作三維旋轉變換。

繞x軸旋轉

繞x軸旋轉與繞y軸旋轉類別似，但旋轉軸變成了x軸。圖2展示了繞x軸旋轉的單位向量幾何關係。

@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle

title 二維三維圖形旋轉變換與投影技術

package "圖論網路分析" {
    package "節點層" {
        component [節點 A] as nodeA
        component [節點 B] as nodeB
        component [節點 C] as nodeC
        component [節點 D] as nodeD
    }

    package "中心性指標" {
        component [度中心性
Degree Centrality] as degree
        component [特徵向量中心性
Eigenvector Centrality] as eigen
        component [介數中心性
Betweenness Centrality] as between
        component [接近中心性
Closeness Centrality] as close
    }
}

nodeA -- nodeB
nodeA -- nodeC
nodeB -- nodeD
nodeC -- nodeD

nodeA --> degree : 計算連接數
nodeA --> eigen : 計算影響力
nodeB --> between : 計算橋接度
nodeC --> close : 計算距離

note right of degree
  直接連接數量
  衡量局部影響力
end note

note right of eigen
  考慮鄰居重要性
  衡量全局影響力
end note

@enduml

圖表翻譯：

此圖表展示了繞x軸旋轉的基本過程。與繞y軸旋轉類別似，首先物件從初始位置開始，然後繞x軸進行旋轉，最後將結果投影到y-z平面上。

數學推導

繞x軸旋轉的變換公式如下：

import numpy as np

def rotate_about_x_axis(x, y, z,Angle
angle_rad = np.cos(angle_rad)
 Angle angle_rad = np.sin(angle_rad)

    # 繞x軸旋轉的變換矩陣
    rotation_matrix = np.array([
        [1, 0, 0],
        [0, np.cos(angle_rad), -np.sin(angle_rad)],
        [0, np.sin(angle_rad), np.cos(angle_rad)]
    ])

    # 原始座標
    point = np.array([x, y, z])

    # 進行旋轉變換
    rotated_point = np.dot(rotation_matrix, point)

    return rotated_point

內容解密：

此程式碼實作了繞x軸的旋轉變換。與繞y軸旋轉類別似，首先構建繞x軸旋轉的變換矩陣，然後將原始座標與變換矩陣相乘，得到旋轉後的座標。這段程式碼展示瞭如何在三維空間中實作繞x軸的旋轉。

繞z軸旋轉

繞z軸旋轉在二維空間中已經討論過，在三維空間中，z座標保持不變。

數學推導

import numpy as np

def rotate_about_z_axis(x, y, z, angle):
    angle_rad = np.deg2rad(angle)
    
    # 繞z軸旋轉的變換矩陣
    rotation_matrix = np.array([
        [np.cos(angle_rad), -np.sin(angle_rad), 0],
        [np.sin(angle_rad), np.cos(angle_rad), 0],
        [0, 0, 1]
    ])
    
    point = np.array([x, y, z])
    rotated_point = np.dot(rotation_matrix, point)
    
    return rotated_point

內容解密：

此程式碼實作了繞z軸的旋轉變換。繞z軸旋轉時，z座標保持不變，x和y座標根據旋轉角度進行變換。這個函式展示瞭如何在三維空間中實作繞z軸的旋轉。

圖表翻譯：

此圖表展示了三維圖形渲染的基本流程。首先，進行旋轉變換；然後，將結果投影到2D平面；最後，將投影結果渲染到螢幕上顯示。這個流程是三維圖形渲染的核心步驟。