Vertex dan Fragmen Shading

Intro
• Program WebGL disiapkan dan dimulai
dari kode JavaScript. 
• Masukannya adalah daftar koordinat 3D
yang disebut simpul ( vertek/vertices). 
• Simpul dapat digambarkan sebagai
sebuah titik (individual points), garis
antara 2 simpul, atau segitiga yang https://en.wikipedia.org/wiki/Triangle_mesh#/
tersusun atas tiga simpul.  media/File:Dolphin_triangle_mesh.png

• Beberapa segitiga dihubungkan untuk

menghasilkan 3D survace .
 Java Script
• Dari inputan vertek ini diproses dalam
input vertices (3D)
serangkaian langkah yang disebut pipa
grafis ( graphics pipeline) yang Vertex Shader
menggambarkan piksel pada layar 2D.  transformed vertices (3D)
• WebGL memiliki dua posisi dalam graphics Rasterizer
pipeline yang disediakan untuk memasukkan pixel coordinates (2D)
custom algoritma yang disebut shader . 
Fragment Shader
color of each pixel

Screen
Vertex Shader
Vertex shader 
• Dari inputan simpul dan kemudian di transformasi. Baik berupa  Itu
dapat move (memindahkan), rotate (memutar), atau deform
(mengubah bentuk objek)Misalnya, untuk menerapkan efek perspektif
 .
• Tugasnya adalah memastikan semua yang seharusnya terlihat di layar
terlihat dan diorientasikan dengan benar. 
• Hanya simpul dengan koordinat x, y, dan z antara -1 dan 1 yang akan
terlihat.
Vertex Shader (cont..)
• Simpul atau vertek yang sudah di transformasi akan kemudian di kirim
ke rasterizer.
• Simpul ditafsirkan sebagai segitiga (atau garis atau titik jika
dikonfigurasi untuk melakukannya) dan diproyeksikan ke kisi 2D
melalui proses yang disebut rasterization . Ini memetakan data verteks
3D ke koordinat piksel. Langkah alur ini otomatis dan tidak dapat di
customized.
Fragmen Shader
• Selanjutnya, shader kedua berjalan. Ini disebut Fragmen shader. 
• Sebuah fragmen secara efektif adalah sebuah piksel, jadi itu juga
disebut pixel shader.
•  Ini berjalan pada setiap piksel dari segitiga yang terlihat (atau garis
atau titik) sebagaimana ditentukan selama rasterisasi. 
• Tugasnya adalah mengubah koordinat piksel 2D menjadi warna
dalam format RGBA . 
• Komputer Anda kemudian menggambar warna-warna ini di layar.
Fragmen Shader
• RGBA adalah singkatan dari red green blue
alpha. 
• Meskipun terkadang digambarkan sebagai 
ruang warna , sebenarnya ini adalah model
warna RGB tiga saluran yang dilengkapi
dengan saluran alfa keempat . 
• Alpha menunjukkan seberapa buram setiap
piksel dan memungkinkan gambar
digabungkan di atas yang lain menggunakan 
pengomposisian alfa , dengan area 
transparan dan anti-aliasing tepi area buram.
• Tapi sebenarnya vertex shader dapat mengirimkan
data khusus ke shader fragmen langsung tanpa
rasterizer.
Shading Language
• Shader WebGL 2 ditulis dalam OpenGL ES Shading Language versi 3,
atau singkatnya "GLSL ES 3".
• Ini adalah standar terbuka untuk grafik 3D lintas platform yang
dikelola oleh Khronos Group nirlaba . 
• GL adalah singkatan dari "Graphics Library". 
• ES adalah singkatan dari Embedded Systems, seperti perangkat
seluler, tetapi juga didukung oleh desktop/laptop untuk kompatibilitas
maksimum.
Shading Language
• Program shading language berjalan di GPU. Dibandingkan dengan
CPU, GPU memiliki rangkaian operasi yang lebih kecil dan lebih
terspesialisasi, seperti penggandaan matriks .
•  GPU menjalankan lebih banyak operasi secara paralel dibandingkan
dengan CPU. 
• Ini sangat cocok untuk tugas berorientasi grafis seperti menghitung
jutaan warna piksel pada 60 frame per detik.
Shading Language
• Untuk berjalan secara paralel, program dengan shading language
memproses setiap titik atau koordinat piksel dalam isolasi lengkap. 
• Algoritma vertex shader mengambil satu vertex dan mengeluarkan satu
vertex.
• Algoritme fragmen shader mengambil koordinat piksel tunggal dan
menghasilkan satu warna. 
• Algoritme tidak mengetahui nilai input lainnya dan tidak dapat
mengingat output sebelumnya.
•  Kendala mendasar ini membuat algoritme grafis sangat berbeda dari
bahasa pemrograman tradisional.
Drawing with WebGL
 Drawing with WebGL (1)
