Advertisement
  1. Game Development
  2. Programming

Mari Membuat Mesin Grafik 3D: Transformasi Linier

Scroll to top
Read Time: 9 min
This post is part of a series called Let’s Build a 3D Graphics Software Engine.
Let's Build a 3D Graphics Engine: Points, Vectors, and Basic Concepts
Let's Build a 3D Graphics Engine: Spaces and Culling

Indonesian (Bahasa Indonesia) translation by Septriansyah Rehan (you can also view the original English article)

Selamat datang di bagian kedua dari seri 3D Graphics Engine! Kali ini kita akan berbicara tentang transformasi linear, yang akan memungkinkan kita mengubah properti seperti rotasi dan penskalaan vektor, dan melihat bagaimana menerapkannya ke kelas yang sudah dibangun.

Jika Anda belum membaca bagian pertama dari seri ini, saya sarankan Anda melakukannya sekarang. Kalau-kalau Anda tidak ingat, berikut adalah rekap singkat dari apa yang dibuat terakhir kali:

Kedua kelas tersebut akan menjadi dasar dari seluruh mesin grafis, di mana yang pertama mewakili sebuah titik (lokasi fisik di dalam ruang Anda) dan yang kedua mewakili vektor (ruang/pergerakan antara dua titik).

Untuk diskusi tentang transformasi linear, Anda harus membuat perubahan kecil ke kelas Point: alih-alih mengeluarkan data ke garis konsol seperti sebelumnya, gunakan API Grafik favorit Anda dan minta fungsi menggambar titik saat ini ke layar.


Yayasan Transformasi Linier

Hanya peringatan: Persamaan Transformasi Linier terlihat jauh lebih buruk daripada yang sebenarnya. Akan ada beberapa trigonometri yang terlibat, tetapi Anda tidak harus benar-benar tahu bagaimana melakukan trigonometri: Saya akan menjelaskan apa yang harus Anda berikan pada setiap fungsi dan apa yang akan Anda keluarkan, dan untuk hal-hal di antaranya Anda hanya dapat menggunakan kalkulator atau perpustakaan matematika yang mungkin dimiliki.

Tips: Jika Anda ingin memiliki pemahaman yang lebih baik tentang cara kerja bagian dalam persamaan ini, maka Anda harus menonton video ini dan membaca PDF ini.

Semua transformasi linear mengambil bentuk ini:

\[B = F(A)\]

Ini menyatakan bahwa jika Anda memiliki fungsi transformasi linear \(F()\), dan input Anda adalah vektor \(A\), maka output Anda akan menjadi vektor \(B\).

Masing-masing potongan ini - dua vektor dan fungsinya - dapat direpresentasikan sebagai matriks: vektor \(B\) sebagai matriks 1x3, vektor \(A\) sebagai matriks 1x3 lainnya, dan transformasi linear \(F\) sebagai matriks 3x3 (matriks transformasi).

Ini berarti bahwa, ketika Anda memperluas persamaan, tampilannya seperti ini:

\[
\begin{bmatrix}
b_{0} \\
b_{1} \\
b_{2}
\end{bmatrix}
=
\begin{bmatrix}
f_{00} & f_{01} & f_{02}\\
f_{10} & f_{11} & f_{12}\\
f_{10} & f_{11} & f_{12}\\
\end{bmatrix}
\begin{bmatrix}
a_{0}\\
a_{1}\\
a_{2}
\end{bmatrix}
\]

Jika Anda pernah mengikuti kelas trigonometri atau aljabar linier, Anda mungkin mulai mengingat mimpi buruk yang merupakan matematika matriks. Untungnya, ada cara yang lebih sederhana untuk menuliskan persamaan ini untuk menghilangkan sebagian besar masalah dari persamaan tersebut. Ini terlihat seperti ini:

\[
\begin{bmatrix}
b_{0}\\
b_{1}\\
b_{2}
\end{bmatrix}
=
\begin{bmatrix}
f_{00}a_{0} + f_{01}a_{1} + f_{02}a_{2}\\
f_{10}a_{0} + f_{11}a_{1} + f_{12}a_{2}\\
f_{20}a_{0} + f_{21}a_{1} + f_{22}a_{2}\\
\end{bmatrix}
\]

Namun, persamaan ini dapat diubah dengan memiliki input kedua, seperti dalam kasus rotasi, di mana vektor dan jumlah rotasinya harus diberikan. Mari kita lihat bagaimana rotasi bekerja.


Rotasi

