Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Mari Membuat Mesin Grafik 3D: Warna

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 Triangles and Quads
Let's Build a 3D Graphics Engine: Dynamic Lighting

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

Selamat datang! Ini adalah bagian keenam dalam seri Let's Build a 3D Graphics Engine kita yang membahas dasar-dasar sistem grafis 3D. Kali ini kita akan berbicara tentang warna dan bagaimana menambahkannya ke dalam kelas yang ada. Kita juga akan membuat beberapa fungsi yang berguna untuk membuat penanganan pencahayaan lebih mudah, yang akan menjadi bagian kita selanjutnya.


Recap

Menambahkan warna ke objek kita tidak akan terlalu besar dari usaha, jadi hanya dua kelas yang akan difokuskan dengan berat adalah kelas titik kita dan kelas kamera kita. Sebagai penyegar, seperti inilah bentuknya:

Sejauh ini, mesin teoritis kita memiliki hampir semua dasar-dasarnya, termasuk:

  • Kelas Point dan Vector (blok bangunan mesin kita).
  • Fungsi transformasi untuk poin kita.
  • Kelas Camera (mengatur viewport kita, dan menyisihkan titik di luar layar).
  • Tiga kelas untuk rasterisasi (segmen garis, lingkaran, dan poligon).

Sekarang mari kita tambahkan beberapa warna!


Warna untuk semua orang!

Mesin kita akan menangani warna dengan menyimpan nilainya dalam kelas Point. Hal ini memungkinkan setiap titik untuk memiliki warna tersendiri, membuat perhitungan pencahayaan dan bayangan lebih sederhana (bagi orang, setidaknya - kadang-kadang kurang efisien untuk kode mesin dengan cara ini). Saat mencari tahu pencahayaan atau bayangan pemandangan, kita dapat dengan mudah menyediakan fungsi dengan daftar titik, dan kemudian mengaduknya masing-masing, menggunakan jarak mereka dari cahaya untuk mengubah warna mereka sesuai.

Salah satu cara paling umum untuk menyimpan warna dalam pemrograman adalah dengan menggunakan nilai merah, hijau, dan biru untuk membuat warna yang diinginkan (ini biasanya disebut pencampuran warna aditif). Dengan menyimpan nilai 0-255 di setiap segmen warna ini, Anda dapat dengan mudah membuat berbagai macam warna. (Ini adalah cara sebagian besar API menentukan warna, jadi untuk alasan kompatibilitas masuk akal untuk menggunakan metode ini).

Kemudian, tergantung pada API grafik yang Anda gunakan, Anda bisa meneruskan nilai-nilai ini dalam bentuk desimal (255,0,0), atau dalam bentuk heksadesimal (0xFF0000 atau #FF0000). Kita akan menggunakan format desimal di mesin karena ini sedikit lebih mudah untuk dikerjakan. Juga, jika API grafik Anda tidak menggunakan nilai heksadesimal, maka kemungkinan memiliki fungsi untuk mengkonversi dari desimal ke heksadesimal, seharusnya ini tidak menjadi masalah.

AdditiveColor

Untuk memulai implementasi warna, kita akan menambahkan tiga variabel baru ke kelas Point kita: redblue, dan green. Tidak ada yang terlalu aneh terjadi di sini, tapi di sini seperti apa garis besar kelas Point kita nanti:

Hanya itu yang dibutuhkan untuk menyimpan warna titik kita. Sekarang kita hanya perlu menyesuaikan fungsi draw kamera sehingga menggunakan warna yang ditentukan.

Ini akan berubah secara drastis tergantung pada API grafik yang Anda gunakan, tetapi semuanya harus memiliki fungsi yang mirip dengan ini:

Jika API grafik Anda menggunakan nilai heksadesimal untuk warna alih-alih desimal, maka fungsi Anda akan terlihat mirip dengan ini:

Terakhir itu menggunakan fungsi toHex() (sekali lagi, nama fungsi akan berbeda dari API ke API) untuk mengubah nilai RGB menjadi nilai heksadesimal sehingga Anda tidak perlu melakukannya.

Setelah melakukan perubahan ini, Anda sekarang dapat memiliki titik berwarna dalam adegan Anda. Untuk melangkah lebih jauh, kita akan menyesuaikan masing-masing kelas rasterisasi kita sehingga seluruh bentuk kita dapat diwarnai.

Untuk menambahkan ini ke kelas, kita hanya perlu menambahkan penanganan warna ke fungsi konstruktor mereka. Ini mungkin terlihat seperti:

Kemudian, kita hanya perlu memodifikasi fungsi titik kembalinya sehingga ia menetapkan setiap titik dalam arraynya untuk memiliki warna yang ditentukan. Fungsi baru akan terlihat seperti ini:

Sekarang, setiap titik dalam segmen garis harus memiliki warna yang sama dengan yang diteruskan ke segmen garis. Anda dapat menggunakan metode ini untuk mengatur warna di kelas rasterisasi Anda yang lain, dan segera scene Anda akan menjadi hidup dengan warna!

Mari kita menerapkan fitur-fitur baru kita dengan membuat program untuk memamerkannya.


Bermain Dengan 16.7 Juta Warna

Menggunakan pencampuran warna aditif, kita dapat dengan mudah membuat lebih dari 16.7 juta warna yang berbeda hanya menggunakan notasi sederhana (r,g,b). Kita akan membuat program yang memanfaatkan warna dalam jumlah besar ini.

Dengan menekan tombol, kita akan memungkinkan pengguna untuk mengontrol nilai-nilai red, green, dan blue suatu objek secara individual, memungkinkan mereka untuk membuatnya menjadi warna apa saja yang mereka inginkan.

Spesifikasi untuk program kita adalah sebagai berikut:

  • Gambar objek ke layar.
  • Jika pengguna menekan A maka turunkan nilai red objek; jika mereka menekan Q maka naikkan.
  • Jika pengguna menekan S maka turunkan nilai green objek; jika mereka menekan W maka naikkan.
  • Jika pengguna menekan D maka turunkan nilai blue objek; jika mereka menekan E maka naikkan.
  • Gambar ulang objek setelah warnanya diperbarui.
  • Pastikan untuk membatasi nilai warna, mencegahnya turun di bawah 0 atau naik di atas 255.

Dengan memikirkan hal itu, mari kita lihat seperti apa garis besar dasar program kita nantinya:

Sekarang kita bisa bermain-main dengan objek kita dan membuatnya menjadi warna apa saja yang diinginkan!

Lihat demo di sini - tekan tombol Q, W, E, A, S, dan D berulang-ulang untuk mengubah warna kotak.


Kesimpulan

Dengan warna yang ditambahkan ke mesin, kita memiliki semua yang dibutuhkan untuk akhirnya menangani beberapa pencahayaan. Pada artikel selanjutnya, kita akan melihat cara membuat sumber pencahayaan, dan membuat beberapa fungsi untuk memungkinkan sumber-sumber itu memengaruhi warna titik kita. Kedalaman yang ditambahkan pencahayaan ke mesin sangat memuaskan, jadi pastikan Anda memeriksanya!

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.