Halaman HTML
Pertama, buat halaman
web. Dibutuhkan sebuah elemen
untuk menampilkan output dari
program WebGL kita. Kami akan
mengatur ukurannya secara acak
menjadi 500×500. Kita juga
memerlukan kode untuk vertex
shader, fragment shader, dan
beberapa JavaScript untuk
menyiapkan semuanya. Kami akan
menetapkan pada elemen yang perlu
ditemukan JavaScript:<canvas>id

Semua kode ada di tag. Kode GLSL shader menggunakan tipe khusus seperti untuk mencegah browser mengeksekusi kode sebagai
JavaScript. Jenis skrip khusus ini dikenali oleh beberapa plugin IDE untuk memberikan penyorotan sintaks di dalam dokumen
HTML.<script>"x-shader/x-vertex"
 Drawing with WebGL (2)

Setelah memiliki halaman, saatnya

untuk memulai pengkodean.
Mari kita mulai dengan kode
penyiapan JavaScript WebGL di tag
terakhir laman. Kita perlu bekerja
dengan kanvas dan kode shader, jadi
mari kita ambil
dari :<script>document
 Drawing with WebGL (3)

Kami meminta canvas konteks

WebGL2, yang menyediakan API
WebGL. Kami melontarkan
kesalahan saat WebGL2 tidak
tersedia sehingga kami dapat
mencari masalah di konsol browser:
 Drawing with WebGL (4)

Menggunakan globjek konteks,

pertama-tama kita menyiapkan
vertex shader. Kami membuat objek
shader, mengatur kode sumbernya,
mengkompilasi kode, dan
membuang kesalahan kompilasi apa
pun:
 Drawing with WebGL (5)
Perhatikan panggilan, yang akan kita
lihat menghindari beberapa masalah
nanti.trim()

Kami belum memiliki kode shader di

tag kami, jadi ini akan gagal
dikompilasi untuk saat ini. Mari
selesaikan kode penyiapan
JavaScript terlebih dahulu. Kami
membuat program WebGL lengkap
dengan menghubungkan kedua
shader bersama-sama, seperti
ini:<script>

const program = gl.createProgram();

 Drawing with WebGL (6)
Program siap menerima instruksi untuk menggambar
sesuatu. Kami menggambar satu segitiga, jadi kami
membutuhkan tiga simpul.

Sistem koordinat vertex shader adalah kubus dari -1 ke

1 dalam ketiga dimensi: kiri ke kanan, bawah ke atas,
dan dekat ke jauh. Intinya (-1,-1,-1) adalah pojok kiri
bawah dekat kubus dan (1,1,1)pojok kanan atas. Apa
pun di luar kubus ini dipotong dan disembunyikan, jadi
sistem koordinat ini disebut ruang klip .

Kami akan bekerja dalam 2D ​untuk saat ini, jadi kami

akan mengatur z=0setiap simpul. Daftar simpul ini akan
menggambar segitiga dengan sudut di kiri bawah (-1,-
1), kanan bawah (1,-1), dan sudut kanan atas (1,1)dari
sistem koordinat kita:
 Drawing with WebGL (7)