Rotasi, menurut definisi, adalah gerakan melingkar dari objek di sekitar titik rotasi. Titik rotasi untuk ruang kita dapat menjadi salah satu dari tiga kemungkinan: baik bidang XY, bidang XZ, atau bidang YZ (di mana setiap bidang terdiri dari dua vektor basis yang dibahas di bagian pertama seri ini. ).

692px-Rotation_illustration2svg692px-Rotation_illustration2svg692px-Rotation_illustration2svg

Tiga titik rotasi berarti bahwa kita memiliki tiga matriks rotasi terpisah, sebagai berikut:

Matriks rotasi XY:
\[
\begin{bmatrix}
cos \theta & -sin \theta & 0\\
sin \theta & cos \theta & 0\\
0 & 0 & 1\\
\end{bmatrix}
\]

Matriks rotasi XZ:

\[
\begin{bmatrix}
cos \theta & 0 & sin \theta\\
0 & 1 & 0\\
-sin \theta & 0 & cos \theta
\end{bmatrix}
\]

Matriks rotasi YZ:

\[
\begin{bmatrix}
1 & 0 & 0\\
0 & cos \theta & -sin \theta\\
0 & sin \theta & cos \theta
\end{bmatrix}
\]

Jadi untuk memutar titik \(A\) di sekitar bidang XY sebesar 90 derajat (\(\pi/2\) radian - sebagian besar perpustakaan matematika memiliki fungsi untuk mengubah derajat menjadi radian), Anda akan mengikuti langkah-langkah ini:

\[
\begin{aligned}
\begin{bmatrix}
b_{0}\\
b_{1}\\
b_{2}
\end{bmatrix}
& =
\begin{bmatrix}
cos \frac{\pi}{2} & -sin \frac{\pi}{2} & 0\\
sin \frac{\pi}{2} & cos \frac{\pi}{2} & 0\\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
a_{0}\\
a_{1}\\
a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
cos \frac{\pi}{2}a_{0} + -sin \frac{\pi}{2}a_{1} + 0a_{2}\\
sin \frac{\pi}{2}a_{0} + cos \frac{\pi}{2}a_{1} + 0a_{2}\\
0a_{0} + 0a_{1} + 1a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
0a_{0} + -1a_{1} + 0a_{2}\\
1a_{0} + 0a_{1} + 0a_{2}\\
0a_{0} + 0a_{1} + 1a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
-a_{1}\\
a_{0}\\
a_{2}
\end{bmatrix}
\end{aligned}
\]

Jadi jika titik awal Anda \(A\) adalah \((3,4,5)\), maka titik output Anda \(B\) akan menjadi \((-4,3,5)\).

Latihan: Fungsi Rotasi

Sebagai latihan, cobalah membuat tiga fungsi baru untuk kelas Vector. Seseorang harus memutar vektor di sekitar bidang XY, satu di sekitar bidang YZ, dan satu di sekitar bidang XZ. Fungsi Anda harus menerima jumlah derajat yang diinginkan untuk rotasi sebagai input, dan mengembalikan vektor sebagai output.

Alur dasar fungsi Anda harus sebagai berikut:

  1. Buat vektor output.
  2. Ubah input derajat menjadi bentuk radian.
  3. Pecahkan untuk setiap bagian dari vektor keluaran tuple dengan menggunakan persamaan di atas.
  4. Kembalikan vektor output.

Scaling

Penskalaan adalah transformasi yang memperbesar atau memperkecil objek berdasarkan skala yang ditetapkan.

Melakukan transformasi ini cukup sederhana (setidaknya dibandingkan dengan rotasi). Transformasi penskalaan membutuhkan dua input: vektor input dan tuple penskalaan 3, yang menentukan bagaimana vektor input harus diskalakan sehubungan dengan masing-masing sumbu basis ruang.

Misalnya, dalam skala penskalaan \((s_{0},s_{1},s_{2})\), \(s_{0}\)  mewakili penskalaan sepanjang sumbu X, \(s_{1}\) sepanjang sumbu Y, dan \(s_{2}\) di sepanjang sumbu Z.

Matriks transformasi penskalaan adalah sebagai berikut (where \(s_{0}\), \(s_{1}\), and \(s_{2}\) adalah elemen dari skala 3-tuple):

\[
\begin{bmatrix}
s0 & 0 & 0\\
0 & s1 & 0\\
0 & 0 & s2
\end{bmatrix}
\]

Untuk membuat vektor input A \((a_{0}, a_{1}, a_{2})\) dua kali lebih besar di sepanjang sumbu X (yaitu, menggunakan skala 3-tuple \(S = (2, 1, 1)\)), matematika akan terlihat seperti ini:

