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

Mari Membuat Mesin Grafik 3D: Resterize Segitiga dan Segi empat

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: Rasterizing Line Segments and Circles
Let's Build a 3D Graphics Engine: Colors

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

Selamat datang di bagian kelima dari seri Mari Mebuat Mesin Grafik 3D kita! Kali ini, kita akan membuat dua kelas baru untuk resterize: satu untuk segitiga dan satu untuk segi empat. Kemudian, kita akan mengambil potongan-potongan dari dua kelas dan mengumpulkan kelas poligon akhir, maha kuasa.

Tips: Ini adalah bagian dari seri, jadi jika Anda ingin memaksimalkannya, pastikan Anda membaca tutorial lain yang mengarah ke tutorial ini.


Rekap

Kita telah membuat sedikit ke mesin kita sejauh ini! Inilah kita miliki:

  • Kelas Point dan Vektor (blok bangunan mesin kita).
  • Fungsi transformasi untuk poin kita.
  • Kelas Kamera (atur viewport kita, dan sisihkan titik di luar layar).
  • Dua kelas untuk resterize (segmen garis dan lingkaran).

Berikut ini adalah referensi cepat untuk semua kelas yang kita bangun:

Kita akan sangat bergantung pada kelas LineSegment untuk membuat kelas Triangle dan Quad, jadi pastikan untuk menyesuaikan kembali diri Anda dengannya sebelum melanjutkan.


Reterize Segitiga

512px-Euler_diagram_of_triangle_types

Menyusun kelas Triangle untuk mesinnya cukup sederhana, terutama karena kelas LineSegment adalah tempat semua resterize akan dilakukan. Kelas ini memungkinkan tiga poin untuk ditetapkan, dan akan menggambar segmen garis di antara mereka untuk membuat segitiga yang lengkap.

Garis besar dasar kelas dapat terlihat seperti ini:

Demi standar, kita akan mengasumsikan bahwa tiga titik yang dinyatakan dalam segitiga kita berada dalam pola searah jarum jam.

Dengan menggunakan kelas LineSegment, kita dapat mengatur fungsi returnPointsInTriangle() kita seperti ini:

Tidak terlalu buruk, bukan? Karena kita sudah memiliki banyak pekerjaan yang dilakukan dalam kelas LineSegment, kita hanya perlu terus merangkai mereka bersama untuk membuat bentuk yang lebih kompleks. Ini membuatnya mudah untuk membuat poligon yang lebih rumit di layar, cukup dengan menambahkan lebih banyak LineSegment (dan menyimpan lebih banyak poin di dalam kelas itu sendiri).

Selanjutnya, mari kita lihat bagaimana kita dapat menambahkan lebih banyak poin ke sistem ini dengan membuat kelas persegi.


Persiapan

300px-Six_Quadrilaterals

Menyatukan kelas untuk menangani segi empat hanya melibatkan penambahan beberapa hal tambahan ke kelas Triangle kita. Dengan seperangkat poin lain, kelas segi empat kita akan terlihat seperti ini:

Lalu, kita hanya menambahkan segmen garis tambahan ke fungsi returnPointsInQuad, seperti:

Meskipun membangun kelas baru seperti ini cukup mudah, ada banyak cara yang lebih mudah untuk merangkum semua poligon kita menjadi satu kelas. Dengan menggunakan keajaiban loop dan array, kita dapat menyusun kelas poligon yang dapat membuat hampir semua ukuran yang Anda inginkan!


Di Mana Memiliki Semua Poligon?

Untuk membuat kelas poligon yang terus berkembang, kita perlu melakukan dua hal. Yang pertama adalah memindahkan semua poin ke dalam array, yang akan memberikan garis besar kelas yang mirip dengan sesuatu seperti ini:

Yang kedua adalah menggunakan loop untuk memungkinkan sejumlah segmen garis yang tidak disebutkan namanya untuk dilintasi dalam fungsi returnPointsInPolygon() kita, yang bisa terlihat seperti ini:

Dengan kelas ini ditambahkan ke mesin, kita sekarang dapat membuat apa saja dari segitiga ke beberapa 39 sisi dengan baris kode yang sama.


Pencipta Poligon

Untuk bermain dengan kelas poligon baru, mari kita buat program yang menunjukkan jangkauannya. Program ini memungkinkan pengguna untuk menambah atau menghapus sisi dari poligon yang ditampilkan menggunakan penekanan tombol. Tentu saja, kita harus menetapkan batas jumlah sisi yang dapat dimiliki poligon kita, karena memiliki kurang dari tiga sisi tidak akan lagi menjadikannya poligon. Kita tidak benar-benar harus mengawasi batas atas poligon karena mereka harus diskala dengan baik. Namun, kita akan membatasi poligon untuk memiliki maksimum sepuluh sisi karena kita akan menetapkan poin baru dari dalam kode.

Spesifikasi program kita dapat dipecah menjadi bagian-bagian yang lebih kecil ini:

  • Gambar poligon ke layar pada awalnya.
  • Saat tombol 'a' ditekan, turunkan jumlah sisi pada poligon sebanyak 1.
  • Saat tombol 's' ditekan, tambah jumlah sisi pada poligon sebanyak 1.
  • Cegah agar jumlah sisi poligon tidak jatuh di bawah 3.
  • Cegah agar jumlah sisi poligon tidak bertambah di atas 10.

Mari kita lihat seperti apa kode kita:

Program kecil kita akan memungkinkan Anda menyesuaikan poligon di layar sekarang! Lihat demo. Jika Anda ingin sedikit meningkatkan program ini, Anda mungkin ingin mencoba menempatkan bagian perubahan poligon ke dalam beberapa bentuk algoritma untuk membuat penskalaan lebih mudah pada diri Anda sendiri. Saya tidak yakin apakah sudah ada, tetapi jika ada, Anda dapat dengan mudah memiliki poligon penskalaan tanpa batas di tangan Anda!


Kesimpulan

Kita memiliki sejumlah besar resterize yang terpasang di mesin kita sekarang, memungkinkan kita membuat hampir semua bentuk yang mungkin dibutuhkan (meskipun beberapa hanya melalui kombinasi). Lain kali kita akan menjauh dari menggambar bentuk dan berbicara lebih banyak tentang properti mereka. Jika Anda tertarik untuk membawa warna ke layar Anda, maka pastikan untuk memeriksa bagian selanjutnya!

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.