const verticesadalah Array JavaScript. Kita perlu mengonversinya menjadi struktur data mirip-array
WebGL yang disebut buffer yang dapat diteruskan ke GPU. Kode shader diketik dengan ketat, dan
Array JavaScript tidak, jadi sebelum kita melakukan hal lain, kita perlu mengonversinya menjadi
salah satu array yang diketik JavaScript , khususnya Float32Array .
 Drawing with WebGL (8)
Kami menyebutnya karena buffer adalah daftar angka sederhana tanpa konsep bahwa mereka mewakili kelompok
koordinat. Kita dapat menghindari hal ini dengan tidak mendefinisikan array bersarang, tetapi array bersarang
memperjelas bahwa ini adalah daftar koordinat 3D dan menyederhanakan kode di bawah tempat kita
memanggil .vertices.flat()(x,y,z)const verticesvertices.length

Sekarang kita dapat memasukkan array yang diketik ke dalam buffer GPU dalam dua langkah. WebGL menyediakan
variabel global penting yang disebut gl.ARRAY_BUFFER, yang pada dasarnya merupakan referensi ke mana kita perlu
mengirim simpul. Pertama kita membuat buffer baru yang terkait dengan variabel global itu dan kemudian kita mengisi
buffer dengan data vertex kita:
 Drawing with WebGL (9)
Parameter gl.STATIC_DRAWmemberi tahu WebGL bahwa daftar simpul tidak akan berubah, yang dapat membantu
mengoptimalkan program.

Untuk menggunakan buffer vertex ini dalam kode shader kita, kita perlu memberinya nama. Kami akan menamainya
"vertexPosition"dengan melakukan ini:

Jenis input shader yang menerima simpul disebut atribut , maka nama fungsinya. Masukan kami
vertexPositionkemudian dapat dilampirkan ke buffer vertex dengan dua perintah ini:
 Drawing with WebGL (10)
WebGL mengharuskan kita untuk mengaktifkan input secara eksplisit terlebih dahulu. Kemudian, meskipun sama sekali
tidak jelas melakukan ini, sambungkan buffer vertex ke input shader bernama . Parameter kedua penting. Ini memberi
tahu WebGL bahwa kami menggunakan simpul 3D. Secara teknis kita dapat mengirimkan simpul 1D, 2D, 3D, atau 4D,
tetapi secara konseptual kita selalu bekerja dengan koordinat 3D di vertex shader.

gl.TRIANGLESmemberi tahu WebGL bahwa kami ingin merender segitiga dari grup yang terdiri dari tiga simpul. Di
sinilah kita bisa mengatakannya untuk merender garis atau titik.

Kami belum dapat melihat apa pun karena kami belum menulis kode shader apa pun untuk menjalankan GPU.
Ayo lakukan itu sekarang.
Drawing with WebGL (11)
• Vertex shader
• Tugas vertex shader adalah mengubah simpul masukan. Ini memproses
simpul tunggal pada satu waktu dengan mendefinisikan fungsi yang
menghitung posisi simpul yang ditransformasikan dari simpul masukan yang
diberikan. GPU menjalankan banyak salinan algoritme shader secara paralel
untuk semua simpul.main()

• Untuk tutorial ini, kita telah menyiapkan simpul seperti yang kita inginkan di
JavaScript. Jadi vertex shader kita tidak perlu melakukan apapun. Ini adalah
vertex shader "no-op". Tambahkan kode ini ke tag Anda:<script
id="vertexShader" type="x-shader/x-vertex">
Drawing with WebGL (12)

