Advanced Effect
Level 13 GRAFIKA KOMPUTER DAN ANIMASI
2
Simple Input
Reading the Keyboard
Reading the Mouse
The Finished Program
Raw Mouse Input
Initializing Raw Input
The WM_INPUT Message
Using the Data
The Finished Program
N G -H A N S U NV-Sync and Mouse Lag
The Source of Mouse Lag
Disabling V-Sync
The Finished Program
Picking in Direct3D
The Picking Ray
Checking Intersection
3
Getting Started with HLSL
What is HLSL?
The Programmable Pipeline
Loading Shaders in DirectX
The Finished Program
The Vertex Shader
Vertex Shader
The Finished Program
4
HLSL = High Level Shader Language
HLSL adalah bahasa yang terpisah dari DirectX,
yang digunakan untuk memprogram efek grafis
tingkat lanjut yang tidak mampu dilakukan oleh
DirectX.
Materi ini akan dimulai dengan penjelasan
bagaimana efek-efek ini dilakukan dan
selanjutnya kita akan mencoba membangun
contoh sederhana dari HLSL
program
yang
berjalan di DirectX.
5
Sebelumnya, kita telah mengenal apa yang disebut sebagai
Fixed-Function Pipeline.
Pipeline ini merupakan kumpulan aksi yang dilakukan oleh
video hardware, yang dijalankan untuk me-render sebuah gambar 3D.
Dengan pipeline ini, kita dapat memanggil fungsi seperti SetRenderState() dan SetTransform() dalam
mempersiapkan hardware untuk rendering.
Untuk me-render grafik, pertama kita peroleh informasi
vertex, lalu memberitahu video card, render state mana
yang kita gunakan, dan kemudian mengirimkan vertices ke
video card tersebut, dan kemudian kita peroleh gambar yang telah di-render.
6
Cara rendering seperti demikian tidak masalah di masa lalu karena tidak banyak render state yang dijalankan. Namun seiring berjalannya waktu hingga pada masa
DirectX 7, sangatlah sulit untuk membuat efek yang indah.
Para artists tidak tahu seperti apa model mereka jadinya karena tergantung kepada para programmer yang
mendesain rendering engine-nya.
Para programmer juga sangat dibatasi oleh apa yang diberikan Microsoft dan produsen hardware.
Hingga akhirnya, Microsoft dan produsen hardware memutuskan untuk membuat pipeline yang baru. N
7
Pada DirectX 8.0, Microsoft memperkenalkan apa yang disebut sebagai Programmable Pipeline.
Dengan programmable pipeline, programmer memiliki akses langsung ke GPU, dan dapat me-load-nya dengan
mini-programs pada tingkat binary untuk menciptakan efek mereka sendiri yang terlihat bagus dan cepat.
Mini-programs (shaders) ini mengandung fungsi-fungsi dan proses-proses yang ditulis khusus untuk GPU untuk
mengikuti dan memroses tiap titik dari model Anda dan tiap pixel pada layar.
Dengan shader dapat dihasilkan gambar yang sangat bagus dan indah.
8
Namun, menulis
shaders
dapat jadi cukup rumit.
Tidaklah mudah untuk membuat
shader
di dalam
Assembly
, menulis, men-
debug
, dan me-
maintain
-nya.
Assembly
adalah
low-level language
, dan kita akan
menghindarinya.
Untungnya sekarang kita punya alternatif, yakni
High
Level Shader Language
.
9
Jadi, sekarang kita berurusan dengan sebuah
pipeline
baru.
Namun, kita masih akan menggunakan fitur-fitur
DirectX sebagaimana yang kita ketahui.
HLSL tidak melakukan suatu hal sendiri, namun
bergantung sepenuhnya pada DirectX.
Hanya ada beberapa perubahan kecil dalam
code
DirectX yang perlu diperhatikan.
Namun, ada beberapa hal penting yang perlu kita
ketahui tentang bahasa baru ini, yakni bagaimana
Programmable Pipeline
ini bekerja.
10
Code HLSL harus diletakkan di suatu tempat.
Untuk menyimpan code HLSL, kita akan gunakan suatu
effect file.
Effect file adalah sebuah file terpisah dari code C++ Anda, yang memiliki code HLSL sebenarnya untuk suatu shader
tunggal.
Untuk menjalankan code HLSL, kita gunakan fungsi-fungsi DirectX untuk me-load effect file tersebut dan
mengirimnya ke GPU.
Diagram pertama di slide berikutnya menunjukkan bagaimana kita melakukan hal tersebut sebelumnya, sementara diagram kedua bagaimana effect file
11
N G -H A N S U N
12
Untuk sekarang, kita tidak akan menulis
effect file
kita sendiri, namun mempelajari cara me-
load
-nya ke
DirectX dan menggunakannya.
Catatan:
Shader
dan
effect file
adalah 2 hal berbeda.
Shader
merujuk pada
code
yang menciptakan suatu
efek.
Sementara
effect file
merujuk pada
file
yang
mengandung
code
tersebut.
13
Salah satu permasalahan yang menghantui para game
programmers sejak dulu adalah kompatibilitas hardware. Hampir semua video card berbeda satu sama lainnya, yang
berarti gambar-gambar akan di-render secara berbeda antara card yang satu dengan card lainnya.
Apalagi dalam hal kompatibilitas.
Jika suatu card memiliki fitur yang sangat hebat yang memungkinkan Anda menciptakan efek ledakan dengan sangat cepat, sementara cards lainnya tidak bisa; maka tidak ada game yang dapat menggunakan fitur tersebut, karena game itu tidak dapat berjalan di card lainnya, yang berarti pangsa pasarnya menjadi sangat kecil.
14
Untungnya, HLSL memperhatikan hal ini.
Sekumpulan
sections
yang disebut
techniques
disimpan dalam setiap
shader
.
Suatu
technique
adalah sekumpulan instruksi yang
mengganti
render states
.
Anda dapat membuat
techniques
berbeda yang
ditargetkan untuk
lower-level hardware
.
DirectX, saat me-
load
shader
, akan mencari
techniques
Anda dan memilih salah satu yang bekerja
paling baik.
Dengan demikian, Anda dapat memanfaatkan
video
hardware
yang lebih lama.
15
Passes adalah cara membagi sebuah shader untuk mencapai efek tingkat lanjut (advanced).
Programmer membagi shader-nya dalam beberapa bagian (passes), seperti lighting, texturing, transformation, dan
sebagainya; dan video card masih akan menghasilkan efek yang baik tanpa mematikan framerate.
Meskipun menggunakan beberapa passes dapat menciptakan efek-efek yang bagus, namun sangat
mengurangi jumlah pixels yang dapat ditampilkan dalam layar pada satu waktu.
Oleh karenanya, kebanyakan programmer menggunakan 1
16
Seperti yang telah dinyatakan sebelumnya, kita tidak akan memprogram suatu HLSL saat ini, tapi mempelajari cara me-load suatu HLSL effect file ke dalam DirectX dan
menggunakannya.
Untuk itu akan digunakan program pertama dari pertemuan minggu ke-7, tentang mesh.
1. Comment out the code we won’t need for this demo
2. Load the effect file simple.fx
3. Find the best technique
4. Send the matrices to the GPU
5. Render the teapot using the only pass
6. Release the shader when all is done N
17
Beberapa hal tidak akan kita gunakan lagi, untuk itu
kita
comment out code
tersebut.
Pertama kita akan
comment out lighting
, karena
effect
file
yang digunakan (simple.fx) menangani
lighting
secara otomatis.
Lalu, kita
comment out
seluruh fungsi
SetRenderState(), karena akan di-
override
oleh HLSL.
Selanjutnya, kita
comment out
seluruh fungsi
SetTransform().
18
Me-
load
suatu
effect file
sangatlah mudah, hanya
diperlukan 1 perintah: D3DXCreateEffectFromFile().
N G -H A N S U N
A pointer to a loaded effect file Contains any compile errors to debug your shader
19 N G -H A N S U N
Pointer to the device, d3ddev
Path and filename of the effect file
Little macro trick that helps to simplify work. Optional, set to 0
Used for sharing parameters between multiple effect files, set to 0 A pointer to the effect file class
created by calling this function
Pointer to the buffer you want to use Pointer to include
directive file
20
Suatu technique adalah bagian dari sebuah shader yang didesain untuk level hardware tertentu.
Jadi, untuk graphics cards yang super special akan mendapat super special treatment, dan sebaliknya.
Ingat pula bahwa biasanya terdapat lebih dari 1 technique, dan Anda harus memberitahu DirectX technique mana yang akan digunakan pada satu waktu.
Hal ini dapat dilakukan dengan memanggil fungsi FindNextValidTechnique().
Fungsi ini akan dimulai dari technique pertama yang ditemukannya, menentukan apakah technique itu dapat bekerja dengan hardware setting sekarang atau tidak, dan menggunakannya jika bisa atau mencari ke technique
21
N G -H A N S U N
An efficient means for referencing the techniques, passes, and other things when dealing with shaders
Get the next valid technique, prototype as below:
A handle to the technique after which we should begin looking
22
Kita akan mengganti fungsi-fungsi SetTransform() berikut:
Dengan perintah baru berikut:
Fungsi SetMatrix() sama persis seperti SetTransform(), kecuali
pada parameter pertamanya.
Parameter pertama SetTransform() merupakan suatu flag
yang mengindikasikan jenis transformasi yang ditentukan.
Dalam SetMatrix(), parameter pertama merupakan nama dari parameter dalam shader.
23
Dalam simple.fx tidak ada
multipassing
, sehingga yang
dilakukan lebih sederhana.
N G -H A N S U N
First param is the number of passes that need to be run for a full rendering, the second param is for flags
Tells DirectX we are beginning a pass and will be rendering with it
Ends the pass
24
Terakhir, saat
program
selesai, kita harus me-
release
shader
tersebut.
Seperti biasa kita panggil fungsi Release().
25
Kita telah mempelajari dasar bagaimana DirectX
berinteraksi dengan
shaders
.
Contoh
program
selanjutnya diambil dari
mesh
tutorial minggu ke-7 dan memperlihatkan sebuah
teapot
yang berputar.
Anda memerlukan Simple.fx di dalam
project folder
Anda.
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Perhatikan bahwa jika terjadi
crash
saat
program
menjalankan fungsi FindNextValidTechnique(), maka
ganti potongan
code
berikut:
44
Shader
merupakan
pipeline
dimana informasi 3D
diproses hingga menjadi sebuah gambar 3D.
Terdapat 2 langkah utama dalam me-
render
suatu 3D
model
:
1.
Menghitung posisi pasti dari tiap titik karena akan
muncul di layar
→
vertex shader
.
2.
Menghitung warna pasti dari tiap
pixel
yang
membangun
model
tersebut
→
pixel shader
.
Sekarang kita akan mempelajari cara
vertex shader
bekerja dan membangunnya dengan menggunakan
HLSL
code
sederhana.
45
Sekarang kita akan membangun sebuah
vertex shader
sederhana.
Untuk itu kita perlu menuliskan beberapa HLSL
code
.
Perhatikan contoh
vertex shader
berikut yang
disimpan dalam
file
terpisah dari
file
utama kita.
File
ini akan dinamakan
‘
dxtshader.fx
’,
dan terbagi
atas 3 bagian utama:
1.
The Uniform Input
2.
The Shader Function
3.
The Techniques
46
47
Pada 3 baris pertama, Anda akan menemukan
code
:
Variabel-variabel ini mengandung
uniform input data
.
Tipe datanya adalah float4x4, yakni suatu larik 4x4
float
, yang merupakan tipe data khusus dalam HLSL
programs
.
Uniform input variable
bukan hanya merupakan
variabel, namun adalah suatu variabel yang
diteruskan dari
program
DirectX.
48
Pada materi sebelumnya, kita panggil fungsi SetMatrix() untuk mengirimkan matrices ke shader.
Jika Anda membandingkan kedua potongan code pada
slide ini dan sebelumnya, Anda akan menemukan kesamaan, yakni parameter pertama dari tiap fungsi
SetMatrix() sama namanya dengan uniform input variables. Artinya pada saat kita memanggil fungsi SetMatrix() dan
menempatkan suatu string dalam parameter pertamanya, kita juga mengisi nilai dari salah satu variabel-variabel ini. N
49
Potongan
code
berikutnya adalah suatu fungsi
sederhana (seperti fungsi C++) yang akan
melakukan pemrosesan.
Setiap titik dalam sebuah
model
dilalui, satu per satu,
melalui fungsi ini.
Fungsi ini mengembalikan sebuah
struct
sederhana,
yang berisi seluruh informasi mengenai 2D
vertex
yang baru.
Jadi, hal pertama yang dilakukan adalah
mendefinisikan
return struct
tersebut.
Lalu, kita tulis fungsi yang menghitung dan mengisi
nilai-nilai dalam
struct
tersebut.
50 N G -H A N S U N
A struct contains position and color info
of the new 2D vertex SEMANTIC, keyword which tells the GPU what this data is being used for
The main function of vertex shader that converse 3D space into screen
space
Return value of the function A 4 by 4 matrix which will process the World, View, and
Projection matrices
Multiplying the three matrices together, using mul() function Multiplying the Transform matrix with
vertex position Setting the color value (r, g, b, a),
51
Suatu
technique
adalah bagian dari
shader
yang
ditargetkan untuk
level hardware
tertentu.
N G -H A N S U N
Passes are a way of splitting up the technique into different steps. Here we use only 1 pass
It has the same effect as the SetRenderState() that disable lighting
Activates depth rendering
52
Jadi, inilah
program
HLSL pertama kita.
Untuk menjalankan
program
ini, kita gunakan
source
code project
sebelumnya.
Tidak ada yang berubah, kecuali nama
file shader
.
Selain itu,
effect file
yang digunakan juga akan diubah.
53
54
55
56
57
58
59
60
61
62
63
64
65
66
http://directxtutorial.com/
Other web resources.
