Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Ayo Membuat Mesin Grafik 3D: Rasterisasi Segmen Garis dan Lingkaran

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Let’s Build a 3D Graphics Software Engine.
Let's Build a 3D Graphics Engine: Spaces and Culling
Let's Build a 3D Graphics Engine: Rasterizing Triangles and Quads

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

Halo, ini adalah bagian keempat dari seri kita di mesin grafis 3D. Kali ini, kita akan membahas rasterisasi: proses mengambil bentuk yang dijelaskan oleh rumus matematika dan mengubahnya menjadi gambar di layar Anda.

Tips: Semua konsep dalam artikel ini dibangun dari kelas yang telah dibuat di tiga posting pertama, jadi pastikan untuk memeriksanya terlebih dahulu.


Rekap

Berikut ulasan kelas yang telah dibuat sejauh ini:

Anda dapat memeriksa program sampel dari bagian ketiga seri untuk melihat bagaimana mereka bekerja bersama.

Sekarang, mari kita lihat beberapa hal baru!


Rasterisasi

Rasterisasi (atau rasterisation, jika Anda suka) adalah proses mengambil bentuk yang dijelaskan dalam format grafik vektor (atau dalam kasus ini, secara matematis) dan mengubahnya menjadi gambar raster (di mana bentuknya pas dengan struktur piksel).

Karena matematika tidak selalu setepat yang dibutuhkan untuk grafik komputer, kita harus menggunakan algoritma agar sesuai dengan bentuk yang dijelaskan di layar berbasis integer kita. Sebagai contoh, suatu titik dapat jatuh ke koordinat \((3.2, 4.6)\) dalam matematika, tetapi ketika kita merendernya, kita harus mendorongnya ke \((3, 5)\) sehingga dapat masuk ke dalam struktur piksel layar kita.

Setiap jenis bentuk yang dirasterisasi akan memiliki algoritma sendiri untuk melakukannya. Mari kita mulai dengan salah satu bentuk yang lebih sederhana untuk dirasterisasi: segmen garis.


Segmen Baris

Source: http://en.wikipedia.org/wiki/File:Bresenham.svg
Sumber: http://en.wikipedia.org/wiki/File:Bresenham.svg

Segmen garis adalah salah satu bentuk paling sederhana yang dapat digambar, dan seringkali merupakan salah satu hal pertama yang tercakup dalam kelas geometri mana pun. Mereka diwakili oleh dua titik berbeda (satu titik awal dan satu titik akhir), dan garis yang menghubungkan keduanya. Algoritma yang paling umum digunakan dalam rasterisasi segmen garis disebut Algoritma Bresenham.

Langkah demi langkah, Algoritma Bresenham bekerja seperti ini:

  1. Terima poin awal dan akhir segmen garis sebagai input.
  2. Identifikasi arah segmen garis dengan menentukan properti \(dx\) and \(dy\) properties (\(dx = x_{1} - x_{0}\), \(dy = y_{1} - y_{0}\)).
  3. Tentukan properti sx, sy, dan error catching (saya akan menunjukkan definisi matematika untuk ini di bawah).
  4. Bulatkan setiap titik di segmen garis ke piksel di atas atau di bawah.

Sebelum kita menerapkan Algoritma Bresenham, mari kita kumpulkan kelas segmen garis dasar untuk digunakan dalam mesin:

Jika Anda ingin melakukan transformasi pada kelas LineSegment baru, yang harus Anda lakukan adalah menerapkan transformasi yang Anda pilih ke titik awal dan akhir dari LineSegment dan kemudian menempatkannya kembali ke dalam kelas. Semua poin yang jatuh di antara akan diproses ketika LineSegment itu sendiri ditarik, karena Algoritma Bresenham hanya membutuhkan titik awal dan titik akhir untuk menemukan setiap titik berikutnya.

Agar kelas LineSegment sesuai dengan mesin saat ini, kami sebenarnya tidak dapat memiliki fungsi draw() yang dibangun di dalam kelas, itulah sebabnya saya memilih untuk menggunakan fungsi returnPointsInSegment sebagai gantinya. Fungsi ini akan mengembalikan array dari setiap titik yang ada di dalam segmen garis, memungkinkan kita untuk dengan mudah menggambar dan menyisihkan segmen garis yang sesuai.

Fungsi kita returnPointsInSegment() terlihat sedikit seperti ini (dalam JavaScript):

Cara termudah untuk menambahkan rendering segmen garis ke dalam kelas kamera kami adalah dengan menambahkan struktur sederhana if, mirip dengan yang berikut:

Itu saja yang Anda butuhkan untuk membuat kelas bentuk pertama Anda aktif dan berjalan! Jika Anda ingin mempelajari lebih lanjut tentang aspek yang lebih teknis dari Algoritma Bresenham (terutama bagian kesalahan), Anda dapat memeriksa artikel Wikipedia di atasnya.


Lingkaran

Source: http://en.wikipedia.org/wiki/File:Bresenham_circle.svg
Sumber: http://en.wikipedia.org/wiki/File:Bresenham_circle.svg

Rasterisasi sebuah lingkaran sedikit lebih sulit daripada rasterisasi segmen garis, tetapi tidak banyak. Kita akan menggunakan algoritma titik tengah untuk melakukan semua pengangkatan berat, yang merupakan perpanjangan dari Algoritma Bresenham yang disebutkan sebelumnya. Karena itu, ia mengikuti langkah-langkah serupa dengan yang tercantum di atas, dengan beberapa perbedaan kecil.

Algoritme baru berfungsi seperti ini:

  1. Terima titik tengah dan jari-jari lingkaran.
  2. Atur secara paksa poin di setiap arah mata angin
  3. Telusuri setiap kuadran kita, tarik busur mereka

Kelas lingkaran akan sangat mirip dengan kelas segmen garis, terlihat seperti ini:

Fungsi returnPointsInCircle() kita akan berperilaku dengan cara yang sama seperti fungsi kelas LineSegment, mengembalikan array titik sehingga kamera dapat membuat dan memilah mereka sesuai kebutuhan. Ini memungkinkan engine menangani berbagai bentuk, dengan hanya perubahan kecil yang diperlukan untuk masing-masing bentuk.

Inilah yang akan terlihat dari fungsi returnPointsInCircle() (dalam JavaScript):

Sekarang, kita tambahkan saja statement if ke loop gambar utama kita, dan lingkaran ini sepenuhnya terintegrasi!

Berikut ini tampilan loop gambar yang diperbarui:

Ini adalah bagaimana gambar yang diperbarui Sekarang kita sudah membuat kelas baru, mari kita buat sesuatu!


Raster Master

Program kita akan menjadi sederhana saat ini. Ketika pengguna mengklik pada layar, kita akan menggambar lingkaran yang titik tengahnya adalah titik yang diklik, dan yang jari-jarinya adalah angka acak.

Mari kita lihat kodenya:

Dengan sedikit keberuntungan, Anda sekarang dapat menggunakan mesin Anda yang diperbarui untuk menggambar beberapa lingkaran yang mengagumkan.


Kesimpulan

Sekarang kita memiliki beberapa fitur rasterisasi dasar di mesin, akhirnya kita dapat mulai menggambar beberapa hal berguna ke layar! Belum ada yang terlalu rumit, tetapi jika Anda mau, Anda bisa mengumpulkan beberapa tongkat, atau semacamnya.

Dalam posting berikutnya, kita akan melihat rasterisasi lagi. - hanya kali ini, kami akan menyiapkan dua kelas lagi untuk digunakan dalam mesin: segitiga dan segiempat. Tetap disini!

Advertisement
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.