#version 300 esmemberi tahu GPU bahwa kami menggunakan OpenGL ES Shading
Language versi 3.0 (yang terbaru didukung oleh browser pada saat penulisan). Jika
kita tidak memulai dengan baris kode tersebut, browser akan default ke WebGL1 / ES
2 (walaupun kita mendapatkan "webgl2" konteks dari canvas), yang bukan itu yang
kita inginkan. Hati-hati: Baris kode ini harus menjadi baris pertama dari program
shader. Tidak ada baris kosong yang diizinkan! Inilah mengapa kami melakukannya di
kode penyiapan JavaScript.vertexShader.textContent.trim()
Drawing with WebGL (13)
in vec4 vertexPositionadalah simpul saat ini dari daftar masukan yang sedang diproses. in berarti input dan
vec4merupakan vektor 4D (daftar 4 elemen) dari angka floating point, yang mewakili koordinat 3D dari sebuah
simpul. Tapi tunggu: Mengapa kita menggunakan vektor 4D untuk mewakili koordinat 3D? Komponen vektor ini
disebut (x,y,z,w), dimana (x,y,z)koordinat 3D. Nilai wtersebut digunakan untuk kalkulasi perspektif 3D dan
membagi nilai x, y, dan z selama rasterisasi sehingga, misalnya, (1,2,3,10)akan menjadi koordinat
(1/10,2/10,3/10). Ini untuk kasus penggunaan lanjutan dan kami dapat mengabaikannya untuk saat ini. Saat
daftar simpul 3D kami dari JavaScript dikonversi ke vec4input ini, wdefaultnya adalah 1dan tidak berpengaruh
pada (x,y,z)posisi.

Karena kita memiliki tiga simpul, akan dipanggil 3 kali secara paralel dan untuk setiap panggilan akan memiliki
koordinat 3D , , dan seperti yang ditentukan dalam kode penyiapan. Seperti yang dijelaskan di paragraf
sebelumnya, nilai sebenarnya dari adalah , , , yang secara efektif adalah hal yang sama.main()vertexPosition[-1, -
1, 0][1, -1, 0][1, 1, 0]vertexPositionvec4(-1, -1, 0, 1)vec4(1, -1, 0, 1)vec4(1, 1, 0, 1)

Untuk menampilkan simpul, perlu menetapkan keluaran ke variabel yang telah ditentukan sebelumnya, daripada
mengembalikan nilai. Kami hanya menetapkan ini ke input karena kami tidak mengubah posisi simpul. Ini
memberitahu WebGL untuk merender segitiga yang kita definisikan dalam JavaScript.main()gl_Position
Drawing with WebGL (14)
• Shader fragmen
• Sekarang kami telah memberi tahu WebGL tempat merender segitiga.
Langkah terakhir adalah memberi tahu apa warna pikselnya. Itulah
tugas shader fragmen. Kami akan mengatur seluruh segitiga menjadi
satu warna dengan kode ini di dalam tag:<script
id="fragmentShader">
Drawing with WebGL (15)
• Seperti di vertex shader, kita harus mulai dengan . Ini selalu terjadi
saat menggunakan GLSL ES 3.0.#version 300 es
Drawing with WebGL (16)
• Dalam shader fragmen kita juga harus menentukan presisi floating point kita. Ada
beberapa opsi di sini, tetapi saya selalu memilih highppresisi maksimum untuk
menghindari masalah yang tidak perlu dengan presisi rendah (kita akan menggambar
fraktal nanti dan memerlukan presisi tinggi untuk itu). Perhatikan bahwa shader
fragmen berpotensi dioptimalkan dengan menggunakan presisi yang lebih rendah.

• Selanjutnya kita perlu mendeklarasikan output kita vec4 fragColor, mirip dengan cara
kita mendeklarasikan simpul input kita di vertex shader. Keluaran ini adalah warna dari
setiap piksel. Ini adalah vektor 4D yang mewakili RGBA (merah, hijau, biru, alfa).
Catatan: Kami tidak memberi tahu WebGL nama keluaran "fragColor" dalam kode
penyiapan JavaScript kami seperti yang harus kami lakukan untuk masukan
"vertexPosition". Saat Anda memiliki satu keluaran, WebGL menganggap itu adalah
warna piksel.
Drawing with WebGL (16)
• Yang tersisa hanyalah mengatur warna piksel yang kita inginkan. Ini
masuk ke dalam metode lain. berarti 100% merah, 0% hijau, 0% biru,
dan 100% saluran alfa. Dengan menetapkan nilai itu ke keluaran kami,
kami menggambar setiap segitiga (dalam kasus kami satu segitiga)
warna merah.main()vec4(1, 0, 0, 1)
Tugas
• Dari potongan program di slide2 sebelumnya …. Susun menjadi
program utuh kemudian jalankan dan beri laporannya kirim ke drive .