Animasi
Animasi, baik berbasis vertex atau kerangka, merupakan proses
yang memakan CPU. Jika kita masuk pada jalur vertex kita akan membutuhkan limpahan interpolasi untuk memastikan
pergerakannya halus dan kita dapat
memungkinkan untuk menyimpan beberapa frame. Pada sisi skeletal,
interpolasi quaternion hanyalah sebagian dari masalah yang ada. Masalah
sebenarnya muncul ketika kita harus melakukan penggandaan poin matriks,
kemungkinan pencampuran matriks yang berbeda per vertex untuk melakukan
beberapa pengaruh bone (tulang).
Jadi tidak mengherankan bahwa
membuat animasi suatu karakter adalah salah satu tugas bahasa shading yang
dikhususkan
Pada contoh ini, anda dapat
menerapkan interpolasi keyframe
menggunakan shader vertex. Interpolator inti bukanlah masalah besar.
Interpolasi linear dapat diimplementasikan dengan persamaan berikut ini
Position=positionA*(1-alpha) + positionB*alpha
Dengan posisi A dan posisi B merupakan 2 posisi titik akhir dan
alpha sebagai interpolator. Ini mengubah secara baik ke dalam bentuk kode Cg
dengan fungsi lerp, yang mengimplementasikan sebuah interpolasi linier
Position=lerp(positionA, positionB, alpha);
Satu-satunya masalah dengan pendekatan ini adalah cara untuk melewati
kedua posisi ke shader vertex, yang jika Anda ingat,harus bertindak seperti
filter: menerima satu set simpul dan mengubahnya. Saat ini, tidak ada cara
untuk melewati kedua mesh, jadi kita perlu beberapa trik supaya cara ini dapat
bekerja. Trik yang akan kita gunakan adalah untuk menyimpan mesh kedua sebagai
koordinat tekstur, sehingga kita dapat mengaksesnya dari dalam shader. Secara
khusus, kita akan melewati sebuah posisi, set float2 biasa dari koordinat
tekstur, satu warna (float4), dan set kedua tekstur koordinat (float3), yang
akan memegang posisi kedua untuk interpolasi. Perhatikan kode berikut:
void
keyframe (float3 positionA: POSITION,
float3
positionB: TEXCOORD1,
float4
color: COLOR,
float2
texcoord: TEXCOORD0,
out
float4 oPosition: POSITION,
out
float2 oTexCoord: TEXCOORD0,
out
float3 oColor: COLOR,
uniform
float alpha,
uniform
float4x4 modelviewProj)
{
float3
position=lerp(positionA, positionB, alpha);
oPosition=mul(modelviewProj,float4(position,1));
oTexCoord=texCoord;
oColor=color;
}
Itu hanya empat baris sebenarnya, dan menyelamatkan para
pengembang dari sakit kepala. Semua yang perlu kita lakukan adalah menghitung nilai
alpha berdasarkan jarak antara kedua
frame kunci. Perhatikan bahwa kode
sebelumnya dapat menangani baik reguler dan tombol spasi merata. Kita dapat
meningkatkan kode untuk melewatkan data tambahan dan mengendalikan kuadrat atau
interpolator kubik, tetapi untuk sebagian besar penggunaan, linier baik-baik
saja.
Pendekatan ini dapat diadaptasi dengan mudah untuk animasi wajah
menggunakan morphs. Setelah itu, kita dapat melakukan beberapa interpolasi ekspresi
wajah per titik, sehingga kode sebelumnya, dalam segala kemudahan, pasti layak
untuk dilakukan pengecekan. Tapi di lain sisi, masalah animasi lebih serius untuk
ke depannya. Bukankah lebih keren untuk menerapkan pendekatan kemiripan untuk animasi kerangka?
Ini merupakan kasus yang jauh lebih sulit karena algoritma ini adalah algoritma
yang lebih kompleks. Mengingat kembali bahwa animasi kerangka (Aku sedang
berbicara tentang pendekatan multibone) diselesaikan dalam dua tahap. Kami
pertama menyebarkan matriks dan menyimpannya, untuk setiap vertex, tulang, dan
dengan demikian matriks yang mempengaruhi itu. Kami juga menyimpan berat matriks,
sehingga kami dapat mencampurnya benar. Seperti yang dapat Anda bayangkan, ini
adalah tahap mudah karena tahap yang selanjutnya melakukan penerapan banyak
titik-matrix berganda dan mencampur hasilnya bersama-sama. Oleh karena itu, pada
tahap kedua apa yang kita perlu tingkatkan dengan coding kode pengulitan
sebenarnya menjadi shader. Sekarang kode animasi kita harus mendapatkannya,
bersama dengan titik yang kita telah proses, matriks yang mempengaruhi dan
bobot yang sesuai. Untuk mempermudah, kita akan membatasi jumlah tulang yang
mempengaruhi simpul menjadi empat, jadi kami harus melewati empat matriks:
void
skinning(float3 position : POSITION,
float3
normal : NORMAL,
float2
texCoord : TEXCOORD0,
float4
weight : TEXCOORD1,
float4
matrixIndex : TEXCOORD2,
out
float4 oPosition : POSITION,
out
float2 oTexCoord : TEXCOORD0,
out
float4 color : COLOR,
uniform
Light light,
uniform
float4 boneMatrix[72], // 24 matrices
uniform
float4x4 modelViewProj)
{
float3
netPosition = 0, netNormal = 0;
for
(int i=0; i<4; i++)
{
float
index = matrixIndex[i];
float3x4
model = float3x4(boneMatrix[index+0], boneMatrix[index+1],
boneMatrix[index+2]);
float3
bonePosition = mul(model, float4(position, 1));
float3x3
rotate = float3x3(model[0].xyz, model[1].xyz, model[2].xyz);
float3
boneNormal = mul(rotate, normal);
netPosition
+= weight[i] * bonePosition;
netNormal
+= weight[i] * boneNormal;
}
netNormal
= normalize(netNormal);
oPosition
= mul(modelViewProj, float4(netPosition, 1));
oTexCoord
= texCoord;
ocolor = Illuminate(light, netPosition, netNormal);
Kita kemudian melakukan loop
empat kali (satu per matriks), mengumpulkan setiap kontribusi matriks ke vertex
dan nilai normal. Perhatikan bagaimana panggilan untuk Illuminasi (yang tidak
termasuk dalam kesederhanaan) menghitung shading berdasarkan nilai-nilai ini.
Kemudian, untuk setiap matriks, TEXCOORD1 digunakan untuk menentukan beratnya,
dan TEXCOORD2 digunakan untuk melakukan indeks menjadi array bonematrix yang
lebih besar. Variabel Model memegang pengaruh matriks tulang saat ini, yang
kemudian diterapkan pada vertex dan akhirnya ke normal. Kemudian, posisi
kerangka ini (posisi titik menurut tulang ini) dan boneNormal (normal menurut
tulang yang sama) ditambahkan, mengintegrasikan berat badan pada persamaan.
Persamaan ini persis sama dengan yang kita digunakan dalam diskusi kita pada
kerangka animasi.
Tekstur
Procedural
Salah satu kegunaan utama untuk
shader dalam industri film adalah penciptaan tekstur prosedural. di sini bahan
yang tidak didefinisikan dalam hal bitmap tetapi dalam fungsi matematika yang,
ketika digabungkan, menghasilkan estetika. Sebagai contoh sederhana, bayangkan
sebuah pola papan, setiap ubin menjadi satu meter di seluruh. Berikut adalah
pseudocode untuk shader yang akan menghitung ini di GPU, sehingga menghemat
tekstur dan sumber CPU :
checkers
(point pos)
if
(trunc(pos.x) + trunc(pos.y)) is odd
color=black
else color=white
Seperti yang Anda lihat, tekstur
prosedural selalu dilaksanakan dengan pixel shader, dengan shader menerima titik ke Texturize dan menghitung
warna keluaran sebagai balasannya.
Sebuah perpustakaan yang baik
dari fungsi matematika sangat penting untuk tekstur prosedural untuk bekerja.
Kebanyakan efek dicapai dengan operator seperti fungsi trigonometri, logaritma,
dan terutama, fungsi kebisingan terkendali seperti Kebisingan Perlin (untuk
lebih lanjut tentang fungsi ini, lihat artikel Perlin tercantum dalam Lampiran
E). fungsi ini menghasilkan nilai pseudorandom melalui ruang 3D, sehingga
nilai-nilai dekat di ruang parameter dekat dalam nilai kebisingannya, dan parameter jauh menghasilkan output tidak
berkorelasi. Anggap saja sebagai band terbatas, terus menerus dan diturunkan
kebisingannya.
Menggunakan Kebisingan Perlin
dengan benar, Anda dapat melaksanakan sebagian besar bahan alamiah, seperti
kayu, marmer, atau awan. Sebagai contoh yang menunjukkan kemampuannya, lihatlah
Gambar 21,7, yang diambil dari shader oleh Pere Fort. Di sini kita menggunakan
Kebisingan Perlin untuk menghitung matahari animasi lengkap dengan Coronas, permukaan
ledakan, dan animasi. Matahari benar-benar sebuah quad, bertekstur menggunakan
pixel shader.
Gambar
21,7. piringan matahari terbakar yang diimplementasikan sebagai quad dengan
Perlin prosedural tekstur pada pixel shader.
Berikut adalah komentar kode
sumber untuk efek yang menarik, yang entah bagaimana menunjukkan bagaimana real-time shader benar-benar dapat
membuat beberapa efek yang tidak pernah dilihat sebelumnya dalam permainan
komputer. Kode sumber sangat panjang, tapi saya pikir itu memberikan visi yang
jelas tentang apa masa depan untuk bahasa shading:
struct
vp2fp
{
float4
Position : POSITION;
float4
TexCoord : TEXCOORD0;
float4
Param : TEXCOORD1;
float4
Color : COLOR0;
};
//
INPUTS
//
TexCoord : TEXCOORD0 = here we encode the actual coordinates plus the time
//
Param : TEXCOORD1 = here we encode in x and y the angles to rotate the sun
float4
main(vp2fp IN, const uniform sampler2D permTx, const uniform sampler1D gradTx
):
COLOR
{
//distance
vector from center
float2
d = IN.TexCoord.xy - float2(0.5f,0.5f);
//distance
scalar
float
dist = sqrt(dot(d,d)) * 2;
//
Sun's radius
float
radSun = 0.6f;
//
Halo's radius
float
radHalo = 1.0f;
float3
vCoord = IN.TexCoord.xyz;
float
freq;
if(dist
< radSun) // fragment inside the Sun
{
//
freq inside the Sun is higher than outside
freq
= 64;
//
texture coords displacement in 2D
vCoord.xy
-= IN.Param.xy;
//
sphere function, with 70% depth
vCoord.xy
-= d*sqrt(radSun*radSun-dist*dist)*0.7f;
}
else
//fragment outside the Sun
{
//
freq outside the Sun is half than inside
freq
= 32;
// a
little displacement (20%) of the halo while rotating the sphere
vCoord.xy
-= IN.Param.xy*0.2;
}
//
sum of two octaves of perlin noise, second with half the freq of the first
float4
total = 0f.xxxx;
total
+= (perlinNoise3_2D(vCoord*freq , permTx, gradTx) + 0.7).xxxx*0.33f;
total
+= (perlinNoise3_2D(vCoord*freq/2, permTx, gradTx) + 0.7).xxxx*0.66f;
//
after getting the result of the noise we can compute the radius of the
explosions
//
we can use one dimension from the result to get a single dimension perlin noise
float
radExpl = (1 + total.x) * radSun * 0.6f;
//
this generates a little halo between Sun and explosions, and avoids some
aliasing
if(radExpl
< radSun*1.01f) radExpl = radSun*1.01f;
//
filtering the colour of fragments
//
first smoothstep makes explosions darker as the radius increases
//
second smoothstep makes the halo darker as it becomes far from the sun
dist
= smoothstep(radExpl,radSun,dist)*0.5f + smoothstep(radHalo,radExpl,dist) *
0.5f;
//
transform black into red
//
blue to 0 means obtaining yellow
//
maintain the alpha input
total.rba
= float3(total.x*1.8f,0.0f,IN.Color.a);
//
ensure the ranges of the colors after all modifications
total.xyz
= clamp(total.xyz,0,1);
//
return all the modifications with the filter applied
return
total*dist;
}
Efek Spesial
Lampu, animasi, dan texturing
adalah bagian populer untuk penggunaan shader. Namun, shader kita miliki diperiksa
sejauh ini shader sangat konservatif yang hanya beberapa baris panjang dan
menerapkan efek sederhana. Ada beberapa efek yang menarik yang menunggu Anda
untuk dikodekan. Sebagai contoh, saya akan mengekspos kode shader untuk
menghitung shading Toon di GPU. Untuk lebih lanjut tentang shading Toon, lihat
Bab 17, yang mencakup teknik shading. Implementasi kami ketat akan mengikuti
algoritma yang ada di bab tersebut. Saya telah memilih versi yang berisi
pasangan simpul dan shader fragmen. Shader vertex menghitung koordinat teksturing,
dan versi fragmen melakukan pencampuran warna yang sebenarnya. Kedua shader kemudian
dihubungkan, sehingga output dari vertex shader akhirnya akan diproses oleh
shader fragmen. Berikut adalah kode cg untuk shader vertex:
void
toonShading_v(float4 position : POSITION,
float3
normal : NORMAL,
out
float4 oPosition : POSITION,
out
float diffuseLight : TEXCOORD0,
out
float specularLight : TEXCOORD1,
out
float edge : TEXCOORD2,
uniform
float3 lightPosition, // Light Pos (in obj space)
uniform
float3 eyePosition, // Eye Pos (in obj space)
uniform
float shininess,
uniform
float4x4 modelViewProj)
{
oPosition
= mul(modelViewProj, position);
//
Calculate diffuse lighting
float3
N = normalize(normal);
float3
L = normalize(lightPosition - position.xyz);
diffuseLight
= max(0, dot(L, N));
//
Calculate specular lighting
float3
V = normalize(eyePosition - position.xyz);
float3
H = normalize(L + V);
specularLight
= pow(max(0, dot(H, N)), shininess);
if
(diffuseLight<=0) specularLight = 0;
//
Perform edge detection
edge
= max(0, dot(V, N));
}
Bagian pertama dari kode
sebelumnya tidak benar-benar membutuhkan penjelasan. Kami menghitung posisi
yang telah di proyeksikan, dan kemudian memproses secara berurutan komponen
diffuse dan specular. Kami kemudian menghitung nilai tepi, yang nol jika V dot
N kurang dari atau sama dengan nol. Dengan demikian, kita mendeteksi, dengan
nilai nol, yang tempat di mana V dan N adalah tegak lurus, dan dengan demikian,
kita berada di siluet obyek yang akan diberikan. Kami harus memberikan nilai
yang mendorong shader fragmen kami, dan pada kode berikut, perhatikan bagaimana
shader vertex tidak menghitung warna per titik atau koordinat tekstur:
void
toonShading_f (float diffuseLight : TEXCOORD0,
float specularLight : TEXCOORD1,
float edge : TEXCOORD2,
out
float4 color : COLOR,
uniform
float4 Kd,
uniform
float4 Ks,
uniform
sampler1D diffuseRamp,
uniform
sampler1D specularRamp,
uniform
sampler1D edgeRamp)
{
//
Apply step functions
diffuseLight
= tex1D(diffuseRamp, diffuseLight).x;
specularLight
= tex1D(specularRamp, specularLight).x;
edge
= tex1D(edgeRamp, edge).x;
//
Compute the final color
color
= edge * (Kd * diffuseLight + Ks * specularLight);
}
Shader ini benar-benar sederhana.
Kita mulai dengan melakukan tabel lookup berdasarkan nilai pencahayaan diffuse dihitung
pada tahap puncak, dan kemudian menggunakan ini untuk mendorong lookup tekstur
1D. Tekstur ini akan menjadi peta khas terdiskritisasi, yang biasanya memiliki
dua atau tiga warna: satu untuk warna gelap, satu untuk pertengahan rentang,
dan satu untuk zona cukup terang. Baris kedua tidak persis hal yang sama untuk
tekstur specular, dan kemudian ujungnya diproses. Untuk tepi, tekstur
mengkodekan kisaran nilai yang kita inginkan untuk menetapkan ke garis hitam. Nilai-nilai yang
datang dari vertex shader berada di kisaran 0 .. 1, tapi kita perlu siluet kami
untuk menjadi sempurna dibagi menjadi zona yang putih murni dan zona yang hitam
sempurna. Dengan demikian, tekstur tepi lookup Peta kisaran kontinyu 0 .. 1
sampai kemungkinan dua nilai, 0 untuk nilai-nilai di bawah ambang batas tetap
(katakanlah, 0,2) dan 1 dalam hal lain.
Persamaan terakhir adalah di
mana semua bagian berada di tempatnya. Anggota di dalam kurung adalah hanya
persamaan pencahayaan biasa yang menggunakan nilai-nilai terdiskritisasi untuk
memodulasi difus (Kd) dan specular (Ks) warna. Kita kalikan ini dengan nilai
tepi, sehingga tepi yang sama dengan nol (dengan demikian, poin dalam siluet)
yang diarsir pada hitam, dan garis besar yang bagus diambil.
Ini hanya contoh sederhana dari
yang bisa dicapai dengan memanfaatkan kekuatan vertex dan fragmen shader, dan
terutama dengan cara menghubungkan keduanya sehingga mereka berdua bekerja
sebagai tahapan dari proses secara keseluruhan.
Dikutip dari
Buku "Core Techniques & Algorithm in Game Programming"