\[
\begin{aligned}
\begin{bmatrix}
b_{0}\\
b_{1}\\
b_{2}
\end{bmatrix}
& =
\begin{bmatrix}
s0 & 0 & 0\\
0 & s1 & 0\\
0 & 0 & s2
\end{bmatrix}
\begin{bmatrix}
a_{0}\\
a_{1}\\
a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
2 & 0 & 0\\
0 & 1 & 0\\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
a_{0}\\
a_{1}\\
a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
2a_{0} + 0a_{1} + 0a_{2}\\
0a_{0} + 1a_{1} + 0a_{2}\\
0a_{0} + 0a_{1} + 1a_{2}
\end{bmatrix}\\
& =
\begin{bmatrix}
2a_{0}\\
a_{1}\\
a_{2}
\end{bmatrix}
\end{aligned}
\]

Jadi jika diberi vektor input \(A = (3,4,0)\), maka vektor output Anda \(B\) akan menjadi \((6,4,0)\).

scalingscalingscaling

Latihan: Fungsi Penskalaan

Sebagai latihan lain, tambahkan fungsi baru ke kelas vektor Anda untuk penskalaan. Fungsi baru ini harus mengambil skala 3-tuple dan mengembalikan vektor output.

Alur dasar fungsi Anda harus sebagai berikut:

  1. Buat vektor output.
  2. Pecahkan untuk setiap bagian vektor keluaran tuple dengan menggunakan persamaan di atas (yang dapat disederhanakan menjadi y0 = x0 * s0; y1 = x1*s1; y2 = x2*s2).
  3. Kembalikan vektor output.

Ayo Membuat Sesuatu!

Sekarang setelah Anda memiliki transformasi linier, mari buat program kecil cepat untuk memamerkan keterampilan baru Anda. Kita akan membuat program yang menarik sekelompok titik ke layar, dan kemudian memungkinkan kita untuk memodifikasinya secara keseluruhan dengan melakukan transformasi linear pada mereka.

Sebelum memulai, kita juga ingin menambahkan fungsi lain ke kelas Point. Ini akan disebut setPointToPoint(), dan hanya akan mengatur posisi titik saat ini ke titik yang dilewatkan ke sana. Ini akan menerima poin sebagai input, dan tidak akan mengembalikan apa pun.

Berikut adalah beberapa spesifikasi cepat untuk program kita:

  • Program ini akan menampung 100 poin dalam sebuah array.
  • Ketika tombol D ditekan, program akan menghapus layar saat ini dan menggambar ulang poin.
  • Ketika tombol A ditekan, program akan menskala semua lokasi poin sebesar 0.5.
  • Ketika tombol S ditekan, program akan menskala semua lokasi poin dengan 2.0.
  • Ketika tombol R ditekan, program akan memutar semua lokasi poin sebesar 15 derajat pada bidang XY.
  • Ketika tombol Escape ditekan, program akan keluar (kecuali jika Anda membuatnya dengan JavaScript atau bahasa berorientasi web lainnya).

Kelas kita saat ini: 

Dengan spesifikasi itu, mari lihat seperti apa kode kita:

Sekarang Anda harus memiliki program kecil yang keren untuk memamerkan semua teknik baru Anda! Anda dapat melihat demo sederhana saya di sini.


Kesimpulan

Meskipun kita tentu saja tidak mencakup setiap kemungkinan transformasi linear yang tersedia, mesin mikro mulai terbentuk.

Seperti biasa, ada beberapa hal yang tertinggal dari mesin kami untuk kesederhanaan (yaitu geser dan refleksi di bagian ini). Jika Anda ingin mengetahui lebih lanjut tentang kedua jenis transformasi linier tersebut, Anda dapat mengetahui lebih lanjut tentang hal itu di Wikipedia dan tautan terkaitnya.

Di bagian selanjutnya dari seri ini, kita akan membahas ruang tampilan yang berbeda dan bagaimana memilih objek yang berada di luar tampilan kita.

Jika Anda memerlukan bantuan ekstra, pergilah ke Envato Studio, di mana Anda dapat menemukan banyak layanan Desain & Pemodelan 3D yang fantastis. Penyedia berpengalaman ini dapat membantu Anda dengan berbagai proyek yang berbeda, jadi cukup telusuri penyedia, baca ulasan dan peringkat, dan pilih orang yang tepat untuk membantu Anda.

3D Design Modeling services3D Design Modeling services3D Design Modeling services
Layanan Desain & Pemodelan 3D di Envato Studio
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Game Development tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.