Berbagi teknologi

Grafik 3D Real-Time dengan WebGL2

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Pipa rendering WebGL

Gambar berikut adalah diagram skema alur rendering WebGL:

Objek Penyangga Verteks (VBO)

VBOS berisi informasi yang digunakan untuk mendeskripsikan geometri. Misalnya koordinat titik, koordinat normal, warna, koordinat tekstur, dan lain-lain pada geometri.

Objek Penyangga Indeks (IBO)

IBO berisi informasi yang menjelaskan hubungan titik. Ia menggunakan posisi indeks dari titik di VBO.

Shader Puncak

Vertex shader dijalankan pada setiap titik. Ini menangani informasi terkait titik seperti koordinat titik, koordinat normal, warna, dan koordinat tekstur. Informasi ini diperoleh dari VBO dan dikaitkan dengan Atribut yang digunakan dalam vertex shader.

Shader Fragmen

Shader fragmen dijalankan pada setiap fragmen untuk menghitung warna setiap fragmen.

penyangga bingkai

Frame buffer adalah buffer dua dimensi yang digunakan untuk menyimpan fragmen yang diproses dalam shader fragmen. Setelah semua fragmen diproses, hasil rendering dapat ditampilkan di layar.

Atribut

Properti adalah variabel masukan di vertex shader. Ini menentukan cara membaca data dari buffer dan meneruskan data ke vertex shader. Anda dapat menyimpan informasi posisi (tiga data floating point 32-bit) di buffer. Kemudian tentukan dari buffer mana informasi posisi akan dibaca, tipe data informasi posisi apa, posisi di buffer mana untuk mulai membaca, dan berapa total byte yang akan dibaca. Karena vertex shader perlu dijalankan pada setiap vertex, nilai atribut tidak akan sama setiap kali dijalankan.

Seragam

Seragam adalah variabel masukan ke vertex shader dan fragment shader. Berbeda dengan Atribut, variabel Uniforms ditetapkan dalam loop rendering. Misalnya saja posisi sumber cahaya.

Tekstur

Tekstur sering kali berisi data gambar, namun dapat berisi data lain.

Variasi

Variabel variasi sering kali digunakan untuk meneruskan data dari vertex shader ke fragment shader. Variabel Variasi di vertex shader diinterpolasi sebelum diteruskan ke shader fragmen.