V-Sync and Mouse Lag
S E N G
- H
Advanced Effect
A N S
Level 13
GRAFIKA KOMPUTER DAN ANIMASI U
N S E N
Simple Input V-Sync and Mouse Lag
G
- H
Reading the Keyboard The Source of Mouse Lag
Reading the Mouse Disabling V-Sync
A N
The Finished Program The Finished Program
S
Raw Mouse Input Picking in Direct3D
U N
Initializing Raw Input The Picking Ray
The WM_INPUT Message Checking Intersection
Using the Data The Finished Program
The Finished Program S E N
Getting Started with HLSL
G
- H
What is HLSL?
The Programmable Pipeline
A N
Loading Shaders in DirectX
S
The Finished Program
U N
The Vertex Shader
Vertex Shader
The Finished Program S E N
HLSL = High Level Shader Language
G
- H
HLSL adalah bahasa yang terpisah dari DirectX,
yang digunakan untuk memprogram efek grafis
A N
tingkat lanjut yang tidak mampu dilakukan oleh
S DirectX. U
N
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. S E N
Sebelumnya, kita telah mengenal apa yang disebut sebagai
G Fixed-Function Pipeline.
- H
Pipeline ini merupakan kumpulan aksi yang dilakukan oleh
A
video hardware, yang dijalankan untuk me-render sebuah
N gambar 3D.
S
Dengan pipeline ini, kita dapat memanggil fungsi seperti
U N
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 S E N
Cara rendering seperti demikian tidak masalah di masa
G lalu karena tidak banyak render state yang dijalankan.
- H
Namun seiring berjalannya waktu hingga pada masa
A
DirectX 7, sangatlah sulit untuk membuat efek yang
N indah.
S
Para artists tidak tahu seperti apa model mereka jadinya
U N
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. S E N
Pada DirectX 8.0, Microsoft memperkenalkan apa yang
G disebut sebagai Programmable Pipeline.
- H
Dengan programmable pipeline, programmer memiliki
A
akses langsung ke GPU, dan dapat me-load-nya dengan
N
mini-programs pada tingkat binary untuk menciptakan efek
S mereka sendiri yang terlihat bagus dan cepat. U
N
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. S E N
Namun, menulis shaders dapat jadi cukup rumit.
G
Tidaklah mudah untuk membuat shader di dalam
- H Assembly, menulis, men-debug, dan me-maintain-nya.
A
Assembly adalah low-level language, dan kita akan
N S menghindarinya.
U
Untungnya sekarang kita punya alternatif, yakni High
N Level Shader Language.
S E N
Jadi, sekarang kita berurusan dengan sebuah pipeline
G baru.
- H
Namun, kita masih akan menggunakan fitur-fitur
A DirectX sebagaimana yang kita ketahui. N S
HLSL tidak melakukan suatu hal sendiri, namun
U bergantung sepenuhnya pada DirectX. N
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. S E N
Code HLSL harus diletakkan di suatu tempat.
G
Untuk menyimpan code HLSL, kita akan gunakan suatu
- H effect file.
A
Effect file adalah sebuah file terpisah dari code C++ Anda,
N
yang memiliki code HLSL sebenarnya untuk suatu shader
S tunggal. U N
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 S E N G
- H A N S U N
http://directxtutorial.com/Les son.aspx?lessonid=9-9-1 S E N
Untuk sekarang, kita tidak akan menulis effect file
G
kita sendiri, namun mempelajari cara me-load-nya ke
- H DirectX dan menggunakannya.
A
Catatan:
N S
Shader dan effect file adalah 2 hal berbeda.
U
Shader merujuk pada code yang menciptakan suatu
N efek.
Sementara effect file merujuk pada file yang mengandung code tersebut. S E N
Salah satu permasalahan yang menghantui para game
G programmers sejak dulu adalah kompatibilitas hardware.
- H
Hampir semua video card berbeda satu sama lainnya, yang
A
berarti gambar-gambar akan di-render secara berbeda
N antara card yang satu dengan card lainnya.
S
Apalagi dalam hal kompatibilitas.
U N
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. S E N
Untungnya, HLSL memperhatikan hal ini.
G
Sekumpulan sections yang disebut techniques
- disimpan dalam setiap shader.
H A
Suatu technique adalah sekumpulan instruksi yang
N mengganti render states.
S
Anda dapat membuat techniques berbeda yang
U N 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. S E N
Passes adalah cara membagi sebuah shader untuk
G mencapai efek tingkat lanjut (advanced).
- H
Programmer membagi shader-nya dalam beberapa bagian
A
(passes), seperti lighting, texturing, transformation, dan
N
sebagainya; dan video card masih akan menghasilkan efek
S yang baik tanpa mematikan framerate. U
N
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 pass (mengelompokkan seluruh bagian menjadi 1) dan S E N
Seperti yang telah dinyatakan sebelumnya, kita tidak akan
G
memprogram suatu HLSL saat ini, tapi mempelajari cara
- me-load suatu HLSL effect file ke dalam DirectX dan
H menggunakannya. A N
Untuk itu akan digunakan program pertama dari
S pertemuan minggu ke-7, tentang mesh. U N 1.
Comment out the code we won’t need for this demo 2. Load the effect file simple.fx 3. Find the best technique
Render the teapot using the only pass S E N
Beberapa hal tidak akan kita gunakan lagi, untuk itu
G kita comment out code tersebut.
- H
Pertama kita akan comment out lighting, karena effect
A
file yang digunakan (simple.fx) menangani lighting
N secara otomatis.
S U
Lalu, kita comment out seluruh fungsi
N SetRenderState(), karena akan di-override oleh HLSL.
Selanjutnya, kita comment out seluruh fungsi SetTransform(). S E N
Me-load suatu effect file sangatlah mudah, hanya
G diperlukan 1 perintah: D3DXCreateEffectFromFile().
- H
Contains any compile errors to
A
A pointer to a loaded effect file debug your shader
N S U N
Loads and compiles the effect file S E N
Little macro trick that helps to simplify
G
Pointer to the device, d3ddev work. Optional, set to 0
- Path and filename of the
H
effect file
A N S
Pointer to include
U
directive file
N
A pointer to the effect file class Used for HLSL-related flags created by calling this function Used for sharing parameters
Pointer to the buffer you want to use S E
Suatu technique adalah bagian dari sebuah shader yang
N didesain untuk level hardware tertentu. G
-
Jadi, untuk graphics cards yang super special akan
H mendapat super special treatment, dan sebaliknya. A
Ingat pula bahwa biasanya terdapat lebih dari 1 technique,
N S
dan Anda harus memberitahu DirectX technique mana
U yang akan digunakan pada satu waktu. N
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 S E N An efficient means for referencing the techniques, passes, and
other things when dealing with shaders
G
- H A N S U N
A handle to the technique after which we should begin looking Get the next valid technique, prototype as below: S E N
Kita akan mengganti fungsi-fungsi SetTransform() berikut:
G
- H A
Dengan perintah baru berikut:
N S U N
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. S E N
Dalam simple.fx tidak ada multipassing, sehingga yang
G dilakukan lebih sederhana.
- H
First param is the number of passes that need to be run
A
for a full rendering, the second param is for flags
N S
Tells DirectX we are beginning a
U
pass and will be rendering with it
N
Ends the pass Tells DirectX we are done with the effect for now S E N
Terakhir, saat program selesai, kita harus me-release
G shader tersebut.
- H
Seperti biasa kita panggil fungsi Release().
A N S U N
S E N
Kita telah mempelajari dasar bagaimana DirectX
G berinteraksi dengan shaders.
- H
Contoh program selanjutnya diambil dari mesh
A
tutorial minggu ke-7 dan memperlihatkan sebuah
N teapot yang berputar.
S U
Anda memerlukan Simple.fx di dalam project folder
N Anda.
S E N G
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
Perhatikan bahwa jika terjadi crash saat program
G
menjalankan fungsi FindNextValidTechnique(), maka
- H
ganti potongan code berikut:
A N S U N
Shader merupakan pipeline dimana informasi 3D
diproses hingga menjadi sebuah gambar 3D.- H A N S U N
Terdapat 2 langkah utama dalam me-render suatu 3D model: 1.
Menghitung posisi pasti dari tiap titik karena akan muncul di layar → vertex shader.
membangun model tersebut → pixel shader.
Sekarang kita akan mempelajari cara vertex shader bekerja dan membangunnya dengan menggunakan
S E N G
HLSL code sederhana
Sekarang kita akan membangun sebuah vertex shader sederhana.
- H A N S U N
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:
The Shader Function 3.
S E N G
The Techniques
S E N G
- H A N S U N
Pada 3 baris pertama, Anda akan menemukan code:
G
- H A N
Variabel-variabel ini mengandung uniform input data.
S
Tipe datanya adalah float4x4, yakni suatu larik 4x4
U
float, yang merupakan tipe data khusus dalam HLSL
N programs.
Uniform input variable bukan hanya merupakan variabel, namun adalah suatu variabel yang diteruskan dari program DirectX. S E N
Pada materi sebelumnya, kita panggil fungsi SetMatrix()
G untuk mengirimkan matrices ke shader.
- H A N
Jika Anda membandingkan kedua potongan code pada
S U
slide ini dan sebelumnya, Anda akan menemukan
N
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. S E N
Potongan code berikutnya adalah suatu fungsi
G
sederhana (seperti fungsi C++) yang akan
- melakukan pemrosesan.
H A
Setiap titik dalam sebuah model dilalui, satu per satu,
N melalui fungsi ini.
S
Fungsi ini mengembalikan sebuah struct sederhana,
U
yang berisi seluruh informasi mengenai 2D vertex
N 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. S E
A struct contains position and color info
N
SEMANTIC, keyword which tells the GPU of the new 2D vertex
G
what this data is being used for
- H
The main function of vertex shader
A
that converse 3D space into screen space
N S U
Return value of the function A 4 by 4 matrix which will
N
process the World, View, and Projection matrices Multiplying the three matrices together, using mul() function
Multiplying the Transform matrix with Setting the color value (r, g, b, a), S E N
Suatu technique adalah bagian dari shader yang
G ditargetkan untuk level hardware tertentu.
- H
Passes are a way of splitting up the technique into different steps. Here we use only 1 pass
A N S
It has the same effect as the SetRenderState() that
U
disable lighting
N
Activates depth rendering Tells DirectX exactly how to handle the vertex shader so far.
There are 3 parts of it: compile, vs_2_0, and VShader() 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.
Jadi, inilah program HLSL pertama kita.
S E N G
- H A N S U N
S E N G
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
- H A N S U N
http://directxtutorial.com/
G
Other web resources.
- H A N S U N