Ceng2.ktu.edu.tr



KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARI26670-969010004742815-96964500BIL 4007 B?LG?SAYAR GRAF?KLER? LABORATUARIDers Sorumlular???r.G?r. ?mer ?AKIRDr.??r.?yesi Murat AYKUT2019-2020 Güz D?nemi???NDEK?LERSayfa No?ns?z031OpenGL Uygulamalar? ?a?atay M. YILMAZ042WebGL Uygulamalar? Bahar H. YILMAZ153Yüzey Doldurma Teknikleri Orhan S?VAZ264MAYA ile 3D Modelleme ?lknur KAYIK?IO?LU325MAYA ile Animasyon Seda EFEND?O?LU406Ters Perspektif D?nü?üm ile Doku KaplamaGül MUZAFFER487DirectX ile Tank OyunuAhmet ULU578Pürüzlü Yüzey ?retimiM. Cemil AYDO?DU63?ns?zBu ders kapsam?nda yap?lacak deneylerle Bilgisayar Grafikleri-I dersinde anlat?lan konular?n?n pratik uygulamalarla peki?tirilmesi ama?lanmaktad?r. Laboratuarda, dersin I??n ?zleme (Ray Tracing), DirectX 12 ve MAYA ana ba?l?klar? alt?nda anlat?lan konular?na ili?kin “DirectX ile Tank Oyunu”, “Pürüzlü Yüzey ?retimi”, “Maya ile 3D Modelleme”, “MAYA ile Animasyon” deneyleri yan? s?ra “OpenGL Uygulamalar?”, “WebGL Uygulamalar?”, “Yüzey Doldurma Teknikleri” ve “Ters Perspektif D?nü?üm ile Doku Kaplama” gibi de?i?ik Bilgisayar Grafikleri konular?na ait uygulamalar yap?lacakt?r. ??r.G?r. ?mer ?AKIRKARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIOpenGL Uygulamalar?1. Giri?OpenGL, en yayg?n kullan?lan grafik programlama kütüphanesidir. H?zl? ve basit bir ?ekilde etkile?imli, 2B-3B bilgisayar grafik programlar? yapman?za olanak sa?lar. Kullan?m alan? ?ok yayg?nd?r ve bilgisayar grafiklerinin hemen hemen tüm alanlar?nda yayg?n olarak kullan?l?r. Baz? kullan?m alanlar?: ara?t?rma, bilimsel g?rselle?tirme, e?lence ve g?rüntü efektleri, bilgisayar destekli tasar?m, etkile?imli oyunlar...OpenGL, donan?m-ba??ms?z bir arayüzdür. G?rüntüde bulunan nesneleri tan?mlamak ve bu nesneler üzerinde gerek duyulan i?lemleri ger?ekle?tirmek i?in gerekli komutlar? i?erir. OpenGL ‘in donan?m-ba??ms?z olmas?n?n nedeni, pencere i?lemlerini (ekranda bir pencere olu?turmak gibi) yapan ya da kullan?c?dan girdi alan herhangi bir komutunun bulunmamas?d?r. Belirtilen bu i?leri ger?ekle?tirmek i?in varolan i?letim sisteminin mevcut ?zellikleri kullan?l?r. Ancak i?letim sisteminde pencere i?lemlerini ger?ekle?tirmek karma??k i?lemler i?erdi?inden tüm bu i?levleri bar?nd?ran ve i?letim sistemlerine ?zel olarak yaz?lm?? GLUT (Graphic Library Utility) kütüphaneleri bulunmaktad?r.OpenGL, 3D nesneleri tan?mlamak i?in yüksek-seviyede komutlar i?ermez. Bunun yerine; nokta, do?ru ve poligon gibi alt-seviye geometrik primitif (ilkel) nesneleri i?erir ve bu primitif nesneleri kullanarak karma??k grafik nesneleri tan?mlamam?za olanak sa?lar. 2. Programlama Dilleri, ??letim Sistemleri ve Pencere Sistemleri Seviyesi Destek2.1. Programlama DilleriBir ?ok uygulama geli?tiricisi, OpenGL kütüphanesini üst seviye dillerde kullanmak i?in bu dillere has uygulama programlama arayüzleri geli?tirmi?lerdir. Bu dillerden baz?lar? ?unlard?r: Ada, Common Lisp, C#, Deplhi, Fortran, Haskell, Java, Perl, Pike, Python, Ruby, Visual Basic...Tart??ma Sorusu-1 : OpenGL kütüphanesi neden herhangi bir programlama dili ile kullan?l?r? Buna neden ihtiya? duyulmu?tur? Bu diller ile kullan?lmasayd? OpenGL ile uygulama geli?tirme baz?nda neler yap?lamazd?? Tart???n?z.2.2. ??letim Sistemleri ve Pencere SistemleriOpenGL, yayg?n olarak kullan?lan tüm i?letim sistemleri ve pencere sistemlerince desteklenir. A? protokolleri ve topolojilerinden tam ba??ms?zl?k sa?lar. Tüm OpenGL uygulamalar?n i?letim sistemi ve pencere sistemine bak?lmaks?z?n herhangi bir OpenGL UPA (Uygulama Programlama Arayüzü- API) uyumlu donan?mda ayn? g?rsel sonucu üretir. Desteklenen baz? i?letim sistemleri ve pencere sistemleri a?a??da listenmi?tir:Microsoft WindowsApple Mac OSLinux - Debian, RedHat, SuSE, CalderaX Pencere Sistemi (X Window Systems - daha ?ok GNU/Linux ve Unix benzeri i?letim sistemlerinde kullan?lan grafik arayüz altyap?s?d?r. 3. OpenGL Tabanl? Baz? Uygulama Geli?tirme Arayüzleri3.1. OpenGL ES (OpenGL for Embedded Systems /G?mülü Sistemler i?in OpenGL)OpenGL ES ta??nabilir (mobil) cihazlar, PDA'lar, video oyun konsollar? gibi g?mülü sistemler i?in geli?tirilmi? 2B/3B uygulama geli?tirme arayüzü ve grafik i?leme dilidir. Cihazlardaki süzge?lerin (filtreler) verimli ?al??mas? i?in telefon GPU'su ile bereber kullan?l?r. Glut ve Glu gibi kütüphaneler i?ermez. Telif ücreti gerektirmez ve platformalar aras? ?al??abilir. Günümüzde ?o?u modern cihaz üzerinde bulunur ve bir ?ok uygulamada kullan?lm??t?r. ?rne?in, mobil cihazlar i?in geli?tirilen foto?raf payla?ma uygulamas? olan Instagram'da OpenGL ES kullan?lm??t?r. OpenGL destekli baz? cihazlar: Samsung ta??nabilir telefonlar, BlackBerry OS 7.0 ve sonras? BlackBerry cihazlar?, Aplple (iPad, iPhone vs.), Google Native Client...3.2. WebGLWeb sayfalar? üzerinde 3 boyutlu grafikler olu?turmak i?in kullan?lan platforma ba??ms?z ve ücretsiz bir uygulama geli?tirme arayüzüdür. HTML 5'in web üzerinde yayg?nla?mas?yla birlikte kullan?m? artm??t?r. Güncel internet taray?c?lar?n?n ?o?u taraf?ndan desteklenmektedir.4. OpenGL4.1. Kullan?m Avantajlar? OpenGL kullanarak grafikler olu?turman?n avantajlar? a?a??da s?ralanm??t?r:Platform ba??ms?zd?r (Windows, Linux, Mac) ve tüm OpenGL UPA uyumlu donan?mlar üzerinde ?al???r.?ok ?e?itli sistemler üzerinde ko?ulabilir. (Ki?isel bilgisayarlar, i? istasyonlar?, süper bilgisayarlar, g?mülü sistemler vs.) Sistem kaynaklar?n? optimum ?ekilde kullan?r. Bir ?ok programlama dili taraf?ndan ?a??r?larak kullan?labilir. Kolay anla??l?r, h?zl? ??renilir. ??erdi?i i?levlerin belgelendirmesi ?ok iyi yap?lm??t?r ve ücretsiz bol miktarda e?itici dokümana sahiptir.IBM, Sony, Google, Intel, Samsung'un da i?inde bulundu?u ?irketler taraf?ndan grafik alan?nda a??k standartlar? olu?turmas? amac?yla desteklenir ve finanse edilir.4.2. Open GL Utility (GLUT)OpenGL platformdan ba??ms?z oldu?u i?in baz? i?lemler bu kitapl?k ile yap?lamaz. ?rne?in kullan?c?dan klavye veya fare ile veri almak, bir pencere ?izdirmek gibi i?ler hep kullan?lan pencere y?neticisi ve i?letim sistemine ba?l?d?r. Bu yüzden bir an i?in OpenGL'in platform ba??ml? oldu?u dü?ünülebilir. ?ünkü ?al??ma penceresini her pencere y?neticisinde (her ortamda) farkl? ?izdirecek bir canland?rma program? yazmak demek her bilgisayarda ?al??acak ayr? pencere a?ma kodu yazmak demektir. Bu ise OpenGL'in do?as?na ayk?r?d?r. Bu gibi sorunlar? a?mak i?in OpenGL Ara? Kiti (GLUT - OpenGL Utility Toolkit) kullan?lmaktad?r. Bu yüzden bu deneyde GLUT kitapl??? kullan?larak klavye ve fare i?in i?letim sisteminden ba??ms?z giri?/??k?? i?lemleri yap?lmas? sa?lanm??t?r.A?a??da s?k kullan?lan baz? pencere i?levleri listelenmi?tir :glutInit() i?levi GLUT’? ilkler, di?er GLUT rutinlerinden ?nce bu komutun yaz?lmas? zorunludur.glutInitDisplayMode() i?levi renk modunu belirlemektedir.glutInitWindowPosition() i?levi ekran?n sol-üst k??esini baza alarak grafik penceresinin ekrandaki yerini belirler.glutInitWindowSize() i?levi pencerenizin büyüklü?ünü ayarlar. glutCreateWindow() i?levi OpenGL conteksli bir pencere olu?turur.glutDisplayFunc() i?levi, ?izim penceresinin i?eri?inin yeniden g?sterilece?i durumlarda ?al??t?r?lacak fonksiyonu (?izim i?lemlerinin yap?ld??? fonksiyon) ?a??r?r. Parametre olarak bu fonksiyonun ad?n? al?r.glutKeyboardFunc() ve glutMouseFunc() i?levleri klavyenin veya farenin herhangi bir tu?una bas?ld???nda ?al??t?r?lacak fonksiyonu ?a??r?r.glutReshapeFunc() i?levi, pencere büyüklü?ünün de?i?ece?i durumlarda ?al??t?r?lacak fonksiyonu ?a??r?r.4.3. OpenGL S?z dizimi OpenGL'de her komutunun ?nüne gl ?n eki getirilmektedir (?rne?in glBegin()) Ayn? ?ekilde, tan?mlanm?? OpenGL sabitlerinin ?nüne GL ?n eki getirilir (?rne?in GL_ POLYGON). Ayr?ca komut bildirindeki baz? ekler de bu komutlara birer anlam katmak i?in kullan?l?r. ?rne?in glColor3f() komutunu incelersek, Color eki renk ile ilgili bir komut oldu?unu, 3 eki 3 tane parametre ald???n? ve f eki ise ald??? parametrelerin kayan noktal? say? (float) tipinde oldu?u anla??l?r.OpenGL ?lkel (Primitif) Geometrik Nesneleri?lkel geometrik nesneler, OpenGL’in ?izebildi?i basit nokta, ?izgi, poligon gibi nesnelerdir. (?ekil 1'de OpenGL ile ?izilebilen ilkel geometrik nesneler g?sterilmi?tir.) Bu geometrik nesneler koordinat bilgileri ile tan?mlan?rlar ve bu koordinat bilgilerine k??e (vertex) denmektedir. OpenGL bu k??e bilgileri ile ilkel olan geometrik ?ekilleri ?izebilmektedir. Fakat ?izilecek olan nesnenin nokta, ?izgi veya poligon olup olmad???n? OpenGL’e bildirmek gerekir. Bu bildirim glBegin fonksiyonu taraf?ndan ger?ekle?tirilir. Ard?ndan k??e bilgileri aktar?l?p nesnenin ?izimini ve ?izme modunun bitti?ini g?stermek i?in glEnd fonksiyonu kullan?l?r. A?a??daki glBegin, glEnd fonksiyonlar? ve k??e de?erleri ile bir poligon nesnesinin ?izimi g?sterimektedir:glBegin(GL_POLYGON); //Poligon ?izmeye ba?la komutu.glVertex2f(0.25, 0.25); //1. k??enin x ve y bile?enleriglVertex2f(0.75, 0.25); //2. k??enin x ve y bile?enleriglVertex2f(0.50, 0.75); //3. k??enin x ve y bile?enleriglEnd(); //Poligon ?izmeyi bitir komutu.15697206159500?ekil 1. ?lkel (Primitif ) Geometrik Nesneler4.5. ?lk OpenGL Uygulamas?Programda ilk olarak bir pencere olu?turulmakta daha sonra da display fonksiyonu ayarlanmaktad?r. Display fonksiyonu i?erisinde de her defas?nda ?izilecek olan grafik ?izilmektedir. Bu hali ile verilen kod basit bir OpenGL program?n?n iskeletini olu?turmaktad?r. Program ?al??t?r?ld???nda elde edilen ekran g?rüntüsü ?ekil 2’de verilmi?tir.#include <stdio.h>#include <stdlib.h>#include <GL/glut.h>void ayarlar(void){ glClearColor(0.0,0.0,0.0,0.0); glOrtho(-2.0, 2.0, -2.0, 2.0, -1.0, 1.0);//Koordinat sistemini ayarla}void display(void){ glClear(GL_COLOR_BUFFER_BIT); // Renk buffer?n? temizle glColor3f(1.0, 0.0, 0.0); //Renk de?eri ata glBegin(GL_POLYGON); //Poligon ?izmeye ba?la glVertex2f(-0.5, -0.5); //K??e de?erleri glVertex2f(-0.5, 0.5); glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); glEnd();//Poligon ?izimi bitir glFlush();//?izim komutlar?n? ?al??t?r }int main(int argc, char **argv){ glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB ); glutInitWindowPosition(0,0); glutInitWindowSize(500,400); glutCreateWindow("OpenGL Uygulamalar?-I"); ayarlar(); glutDisplayFunc(display); glutMainLoop(); return 0;}1334638-18208900?ekil 2. ?lk OpenGL Uygulamas? - D?rtgen ?izimiTart??ma Sorusu-2 : main fonksiyonu i?erisinde pencere olu?turmak i?in kullan?lan Glut kütüphanesine ait pencere fonksiyonlar?na g?nderilen parametreleri de?i?tirerek ortaya ??kan farklar? inceleyiniz. glOrtho fonksiyonu ile koordinat sistemin nas?l de?i?tirildi?ini g?nderilen parametreleri de?i?tirerek g?zlemleyiniz. ?izim nesnelerinin koordinat sisteminde nas?l yerle?tirildi?ini inceleyiniz. OpenGL Koordinat Sistemleri ve D?nü?ümleriOpenGL’de 3D grafik i?lemlerinde bir?ok farkl? koordinat sistemi kullan?l?r. Bunlar a?a??daki gibidir ve bir uzaydan di?erine ge?i? i?in d?nü?üm matrisleri kullan?l?r.Nesne Uzay? (Object Space )Dünya Uzay? (World Space) Kamera Uzay? (Camera Space /Eye Space/View Space)Ekran Uzay? (Screen Space/Clip Space)Nesne Uzay?: Geometrik nesneleri olu?tururken nesnenin orjinine g?re k??e de?erlerinin hesaplanmas?nda kullan?lan koordinat sistemidir. ?rne?in, sekiz k??esi olan bir küpü geometrik olarak modellemek i?in k??e koordinat bilgileri kullan?labilir.?ekil 3. Modellenmi? Küp ve K??e De?erleriDünya Uzay? : Nesne uzay?nda modellenen geometrik cisimlerin dünya koordinat sisteminde bir konuma yerle?tirilmesi i?in kullan?lan uzayd?r. Geometrik nesneler model matrisler kullan?larak bu uzaya ta??n?r. ?rne?in, ba?lang??ta (0,0,0) konumundaki yukar?daki küpü dünya uzay?nda (5, 0, 0) koordinatlar?na ta??mak istiyorsak küpün tüm k??e de?erleri a?a??daki gibi bir model matris ile ?arp?lmal?d?r. A?a??da, (-1, -1, 1) k??esinin +x y?nünde 5 birim ta??nd???nda dünya uzay?ndaki yeni koordinatlar? hesaplanm??t?r. [1005 0100 0010 0001] X[-1 -1 1 1]=[ 4 -1 1 1]Model D?nü?ümMatrisiNesne Uzay? K??e Koor.Dünya Uzay? Koordinatlar? Kamera Uzay?: OpenGL kütüphanesi ile uzayda istenilen bir noktaya kameray? koymak ve bu noktadan istenilen bir y?ne istenilen a??yla bakmak i?in kullan?l?r. Dünya uzay?ndan kamera uzay?na d?nü?üm i?in view matrisler kullan?l?r. Projection Space: 3 boyutlu kamera uzay? üzerindeki g?rüntülerin 2 boyutlu ekranda g?rüntülenecek bi?ime d?nü?türülmesi i?in kullan?l?r. Günümüzde, 3 boyutlu holografik ekranlara sahip olmad???m?zdan bu d?nü?üm gereklidir. D?nü?üm i?in projection matrisleri kullan?l?r.A?a??da, OpenGL’de kullan?lan tüm koordinat sistemleri ve d?nü?üm i?lemleri g?sterilmi?tir.?ekil 4. OpenGL Koordinat Sistemleri ve D?nü?ümler OpenGL ile D?nü?üm (Transformation) ??lemleri4.7.1. Ta??ma (Translation)Bu i?lemin amac? bir ?ekli mevcut konumundan bozulmadan farkl? bir konuma ta??makt?r. glTanslatef() ve glTranslated() fonksiyonlar? bu i?lemi ger?ekle?tirir. ?ki farkl? ?ekilde kullan?labilir:void glTranslatef(GLfloat x, GLfloat y, GLfloat z);void glTranslated(GLdouble x, GLdouble y, GLdouble z);?rne?in, bir küpü koordinat sisteminin merkezinden (5, 5, 5) noktas?na ta??mak istenirse, ilk olarak modelview matrisini yüklenmeli ve ilklenmelidir. Daha sonra glTranslatef() fonksiyonu ile ta??nmal?d?r. A?a??daki kod yapaca??m?z i?lemi ger?ekle?tirir:glMatrixMode(GL_PROJECTION);glLoadIdentity();glTranslatef(5.0, 5.0, 5.0);KupCiz(); //küp ?izecek fonksiyonTart??ma Sorusu-3 : glMatrixMode(GL_PROJECTION) ve glLoadIdentity i?levleri neden kullan?lmaya ihtiya? duyulmu?tur? Modelview matrisi nedir? Ara?t?r?n?z ve tart???n?z.4.7.2. D?ndürme (Rotating)OpenGL’de d?ndürme i?lemi glRotate*() fonksiyonu ile ger?ekle?tirilmektedir. ?ki farkl? ?ekilde kullan?labilir.void glRotatef(GLfloat angle, GLfloat x, GLfloat y, GLfloat z);void glRotated(GLdouble angle, GLdouble x, GLdouble y, GLdouble z);?rne?in, ?izilen bir modeli y ekseni etraf?nda saat y?nüne, 135 derece d?ndürmek istenirse, a?a??daki kod bu i?lemi ger?ekle?tirir. Burada y argüman?n ald??? 1.0 de?eri, y ekseni y?ndeki birim vekt?rü belirtmektedir. ?stenilen eksene g?re d?ndürme i?lemini yapmak i?in sadece birim vekt?rü belirtmek gerekir.glRotatef(135.0, 0.0, 1.0, 0.0);4.7.3. ?l?eklendirme (Scaling)Modelin boyutundaki ayarlamalar? yapmak i?in ?l?eklendirme i?lemi kullan?lmaktad?r.Nesnenin boyutlar? eksenlere g?re büyültülüp kü?ültülebilir. OpenGL'de ?l?eklendirme i?lemiglScale*() fonksiyonu ile ger?ekle?tirilir. ?ki farkl? ?ekilde kullan?labilir.void glScalef(GLfloat x, GLfloat y, GLfloat z);void glScaled(GLdouble x, GLdouble y, GLdouble z);x, y, z parametrelerine ge?irilen de?erler her bir eksene g?re ?l?eklendirme de?erini belirler. ?rne?in, ?izilen bir modelin derinlik ve yüksekli?ini de?i?tirmeden, x ekseni üzerindeki geni?li?ini 2 kat?na ??kart?lmak isteniyosa, a?a??daki kod bu i?lemi ger?ekle?tirir.glScalef(2.0, 1.0, 1.0);OpenGL D?nü?üm ??lem ?nceli?iOpenGL’de d?nü?ümlerin uygulanma s?ras? d?nü?üm fonksiyonlar?n?n ?a?r?lma s?ras? ile terstir. Yani ?izim nesnesine yak?n olan d?nü?üm i?lemi ?ncelikli olarak ger?ekle?tirilir. ?rne?in, a?a??daki kod par?as? ?a?r?ld???nda, ?ncelikle z ekseni üzerinde 45 derece d?ndürme i?lemi yap?lm?? daha sonra ise x ekseni üzerinde 1.5 birimlik ?teleme i?lemi ger?ekle?tirilmi?tir. (glVertex3f() ?izim nesnesine en yak?n d?nü?üm en ?nce ger?ekle?tirilmi?tir.)?ekil 5. D?nü?üm Uygulanma S?ras?OpenGL’de farkl? d?nü?üm i?lem s?ras? farkl? sonu?lar üretir. ?rne?in, a?a??daki ?teleme ve d?nme i?lemleri farkl? s?rada ger?ekle?tirilmi?tir ve farkl? sonu?lar üreteceklerdir.?ekil 6. D?nü?üm ??lem S?ras? ve Farkl? ?izim Sonu?lar?4.9. OpenGL ve Kamera G?rüntüsüOpenGL kütüphanesi ile uzayda istenilen bir noktaya kameray? koymak ve bu noktadan istenilen bir y?ne istenilen a?? ile bakmak mümkündür. Bu i?lemin 3 ??esi bulunur:Kameran?n bulundu?u koordinatlarKameran?n bakt??? noktaKameran?n bu eksen üzerindeki a??s?Bu durum k?saca a?a??daki ?ekilde ?zetlenebilir.174752011049000?ekil 7. OpenGL ile Kamera KonumuYukar?daki ?ekilde de g?sterildi?i üzere kamera verilen eyex, eyey ve eyez koordinatlar?na yerle?tirilmi? ve kameran?n odak ?izgisi verilen atx, aty ve atzkoordinatlar?na y?neltilmi?tir. Bu do?ru üzerinde kamera istenildi?i gibi d?ndürülebilece?i i?in bu de?eri belirlemek i?in kameran?n bu eksenle yapt??? normal vekt?rü de upx , upy, upz de?erleri ile belirlenmi?tir. A?a??daki ?rnekte, bir küp ?izdirilmi? ve küpe x=3, y=3 ve z=6 kordinatlar?nda bulunan bir kamaredan bak?lm??t?r. Ekran g?rüntüsü ?ekil 4'deki gibidir:#include <windows.h>#include <GL/glut.h>void init(void) {glClearColor(0.0, 0.0, 0.0, 0.0);glShadeModel(GL_FLAT);}void display(void) {glClear(GL_COLOR_BUFFER_BIT);glColor3f(1.0, 1.0, 1.0);glLoadIdentity(); gluLookAt(3.0, 3.0, 6.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);glutWireCube(1.0);glFlush();}void reshape(int w, int h) {glViewport(0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();glFrustum(-1.0, 1.0, -1.0, 1.0, 1.5, 20.0);glMatrixMode(GL_MODELVIEW);}int main(int argc, char** argv) {glutInit(&argc, argv);glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);glutInitWindowSize(500, 500);glutInitWindowPosition(100, 100);glutCreateWindow(argv[0]);init();glutDisplayFunc(display);glutReshapeFunc(reshape);glutMainLoop();return 0;} 150304510414000?ekil 8. OpenGL ile kamera g?rüntüsüTart??ma Sorusu-4 : gluLookAt fonksiyonuna g?nderilen parametreleri de?i?tirerek farkl? a??larda ?izim nesnesine bak?n?z. reshape fonksiyonun hangi nedenle kullan?lm?? olabilece?ini tart???n?z.Tart??ma Sorusu-5 : glTranslatef, glRotatef ve glScalef fonksiyonlar?n? i?levlerini Tart??ma Sorusu-6 : Daire, silindir, daire halkas? gibi geometrik ?ekiller ?izmek i?in kullan?labilecek y?ntemleri tart???n?z. 5. Deney Haz?rl???Bu b?lüm, deneye gelmeden ?nce her ??renci taraf?ndan yap?lmas? gereken maddeleri i?ermektedir. Deneye gelmeden ?nce C++ derleyicisi i?eren herhangi bir sürümde Visual Studio IDe’si kurulmal?d?r. adresinden veya b?lümümüzün DreamSpark Premium sayfas?ndan indirebilirsiniz.Ek-1’de verilen ad?mlar takip edilerek Microsoft Visual C++ 2010 Express veya di?erleri i?in (VS 2013 vs.) gerekli GLUT kütüphaneler eklenmelidir. (Farkl? olarak VS 2013 i?in C:\Program Files (x86)\Microsoft Visual Studio 12.0)Deneyde verilen uygulama kodlar? Ek-1'de anlat?ld??? gibi ide üzerinde ?al??t?r?lmal?d?r.Deney f?yü dikkatlice okunmal? ve deneye haz?rl?k sorular? cevaplanmal?d?r. Deney uygulama y?nergesinde gerekli a??klamalar bulunmaktad?r. 6. Deney Tasar?m? ve Uygulamas?Deneye haz?rl?ks?z gelen ve deney s?ras?nda ilgisiz olan ??renciler deneyden ??kar?lacakt?r. Deneye OpenGL uygulamalar?n?n nas?l ?al??t?r?laca??, Visual Studio IDE’si ile kod düzenleme ve ?al??t?rman?n nas?l yap?laca??n? bilmeniz gerekmektedir. Deney ortam?nda VS 2013 kurulu olacakt?r. Deney sayfas?nda yer alan uygulamalar ve kaynak kodlar ?al??t?r?l?r ve incelenir. Deney s?ras?nda uygulamalar üzerinde de?i?iklik yapar farkl? grafik ve animasyon ??kt?lar? elde etmeniz istenecektir.OpenGL hakk?nda temel bilgiler soru-cevap ?eklinde sorgulan?r. Uygulama alanlar? ve güncel baz? OpenGL uygulamalar?na ?rnekler verilir. GLUT kütüphanesi nedir ve ne i?in kullan?l?r sorular? cevaplan?r, kod üzerinde uygulama yapman?z istenir.Basit bir d?rtgen ?ekli ?izen program incelenir. Kullan?lan fonksiyonlar?n i?levleri soru-cevap ?eklinde sorgulan?r. OpenGL ile ?ekil de?i?tirme i?lemlerinin (ta??ma, d?ndürme ve ?l?eklendirme) nas?l yap?ld???, i?lem ?nceli?i ve farkl? ?izim sonu?lar? tart???l?r. OpenGL ’de kullan?lan koordinat uzaylar? ve d?nü?ümleri incelenir. OpenGL ile kamera g?rüntüsü uygulamas? incelenir ve gerekli tart??ma sorular? cevaplan?r. Parametreler de?i?tirilerek farkl? a??lardan kamera g?rüntüsü incelenir. ?lgili fonksiyonlar?n i?levleri soru-cevap ?eklinde sorgulan?r. 7. Deney Sorular?OpenGL nedir? Ne i?in kullan?l?r? Kullan?m avantajlar? nelerdir? OpenGL kullan?larak geli?tirilen uygulamalar? ara?t?r?n?z.OpenGL ES veya WebGL ile geli?tirilmi? güncel bir ka? ?rnek uygulama ara?t?r?n?z.GLUT nedir? Ne i?in kullan?l?r?2 boyutlu d?rtgen ?ekli ?izen OpenGL komutlar?n? a??klay?n?z.Ta??ma, d?ndürme ve ?l?eklendirme i?lemlerinin koordinat sisteminde nas?l ger?ekle?tirildi?ini ka??t üzerinde basit?e ?izerek anlat?n?z.D?nü?üm i?lemleri farkl? s?rada ?a?r?ld???nda farkl? ?izim sonu?lar? üretir. ?rnek veriniz ve ?izerek anlat?n?z.OpenGL ile kamera g?rüntüsü uygulamas?nda kamera g?rüntüsü almay? sa?layan kodlar? a??klay?n?z.8. Deney RaporuDeney rapor ?ablonu deney sayfas?ndad?r. Gerekli a??klamalar ve sorular rapor kapa??nda verilmi?tir. Raporda istenen d???nda deneyle ilgili herhangi bir ?ey yazmay?n?z.9. KaynaklarAn Interactive Introduction to OpenGL Programming - Dave Shreiner,Ed Angel, Vicki ShreinerAddison Wesley, “OpenGL Programming Guide”, 6th Edition, 2008. TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIWebGL Uygulamalar?Deney Haz?rl???Deneyde kullan?lacak kaynak kodlar deney sayfas?nda verilmi?tir. “Deneye Haz?rl?k” ve “Deney Sorular?” k?s?mlar?n? dikkatlice okuyunuz, gerekli ara?t?rmalar? yap?n?z ve deneye haz?r geliniz. Deney s?ras?nda f?y i?erisinde verilen konularla ilgili bilginiz ?l?ülecektir. Yetersiz ve ilgisiz olanlar deneye al?nmayacak veya ??kar?lacakt?r.Javascript temel seviyede ?zellikle Three.js uygulamalar? i?in gerekli. Web dokümanlar?n?n nas?l düzenlenece?ini bilmeniz gerekiyor. Deney s?ras?nda istedi?iniz edit?rle düzenleyebilir, derleyebilir ve ?al??t?rabilirsiniz. Deney masalar?nda Notepad++, Sublime Text edit?rleri kurulu olacakt?r. Deney s?ras?nda bu konularda bilgi verilmeyecektir, sizin bilmeniz istenmektedir. WebGL vertex ve fragment shaderlar?n? Mozilla Firefox Shader Edit?r ile g?rüntüleyebilir ve düzenleyebilirsiniz. Bilmenizde fayda var.Haz?rl?k ile ilgili sorular?n?z? cmyilmaz@ktu.edu.tr adresi elektronik posta ile iletebilirsiniz.Deney Tasar?m ve Uygulan???Haz?rl?k sorular? ile deneye haz?rl?k seviyesi ?l?ülecek. Deneye haz?r olmayan ve ilgisiz olanlar deneyden ??kar?lacakt?r. Deneyde; (1) Canvas API, (2) temel seviyede WebGL uygulamas? ve (3) Three.js ile grafik uygulamalar? olmak üzere ü? adet uygulama geli?tirmeniz istenecektir (her birinden ayr? ayr? puan alacaks?n?z). Gerekli kaynak kodlar deney sayfas?nda “Kaynak Kodlar” ba?l???nda verilmi?tir. Deney RaporuDeney raporuna deney sayfas?nda yer alan “Deney Raporu” doküman kapak dosyas? olacak ?ekilde haz?rlanacakt?r. Raporlar grup olarak haz?rlanacak ve bir hafta i?erisinde teslim edilecektir. Kopya raporlar? haz?rlayan gruplar gerekli sorumlulu?u üzerlerine alm?? say?l?rlar. Raporu dikkatlice okuyunuz, gereksiz k?s?mlar? rapora yazmay?n?z.?ekil SEQ ?ekil \* ARABIC 1. WebGL Destekli Baz? Taray?c?larWebGL nedir, ne i?e yarar?WebGL (OpenGL ES 2.0 for the Web) serbest kullan?m lisansl?na sahip ?apraz platform deste?ine sahip OpenGL ES 2.0 temelleri üzerine in?a edilmi? a?a?? seviye 3D grafik uygulama programlama arayüzüdür (API) [1]. Bilinmesi gereken baz? ?zellikleri [2, 3] ?u ?ekildedir.OpenGL Shading Language (GLSL) programlama dilini kullanan shader temelli API’dir. Web sayfalar?nda <canvas> elementini kullanarak etkile?imli 2D ve 3D grafiklerinin g?rselle?tirmesine (rendering) olanak sa?lar.Ba?l?ca bilinen modern taray?c? sa?lay?c?lar? WebGL ?al??ma grubunda yer almaktad?r ve taray?c?lar?n ?o?u taraf?ndan WebGL deste?i sunmaktad?r. Taray?c? üzerinde implemente edilerek eklenti gerektirmez (plugin free), i?letim ve pencere sistemi seviyesinde (operating / window system independence) ba??ms?zl?k sa?lar.Uygulamalar uzak sunucu üzerinde saklanabilir. Farkl? web uygulamalar?na kolayca bütünle?tirilebilir, CSS ve JQuery gibi standart web paketleri ile birlikte kullan?labilir, web üzerinde ta??nabilirli?i artt?r?r.Masaüstü ve ta??nabilir cihazlar üzerinde birlikte ?al??abilir.WebGL her ge?en gün daha fazla modern GPU ?zelliklerinden faydalanmakta ve geli?tirilmektedir. H?zl? geli?en bir platformdur.Deney Haz?rl???: WebGL 3D grafik API’si hakk?nda bilgi sahibi olunuz. ?rnek uygulamalar? ara?t?r?p, inceleyiniz. WebGL’in eksiklikleri nelerdir, gelece?e y?nelik midir, ara?t?r?n?z.Deney Sorusu: WebGL OpenGL ES temelli olmas? nedeni ile fonksiyonellik bak?m?ndan k?s?tlamalara (ne gibi k?s?tlamalar?) sahiptir. Bu eksikli?i gidermek i?in k?s?tlamaya sahip olmayan OpenGL üstüne yap?land?r?labilir mi? Ara?t?r?n?z. Münaka?a ediniz.WebGL idealde makinenin grafiksel hesaplama ve bellek donan?m?n?n Merkezi ??lem Biriminden (M?B/CPU) ayr?ld??? donan?m mimarileri i?in tasarlanm??t?r. Grafik ??lem Birimi (G?B/GPU) program?n bir?ok kopyas?n? e? zamanl? ko?turabilecek ?ekilde tasarlanm??t?r. Normal bir CPU’da ko?an programlardan farkl? olarak kü?ük ve basit olmas? gerekmektedir. Bu tarz bir mimaride ortaya ??kabilecek en büyük sorun 3D grafiksel uygulamalar i?in CPU ile GPU aras?nda ortaya ??kacak haberle?me problemidir (?nemli) [4, 5]. ?ekil SEQ ?ekil \* ARABIC 2. Donan?m MimarisiWebGL’in temellendi?i fikirde burada ortaya ??kmaktad?r. Ama?, iki birim aras?nda ger?ekle?en haberle?me yükünü azaltmakt?r. Bu i?lem ?u ?ekilde ger?ekle?tirilir. Komutlar? ve grafik kaynaklar?n? (?izim nesnesi k??e nokta bilgileri vd. veriler) sürekli ve par?al? olarak CPU GPU aras?nda g?ndermek yerine gerekli tüm grafiksel veriler GPU üzerine bir defada kopyalan?r. Kümeler halinde ger?ekle?tirilen bu i?lem ile haberle?me azalt?l?r ve CPU ba??ms?z grafik i?lemleri ger?ekle?tirilir [4, 5].WebGL a?a??da g?rselde verilen programlanabilir rendering (ger?ekleme/g?rselle?tirme) i? ak???n? [6] kullanmaktad?r. K?s?m 2.2’de verilen uygulama kodlar?n?n a??klanmas?nda gerekli baz? detaylar verilmi?tir. Ayr?ca, rendering i? ak???n?n bir k?sm?n?n nas?l ?al??t???n? anlamak i?in Udacity taraf?ndan haz?rlanan bu ba?lant?daki tan?t?c? uygulamay? inceleyebilirsiniz. WebGL konusunda kendinizi daha geli?tirmek istiyorsan?z bu ba?lant?ya t?klayarak ücretsiz WebGL uygulamalar? e?itim ortam ve materyallerinden faydalanabilirsiniz.?ekil 3. WebGL Rendering Pipeline (??lem Ak?? Hatt?) [6]2. Deney Uygulamalar?2.1. Canvas API ile Web ?zerinde 2D ?izim Uygulamas?Daha ?nce a??kland??? gibi WebGL uygulamalar? 3D grafikler olu?turmak i?in <canvas> elementi, Javascript betik dilini ve GLSL shading dilini kullanmaktad?r. <canvas> elementi web sayfalar?nda ?izim i?lemlerinin ger?ekle?tirilece?i alan?n belirlenmesi ve eri?imi i?in kullan?l?r. HTML5 ile tan?t?lan <canvas> elementi ve Canvas API’si kullan?larak WebGL kullan?lmadan 2D ?izimlerde ger?ekle?tirilebilir [2]. API ile ilgili gerekli dokümantasyonlara ba?lant?s? ile eri?ebilirsiniz. ?rnek baz? uygulamalar a?a??daki ba?lant?lar ile eri?ebilirsiniz:, web sayfalar? üzerinde grafik programlaman?n temellerini kavramak amac?yla ?ncelikle Canvas API ile ger?ekle?tirilen uygulama incelenecektir (?ekil 4). Uygulama kodlar?n?n bir k?sm? a?a??daki gibidir. Uygulaman?n tamam?na (.html dosyas?) ve kaynak kodlara (web sayfas?n?n kaynak kodlar?n? taray?c?n?z ile g?rüntüleyerek) deney sayfas?ndan eri?ebilirsiniz. Herhangi bir metin edit?rü ile a?arak html dosyas? üzerinde gerekli de?i?iklikleri yapabilirsiniz.Verilen uygulamada ?izim i?in gerekli temel ad?mlara k?saca bakacak olursak;HTML dosyas?na <canvas> elementinin eklenmesi: <canvas> elementi tan?mlanm?? ve boyut attributelar? kullan?larak taray?c? üzerinde 600x500 boyutunda ?izim alan?n? olu?turulmu?tur. Javascript ile <canvas> elementine eri?ilmek i?in id tan?mlay?c?s? atanm??t?r (Sat?r 7).Javascript ile <canvas> elementine eri?ilmi?tir (Sat?r 11).2D grafik ?izimleri i?in rendering i?eri?inin edinilmi?tir (Sat?r 12).Desteklenen Canvas API metotlar? ile 2D ?izim i?lemleri ger?ekle?tirilmi?tir (Sat?r 15 ve sonras?).1 <html>2 <head>3 <title>?lk Canvas API Uygulamas?</title>4 <meta charset="utf-8" />5 </head>6 <body>7 <canvas id="canvascik" width="600" height="500">8 Taray?c? <canvas> elementini desteklemiyor!9 </canvas>10 <script type="text/javascript">11 var canvas = document.getElementById("canvascik");12 var icrk = canvas.getContext("2d");1314 // yüz 15 icrk.beginPath();16 icrk.arc(100, 100, 75, 0, 2 * Math.PI, false);17 icrk.lineWidth = 5;18 icrk.stroke();19 20 …21 22 </script>38 </body>39 </html>?ekil 4. ?lk Canvas API uygulamas?Deney Haz?rl???: Ekte de verilen uygulama kodlar?n? ile ba?lant?da verilen Canvas API’sini inceleyiniz. ?al??t?r?n?z. (<canvas> destekli bir web taray?c?s? ile a?man?z yeterli). Basit 2D ?izimler ger?ekle?tiriniz. Yeterli seviyede HTML, Javascript bilgisine sahip olunuz. Verilen ?rnek Canvas uygulamalar?n? inceleyiniz.Deneyin Yap?l???: Basit Canvas API metotlar? yard?m?yla basit ?izim i?lemlerini ger?ekle?tirmeniz istenir. 2.2. ?lk WebGL Uygulamas?Bu b?lümde, ek JavaScript kütüphaneleri kullan?lmadan ilk WebGL uygulamas? geli?tirilecektir. Uygulama web sayfas? üzerinde <canvas> elementi ile belirtilen alan üzerine ge?i?li renklere sahip a?a??daki ?ekli ?izdirmektedir. Uygulama ve kaynak kodlara deney sayfas?ndan eri?ebilirsiniz. Herhangi bir metin edit?rü ile a?arak html dosyas? üzerinde gerekli de?i?iklikleri yapabilirsiniz.?ekil 5. ?lk WebGL Uygulamas?Deney Haz?rl???: A?a??daki anlat?mlardan ve kaynak kodlardan faydalanarak WebGL temelinde geli?tirme yapma (?zellikle vertex ve fragment shaderlar) deneyiminizi mümkün oldu?unca artt?r?n?z. Deneyin Yap?l???: Deney s?ras?nda ?rnek kodlar üzerinde de?i?iklikler yapman?z ve farkl? ??kt?lar üretmeniz istenecektir. Kaynak kodlar üzerinde ve WebGL i?leyi?i hakk?nda bilginiz sorgulanacakt?r. WebGL’ in temellerinin kavranmas? i?in ?nemli g?rülen a??klamalar a?a??da detayl?ca anlat?lm??t?r.?ncelikle <canvas> elementi ve rendering i?eri?ine eri?imden bahsedilecek olursa; getElementById() metodu <canvas> elementinin id tan?mlay?c?s?n? parametre olarak alarak ?izim nesnesine eri?im sa?lar. Rendering i?eri?inin edinilmesi ise getContext() metodu ile ger?ekle?tirilir. Bu metot, HTML <canvas> elementine WebGL ile ?izim yap?labilmesi i?in geriye bir WebGLRenderingContext nesnesi (OpenGL ES 2.0 rendering i?erik nesnesi) d?ndürür. viewport() metodu ile ?izim yap?lan WebGL i?eri?inin render edilecek ??zünürlü?ü belirlenir.Not: <canvas> elementinin stil boyutlar?n?n de?i?mesi web sayfas? üzerinde g?rünen g?rünüm boyutunu de?i?tirir ancak rendering ??zünürlü?ünü de?i?tirmez. <script type="text/javascript">…var canvas = document.getElementById('canvas_element_id'); // JSvar gl = canvas.getContext('experimental-webgl'); // JSgl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); //GLSL…</script>De?inilecek di?er bir ?nemli konu 3D nesnelere (meshler) ait vertex (k??e) verilerinin nas?l yüklenece?idir. Bu i?lemler Vertex Buffer Object (VBO) nesneleri ile ger?ekle?tirilir. VBO’lar vertex verilerini (pozisyon, normal vekt?rleri, renk bilgileri, vb.) rendering i?in GPU üzerine aktar?rlar. Uygulamada, createBuffer() bir WebGLBuffer bellek nesnesi olu?turulmu?, gl.bindBuffer() ile kullan?lacak buffer (bellek) atanm??t?r. bufferData() metodu ile ise ?izimde kullan?lacak verilerin belle?e atanmas? sa?lan?r. A?a??da bir ü?gene ait 3 k??e de?eri (2D x, y eksen bile?enleri i?eren) belle?e yüklenmi?tir.buffer = gl.createBuffer();if(!buffer){ console.log('Buffer olu?turulamad?.'); return; }gl.bindBuffer(gl.ARRAY_BUFFER, buffer);gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1.0, -1.0, /*K??e 1*/ 1.0, -1.0, /*K??e 2*/ 0.0, 1.0] /*K??e 3*/ ),gl.STATIC_DRAW);WebGL ile ?izim i?lemleri GLSL shading dili ile shaderlar kullan?larak ger?ekle?tirilir. Shaderlar programlanabilir GPU’lar?n ortaya ??kmas? ile kullan?lmaya ba?lam??t?r ve vertex ve piksellere hükmetmek (programlanabilir hale getirmek) üzere yaz?lan kü?ük program par?alar?d?r. Shaderlar ayr?ca giri? k?sm?nda da anlat?lan CPU ve GPU aras?ndaki ileti?imi minimize etmek i?inde kullan?l?r ve GPU üzerinde yo?un paralellikte ko?an kü?ük program par?ac?klar?n?n yaz?lmas?na olanak sa?lar. Bu nedenle shaderlar daha detayl? incelenecektir. Vertex ShaderlarVertex shaderlar vertex (poligonlar?n k??e noktalar? ?eklinde dü?ünülebilir) attributelar?n?n tan?mlanmas? ve i?lenmesini sa?larlar (mesh koordinatlar?n?n setlenmesi ?eklinde dü?ünebilirsiniz). Bu i?lemler rendering sürecinde ?al??t?r?lacak olan main() fonksiyonlar? i?erisinde ger?ekle?tirilir. Vertex shaderlar, WebGL rendering i? ak???n?n (pipeline) ilk a?amas?n? olu?turur ve her bir vertex üzerinde bir dizi matematiksel i?lem ger?ekle?tirirler. ?rne?in, vertex konumlar?n?n (positions) ekran konumlar?na d?nü?üm (rasterizerin kullanmas? i?in), texturing i?in gerekli koordinatlar?n üretilmesi, vertexlerin ???kland?rma ortam?ndaki renk de?erinin hesaplanmas? i?lemleri gibi. Vertex shader üzerinde yap?lan i?lem ?o?unlukla a?a??daki matris ?arp?m? ?eklindedir ve a?a??daki ?ekilde ger?ekle?tirilirler [13 ,14].gl_Position = PROJECTION_MATRIX * VIEW_MATRIX * MODEL_MATRIX * VERTEX_POSITIONBurada, VERTEX_POSITION (x, y, z, 1) mevcut konum de?erlerini i?eren 1x4 vekt?r, VIEW_MATRIX dünya uzay?ndaki kameran?n g?rebilme uzay?n?, MODEL_MATRIX nesne uzay koordinatlar?n? dünya uzay? koordinatlar?na ?eviren 4x4 matrisi, PROJECTION_MATRIX kamera lensini ifade etmektedir [111].Fragment ShaderlarRasterization sonras?nda ilkel geometrik ?eklin (ü?gen vb.) kaplad??? alan piksel boyutundaki fragmentlara (piksellere de?il) par?alan?r. Her bir fragment konum, derinlik de?eri bilgisi ve renk, texture koordinatlar? gibi interpolated parametreleri i?erebilir. Di?er bir deyi?le zaman i?indeki ???kland?rma, transformasyon vb. de?i?imler sonucunda olu?acak olas? yeni pikselin hesaplanmas? fragmentlar ile ger?ekle?tirilir. ?? ak???nda vertex shaderlar?n ??kt?s?n? al?r ve ilgili renk, derinlik bilgilerini atarlar. Bu i?lemlerden sonra fragmentlar ekran üzerinde g?rüntülenmek i?in frame buffera g?nderilir [13, 14].?ekil 6. 3D Grafik Rendering ?? Ak??? [15]Vertex ve fragment shader kullan?larak ger?ekle?tirilen basit bir 3D grafik rendering pipeline yukar?daki gibidir. G?rselde ifade edilen i?lemler k?saca ?u ?ekildedir:Vertexlerin ??lenmesi: Modeli olu?turan her bir ba??ms?z vertexler üzerinde i?lemler vertex shaderlar ile programlan?r.Rasterization: Her bir primitif geometrik ?eklin (?rn. ü?gen) fragmentlara ayr?lmas? i?lemidir. Basit olarak vertexlerin kaplad??? alandaki piksel de?erlerinin belirlenmesidir.Fragmentlerin ??lenmesi: Birbirinden ba??ms?z her bir fragmentin ortama g?re ilgili renk vb. de?erlerinin fragment shaderlarla hesaplanmas?d?r. ??kt?lar?n Birle?tirilmesi: Tüm ilkel ?izim nesnelerine ait 3D uzaydaki fragmentler kullan?c? ekran?nda 2D renk-piksel bilgisine d?nü?türülür.Uygulamaya d?necek olursak, vertex shaderlar k?saca ?u ?ekilde ?al??maktad?r: Header i?inde tan?mlanan a_position de?i?keni bir attributedur ve bu shader fonksiyonuna g?nderilen parametreleri ifade etmektedir. ?rne?in, vertexlerin pozisyon bilgileri, renkleri ve texture koordinatlar? vb. bilgiler vertex shader bu attributeler ile g?nderilir. Uygulamada, belle?e atanan ve her bir 2D (vec2 tip de?i?keni kullan?l?r) k??e koordinatlar? ([-1.0, -1.0] vd.) bu fonksiyona a_position attribute bilgisi kullan?larak gelecektir. Gelen her bir k??e de?eri gl_Position de?i?kene sat?r 4’deki gibi atan?r. gl_Position vec4 format?ndad?r ve 4 bile?ene ihtiya? duydu?undan atama bu ?ekilde (kullan?lmayan son iki konum bile?enine varsay?lan de?erler verilerek) ger?ekle?tirilmi?tir. GPU üzerindeki i?lemlerin tümü her bir vertex i?in bu ?zel tan?ml? gl_Position de?i?keni ile eri?ilerek ger?ekle?tirilir.1 <script id="2d-vertex-shader" type="x-shader/x-vertex">2 attribute vec2 a_position;3 void main() {4 gl_Position = vec4(a_position, 0, 1);5 }6 </script>Uygulamada fragment shader program? k?saca ?u ?ekilde ?al??maktad?r: Vertex shaderdaki gibi bir main fonksiyonu i?erir ve rasterization sonras? hesaplanan herbir fragment i?in bu metot ko?ulur. Herbir fragmentin renk de?eri ilgili fragmentin x ve y bile?enleri kullanarak sat?r 3’deki gibi hesaplan?r. Burada, gl_FragColor ?zel de?i?keni ayr? her bir fragmentin sahip olaca?? renk de?erini ifade etmektedir. gl_FragCoord.x ve gl_FragCoord.y de?i?kenleri ile her bir fragmentin koordinat bilgileri atanm?? ve s?ras? ile ?izim alan?n?n yükseklik ve geni?lik de?erlerine b?lünerek ge?i?li vec4 format?ndaki renk de?erleri atanm??t?r [16].1 <script id="2d-fragment-shader" type="x-shader/x-fragment">2 void main() {3 gl_FragColor = vec4(gl_FragCoord.x / 640.0, gl_FragCoord.y / 480.0, 1.0, 1.0);4 } 5 </script>Shaderlar?n kullan?m?ndaki di?er bir ?nemli noktada rendering a?amas?nda kullan?lacak shader programlar?n?n olu?turulmas?d?r. Vertex ve fragment shaderlar i?in a?a??daki ?ekilde olu?turulur. Gerekli a??klamalar yorum sat?rlar? ile verilmi?tir.// -- getElementById ve the id attribute shader kaynak kodunu edin shaderScript = document.getElementById("2d-vertex-shader");shaderSource = shaderScript.text;// -- bo? bir shader nesnesi olu?turvertexShader = gl.createShader(gl.VERTEX_SHADER);// -- shader nesnesine shader kaynak kodunu ekle gl.shaderSource(vertexShader, shaderSource);// -- shader kodunu pileShader(vertexShader);...// -- program nesnesi olu?tur program = gl.createProgram();// -- vertex ve fragment shaderlar? programa yüklegl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader);// -- shaderlar? program nesnesine ba?lagl.linkProgram(program); // -- mevcut rendering a?amas?nda bu program? kullangl.useProgram(program);Yukar?da s?ras? ile rendering i?eri?ine eri?ilmi?, WebGLBuffer bellek nesnesine bir ü?genin k??e noktalar? yerle?tirilmi?, vertex ve fragment shader program par?alar? tan?mlanm?? ve rendering a?amas?nda kullan?lacak program olu?turulmu?tur. Son olarak render() fonksiyonu a??klanacak olursa; window.requestAnimationFrame() metodu ile taray?c?ya bir animasyon yürütülece?i bildirilir ve bir sonraki ?izimden ?nce ?a?r?lacak fonksiyon ad? parametre olarak verilir. clearColor() metodu renk belle?ini red, green, blue ve alpha ile belirtilen de?erlere setler (temizler). vertexAttribPointer(attrib, index, gl.FLOAT, false, stride, offset) WebGL’ in veriyi nas?l yorumlayaca??n? tan?mlar. Bu k?sm? detayland?rmak istersek, insan taraf?ndan okunurlu?u artt?r?lmak i?in a?a??daki gibi düzenlenen diziyi vertex shader nas?l yorumlayacak sorusunu sormam?z gerekir [16].new Float32Array[ -1.0, -1.0, /*K??e 1*/ 1.0, -1.0, /*K??e 2*/ 0.0, 1.0 ] /*K??e 3*/Sorunun cevab? olan i?lem ?u ?ekilde ger?ekle?tirilir: gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); ?a?r?s?n? yapt???m?zda, shader pe?i s?ra okunan Float türündeki her iki de?eri bir vertex kabul edecektir ve vertex shaderlar bu de?erlere a_Position attribute de?i?keniyle GPU üzerinde eri?eceklerdir [16]. render() fonksiyonunda son olarak drawArray() metodu gl.TRIANGLES türünde rendering yap?laca??n? ve bu i?lemin buffer i?indeki 3 adet vertex kullan?larak ger?ekle?tirilece?i bildirilmektedir.function render() { window.requestAnimationFrame(render, canvas); gl.clearColor(1.0, 1.0, 1.0, 0.2); gl.clear(gl.COLOR_BUFFER_BIT); positionLocation = gl.getAttribLocation(program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3);}2.3. Three.js ile WebGL Uygulamalar?Three.js [] 3D bilgisayar grafiklerinin web taray?c?s? üzerinde olu?turulmas? ve g?rüntülenmesine olanak sa?layan bir JavaScript kütüphanesidir. WebGL’in bir?ok detay?ndan soyutlayarak ile h?zl? ve kolay uygulama geli?tirmenize olanak sa?lar (Babylon.js [] gibi). Deneyin bu k?sm?nda Three.js ile geli?tirilen uygulamalar incelenecektir. Kütüphanenin GitHub [] üzerindeki kaynak kodlar? inceleyecek olursan?z saf WebGL üzerine in?a edildi?ini g?rülebilirsiniz.Deney Haz?rl???: Gerekli uygulama ve kaynak kodlar?n? adresinde download ba?lant?s?na klikleyerek indiriniz. ?rnek uygulama kodlar? ../mrdoob-three.js-d6384d2/examples klas?ründe yer almaktad?r. ../examples/index.hml dosyas?n? veya ba?lant?s?n? kullanarak uygulamalar? inceleyiniz. Html dosyalar?n? taray?c? ile ?al??t?rarak da ?rnekleri inceleyebilirsiniz.2.3.1. Three.js ile ?lk UygulamaBu b?lümde ../examples klas?ründe yer alan webgl_geometry_cube.html uygulamas? incelenecektir. Uygulama kodlar? ve gerekli a??klamalar ?u ?ekildedir: ?ncelikle, WebGL etkin <canvas> elementi üzerinde grafik i?eri?inin ?izim i?in gerekli renderer a?a??daki gibi haz?rlan?r. Deney s?ras?nda verilen kodlar üzerinde de?i?ikli yaparak bir uygulama geli?tirmeniz istenecektir.var renderer = new THREE.WebGLRenderer();renderer.setPixelRatio( window.devicePixelRatio );renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );PerspectiveCamera(fov, aspect, near, far ) metodu ile bak?? i?in gerekli kamera g?rü? b?lgesi haz?rlan?r. fov parametresi ile dikey g?rü? alan?, aspect ile yatay/dikey g?rü? alan oran? ayarlan?r. near ve far parametreleri ile clipping plane belirlenir. Yani verilen de?erler aras?ndaki nesneler render edilir, g?rü? alan? d???ndaki gereksiz nesnelerin render edilmesi engellenir (?nemlidir). var camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1, 1000 );Kamera duru? pozisyonu setlenir.camera.position.z = 400;Three.js g?rüntü listesi ?eklinde bir yap? kullan?r. Y?ntemde ?izim nesneleri bir listede tutulur ve ekrana ?izilir. Bunun i?in ?ncelikle bir Three.Scene nesnesi olu?turulur. Scene nesnesi üzerine ?izim nesneleri, ???k kaynaklar? ve kameralar yerle?tirilir ve Three.js ile ekran üzerinde neyin ve nerenin render edilece?ini belirlenir.var scene = new THREE.Scene();3D bir nesnelerin ?izimine gelecek olursak, bu i?lemler meshler vas?tas?yla ger?ekle?tirilir. Her mesh kendi geometri ve materyal bilgisine sahip olur. Geometri, ?izim nesneleri i?in gerekli vertex kümelerini ifade eder. Materyal ise nesnelerin boyama bilgisini ifade eder. Dikkat ederseniz ?izim i?lemleri Three.js ile a?a??daki g?rülece?i üzere kolayla??r.// - verilen boyutlarda bir box nesnesi olu?turvar geometry = new THREE.BoxGeometry( 200, 200, 200 );// - texture yüklevar texture = THREE.ImageUtils.loadTexture( 'textures/crate.gif' );texture.anisotropy = renderer.getMaxAnisotropy();// - nesneyi kaplamak i?in yüklenen texture ile materyal olu?turvar material = new THREE.MeshBasicMaterial( { map: texture } );// - mesh nesnesini olu?turmesh = new THREE.Mesh( geometry, material );// - nesneyi render edilecek Scene nesnesine eklescene.add( mesh ); onWindowResize() metodu ile yeni taray?c? ekran geni?lik ve yükseklik bilgileri ile kamera ve renderer parametreleri güncellenir. function onWindowResize(){camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize( window.innerWidth, window.innerHeight );}animate () fonksiyonundaki requestAnimationFrame() metodu ile taray?c?ya bir animasyon yürütülece?i bildirilir ve bir sonraki ?izimden ?nce ?a?r?lacak fonksiyon ad? parametre olarak verilir. Mesh nesnesinin rotation (d?nü?) de?eri artt?r?larak, her ?izimde farkl? bir a??da ?izim yap?l?r ve nesne sürekli d?necek ?ekilde anime edilir.function animate(){requestAnimationFrame( animate );mesh.rotation.x += 0.005;mesh.rotation.y += 0.01;renderer.render( scene, camera );}Uygulamada a?a??daki de?i?iklikleri yaparak farkl? bir animasyon elde edebilirsiniz.<script>var startTime= Date.now();var camera, scene, renderer;...</script>function animate(){…mesh.rotation.y += 0.01;var dtime = Date.now() - startTime;mesh.scale.x = 1.0 + 0.3 * Math.sin(dtime/500);mesh.scale.y = 1.0 + 0.3 * Math.sin(dtime/500);mesh.scale.z = 1.0 + 0.3 * Math.sin(dtime/500);renderer.render( scene, camera );}Deney Haz?rl???: Farkl? geometri ve materyale sahip 3D nesnelerin üretimini ../examples/webgl_materials.html ve ../examples/ webgl_geometries.html uygulamalar? ile inceleyiniz.Deneyin Yap?l???: Three.js kütüphanesi ile verilen ?rnek uygulama kodlar?ndan faydalanarak farkl? bir uygulama geli?tirmeniz istenecektir.6. Kaynaklar1. OpenGL ES 2.0 for the Web, 2015.2. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL, Matsuda, K., Temmuz 2015. 3. An Intr. to OpenGL Programming, 2015.4. The Standard for Embedded Accelerated 3D Graphics, 2015.5. WebGL Pre-Tutorials, 2015.6. Overview of WebGL's rendering pipeline, 2015.7. Canvas API, 2015.8. Canvas API Demos, 2015.9. 21 Ridiculously Impressive HTML5 Canvas Experiments, 2015.10. Simle Worker Canvas Example, 2015.11. Reasons to Consider SVGs Instead of Canvas, 2015.12. Embedding WebGL documents in SVG, 2015.13. WebGL Fundamentals, 2015.14. An Introduction to Shaders, 2015.15. 3D Graphics with OpenGL, 2015.16. Playing around with frag. shaders in WebGL, 2015.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIYüzey Doldurma Teknikleri1. Giri?Bu deneyde dolu alan tarama d?nü?ümünün nas?l yap?ld??? anlat?lacakt?r. Dolu alan tarama d?nü?ümü poligon i?indeki piksellerin bulunup, bu piksellere kar??l?k gelen do?ru parlakl?k de?erlerinin atanmas? anlam?na gelir. Tarama d?nü?ümü, kat? cisim üretimi i?in yüzeylerin boyanmas?nda kullan?lmaktad?r. 2. S?ral? Kenar Liste Y?ntemi (Scan Line Algorithm)Bu y?ntem, poligonun kenarlar? ile tarama sat?rlar?n?n kesi?im noktalar?n?n kullan?lmas?na dayan?r. Kesi?im noktalar? bulunup bu noktalar üzerinde s?ralama i?lemleri yap?larak, belli ?l?ütler ?????nda doldurulmas? gereken pikseller belirlenir.Y?ntemin etkinli?i s?ralama y?nteminin etkinli?iyle do?ru orant?l?d?r.Basit ?ekilde bu y?ntem a?a??daki ad?mlardan olu?ur:1. Tüm poligon-tarama sat?r? kesi?imleri bulunur. Poligon, bilinen DDA (Digital Differential Analyzer) veya Breshenam ?izgi ?izme y?ntemleriyle olu?turulaca?? i?in kesi?im noktalar?, ?izgiler ?izilirken kolayl?kla elde edilebilir. Noktalar bir listede tutulur. Her bir liste eleman? (x,y) ?eklinde bir noktay? i?aret edecektir.Bütün (x,y) noktalar?, y de?erlerinin azal?? veya art???na g?re s?raland?ktan sonra, ayn? y de?erine sahip noktalar da x’in artan s?ras?na g?re s?ralan?r. S?ralamadan sonra, listeden nokta ?iftleri se?ilerek doldurulacak pikseller a?a??daki kurala g?re belirlenir. Kural: (x1,y1) ve (x2,y2) nokta ?ifti i?in, x tamsay? olmak üzere, x birer artt?r?larak x1 ≤ x +1/2 ≤ x2 ko?ulunu sa?layan (x,y1) noktalar? doldurulur. (y1=y2)-7921415557500Yandaki ?ekilde (3,4)-(7,4) ve (10,4)-(15,4) ?iftleri al?nd???nda, yukar?daki kurala g?re doldurulacak noktalar?n ilk ?ift i?in (3,4), (4,4), (5,4), (6,4) ikinci ?ift i?in ise (10,4), (11,4), (12,4), (13,4), (14,4) oldu?u g?rülmektedir. ?ekil-1Buna benzer bir y?ntem de poligonun bulundu?u düzlem üzerinde, poligon s?n?rlar? d???ndan ba?lay?p soldan sa?a do?ru tarama sat?rlar? ge?irilerek yüzeyin doldurulmas?d?r. Soldan sa?a do?ru ilerlerken tek say?da olan kesi?imlerden sonraki pikseller doldurulur, kesi?im say?s? ?ift oldu?u anda doldurma i?lemi kesilip, sa?a do?ru ilerlemeye devam edilir. ?ekil-2’de her bir tarama sat?r? i?in doldurulacak pikseller belirlenirken baz? problemlerle kar??la??labilir. ?rne?in ikinci tarama sat?r?nda soldan sa?a do?ru ilerlerken C noktas?na rastland???nda doldurma i?lemi durdurulacak ve bir sonraki DE kenar?yla kesi?me noktas?ndan itibaren yüzey tekrar doldurulmaya ba?lanacakt?r. Yani C noktas?ndan DE kenar?na kadar olan pikseller doldurulmam?? olacakt?r.177165018542000?ekil–2C noktas? bir yerel minimum noktas?d?r. Yerel minimum noktay? olu?turan kenarlar X-Y düzleminde Y ekseni boyunca artan de?erlere sahiptir. Yukar?daki probleme benzer bir problem D noktas? i?in de vard?r ve D noktas? bir yerel maksimum noktas?d?r. Bu durumda ??züm olarak tarama sat?r? boyunca yerel maksimum ve yerel minimum noktalar ihmal edilebilir. Kenar liste y?nteminde de ikililer ?eklinde de?erlendirilme olaca??ndan yerel minimum ve yerel maksimum noktalar? listeye iki?er kere al?narak problem ortadan kald?r?lm?? olur.Bu y?ntem, her piksel bir kere adreslendi?i i?in, etkin bir y?ntemdir. H?zl? oldu?u i?in ger?ek zamanl? uygulamalara uygundur. ?stünlüklerine ra?men bu y?ntem s?ralama ?n i?lemine ek olarak yatay ?izgiler bulunduran poligonlar?n yatay kenarlar?n?n ayr?ca ele al?nmas?n? gerektirir.3. Kenar Doldurma Y?ntemi Kenar doldurma tekni?inde kesi?im noktalar?n?n tutuldu?u listede s?ralama ve listeyi düzenleme gibi i?lemler yapmadan sadece kenarlar kullan?larak yüzey doldurma i?lemi ger?ekle?tirilir.Bir kenar se?ilir ve o kenar?n sa??ndaki tüm pikseller doldurulur. E?er sa?a do?ru ilerlerken rastlanan piksel doldurulmu?sa, o piksel zemin rengine ?evrilir. Tüm kenarlara bu i?lem uygulan?r ve sonu?ta doldurulmu? yüzey elde edilir. ?ekil-3’te bu uygulaman?n ad?mlar? g?rülmektedir.22098018224500?ekil-3Bu y?ntemin sak?ncas?, poligon i?indeki ve d???ndaki piksellere bir?ok kere eri?ilmesidir. Büyük poligonlar i?in etkinli?i azalan bir y?ntemdir. Adreslenen piksel say?s?n? sadece poligon i?indeki piksellerle s?n?rlamak i?in bir ?it (fence) kullan?labilir. Poligonun herhangi bir noktas?ndan bir ?it se?ilir. Kenarlardan ?ite do?ru tarama i?lemine ba?lan?r. Yukar?daki gibi, zemin renginde olan pikseller doldurulur, doldurulmu? pikseller ise zemin rengine ?evrilir. Tüm kenarlar bitince poligon doldurulmu? olur. Ayn? ?ekil i?in bu y?ntemin ad?mlar? a?a??daki gibi olacakt?r.11239518605500?ekil-44. ?ekirdek Doldurma Y?ntemi (Flood Fill / Seed Fill Algorithm)S?n?rlar? tan?ml? bir yüzey i?in geli?tirilebilecek y?ntemlerden biri de ?ekirdek doldurma y?ntemidir. Bu y?ntemde y???n, kuyruk veri yap?lar? veya ?zyinelemeli (recursive) fonksiyonlar kullan?labilir.?rne?in, ?zyinelemeli fonksiyonlar kullan?larak uygulama geli?tirilmek istenirse, ?ncelikle doldurulacak alan s?n?rlar? i?erisinde bir piksel (seed point / boyama i?leminin ba?lanaca?? piksel) se?ilir. Daha sonra, a?a??da s?zde kodu verilen yap?daki bir boya(x,y,renk) fonksiyonu piksel koordinat bilgileri ve boyanacak renk bilgisi parametreleri ile ?a?r?l?r. Bu fonksiyon, ?ncelikle pikselin kenar pikseli olup olmad???n? kontrol eder (boyanacak ?eklin s?n?rlar?n?n a??l?p a??lmad???n?n kontrolü) ve kenar pikseli de?ilse o piksel ilgili renge boyar. Daha sonra, boyanan piksele kom?u pikseller ?zyinelemeli boya fonksiyonuna parametre olarak g?nderilir. ??lem yüzey doldurulana kadar ?zyinelemeli olarak devam eder. 173418518224500?ekil-5Fonksiyon boya(...)E?er se?ilen piksel s?n?r de?eri de?ilse ve doldurulmam??sa Ba?laPiksel(x,y)=renk; boya(x+1,y,renk); boya(x,y+1,renk); boya(x-1,y,renk); boya(x,y-1,renk);Son?zyinelemeli boya fonksiyonu s?zde kodu ?ekirdek doldurma y?ntemi y???n veri yap?s? kullan?larak geli?tirilmek istenirse, ?ncelikle ba?lang?? pikseli se?ilir ve sonra a?a??daki ad?mlarla yüzey doldurma i?lemi ger?ekle?tirilir :Se?ilen piksel y???na itilir. Y???ndan bir piksel ?ekilir. Piksel gereken renge boyan?r. Pikselin sa?, sol, üst ve alt kom?ular?na bak?l?r. Herhangi bir kom?u, s?n?r de?eri de?ilse ve doldurulmu? de?ilse y???na itilir. Y???ndaki elemanlar bitinceye kadar 2. ad?ma gidilir. ?ekirdek doldurma y?nteminin sak?ncalar?ndan biri, bir pikselin kendisini olu?turan pikseli de test etmesidir. Birka? ek düzeltmeyle bu problem giderilebilse de, bu teknikte y???n boyutunun büyük olmas? ka??n?lmazd?r. Ayr?ca bir piksele eri?im say?s? 3-5 aras?nda oldu?u i?in di?er y?ntemlere g?re daha yava?t?r. Buna ra?men en büyük tercih sebebi, rasgele se?ilen her yüzeyde iyi sonu? vermesidir.5. Deney Haz?rl???Deneyde DDA ve Breshenam do?ru ?izme y?ntemlerinden de bahsedilecektir. Bu y?ntemler hakk?nda bilgi sahibi olunuz.Ekte verilen s?ral? kenar liste y?ntemini ger?ekleyen uygulamay? (ScanLine klas?rü i?erisinde) ?al??t?r?n?z ve kaynak kodlar? inceleyiniz. (Uygulama OpenGL ile geli?tirilmi?tir, OpenGL’in yap?land?r?lmas? ile ilgili y?nlendirmeler “IDE Kurulumu ve OpenGL Yap?land?rmas?” adl? d?kümanda verilmi?tir.)Ekte verilen ve ?ekirdek doldurma y?ntemini kuyruk veri yap?s? ile ger?ekleyen FloodFill adl? uygulamay? ?al??t?r?p kodlar?n? inceleyiniz. Bu uygulamada, yukar?da belirtilen algoritman?n performans?n? yava?latan sak?ncalarda ka??nma amac? ile farkl? bir kuyru?a ekleme s?ralamas? kullan?lm??t?r. ?nceleyiniz. (Uygulamay? ?al??t?rmak i?in gerekli bilgi BeniOku dosyas? i?erisinde verilmi?tir.)?ekirdek doldurma y?nteminin etkinli?ini artt?rmak i?in neler yap?labilir, tart???n?z.Bildi?iniz farkl? bir y?ntem varsa o y?ntemle, ya da buradaki y?ntemlerin herhangi biriyle basit bir uygulama geli?tiriniz.6. Deney Tasar?m? ve Uygulamas?Deneyde, yüzey doldurma tekniklerinin i?leyi?leri tart???lacak, anlat?lan y?ntemlerle ger?ekle?tirilmi? uygulamalar incelenecektir. Bu y?ntemlerde kar??la??lan ve kar??la??labilecek problemler tart???lacakt?r. Y?ntemlerin h?z ve bellek kullan?m? y?nünden üstünlükleri ve sak?ncalar? de?erlendirilecektir.7. Deney Sorular?Yüzey doldurma kavram?n? a??klay?n?z. Kullan?m alanlar? nelerdir, ara?t?r?n?z. Yukar?da bahsedilen 3 tekni?in i?leyi?ini a??klay?n?z.DDA ve Breshenam ?izgi ?izme y?ntemlerini ?izerek anlat?n?z ve bu iki algoritmay? performans ve do?ruluk a??s?ndan kar??la?t?r?n?z.A?a??daki konkav poligonlar s?ral? kenar liste y?ntemi ile doldurulmaya ?al???l?rsa nas?l sorunlarla kar??la??l?r? Algoritma üzerinde nas?l düzeltmeler yaparak bu sorunlar?n üzerinden gelirsiniz?A?a??daki ?ekildeki kapal? alan 4 kom?ulu (four connected region) ?ekirdek doldurma y?ntemi ile doldurulmaya ?al???ld???nda herhangi bir sorun ile kar??la??l?r m?? Kar??la??l?rsa, bu sorun ?ekirdek doldurma algoritmas? üzerinde nas?l bir iyile?tirme yap?larak a??labilir? A??klay?n?z.Yüzey doldurma tekniklerini h?z, bellek gereksinimi gibi performans? etkileyen kriterlere g?re kar??la?t?r?n?z. Bu algoritmalar?n, i?leyi?leri s?ras?nda hangi durumlarda hata verebilece?ini a??klay?n?z. 8. Deney RaporuDeney rapor ?ablonu bir sonraki sayfadad?r. Deney raporu el yaz?s? ile ?ablon kapak sayfas? olacak ?ekilde haz?rlanacakt?r. Raporlar, bir sonraki hafta deneyine kadar teslim edilebilir.31115146050043091101587500KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARI2019-2020 G?Z D?NEM?Y?ZEY DOLDURMA TEKN?KLER? DENEY RAPORUGRUP13:00-15:0015:00-17:00NUMARAAD SOYAD1. Deneyde Yap?lanlarDeneyde geli?tirmeniz istenen kendi yüzey doldurma y?nteminin s?zde kodunu (pseudocode) yaz?n?z, algoritman?n i?leyi?ini bir poligon üzerinde k?saca a??klay?n?z.2. Deney Sorular? Bu b?lüme, ayr? ayr? Deney Sorular?n?n cevaplar? verilecektir.3. Kazan?mlarDeneyden kazan?mlar?n?z ve varsa eksiklikler.Not: Deney raporu el yaz?s? ile bu ?ablon kapak sayfas? olacak ?ekilde haz?rlanacakt?r. Raporlar, bir sonraki hafta deneyine kadar teslim edilebilir.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUVARIMAYA ile 3D Modelleme1. Giri?3D oyunlar ve animasyonlar, günümüzde bilgisayar grafiklerinin en yayg?n uygulama alanlar? olarak g?ze ?arpmaktad?r. Her ikisinin temel yap?ta?? olan karakterlerin, ger?e?ine yak?n modellenmesi ?nemli bir a?amad?r ve buna y?nelik onlarca yaz?l?m geli?tirilmi?tir. Bunlar i?inde belki de en yayg?n kullan?lan? MAYA’d?r. 3D modelleme i?in Poligonal ve NURBS olmak üzere iki ana y?ntem vard?r. Bu deneyde MAYA ile poligonal modelleme anlat?lacakt?r.Deneye gelmeden ?nce adresinden üyelik yapt?rarak MAYA 2017 ??renci versiyonunu “Free Software” linki ile indiriniz. A?a??da bahsi ge?en ü? ?devi Maya kurulu ki?isel bilgisayarlar?n?zda yap?p deneye ?devleriniz haz?r bir ?ekilde bilgisayarlar?n?zla geliniz. ?devlerinizi sorunsuz bir ?ekilde yapabilmek i?in deneyin sorumlusundan deneyde anlat?lan konularla ilgili videolar? temin ediniz ve sorun ya?ad???n?z yerlerde deney sorumlusundan yard?m istemekte tereddüt ya?amay?n?z. ?dev 1: Tabloda yer alan ?ekillerden kendi deney grubunuzla ilgili olan? ?iziniz.A1 ve B1Masa ve sandalye A2 ve B2Bilgisayar Kasas?, Monitor ve Klavye A3 ve B3ArabaA4 ve B4GemiA5 ve B5U?akA6 ve B6A?a? A7 ve B7G?zlük A8 ve B8Kol saati ?dev 2: B?lüm 3.1’de g?sterilen basit bir insan modellemesini ki?isel bilgisayar?n?zda tüm ad?mlar? dikkate alarak yap?n?z. ?dev 3: ?mer Hoca’n?n Bilgisayar Grafikleri Laboratuar? sayfas?nda yer alan ?nden ve yandan resimlerini, ki?isel bilgisayarlar?n?zda front ve side viewlardaki imagePlane‘lere yükleyiniz ve yüz modelini ?izmeye haz?r bir ?ekilde geliniz. 3547422794000Yoklama s?ras?nda bilgisayar?nda MAYA kurulu olmayan, modellemevideolar? bulunmayan yada ?devlerini yapmam?? olan ??renciler deneye al?nmayacak ve devams?z say?lacaklard?r.2. MAYA Ortam?n?n Tan?t?m?3D modellemeye ba?lamadan ?nce MAYA ortam?n?n, s?k kullan?lan k?sayol tu?lar? ve menüler ile tan?t?m?nda fayda vard?r. ?ekildeki dikd?rtgen prizma PolygonsPolygonCube t?klan?p fare ile ?izilmi? olsun. Prizmaya de?i?ik a??lardan bakmak i?in: Klavyenin Alt tu?u sürekli bas?l? tutulurken farenin sol butonuna bas?l?p hareket ettirilir.Prizmaya yakla??p uzakla?mak i?in: Farenin ortas?ndaki tekerlek kullan?l?r. Sa?a-sola, yukar?-a?a?? hareket etmek i?in Alt+scroll tu?lar? bas?l? iken fare hareket ettirilir.Prizmaya ?nden (front), yandan (side), üstten (top) ve perspektif (persp) olarak 4 farkl? pencereden bakmak mümkündür. Pencereler aras? ge?i? i?in fare pencerenin üzerine getirilip space tu?una bas?l?r. B?ylece ?rne?in yandan g?rünü? aktifken di?er g?rünü?lerden birine ge?i? yapmak i?in fare o pencerenin üzerine getirilip tekrar space tu?una bas?l?r. 4 farkl? pencere a?a??daki ?ekilde g?sterilmi?tir.40830510604500Prizmay? hareket ettirmek i?in: Prizma se?ili iken move tooluna t?klan?r ve fare ile oklardan ?ekilerek istenilen eksende hareket ettirilir. Prizmay? d?ndürmek i?in: Prizma se?ili iken rotate tooluna t?klan?r ve fare ile ?emberlerden ?ekildi?inde istenilen eksende d?ndürülür.Prizmay? ?l?eklendirmek (büyütme - kü?ültme) i?in: Prizma se?ili iken scale tooluna t?klan?r ve fare ile küplerden ?ekildi?inde ?l?eklenir.Shift tu?u ile birden fazla cisim se?ilebilir. Yap?lan i?lemler Z tu?u ile geri al?nabilir.Bir cismin poligonal (wireframe) g?rünümü ile boyanm?? (shaded) g?rünümü aras?nda ge?i?ler yapmak i?in s?ras?yla 4 ve 5 tu?lar?na bas?l?r.Cismin üzerinde farenin sa? butonuna t?klan?l?rsa a?a??daki gibi bir menü ??kar. Deney boyunca Edge, Vertex, Face ve Object Mode s?k?a kullan?lacakt?r. Bunlardan Edge se?ildikten sonra o cismin herhangi bir kenar?na t?kland???nda o kenar?; Vertex i?in o k??esi; Face i?in o yüzeyi ve Object Mode i?in cismin tamam? se?ilmi? olur. 3. 3D Modellemeye Giri?Herhangi bir cismi poligonal modellerken genellikle plane gibi basit bir ?ekil ?izip bu ?ekil üzerinde de?i?iklikler yap?l?r. De?i?iklik daha ?ok modelin karma??kl???na ba?l? olarak yeni poligonlar üretmek ?eklinde ger?ekle?ir. Bu b?lümde Extrude, Append to Polygon, Insert Edge Loop, Target Weld, Create Polygon, Combine, Merge ve Multi-Cut toollar?n?n kullan?mlar? yeri geldik?e anlat?lm??t?r.3.1. Basit Bir ?nsan ModellemesiBu b?lümde Extrude tool ile ?ok basit bir insan modelinin ?izimi anlat?lacakt?r. Extrude (?ekme), ad?ndan da anla??laca?? gibi i?aretlenen yüzey veya kenar?n yenisini olu?turup istenilen do?rultuda ?ekme (uzatma) i?lemidir. Bunun i?in ?ncelikle cismin üzerinde farenin sa? butonuna t?klan?r ard?ndan Edge, Vertex, Face ve Object Mode’lardan biri farenin sol butonu ile se?ilir. Dikd?rtgen prizmaya ait bir yüzeyin (face) extrude edilmesi a?ama a?ama a?a??da g?sterilmi?tir. (Farenin sa? butonuna t?klan?l?r.) (Sol buton ile extrude edilecek face se?ilir) (PolygonExtrude‘a t?klan?r) (Okun ?ekildi?i y?nde yeni face üretilir)Extrude i?leminde istenilen y?nde yeni yüzey üretilirken ?l?ekleme de yap?labilir. Extrude i?lemleri ile basit bir insan modeli ?izimi a?a??da a?ama a?ama g?sterilmi?tir: (1)(2)(3)(4)(5)(6)(7)(8)3.2. Yüz ModellemesiBu b?lümde, insan yüz modellemesi anlat?lacakt?r. Bunun i?in ?ncelikle ViewImage PlaneImport Image ile front.jpg olarak kay?tl? resim front view, side.jpg olarak kay?tl? resimde side view pencerelerine yüklenir. Ard?ndan a?a??da anlat?lan yedi a?amada bu resimlere ait model elde edilir.3.2.1 A??z Modelinin Olu?turulmas??lk olarak front view a??l?r ve bir Polygon Plane ?izilir. ?izilen plane top view’dan g?rülecek ?ekilde oldu?u i?in front view’da sadece bir ?izgi olarak g?rülür. Bunu düzeltmek i?in Channel Box’da pPlane sekmesinde rotate sat?r? güncellenir. Rotate sat?r?nda x ekseninin de?eri (ilk sütun) 90.000 olarak güncellenir. Ayr?ca bu plane 10*10’luk ?zgara g?rüntüsündedir. Modelleme a?amas?nda bu durum bize zorluk ??karaca?? i?in Channel Box’da polyPlane sekmesinde Subdivisions Width ve Subdivisions Height sat?rlar? 1 de?eriyle güncellenir.Ard?ndan Extrude ve Append to Polygon toollar? yard?m?yla model olu?turulur. Burada Extrude tool kenarlar? ?o?altmada, Append to Polygon tool da se?ilen iki kenar aras?na ü?üncü bir kenar ekleyerek yeni bir polygon olu?turmada kullan?l?r. Not: Bu a?amada ve di?er tüm a?amalarda kullan?lan toollardan baz?lar? do?rudan Shelf Editor’de g?rülmekte, baz?lar? ise Mesh Tools sekmesinde yer almaktad?r. Kullanmak istedi?iniz toolu bu iki k?s?mda aray?n?z.1507183683000Modelleme a?amalar?n?n tamam?nda, front view aktifken yapt???n?z de?i?iklikleri hemen ard?ndan side view’da güncellemeyi unutmay?n?z. Aksi halde tüm noktalar (Vertex) üstüste gelece?i i?in sonradan düzenleme yapamayacak hale gelirsiniz ve ü? boyutlu bir model olu?turmada ba?ar?s?z olursunuz. 3.2.2 Burun ve A??z ?evresinin Olu?turulmas?Kal?nan yerden front view a??l?p Polygon Plane ?izilerek devam edilir. ?izilen Plane’e front view aktifken 3.2.1’de anlat?lan ?n i?lemler yap?l?r ve elde edilen plane burnun tam ortas?na yerle?tirilir.Ard?ndan d?rt kez Extrude tool ve son olarak Keep Spacing ?zelli?i kullan?larak burun ve a??z ?evresinin temel ?er?evesi tamamlan?r. Burada kullan?lan Keep Spacing ?zelli?i klavyenin W (Move i?leminin k?sayolu) tu?una bas?l?yken farenin sol tu?una t?klay?nca ortaya ??kan menüde yer almaktad?r. Bu ?zellik sayesinde istedi?imiz kenar?, se?ti?imiz kenara paralel hale getirebiliriz.Son olarak elimizdeki birbiriyle ba?? olmayan dudak ve burun-dudak ?evresi ?er?evelerini birle?tirmemiz gerekmektedir. Bu i?lem i?in ?ncelikle farenin sa? tu?una bas?l? tutarak Object Mode’u aktifle?tirip bu iki ?er?eveyi se?eriz. Ard?ndan Append to Polygon toolu se?ip dudak k?sm?n?n alt?nda kalan ü? kenarla kendilerine paralel olan ?ene kenarlar?n?n aras?na kenarlar ekleyerek kapal? hale getiririz. Fakat dudak k?sm?n?n üstünde kalan kenar say?s? az oldu?u i?in ayn? i?lemi burada do?rudan yapamay?z. Bunun i?in ?ncelikle Insert Edge Loop toolu kullan?r?z. Insert Edge Loop tool bir seferde birden fazla kenar ekleyerek birbirine paralel kenar say?s?n? art?rmada kullan?l?r. Bu a?amada ü? kez Insert Edge Loop tool kullan?larak dudak b?lgesindeki, bir kez kullan?larak da burun ?evresindeki kenar say?s? art?r?lm??t?r. Son olarak Append to Polygon tool kullan?larak duda??n üst k?sm?ndan burna kadar olan iki paralel kenar, yeni kenar eklenerek kapal? hale getirilmi?tir.3.2.3 Al?n ve ?ene Aras? ?er?evesinin Olu?turulmas?Bu ad?mda ilk olarak be? kez ardarda Extrude tool kullan?larak ?eneden ba?lay?p al?nda biten (yüzün sol taraf s?n?r?n? ?izen) bir ?er?eve olu?turulmu?tur. Ard?ndan iki kez Insert Edge Loop tool kullan?larak ?er?evenin ?ene k?sm?ndaki kenar say?s? art?r?l?r. Bu ad?mda olu?turulan ?er?eveyi, 3.2.2 ad?m?nda elde edilen ?er?eveyle birle?tirebilmek i?in ?nce Object Mode aktifle?tirilir. Ard?ndan Target Weld tool kullan?larak bu iki ?er?evenin ?ene k?s?mlar? birle?tirilir. Target Weld tool se?ilen iki kenar? veya k??eyi birle?tirmede kullan?l?r. Burada Target Weld tool kullan?larak iki ?er?evenin ?ene k?s?mlar?ndaki k??eler birle?tirilmi?tir. Bu sayede elimizdeki ayr?k iki ?er?eve aras?ndaki ba?lant? sa?lanm??t?r.3.2.4 G?z Modelinin Olu?turulmas??ncelikle en üst sat?rdaki Create sekmesine t?klan?r ard?ndan a??lan listede NURBS Primitives Sphere se?ene?ine t?klanarak bir küre elde edilir. Bu kürenin g?z boyutuna yak?n olmas? i?in Channel Box’da Scale X, Scale Y ve Scale Z de?erleri 1.2 olarak güncellenir. Ayr?ca kürenin kutup k?sm?n?n front view’a denk dü?mesi i?in Rotate X de?eri 90 olarak güncellenir.Ard?ndan ?nce Make the selected object live’a, daha sonra en üst sat?rdaki Mesh Tools sekmesine t?klan?r. A??lan listede Create Polygon’a t?klanarak kürenin ?n k?sm?nda g?z ?ekli ?izilir. Burada kullan?lan Create Polygon toolu, rastgele konulan noktalar?n aras?na ?izgi ?izerek, konulan ilk noktayla ba?lay?p son noktayla biten kapal? bir kenar d?ngüsü olu?turur. E?er Create Polygon tool kullan?lmadan ?nce Make the selected object live’a t?klan?p bu ?zellik aktif yap?lmasayd?, kürenin üzerine ?ekil ?izmek mümkün olmazd?. Bu ad?m? tamamlamak i?in ?nce Make the selected object live’a t?klanarak bu ?zellik deaktif edilir. Ard?ndan Object Mode aktifken küre se?ilir. Küre se?iliyken sa? alt k??ede bulunan Attribute Editor’de Display k?sm? se?ilip en sonda yer alan simgeye (Create a new layer and assign selected objects) t?klan?r. Olu?an sat?r Create Polygon’la ?izilen g?z ?eklini temsil etmektedir. Buyüzden ismi eyeTemp_lyr olarak de?i?tirilip kaydedilir. EyeTemp_lyr adl? sat?rda V k?sm?na t?kland???nda küre kaybolur, sadece Create Polygon’la ?izilen g?z ?ekli kal?r. Son olarak bu yüzey Face aktifken se?ilir ve Extrude toolla olu?tululan kopyas? büyütülerek elde edilen yeni yüzey, g?z ?eklinin tam d???n? saracak ?ekilde ayarlan?r, ortada kalan yüzey (ilk ?izilen yüzey) silinerek g?z oyu?unun olu?turulmas?yla g?z modellemesi tamamlanm?? olur.3.2.5 Burun ve G?z ?evresinin Olu?turulmas?Bu ad?mda ilk olarak ardarda d?rt kez Extrude tool kullan?larak burun üzerindeki kenarlar alna kadar ?o?alt?l?r. Ard?ndan Insert Edge Loop tool kullan?larak g?zün tam orta k?sm?n?n burna bakan taraf?nda bulunan yüzey, g?z merkezinden ge?en yatay ?izginin b?ldü?ü iki yüzeye d?nü?türülür. Burada polygonlar?n ?o?alt?lmas?n?n sebebi, bu iki ?er?eveyi daha kolay ve do?ru birle?tirebilmektir. Daha sonra Object Mode aktifken bu iki ?er?eve se?ilir ve Combine toola t?klan?r. Burada kullan?lan Combine tool, se?ilen polygonlar? tek bir polygonmu? gibi birlikte i?leme sokabilmemizi sa?lar. Ard?ndan Append to Polygon tool kullan?larak burnun üst k?sm?yla g?z aras?nda kalan ü? kenar birle?tirilir. Son olarak Insert Edge Loop tool kullan?larak son a?amada elde edilen ü? polygonu yukardan a?a??ya do?ru b?len kenar eklenir.Bu ad?m? tamamlamak i?in ?nce Insert Edge Loop tool kullan?larak burundan yana?a do?ru inen polygon ikiye b?lünür. Ard?ndan bu iki par?a, Append to Polygon tool kullan?larak bir ?nceki ad?mda elde edilen k?sma birle?tirilir. Olu?an iki büyük polygon ve sol taraflar?ndaki polygon, Insert Edge Loop tool kullan?larak yatay y?nde ikiye b?lünür. Bu k?s?mla g?z aras?nda kalan ü?genin kapat?lmas? i?in Merge tool kullan?l?r. Merge tool, iki k??eyi ba?l? olduklar? kenarlarla birlikte birle?tirmeye yarar. Bu ?ekilde g?z ?er?evesiyle 3.2.3 ad?m?nda elde edilen ?er?eve birle?tirilmi? olur.3.2.6 Yanak ?er?evesinin Olu?turulmas??lk olarak duda??n üst k?sm?nda bulunan bir kenar silinir ve arkada kalan kenar Extrude tool kullan?larak ?o?alt?l?r. Olu?an yeni kenar?n k??elerinden a?a??da olan? Merge tool kullan?larak birle?tirilir. Ard?ndan burnun solundaki iki kenar Extrude tool kullan?larak ?o?alt?l?r. Olu?an kenar?n üst k??esi g?zün alt?ndaki bir k??eyle, alt k??esi yana??n üstündeki bir k??eyle birle?tirilir. Burnun üzerindeki bir kenar silinerek kalan alana iki kere ardarda Insert Edge Loop tool uygulanarak daha kü?ük iki alan elde edilir. Son olarak burnun üzerinde yukar?dan a?a??ya kadar olan soldan ü?üncü ?izgiye ait tüm kenarlar silinir. Yanak k?sm?n? doldurmak i?in burnun sa? taraf?nda kalan d?rt kenar Extrude Tool kullan?larak ?o?alt?l?r ve olu?an kenarlara ait üstte kalan iki k??e g?zün alt?nda kalan iki k??eyle Merge tool kullan?larak birle?tirilir. Ard?ndan yana??n alt?yla ?enenin üstünü birle?tirebilmek i?in ?ene b?lgesindeki kenar say?s? iki kez Insert Edge Loop tool kullan?larak, yana??n alt?ndaki kenarda bir kez Extrude tool kullan?larak ?o?alt?l?r. ?stte kalan iki k??e Merge tool, altta kalan iki kenar da iki kez Append to Polygon tool kullan?larak birle?tirilir ve ikinci Append to Polygon tool kullan?m?nda elde edilen ü?gen alana ait bir kenar silinir. Son olarak ?nce Insert Edge Loop tool kullan?larak ?ene üzerindeki yatay kenar say?s?n?n art?r?lmas?, sonra Multi-Cut tool kullan?larak bir ?nceki a?amada kenar?n silinmesiyle ortaya ??kan büyük yüzeyin yatay olarak ikiye b?lünmesiyle ?ene b?lgesinin modellemesi tamamlanm?? olur. Burada kullan?lan Multi-Cut tool, se?ilen iki nokta aras?na bir kenar ?izilmesini sa?lar. 3.2.7 Al?n ve Yanak ?evresinin Tamamlanmas?Bu ad?mda ilk olarak burnun en üstündeki kenar Extrude tool kullan?larak ?o?alt?l?r ve aln?n ba?lang?c?na yak?n bir yere Insert Edge Loop tool kullan?larak yeni kenar eklenir. Extrude toolla olu?turulan kenar?n sol k??esi aln?n ba?lang?? kenar?n?n alt k??esine, sa? k??esi de Insert Edge Loop toolla eklenen kenar?n alt k??esine Target Weld tool kullan?larak birle?tirilir.Ard?ndan tekrar Insert Edge Loop tool kullan?larak ka? ?izgisinin ortas?ndaki kenar ?o?alt?l?r. Olu?an bu kenar Append to Polygon tool kullan?larak g?z ?evresindeki kenara birle?tirilir. Daha sonra birle?tirilen bu kenardan yana??n üstüne kadar olan sekiz kenar tek seferde Extrude tool kullan?larak ?o?alt?l?r ve en altta kalan kenar?n k??esi yan?ndaki k??eye Target Weld tool kullan?larak birle?tirilir. En üstte kalan kenar?n k??esini birle?tirebilmek i?in, Insert Edge Loop tool kullan?larak alna giden polygona yeni kenar eklenir. Son olarak aln?n ortas?ndaki polygon ardarda ü? kez kullan?lan Insert Edge Loop toolla d?rt polygona, kula??n ?nünde kalan polygonda Insert Edge Loop toolla iki polygona b?lünür. Ard?ndan Append to Polygon tool kullan?larak yanak b?lgesindeki ü? b?lge birle?tirilir. Benzer i?lemler ?nce aln?n sa? k?sm? ve g?zün sa? üst k?sm? aras?nda sonra aln?n üst k?sm? ve g?zün üst k?sm? aras?nda tekrarlan?r. Insert Edge Loop toolu bir?ok kez ardarda kullanarak al?ndan ?eneye kadar olan b?lgedeki polygonlar?n kü?ük polygonlara b?lünmesiyle modelleme i?lemi tamamlanm?? olur.4. Deney Tasar?m? ve Uygulamas?Deney f?yünde ve videolar?nda anlat?lan a?amalar? dikkate alarak ?mer Hoca’n?n yüzünü modelleyiniz.5. Deney RaporuGrubunuzdan bir ki?inin yüzünü modelleyiniz ve elde etti?iniz yüz modelinin ayr? ayr? ü? ekrandan al?nm?? ekran g?rüntülerini ??kt? alarak getiriniz. Not: Deney raporu grup ad?na yaz?lacak ve en ge? bir sonraki deney gününün ??le aras?na kadar teslim edilecektir.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIMAYA ile Animasyon1.Giri? Bilgisayar Grafiklerinin yayg?n uygulama alanlar?ndan biri de 3D animasyonlard?r. Patlama gibi ?zel efektler, yüklü miktarda paralar harcanmaks?z?n animasyon y?ntemleri ile ger?eklenebilmektedir. Bu deneyde MAYA’da 3D animasyon geli?tirme y?ntemlerinden bahsedilecektir. MAYA ortam? 3D Modelleme deney f?yünde tan?t?lm??t?r. Bu deneyde do?rudan animasyon konusu anlat?lacakt?r.Deneye gelmeden ?nce adresinden üyelik yapt?rarak MAYA 2017 ??renci versiyonunu “Free Software” linki ile indiriniz. A?a??da bahsi ge?en ü? animasyonu Maya kurulu ki?isel bilgisayarlar?n?zda yap?p deneye ?devleriniz haz?r bir ?ekilde bilgisayarlar?n?zla geliniz. ?devlerinizi sorunsuz bir ?ekilde yapabilmek i?in deneyin sorumlusundan deneyde anlat?lan konularla ilgili videolar? temin ediniz ve “Maya ile 3D Modelleme” deney f?yünden MAYA kullan?m? hakk?nda bilgi edininiz. Sorun ya?ad???n?z yerlerde deney sorumlusundan yard?m istemekte tereddüt ya?amay?n?z. ?dev 1: B?lüm 2.1’de anlat?lan topun z?plamas? animasyonunu deformasyon ve d?nme efektlerini de katarak ki?isel bilgisayar?n?zda yap?n?z. Bu esnada Graph Editordeki e?rilerde de?i?iklikler yaparak etkilerini g?zlemleyiniz.?dev 2: Laboratuvar?n web sayfas?na e?imli bir zeminde küpün yuvarlanmas? animasyonunun videosu konmu?tur. Bu animasyonu yaparken küpe gravity ?zelli?i vermeyiniz, key frame’leri kullan?n?z.?dev 3: Laboratuvar?n web sayfas?na basit bir bilardo animasyonunun videosu konmu?tur. Bu animasyonun benzerini ki?isel bilgisayarlar?n?zda yap?n?z.Not: Bilardo tahtas?, plane üzerinde Split Polygon ve Extrude tool’lar? ile de?i?iklikler yap?larak ?izilmi?tir.2736859588500Yoklama s?ras?nda bilgisayar?nda MAYA kurulu olmayan yada ?devleriniyapmam?? olan ??renciler deneye al?nmayacak, devams?z say?lacaklard?r. 2. Keyframe ve Graph EditorGeli?tirece?imiz animasyonu bir video olarak dü?ünelim. Bilindi?i gibi videolar resimlerden olu?maktad?r. Bu resimlere frame denir. Animasyonlar geli?tirilirken baz? framelerde cisimler üzerinde de?i?iklikler yap?l?r ve bu frameler setlenir. Bu framelere keyframe denir.Bir keyframeden di?erine ge?erken cismin de bir konumdan di?erine gitti?ini varsayal?m. Bu hareketin, iki keyframe aras?nda kalan frameleri nas?l etkiledi?ini belirlemek i?in Graph Editor kullan?l?r. ?rne?in bir topun havaya at?lmas? animasyonunu yaparken, topun ilk konumu ve havada en yüksek noktaya ula?t??? andaki konumu keyframe olarak setlenmi? olsun. Bu iki nokta aras?nda topun h?z?n?n nas?l de?i?ece?i Grap Editorde kullan?lan e?ri (Curve) ile belirlenir.2.1. Topun Z?plamas? AnimasyonuBu b?lümde, animasyon geli?tirilirken kullan?lan keyframe setleme ve hareketin Graph Editor ile belirlenmesi i?lemleri, bir topun z?plamas? animasyonu ile anlat?lacakt?r. Bunun i?in ?ncelikle bir küre ?izelim. Bu küreyi top olarak dü?ünürsek topun z?plamas? animasyonu yap?l?rken topun üzerinde ?teleme (translation), d?nme (rotation) ve ?l?ekleme (scaling) gibi i?lemleri ger?ekle?tirme i?in Channel Box menüsü kullan?lacakt?r. Channel Box’? g?rüntülemek i?in DisplayUI ElementsChannel Box‘a t?klan?r. MAYA penceresinin a?a??s?na yak?n Time Slider k?sm?nda animasyon yaparken setleyece?imiz frameler g?rülmektedir. Time slider’da default olarak 24 frame oldu?u g?rülmektedir. Time slider’?n hemen alt?nda 1...24 ?eklinde Range Slider bar? g?rülmektedir. Onun sa??nda da 24.00 ve 48.00 yaz?yor. 24 say?s? yukar?da da s?ylendi?i gibi time slider’da g?sterilecek frame say?s?n? temsil ediyor. Ama üretilecek animasyon belki de yüzlerde frameden olu?acak. ??te 48 de toplam frame say?s?n? temsil ediyor. Ayn? anda time sliderda g?sterilecek frame say?s? 24’e setlenmi? durumda. Bu say?y? de?i?tirmek i?in 48.00’?n solunda yazan 24.00 de?i?tirilebilece?i gibi range slider fare ile tutulup ?ekilebilir. Yukar?da da bahsedildi?i gibi küre üzerindeki ?teleme, d?nme ve ?l?ekleme i?lemleri i?in Channel Box kullan?lacakt?r. Channel Box’da yap?lan de?i?ikliklerin key frame olarak setlenebilmesi i?in, farenin sa? butonuyla Translate, Rotate ve Scale ?zellikleri se?ilir ve sol butonuyla Key Selected yap?l?r. B?ylece animasyon i?in gerekli haz?rl?klar tamamlanm?? oldu. Geli?tirilecek animasyonda hem range slider’? hem de toplam frame say?s?n? 24 olarak belirleyelim (24.00 24.00). Time slider’da herhangi bir frame’e, mesela 12. frame’e, t?klay?p Channel Box’tan translation de?erini 15 olarak, sonra son frame olan 24. frame’e t?klay?p translation de?erini 0 olarak de?i?tirip bu frame’leri keyframe olarak setledi?imizde z?plama animasyonu tamamlanm?? olur. Animasyonu izlemek i?in Play butonuna t?klan?r.Bahsedildi?i gibi animayon i?in setlenen key frameler aras?nda cismin nas?l hareket edece?ine Graph Editor‘deki e?rilerle karar verilir. WindowAnimation EditorsGraph Editor ile Graph Editor a??labilir. Time slider mouse ile ilerletilirken hem top hareket eder hem de Graph Editor’deki e?ri üzerinde dü?ey bir ?izgi ile o anda e?rinin neresinde olundu?u g?rülür. A?a??daki ekran g?rüntüsü Time slider 8.frame’de iken al?nd??? i?in Graph Editor’deki dü?ey ?izgi 8.frame üzerindedir.Ayr?ca e?rinin tepe noktas? da 15’i g?stermektedir. ?ünkü cismin Y ekseni boyunca yükseldi?i tepe noktas? de?eri 15’tir. Bu noktaya ??karken h?z?n de?i?imini e?rinin e?imi belirlemektedir. Dolay?s?yla 0..4 aras? framelerde e?im dü?ük oldu?undan h?z dü?ük, 4..8 aras? h?zda do?rusal yak?n bir art?? var ve 8..12 aras? yine e?im giderek azalmakta ve tepe noktas?nda e?im s?f?r oldu?undan top durmaktad?r. Anlat?lan h?z de?i?imi, ger?ek bir z?plama hareketini temsil etmemektedir. Normalde a?a??da g?sterildi?i gibi 0..4 aras? top yerden yüksek h?zla z?plamal?, bu yüzden e?im yüksek olmal?, ard?ndan e?im sürekli azalmal?d?r. Animasyonumuzdaki e?riyi yukar?daki ?ekle getirmek i?in ?ncelikle fare ile e?riye t?klan?r. E?ri üzerinde tangent ad? verilen 3 tane yatay ?izginin ortaya ??kt??? g?rülür. E?ri üzerindeki de?i?iklikler bu ?izgiler yard?m?yla yap?l?r. Bunun i?in ilgili tangent fare ile se?ilir. Sonra klavyeden W tu?una bir kez bas?l?r ve farenin orta tu?una (tekerlek) bas?l? tutularak e?ri üzerinde istenilen de?i?iklik yap?l?r.Geli?tirilen animasyonda top sadece birkez z?plamaktad?r. Birka? kez mesela 4 kez z?play?p sonra durmas? i?in frame say?s?n? 24x4=96 yapal?m.Yeni keyframeler setleyerek topun yüksekliklerini 36.frame’de 12, 48.frame’de 2, 60.frame’de 8, 72.frame’de 2, 84.frame’de 3 ve 96.frame’de 2 yapal?m. Burada 0 yerine 2 yap?lmas?n?n nedeni kürenin yar??ap?n?n 2 olmas?d?r. Yani top z?plarken tamam? grid’in üzerinde olsun, alt k?sm? grid’in i?ine girmesin diye b?yle setlenmi?tir.Dikkat edilirse topun hareketi yaln?z Y eksenindedir. Topun hem z?plamas? hem de ileri hareket etmesi i?in time slider’da 96.frame’e gidip Channel Box’ta bu sefer Translate Z key selected yap?l?r ve de?er olarak 20’ye setlenir. Grap Editor a??l?p orada da Translate Z se?ilip e?ri üzerinde gerekli de?i?iklikler yap?ld???nda, Z ekseninde de hareket sa?lanm?? olur. Animasyonun daha ger?ek?i olmas? i?in top yere ?arpt???nda deformasyon eklenebilir. Bunun i?in Scale de?erleri Y i?in 0.7, X ve Z i?in de 1.4 yap?labilir. Bu i?lemler i?in ?arpma anlar?na yak?n (2 frame kadar) yeni keyframeler setlenmelidir.3. Dynamic ToolDinamik, genel anlamda fizik biliminin nesne hareketleriyle ilgilenen par?as?d?r. Maya’n?n Dynamics tool’u, animasyonlardaki fiziksel gü?leri simule etmek i?in ?e?itli fizik yasalar?n? dikkate al?r. Geli?tirici keyframe’ler setlemeden sadece nesnenin hangi fiziksel kuvvetler kar??s?ndan etki g?rmesini istiyorsa bunlar? ayarlar ve süre? otomatik ger?ekle?ir.Dynamics animasyon bile?eni, geli?tiricinin keyframe setleyerek ?ok zor ve u?ra?t?r?c? bir süre? sonras? ula?abilece?i ger?ek?i sahneleri, kolay?kla ger?ekle?tirmesine imk?n tan?r. Okyanus veya bayrak dalgalanmas?, patlama efektleri bunlardan baz?lar?d?r. Dynamics bile?eni kendi i?inde ?e?itli ara?lara sahiptir. Fields: Field’lar? kullanarak simülasyonlarda ger?ekli?e ve do?all??a yakla??l?r. ?rne?in ak??kan, bulut veya sa? hareketleri ?e?itli field’larla birlikte kullan?larak sa?lanabilir. Maya’da kullan?ma sunulan field ?e?itleri a?a??daki gibidir:Air Field : Hava kuvveti sa?lar.Drag Field : Sürtünme ya da bask? kuvveti sa?lar.Gravity Field: Yer?ekimi kuvveti sa?lar.Newton Field: Newton kuvveti etkisi yapar.Radial Field : Cisimlere kar?? itme ya da ?ekme kuvveti uygular.Turbulence Field : Cisimlere ya da yüzeylere türbülans etkisi yapar.Uniform Field : Cisimlere belirtilen y?nde kuvvet etki eder.Vortex Field : Bu kuvvet cisimleri dairesel ya da spiral olarak kendine ?eker.Volume Axis Field : Bir eksen boyunca cisimlere kuvvet uygular.Volume Axis Curves : Bir eksen boyunca e?riler yard?m? ile kuvvet uygular.Rigid Body: Rigid body polygonal ya da nurbs yüzeyleri sert bir yüzeye ?evirmek i?in uygulan?r. Surface’lerden farkl? olarak rigid body’ler animasyon süresince birbirleri ile hareket eder ve gerekli ayarlar yap?l?rsa sahnedeki kuvvetlerin etkisi alt?nda kalabilirler.Maya aktif ve pasif olmak üzere iki tip rigid body’ye sahiptir. Aktif body olarak tan?mlanan cisimler, ortam?n yer?ekiminden, rüzgar?ndan ya da ?ak??ma gibi dinamikli?inden etkilenirler ve key setlemeleri yap?lmas?na izin vermezler. Pasif body olarak tan?mlanan cisimler ise, aktif olarak setlenen cisimlere etki etmek i?in olu?turulurlar ve key setlemelerine uygundurlar. ?teleme, d?nme ve ?l?ekleme i?lemlerine izin verirler ama dinamik etkilerden etkilenmezler. Bu iki body türüne ?rnek vermek i?in topun bir zeminden sekmesini kullanabiliriz. Top aktif body olarak tan?mlanmal?d?r. ?ünkü yer ?ekiminden etkilenerek yere dü?meli ve daha sonra yere ?arpman?n etkisi ile yerden yükselmelidir. Ancak zemin pasif olarak setlenmelidir. ?ünkü top sekti?inde zemin yerinden oynamamal?d?r ve zeminde herhangi bir bozulma olmamal?d?r. Rigid body’nin dinamik animasyonunun kontrolü rigid body solver denilen maya componenti ile yap?l?r. 3.1. Domino Ta?lar?n?n DevrilmesiDomino ta?lar?n?n Dynamic Tool ile devrilmesi animasyonunda ?ncelikli olarak poligonlardan yararlan?larak bir zemin, devrilecek olan ta?lar ve bu ta?lar? devirecek bir top olu?turulur. Bunun i?in; Zemin olu?turmada ; Polygons → Polygon Plane,Domino ta?lar?n? olu?turmada ; Polygons → Polygon Cube,Topu olu?turmada ; Polygons → Sphere se?ilerek ?izilir.Maya ortam?nda bu poligonlar?n olu?turulmu? hali a?a??da g?sterilmektedir. Domino ta?lar?n?n olu?turulmas?nda; bir Polygon Cube olu?turulduktan sonra di?er ta?lar, olu?turulan Polygon Cube ?o?alt?larak üretilir. Burada olu?turulan topun yukar?dan b?rak?ld???nda ilk domino ta??na ?arpacak bi?imde yerle?tirilmi? olmas?na dikkat edilmelidir. Poligonlar olu?turulduktan sonra bu poligonlara s?ras?yla Dynamic ?zellikler kazand?r?l?r. Bunun i?in; Zemin se?ili iken ; FX→Field/Solvers→Create Passive Rigid Body ?zelli?i,Domino ta?lar?n?n hepsi se?ili iken (Shift tu?una bas?l? tutularak fare ile t?klan?p) ; FX→Field/Solvers→Create Active Rigid Body ?zelli?i,Top se?ili iken (Shift tu?una bas?l? tutularak fare ile t?klan?p) ; FX→Field/Solvers→Create Active Rigid Body ?zelli?i un yukar?dan a?a??ya, domino ta?lar?n?n da birbirlerine ?arp?p dü?ebilmesi i?in, top ve ta?lar?n tamam? se?ilir ve FX→Field/Solvers→Gravity ?zelli?i kazand?r?l?r.4. Deney Tasar?m? ve Uygulamas?Domino ta?lar?n?n devrilmesi simülasyonunu b?lüm 3.1’de anlat?ld??? ?ekilde yap?n?z. Ard?ndan topa gravity ?zelli?i verme yerine topa z?plama animasyonu vererek ayn? simülasyonu ger?ekle?tiriniz.Deney sorumlusunun belirtti?i oyunun animasyonunu ger?ekle?tiriniz.5. Deney RaporuDeney s?ras?nda geli?tirmeye ba?lad???n?z oyun animasyonu yeti?memi?se tamamlay?n?z. Ard?ndan oyunu geli?tirirken ?nemli buldu?unuz i?in keyframe setlemesi yapt???n?z yerlerdeki ekran g?rüntülerini i?eren bir rapor haz?rlay?p raporu en ge? bir sonraki deney gününde teslim ediniz.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARITers Perspektif D?nü?üm ile Doku Kaplama1. Giri?Bu deneyde, genel hatlar? ile paralel ve perspektif izdü?üm teknikleri, ters perspektif d?nü?üm ile doku kaplama ve ?rtü?me (aliasing) problemi üzerinde durulacakt?r. Deney sonunda ??rencilerin, gerekli matematiksel ve geometriksel bilgileri edinmeleri ve bu tür programlar geli?tirebilmeleri ama?lanmaktad?r. 2. Temel Grafiksel ??lemler1.1. ?teleme (Translation)Bilgisayar grafiklerinde nesneler farkl? koordinat sistemlerine sahip olabilirler. Hesaplamalar?n do?ru yap?labilmesi i?in bu koordinat sistemleri aras?ndaki d?nü?ümün yap?lmas? gerekmektedir. Bir noktan?n cisim koordinat sisteminden g?zlemci koordinat sistemine d?nü?ümü ?ekil-1 yard?m? ile a??klanabilir. (X,Y,Z) cisim koordinat sisteminde bir P(X,Y,Z) noktas? tan?mlans?n. Bu nokta daha sonra, u?akla hareket eden ve u?a??n ?nüne do?ru pozitif YA, sa? kanad? boyunca pozitif XA ve u?a??n üstünden a?a??ya do?ru pozitif ZA ile tan?mlanm?? eksenlere sahip (XA, YA, ZA) u?ak sistemine ?evrilir. Basitlik i?in pilotun hareket etmedi?i ve g?zünün pozisyonunun u?ak sistemi ile ayn? oldu?u varsay?labilir.O(0,0,0)(Z)(X)(Y)(XA)(YA)(ZA)(ZE)(XE)(YE)P(X,Y,Z)g?zlem orijini (OE)u?ak orijiniCisim koordinat sisteminin orijiniOAθαβV1V2V3V'3O(0,0,0)(Z)(X)(Y)(XA)(YA)(ZA)(ZE)(XE)(YE)P(X,Y,Z)g?zlem orijini (OE)u?ak orijiniCisim koordinat sisteminin orijiniOAθαβV1V2V3V'3?ekil-1 Cisim ve g?zlemci koordinat sistemleri.?nce, manzaradaki her bir nokta OA merkezli g?zlemci koordinat sisteminde tan?mlanmal?d?r. G?zlemci ve cismin koordinat sistemlerinin eksenlerinin paralel ve ayn? do?rultuda olduklar? ve bir P(X,Y,Z) noktas?n?n OA (XA, YA, ZA) merkezinden g?zlendi?i varsay?ls?n. P noktas?n?n OA merkezine g?re yeri vekt?rü ile ifade edilirse:( 1 )yaz?labilir. ve vekt?rleri s?ras?yla OA ve P noktalar?n? cisim koordinat sisteminde tan?mlayan vekt?rlerdir. E?er ve vekt?rleri cisim sistemindeki koordinatlar cinsinden ifade edilirse, vekt?rü i?in a?a??daki ba??nt? yaz?labilir: ( 2 )Burada kullan?lan fark alma i?lemi ?teleme olarak adland?r?lmaktad?r. ?teleme koordinat sistemlerini ?ak??t?rman?n haricinde cismi/g?zlemciyi yer de?i?tirmede de kullan?lmaktad?r.1.2. D?nme (Rotation)Denklem (2) ile verilen ?teleme d?nü?ümü yaln?zca her iki koordinat sistemindeki eksenlerin paralel ve ayn? do?rultuda olmas? durumunda ge?erlidir. Fakat g?zlemci koordinat sisteminin 6-serbestlik derecesine sahip olmas? bir noktan?n d?nü?ümünde ?telemenin yan? s?ra d?nme d?nü?ümünü de gerekli k?lmaktad?r. G?zlemci koordinat sisteminin eksenleri etraf?ndaki d?nmeler α, β ve θ ile verilirse, o zaman YA ekseni etraf?nda saat ibreleri y?nünde β a??s? kadar d?nme i?in a?a??daki ba??nt?lar yaz?labilir (?ekil-2).P noktas? polar koordinat sisteminde ifade edilirse a?a??daki e?itlikler yaz?labilir:OA(ZA)(XA)(YA)P(Xt,Yt,Zt)P*(Xt,0,Zt)φ90-φρβ(Z'A)(X'A)rsinφrβOA(ZA)(XA)(YA)P(Xt,Yt,Zt)P*(Xt,0,Zt)φ90-φρβ(Z'A)(X'A)rsinφrβ?ekil-2 YA ekseni etraf?nda β kadarl?k d?nme.Buradan P noktas? matrissel olarak a?a??daki gibi ifade edilebilir :( 3 )G?zlemci koordinat sisteminin XA ve ZA eksenleri etraf?ndaki rotasyonlar? i?in de denklem (3)’e benzer ba??nt?lar yaz?labilir. B?ylece cisim uzay?ndaki P noktas? d?nü?ümden sonra PT (XT, YT, ZT) olarak denklem (4) ile verilebilir.( 4 )3. Paralel ?zdü?üm TeknikleriParalel izdü?üm y?ntemleri nesneleri 3B uzaydan 2B g?rüntü düzlemine paralel ???nlar boyunca izdü?ürür. Di?er bir deyi?le, ? do?rusundan ?' do?rusuna paralel izdü?üm, ? deki her bir P noktas?n?n ?' de Φ(P) noktas?na atand??? ?yle bir Φ e?lemesidir ki her bir nokta ve g?rüntüsünü birle?tiren do?rular birbirine paralel durmaktad?r.Paralel izdü?ümler dik (orthographic), aksonometrik (axonometric) ve e?ik (oblique) olmak üzere 3 ana s?n?fa ayr?l?rlar.2.1. Dik ?zdü?ümParalel izdü?üm y?ntemlerinden en basitidir. Ana prensibi, nesneyi ?evreleyen bir kutu varsay?m?na dayan?r. Bu kutunun 6 kenar?na nesnenin dik izdü?ümleri al?narak i?lem ger?ekle?tirilir. E?er nesne basit bir ?ekle sahipse 3 tane birbirine dik kenar kullanmak da yeterli olabilir. E?er nesne karma??k ve al???lmam?? bir ?ekle sahipse b?lgesel bak??lar kullan?labilir.?ekil-3 Dik izdü?üm ?rnekleri (a) 6 kenara (b) 3 kenara.E?er ?evreleyen kutunun bir kenar? xy düzlemi ise izdü?üm i?lemi sadece z bile?eninin silinmesiyle ger?ekle?tirilebilir Benzer ?ekilde, di?er eksenler silinerek farkl? izdü?ümler de elde edilebilir.Dik izdü?ümlerin en büyük avantaj? a?? ve uzunluk bilgisinin korunmas?d?r. Bu yüzden teknik ?izim yapanlar taraf?ndan yayg?n olarak kullan?lmaktad?r.2.2. Aksonometrik ?zdü?ümDik izdü?üm nesnenin sadece tek bir yüzünü g?stermektedir. Bu yüzden 3 veya 6 izdü?üm ger?ekle?tirilir. Her bir izdü?üm detayland?r?labilir ve o yüz i?in ?ekli iyi temsil edebilir, fakat nesnenin geri kalan? hakk?nda bilgi vermez. Bundan dolay? dik izdü?ümleri yorumlamak deneyim gerektirir. Bu sorunu ??zmek i?in daha kolay anla??labilir ve ?ekli tek bir g?rüntü ile daha fazla yüzünü g?stererek iyi temsil edebilecek izdü?ümler dü?ünülmü?tür. Bunun i?in, perpektif d?nü?ümden daha basit, izdü?üm ile ger?ek dünya koordinatlar? aras?nda uyumu olan ve uzaktaki nesneleri kü?ük g?stermeyen bir izdü?üm y?ntemi geli?tirilmi?tir.?in izdü?ümü olarak da adland?r?lan bu y?ntem ufuk noktas?n?n sonsuzda oldu?u bir perspektif izdü?üm y?ntemi olarak dü?ünülebilir. Paralel do?rular perspektif izdü?ümdeki gibi ufuk noktas?nda birle?mez, paralel devam eder.?ekil-4 Aksonometrik izdü?üm ?rnekleri (a) trimetric (b) dimetric (c) isometric.Bu izdü?üm y?ntemi isometric, dimetric ve trimetric olmak üzere 3 s?n?fa ayr?l?r. Isometric izdü?üm, en yayg?n kullan?lan aksonometrik izdü?üm olup temel kenarlar veya eksenlerin izdü?üm düzleminin normali ile e?it a?? yapt??? bi?imidir. Dimetric izdü?ümde 3 temel nesne ekseninden 2’si izdü?üm düzleminin normali ile e?it a?? yapmaktad?r. Trimetric’te ise bütün a??lar birbirinden farkl? olmaktad?r.2.3. E?ik ?zdü?ümE?ik izdü?üm, izdü?üm ???nlar?n?n g?rüntü düzlemine dik gelmedi?i paralel izdü?ümün ?zel bir durumudur. Aksonometrik izdü?ümde kar??dan bak?ld???nda derinlik bilgisi g?zükmemekteydi. E?ik izdü?ümde ???nlar e?ik yolland???ndan g?rüntü düzlemine paralel duran bir cisim 3 boyut bilgisi ile (geni?lik, yükseklik ve derinlik) g?rülmektedir. E?er cisim g?rüntü düzlemine paralel durmazsa ger?ek boyutlar?/?l?üleri hesaplamak i?in ek i?lem yap?lmas? gerekmektedir.?ekil-5 E?ik izdü?üme bir ?rnek.4. Perspektif ?zdü?üm?nsan g?zü bir manzaraya bakt??? zaman uzaktaki nesneleri yak?ndaki nesnelere g?re daha kü?ük g?rür ve paralel do?rular? ufukta birle?iyormu? gibi g?rür. Bu, perspektif olarak adland?r?l?r ve daha ger?ek?i g?rüntülerin üretilmesini sa?lar. Paralel izdü?üm y?ntemlerinde ?l?ümlerin do?rulu?unun korunmas?na kar??n bu ?zellikler bulunmamaktad?r.Perspektif izdü?üm ?u ?ekilde ger?ekle?tirilir: Bir cismin tüm noktalar? g?rüntü düzlemine izdü?ürülür. ?zdü?üm hatlar? g?rüntü düzlemini keserek g?zlem noktas?na ula??r. G?rüntü koordinat sisteminin merkezi genellikle g?rüntü düzleminin merkezi ile uyu?acak ?ekilde ve bak?? noktas?ndan bu merkeze gelen hat g?rüntü düzlemine dik olacak ?ekilde se?ilir.(ZA)OA(XA,YA,ZA)(XA)HWD(ZS)(XS)XTZTP'(0,YT,ZT)P(XT,YT,ZT)(YA)(XS)(ZS)ZSXS(ZA)OA(XA,YA,ZA)(XA)HWD(ZS)(XS)XTZTP'(0,YT,ZT)P(XT,YT,ZT)(YA)(XS)(ZS)ZSXS?ekil-6 Perspektif ProjeksiyonG?zlemci, g?zlemci koordinat sisteminin merkezinde oturmakta ve g?rüntü düzleminden D kadar uzakl?kta bulunmaktad?r (?ekil-6). Nesne noktalar?na kar?? dü?en g?rüntü noktalar? benzer ü?genler vas?tas?yla kolayl?kla belirlenebilir.( 5 )G?rüntü düzlemi olarak ekran kullan?l?rsa g?rüntü noktalar?n?n kolayca hesaplanabilmesi i?in koordinatlar?n pozitif olmas? gerekmektedir. Ayr?ca ekseninin sa?a do?ru ekseninin de ekran?n alt?na do?ru olmas? g?rüntü noktalar?n?n koordinat de?erlerinin raster tarama kural?na uygun olmas? i?in yararl?d?r. Yeni düzenleme ile (5) denklemi a?a??daki gibi yaz?labilir.( 6 )5. Ters Perspektif D?nü?ümTers perspektif d?nü?üm, normal perspektif d?nü?ümün ters y?nde uygulanarak, ekran üzerindeki bir noktan?n cisim koordinat sistemine d?nü?ümünü gerektirir. ?ekil-1'deki P(X, Y, Z) noktas? ?u ?ekilde ifade edilebilir: vekt?rü g?zlemci koordinat sistem merkezinin cisim koordinat sistemine g?re konumunu belirler. Bu nedenle herhangi bir rotasyona u?ramaz. vekt?rü ise P noktas?n?n g?zlemci koordinat sisteminin merkezine g?re yeri oldu?u i?in ü? ayr? rotasyona tabidir.Ters d?nü?üm uygulanarak ?u sonu? elde edilebilir.O zaman vekt?rü a?a??daki ?ekilde yeniden yaz?labilir: vekt?rü, ve g?zlemci koordinat merkezine g?re g?rüntü pikselinin yeri P aras?nda a?a??daki ili?ki olu?turularak ekran koordinatlar? olarak ifade edilebilir.( 7 )Bu formülle 3 boyutlu dünya koordinatlar?n? 2 boyutlu ekran koordinatlar?ndan elde edebilmek i?in bir bilinmeyenin lineer ba??ml? yap?lmas? veya do?rudan verilmesi gerekir. Di?er bir deyi?le bu y?ntem i?lemsel olarak basit olmas?na kar??n x=5, y2+z2=r2 gibi formülü bilinen yüzeyleri kaplayabilmektedir. ?rnek olarak Z=0 yüzeyini (X-Y düzlemi) ele alal?m. Her bir ekran koordinat? i?in (7) nolu denklemde Z=0 yaz?larak K sabiti bulunur. Bu, ekran üzerindeki her bir noktan?n cisim koordinat sistemindeki büyüklü?ü aras?ndaki ili?kiyi ifade eder. Daha sonra K sabiti yerine yaz?larak X ve Y de?erleri hesaplan?r. B?ylece ekrandaki her bir pikselin dünyadaki konumu hesaplan?r. Burada bulunan (X, Y, Z) de?erleri bize ters perspektif d?nü?ümün sonucunu verir.Ekran koordinatlar?n?n Xs ve Zs düzleminde do?rusal olarak taranmas? yerine a??sal tarama da ger?ekle?tirilebilir. Bu durumda (7) denklemi ?u ?ekilde de?i?ikli?e u?rar:(8)Burada λ yatay eksendeki tarama a??s?n?, γ da dikey eksendeki tarama a??s?n? ifade etmektedir. 6. Doku Kaplama (Texture Mapping)Bilgisayar grafiklerinde bir cismin yüzey ayr?nt?lar? doku olarak adland?r?l?r. Tu?lalardan ?rülmü? büyük bir duvara yeterli uzakl?ktan bakt???m?z zaman duvardaki her bir tu?lay? bir doku eleman? olarak dü?ünebiliriz. Ama bu duvara yak?ndan bak?ld???nda tu?lalar art?k ayr? cisimlerdir ve cisim üretme teknikleri ile üretilmelidir. B?yle yüzey ayr?nt?lar?n?n cisim üretme teknikleriyle üretilmesi ger?ek-zamanl? sistemler i?in fazla hesaplama gerektirdi?inden uygun de?ildir. Doku, cisimlere do?al g?rünüm kazand?r?r. Doku, cisme yap??t?r?lmal? ve cisimle ayn? d?nü?ümleri ge?irmelidir. Dokunun d?nü?ümü, doku elemanlar?n?n (?imenli ortamda otlar?n veya a?a?ta yapraklar?n) d?nü?ümünü gerektirir. Doku 2-boyutlu veri dizileridir. Bu veriler renk veya parlakl?k bilgisi olabilir.Doku kaplamay? maharetli bir i? yapan as?l konu, dokular?n d?rtgensel olmayan b?lgelere de uygulanabilmesi olmu?tur. Doku, farkl? d?nü?ümlerin ?okgenin g?rünü?ü üzerindeki etkilerini kar??layacak ?ekilde bozulmaya u?rar. Boyu bir do?rultuda uzarken, di?er do?rultuda k?salabilir. D?ndürüldü?ü i?in orjinalinden farkl? g?rünebilir. Dokunun büyüklü?üne, d?rtgenin bozulmas?na ve ekrandaki g?rüntüye ba?l? olarak, piksellerin baz?lar? bir fragmandan fazlas?na e?lenebilir, baz? fragmanlar da birden ?ok piksel taraf?ndan ?rtülebilir.Doku kaplama bir doku g?rüntüsünün tekrarlanmas? ile yap?labilece?i gibi tek bir doku g?rüntüsünün bir yüzeye lineer ba??nt?larla gerilmesi ile de yap?labilir.Ters perspektif d?nü?üm y?ntemiyle doku üretiminde doku ?rüntüsünün karma??kl??? hesaplama miktar?n? de?i?tirmez. ?ncelikle ekrandaki her bir pikselin ger?ek dünyadaki kar??l??? bulunur. Sonra istenilen bir yakla??mla doku bu yüzey üzerine kaplan?r. ?rne?in z=a yüzeyi kaplanacak ise x ve y de?erlerinin do?rudan kullan?lmas? mant?kl? olur. Bu de?erler (x, y), dokunun en ve boyuna g?re mod i?lemine tabi tutulur. Elde edilen doku konumlar?ndan renk/parlakl?k bilgisi al?narak ekrana bas?lmas?yla doku kaplama ger?ekle?tirilmi? olur. Fakat yukar?da da bahsedildi?i üzere bir noktaya birden ?ok doku noktas?ndan olu?an bir b?lge kar??l?k geldi?inde ?rtü?me (aliasing) problemi ortaya ??kar (?ekil-7.a). Bunu ?nlemek i?in ilgili b?lgedeki piksellerin ortalama renk/parlakl?k bilgisi al?nmal?d?r. Burada ortaya ??kabilecek problem i?lem karma??kl???n?n artmas?d?r. Mipmapping ad? verilen y?ntemle doku piramit yap?da de?erlendirilerek i?lem yükü hafifletilebilmektedir. Literatürde bundan ba?ka bir?ok ?rtü?me ?nleme (anti-aliasing) y?ntemi bulunmakta olup burada detayland?r?lmayacakt?r. (a)(b)?ekil-7 Doku kaplamada ?rtü?me problemi (a) ?rtü?me ?nlenmi? (b) ?rtü?me problemli g?rüntü7. Deney Haz?rl???D?nmede kullan?lan formüllerin ??kar?l???n? inceleyiniz.Quaternion’lar kavram?n? ara?t?r?n?z ve d?nmede kullan?m?n? inceleyiniz.Paralel izdü?üm y?ntemlerini kavray?n?z.Perspektif/ters perspektif d?nü?üm ve izdü?üm kavramlar?n? anlamaya ?al???n?z.?rtü?me y?ntemlerinden mipmapping hakk?nda ara?t?rma yap?n?z.A?a??daki sorunun ??zümünü ara?t?r?n?z :(x, y, z) cisim uzay?ndaki bir küre dilimi y ekseni etraf?nda -45 derece ve x ekseni etraf?nda +35 derece d?ndürüldükten sonra ortografik (dik) izdü?üm kullan?larak 32x32 piksellik bir (Px, Py) g?rüntü uzay?nda g?rüntülenmektedir. U, w düzlemindeki 64x64 piksellik basit bir a? (grid) uygun bir d?nü?üm ile bu küre dilimi üzerine yerle?tirilmek isteniyor. 32x32 piksellik g?rüntü uzay?na kar??l?k dü?en cisim uzay? penceresinin , oldu?u varsay?lmaktad?r. Her piksel sol alt k??esinin koordinatlar? ile tan?mlanmaktad?r. Px=22 Py=22 pikselinin 64x64 piksellik u, w uzay?ndaki konumunu bulmak i?in:(Px, Py) piksel de?erleri ile (x’, y’, z’) koordinatlar? aras?ndaki ge?i?i sa?layan ba??nt?lar? bulunuz.Transformasyon matrisini kullanarak (x, y, z) koorinatlar?n? hesaplay?n?z.(Px, Py) pikseline ili?kin u, w koordinatlar?n? hesaplay?n?z.8. Deney Tasar?m? ve Uygulamas?Rotasyon formüllerinin olu?umunu g?steriniz.Paralel izdü?üm türlerinin nas?l olu?turuldu?unu ve nerelerde kullan?ld???n? kavray?n?z.Dik (ortografik) izdü?üm ile yar?m küre üreterek doku ile kaplay?n?z.Perspektif d?nü?üm ile silindir yüzeyi kaplama kodlar?n? yaz?n?z.Ters perspektif d?nü?üm mant??? ile silindir yüzeyini kaplay?n?z.Z=0 yüzeyini ters perspektif d?nü?üm ile kaplayacak kodlar? yaz?n?z.Ayn? yüzeyi a??sal tarama mant??? ile kaplay?n?z.Bu yüzey i?in ?rtü?me ?nleme kodlar?n? geli?tiriniz.Deneye haz?rl?k k?sm?ndaki ?rnek soruda belirtildi?i gibi dik izdü?üm ile üretti?iniz yar?m küreden bir küre dilimi se?erek bu küre dilimine dokuyu geriniz.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIDirectX ile Tank Oyunu1. Giri?Oyunlar, Bilgisayar Grafikleri’nin en popüler uygulama alanlar?ndan biridir. Bu deneyde DirectX 12 API ile basit bir 3D Tank Oyununun nas?l geli?tirilebilece?inden bahsedilecektir. 2. Tank Oyunu Fonksiyonlar? ve G?revleriGenel olarak oyunlar 3 temel fonksiyondan olu?urlar:OnInit(): Oyuncular ve oyun ortam? bufferlara (vertex, index, texture) yüklenir. Oyunla ilgili baz? matris ve vekt?rler ilk de?erlerine setlenir. OnUpdate(): Klavye/mouse etkile?imlerine g?re oyuncular?n konumlar? güncellenir. Oyuncular?n birbirleriyle (veya ortamla) olan etkile?imlerine g?re ?rne?in birbirlerine ate? etmi?lerse (veya duvara yakla?m??larsa) isabet (kesi?im) testleri yap?l?r. OnRender(): Oyuncular güncel konumlar?na ?izilir veya vurulan oyuncu art?k ?izilmez.OnInit(), uygulama ?al??t?r?ld???nda ilk ko?an ve bir kere ko?an fonksiyondur. Dolay?s?yla oyuncular?n, oyun ortam?n?n yüklenmesi gibi uygulamada bir kez yap?lacak i?lemlere dair kodlar burada yaz?lmal?d?r. Ayr?ca vekt?rlere/matrislere ilk de?er atama da burada yap?l?r. Tank oyununda oyun ortam?n? olu?turan zeminin, duvarlar?n, oyuncular olan tanklar?n OnInit() fonksiyonunda kendilerine ait k??e noktas?, doku ve normal koordinatlar? bilgilerini i?eren .obj format?nda model dosyalar? okunup ilgili vertex/index/texture bufferlar?na yüklenir. OnInit() fonksiyonunda ayr?ca Eye, At ve Up vekt?rleri ilgili vekt?r de?erlerine setlenir bu vekt?rler kullan?larak XMMatrixLookAtLH() ile View matrisi setlenir. OnInit() fonksiyonunda son olarak, g?rü? a??s? (field of view angle), pencerenin yatay/dü?ey oran? (aspect ratio), yak?n ve uzak z-düzlemlerini (near/far z-planes) parametre olarak alan XMMatrixPerspectiveFovLH() ile perspektif izdü?üm (projeksiyon) matrisi setlenir.Eye = XMVectorSet(0.0f, 4.0, -30.0, 0.0);At = XMVectorSet(0.0f, 0.0, 1.0, 0.0);Up = XMVectorSet(0.0f, 1.0, 0.0, 0.0);g_View = XMMatrixLookAtLH(Eye, At, Up);g_Projection = XMMatrixPerspectiveFovLH(XM_PIDIV4, 1280/720, 0.01, 1000);OnUpdate() fonksiyonunda klavye/mouse etkile?imine g?re ilgili de?i?kenler setlenmektedir. ?rne?in W,A,S,D tu?lar? ve mouse ile Eye, At vekt?rleri ve dolay?s?yla g_View matrisi güncellenmektedir (853. sat?r). B?ylece 3D ortamda mouse do?rultusunda tu?larla ilerlenmektedir. Tank?n konumu (Tank_Position) da 3rd Person Shooter tarz? olarak bak?? noktas?ndan (Eye) hareket do?rultusunca (At-Eye) 3 birim ilerisinde ve 2 birim a?a??s?nda olacak ?ekilde ??yle hesaplanmakd?r (864. sat?r):XMVECTOR Tank_Position = Eye + 3 * (At - Eye) + XMVectorSet(0, -2, 0, 0); Tank dü?mana (enemy) SPACE tu?u ile ate? etmektedir. Bu tu?a bas?ld???nda namlunun ucundan top mermisi ??kmakta ve dü?mana do?ru hareket etmektedir. Merminin ba?lang?? noktas? namlunun ucu olacak ?ekilde World matrisi a?a??daki kodla setlenir (876-890 aras?):Ro_Tank_Missile = Eye + XMVectorSet(0, -1, 0, 0); Rd_Tank_Missile = XMVector3Normalize(At - Eye);if (FireTankMissile){XMVECTOR initialPosition = Ro_Tank_Missile + (3+2.5)*Rd_Tank_Missile;XMFLOAT4 initialPosition_F4; XMStoreFloat4(&initialPosition_F4, initialPosition);g_World_Missile = g_World_Tank;XMFLOAT4X4 g_World_Missile_4x4; XMStoreFloat4x4(&g_World_Missile_4x4, g_World_Missile);g_World_Missile_4x4._41 = initialPosition_F4.x;g_World_Missile_4x4._42 = initialPosition_F4.y;g_World_Missile_4x4._43 = initialPosition_F4.z;g_World_Missile = XMLoadFloat4x4(&g_World_Missile_4x4);}initialPosition = Ro_Tank_Missile + ( 3 + 2.5 ) * Rd_Tank_Missile ile merminin namlu ucundaki konumu hesaplan?r. Eye + XMVectorSet(0, -1, 0, 0) ile merminin ba?lang?? noktas? hesaplan?r. Namlunun yerden yüksekli?i 1’i elde edebilmek i?in bak?? noktas?n?n yüksekli?i 2’den 1 ??kar?lm??t?r. (3+2.5)*Rd_Tank_Missile eklendi?inde ba?lang?? noktas? namlunun ucu olur. Burada 2.5 tank?n merkezinden namlu ucuna kadar olan mesafedir. Tank bak?? noktas?ndan 3 birim ileride oldu?undan ayr?ca 3 eklenmi?tir. Rd_Tank_Missile merminin do?rultusudur. Merminin 4x4 World matrisinin (g_World_Missile) ?teleme (translation) bile?enleri _41, _42 ve _43 merminin ba?lang?? noktas?n?n x, y ve z de?erlerine setlenerek ba?lang?? noktas? olarak namlunun ucuna ?izilmesi sa?lan?r. SPACE tu?una bas?ld???nda FireTankMissile boolean de?i?keni false TraceTankMissile true yap?larak merminin hareket edebilmesi sa?lan?r. Merminin hareketi i?in World matrisinin _41, _42 ve _43 bile?enleri yukar?dakine benzer a?a??daki kodla setlenir (894-901):if (TraceTankMissile){XMStoreFloat4x4(&g_World_Missile_4x4, g_World_Missile);g_World_Missile_4x4._41 += 0.5 * Rd_Tank_Missile_Float4.x;g_World_Missile_4x4._42 += 0.5 * Rd_Tank_Missile_Float4.y;g_World_Missile_4x4._43 += 0.5 * Rd_Tank_Missile_Float4.z;g_World_Missile = XMLoadFloat4x4(&g_World_Missile_4x4);}Merminin dü?mana isabet edip/etmedi?i “Ray Tracing” ile test edilir (916-941). Ro_Tank_Missile ba?lang?? noktas? Rd_Tank_Missile do?rultusuna sahip ???n ile ortamdaki tank, duvarlar ve zemin aras?nda kesi?im testleri yap?l?r. Mininum t uzakl???na sahip cisim dü?man tank? ise ve mermi dü?man tank?na de?mi?se dü?man?n render edilip/edilmeyece?ini belirleyen RenderEnemy boolean de?i?keni false yap?larak dü?man ?ldürülür yani ?izilmez. renderTankMissile da false yap?larak mermi de art?k ?izilmez. Dü?man tank? canland?rmak (tekrar ?izmek) i?in sol mouse butonuna t?klan?r.Merminin dü?man tank?na de?ip de?medi?inin belirlenmesi i?in kesi?im testlerinden d?nen en yak?n cismin nearest.t uzakl??? ile dü?man üzerindeki kesi?im noktas?n?n konumu RedDot_Position hesaplan?r (923). RedDot_Position ile merminin o andaki konumu Missile_Position‘?n fark vekt?rünün boyu Missile_RedDot_Distance ?ok kü?ük bir de?erin (0.5) alt?na dü?ünce merminin dü?mana isabet etti?i sonucuna var?l?r. Missile_RedDot_Distance ??yle hesaplan?r: XMVectorGetX(XMVector3Length(RedDot_Position - Missile_Position))XMVector3Length() asl?nda skaler bir de?er d?ndürmelidir ama DirectX’in matematik kütüphanesindeki vekt?rel i?lem fonksiyonlar?n?n tamam? vekt?r d?ndürmektedir. D?nen bu vekt?rden ?rne?in yukar?daki gibi fark vekt?rünün boyunu okuyabilmek i?in XMVectorGetX() kullan?lm??t?r. Bunun yerine XMVectorGetY() ya da XMVectorGetZ() de olabilirdi. DirectX’in matematik kütüphanesi fonksiyonlar?na buradan eri?ebilirsiniz. Oyunda kullan?lan fonksiyonlar “ HYPERLINK "(v=vs.85).aspx" Geometric Functions” ve “ HYPERLINK "(v=vs.85).aspx" Transformation Functions” linklerindedir.Oyun ortam?nda ilerlerken duvarlar?n i?inden ge?ilmemesi i?in de Ray Tracing y?ntemi kullan?labilir. OnUpdate() fonksiyonunda W ve S tu?lar?n?n test edildi?i if(){} bloklar?nda ???n?n ba?lang?? noktas? ve do?rultusu Ro ve Rd vekt?rleri ?rne?in W i?in a?a??daki gibi setlenip IntersectTriangle()‘dan d?nen t uzakl??? belli bir de?erin alt?na inince hareket engellenir. Ba?lang?? de?eri true olarak setlenen bool bir de?i?ken t belli bir de?erin alt?na inince false yap?l?r. moveBackForward+=speed ve moveBackForward-=speed güncellemeleri bu de?i?kene ba?l? olarak (true ise) yap?l?r: XMVECTOR Ro = Eye;XMVECTOR Rd = XMVector3Normalize(At - Eye); // S i?in : (Eye - At)OnRender() fonksiyonunda s?ras?yla zemin, duvarlar, oyuncuyu temsil eden tank, o tank?n ate? etmesi sonucu yollanacak mermi (tank missile), ni?ang?h (reddot), dü?man tank? (enemy) ve son olarak dü?man tank?n?n ate? etmesi sonucu yollanacak mermi (enemy missile) kendileri i?in OnUpdate()’te yap?lan m_constantBufferData.mWorld constant buffer setlemelerine g?re transform edilip ?izilir.3. Deney Haz?rl???Sa? mouse butonu t?klan?lm?? olarak tutulurken zoom yap?lacak ve mousedan el ?ekildi?inde zoom ?ncesine d?nülecek ?ekilde 809 ve 814. sat?rlardaki if(){} bloklar?na gerekli kodlar? yaz?n?z. ?pucu Projeksiyon matrisinin g?rü? a??s? (FovAngleY) daha kü?ük bir de?ere (?rne?in XM_PI/12) setlenerek zoom yap?labilir. Duvar arkas?ndan ate? edildi?inde mermi duvar? delip ge?meyecek ?ekilde kodu güncelleyiniz. Oyun ortam?nda ilerlerken duvarlar?n i?inden ge?ilmemesi i?in ?nceki sayfan?n son paragraf?nda anlat?lan y?nteme g?re 751 ve 756. sat?rlardaki if(){} bloklar?na gerekli kodlar? yaz?n?z.Tank dü?mana ate? etti?inde mermi d?nerek ilerleyecek ?ekilde kodu güncelleyiniz.Tank dü?mana ate? etti?inde mermi dü?mana ula?ana dek namluyu oynatmamak gerekir. E?er oynat?l?rsa merminin y?nü de?i?ir ve kesi?im testleri merminin (namlunun) o anki do?rultusuna g?re yap?l?r. Programdaki bu hatay? düzeltiniz. Yani ate? ettikten sonra namlu oynat?lsa bile mermi ate? edilen do?rultuda ilerlesin.4. Deney Tasar?m? ve Uygulamas?Dü?man? temsil eden tank (enemy) bizim kontrol etti?imiz tanka (tank) ate? edip vuracak ?ekilde kodu güncelleyiniz. Basitten zora do?ru ad?m ad?m ilerlemek i?in ?ncelikle namluyu d?ndürmeksizin sanki d?nmü? ve hedefe kilitlenmi? gibi varsayarak ate? ettirebilirsiniz. Bunun i?in OnUpdate() fonksiyonunda 961. sat?rdan itibaren kod yazacaks?n?z. Ekleyece?iniz kodlar 876-941 aras?ndaki kodlara benzer olacakt?r. Yani biz dü?mana ate? etti?imizde ger?ekle?en olaylar?n benzerleri dü?man bize ate? etti?inde ya?anacakt?r. ?ncelikle if(FireEnemyMissile){} ve if(TraceEnemyMissile){} ?eklinde iki kod blo?u ekleyip bu bloklara s?ras?yla merminin ba?lang?? konumunun setlenmesi ve ilerlemesi i?in gerekli kodlar yaz?l?r:if(FireEnemyMissile){} i?inde merminin ba?lang?? noktas? namlunun ucu olarak setlenirken namlunun do?rultusu olan (0,0,1) vekt?rü namlunu boyu 2.5 ile ?arp?l?p dü?man mermisinin 4x4 World matrisinin (g_World_Enemy_Missile) ?teleme (translation) bile?enleri _41, _42 ve _43 setlenir. Bizim kontrol etti?imiz tank i?in ayr?ca Ro_Tank_Missile de?i?kenini de kullanm??t?k. ?ünkü biz 3D ortamda hareket ediyoruz. Dü?man tank? ise sabit oldu?undan dü?man?n konumu (0,0,0) olarak varsay?labilir ve dolay?s?yla merminin konumu hesaplan?rken Ro‘ya gerek yoktur. if(TraceEnemyMissile){} i?inde mermi ilerletilmek üzere hareket do?rultusu belirlenmelidir. Bizim kulland???m?z tankta merminin y?nü XMVector3Normalize(At-Eye) ile belirleniyordu. Bu sefer mermi y?nü bizim kulland???m?z tank?n konumundan merminin konumu ??kar?larak bulunacakt?r. ?lgili World matrislerinin _41, _42 ve _43 bile?enlerinin farklar? XMVectorSet() ile bir vekt?re setlenip XMVector3Normalize() ile normalize edilerek y?n belirlenebilir. Herhangi bir tu?a (?rne?in ‘F’) bas?ld???nda FireEnemyMissile boolean de?i?keni false TraceEnemyMissile true yap?larak mermi ilerletilir.Dü?man tank?ndan ate?lenen merminin bizi vurup/vurmad??? da benzer ?ekilde test edilbilir. Merminin ba?lang?? noktas? if(FireEnemyMissile){} i?inde, do?rultusu da if(FireEnemyMissile){} i?inde hesaplanm??t?. testIntersections() fonksiyonuna bu vekt?rler Ro, Rd de?erleri olarak verilir. 3. parametre de bizim tank?n World matrisidir. testIntersections() fonksiyonu IntersectTriangle() fonksiyonunu zemin, duvarlar ve tank i?in ko?ar ve (varsa) kesi?imleri intersect türünden structlar olarak intersections adl? STL vekt?re ekler. intersect struct’? t uzakl???na ek olarak isWall ve isEnemy olmak üzere iki tane boolean de?i?ken tutar. testIntersections() fonksiyondaki kesi?im testlerine g?re duvarla kesi?im varsa isWall, tankla kesi?im varsa da isEnemy true yap?l?r. nearestObject() fonksiyonu en yak?n kesi?imi intersect olarak d?ndürür. E?er isEnemy=true ise (burada enemy bizim kontrol etti?imiz tankt?r) ve ni?an al?nan nokta (RedDot_Position) ile merminin o anki konumu aras?ndaki uzakl?k ?ok kü?ük bir de?erin alt?na dü?mü?se renderTank ve renderEnemyMissile false yap?l?r yani art?k render edilmezler. Deney uygulamas?n?n bu noktaya kadar?na ait videoyu buradan izleyebilirsiniz.?imdi s?ra geldi dü?man?n d?nerek hedefe (bize) kilitlenip ate? etmesine. Dü?man tank?n? d?ndürmek üzere g_World_Enemy matrisi 0.02 gibi kü?ük bir a?? ile y-ekseninde d?nme yapacak ?ekilde XMMatrixRotationY(0.02) matrisi ile ?arp?larak güncellenir. (0,0,1) ba?lang?? de?erine setlenmi? namlu do?rultu vekt?rü, g_World_Enemy matrisine g?re XMVector3TransformNormal() fonksiyonu ile transform edilerek güncellenir. Yukar?da da anlat?ld??? gibi World matrislerinin _41, _42 ve _43 bile?enlerinin farklar? XMVectorSet() ile bir vekt?re setlenip XMVector3Normalize() ile normalize edilerek dü?man? temsil eden tanktan bizim tanka do?ru olan vekt?r hesaplan?r. Bu vekt?r ile XMVector3TransformNormal() ile transform edilen vekt?r aras?ndaki a??n?n kosinüsü XMVector3Dot() ile hesaplan?r. Bu de?er 1 olana kadar (veya >0.9999) yani transform edilen namlu do?rultu vekt?rü ile dü?mandan bize do?ru olan vekt?r aras?ndaki a?? 0 derece olana (bize kilitlenene) kadar bu paragraftaki i?lemler tekrarlan?r. Deney uygulamas?n?n bu noktaya kadar?na ait videoyu buradan izleyebilirsiniz. 5. Deney RaporuKaynak kodlardaki Rapor.docx adl? ?ablon belge deney saatine kadar grup ad?na doldurulup Deney Haz?rl??? olarak istenen güncellemeleri i?eren D3D12TankOyunu.cpp kod dosyas? ile birlikte ahmet.ulu@ktu.edu.tr adresine e-mail ile yollanacakt?r.KARADEN?Z TEKN?K ?N?VERS?TES?B?LG?SAYAR M?HEND?SL??? B?L?M?B?LG?SAYAR GRAF?KLER? LABORATUARIPürüzlü Yüzey ?retimi1. Giri?Yüzeylerin ?zel bir doku kaplama yap?larak pürüzlü g?rünmesini sa?layan 2 temel y?ntem vard?r : 1.Bump Mapping, 2.Parallax Mapping. Bump Mapping y?nteminde ?ekil.1(a)’da kaplanacak dokudaki renk de?i?imlerinden elde edilen (b)’deki "Normal Map" dokusu kullan?l?r. Bu normal mapdeki (R,G,B) de?erleri yüzeyin normalinin (X,Y,Z) de?erleri olarak al?n?r. Yüzeyin diffuse ve specular renk bile?enleri yüzey normaline ba?l? olarak hesapland???ndan (0,1,0) gibi tek bir normal de?erine sahip düzlemsel bir yüzeye bump mapping y?ntemine g?re doku kapland???nda herbir piksel i?in normalmap dokusundan okunan farkl? normallerle hesaplanan renk de?erleri sanki yüzlerce farkl? poligona sahip pürüzlü bir yüzey varm?? hissi verecektir. Parallax Mapping y?ntemi (R,G,B,A) renk bile?enlerinden A-alpha parlakl?k bile?eninden elde edilen ?ekil.1(c)’deki "Height Map" dokusu ile yüzeyin yüksekli?ini de?i?tirerek g?rüntüler ve b?ylece tümsekler/?ukurlar olu?ur. Bump mappingden farkl? olarak yüzeyin koordinatlar? y-ekseni boyunca piksel mertebesinde ger?ekten artar/azal?r. Dolay?syla elde edilen pürüzlü yüzeylerdeki tümsekler/?ukurlar, bump mapping y?ntemine nazaran daha fazlad?r. Hatta Parallax mapping y?nteminde bu derinlik de?erini ayarlamak bile mümkündür.Deneyde Jason Zink’in, "A Closer Look At Parallax Occlusion Mapping" ba?l?kl? makalesi ve ?rnek HLSL program?ndan yararlan?larak geli?tirilen DirectX 11 uygulamas? ile yukar?da bahsedilen ?zel doku kaplama y?ntemleri incelenecektir. (a)(b)(c)?ekil 1: (a)’daki dokudan elde edilen (b) Normal Map ve (c) Height Map dokular?Bilindi?i gibi DirectX uygulamalar?nda .cpp uzant?l? program dosyas?nda ?izilecek grafi?i olu?turan poligonlara ait koordinat, normal, doku bilgileri ve World, View, Projection matrisleri setlenir. Bu bilgiler kullan?larak en son ekrana ?izilecek ?ekle ait renk de?erleri .fx uzant?l? HLSL program?ndaki Vertex ve Pixel shader fonksiyonlar? arac?l???yla hesaplan?r. Uygulamada üzerine doku kaplanacak yüzey düzlemsel oldu?undan .cpp program?nda iki ü?gen ile temsil edilmi? ve normal, doku koordinatlar? gerekti?i gibi setlenmi?tir. 2. Parallax Mapping Y?ntemiParallax mapping y?ntemi ile pürüzlü yüzey üretilirken ilk i?lem bak?? noktas?ndan eye ???n? yollamakt?r. Bu ???n?n yüzeye kaplanacak dokuda hangi renk ile kesi?ti?inin belirlenebilmesi i?in 3D uzaydan 2D (u,v) doku uzay?na bir d?nü?üm yap?lmal?d?r. Bu d?nü?üm Normal (0,1,0), Tangent (1,0,0) ve bu ikisinin vekt?rel ?arp?mlar? ile hesaplanan Binormal (0,0,-1) vekt?rlerinden elde edilen matris ile ???n?n do?rultusu ?arp?larak HLSL program?ndaki Vertex shader fonksiyonunda yap?l?r. 2D doku uzay?na izdü?ürülen ???n?n dokuda kesi?ti?i koordinatlardaki rengin alpha de?erine ve gerekirse ???n?n izdü?üm do?rultusu vCurrOffset boyunca ba?ka alphalara ba?l? olarak Parallax Mapping y?nteminin nas?l ger?eklendi?i a?a??da verilen Pixel shader kodu ve ?ekil.2 üzerinden anlat?lacakt?r:while d?ngüsünden ?nce SampleGrad fonksiyonu IN.texcoord + vCurrOffset parametresi ile ?a?r?lm??t?r. Burda IN.texcoord doku koordinat?na eklenen vCurrOffset, ?ekil.2’den de g?rüldü?ü gibi doku üzerinde ilerlemede kullan?lan do?rultu vekt?rüdür. Hesaplanmas? dolayl? yoldan eye vekt?rüne dayan?r. SampleGrad fonksiyonunun sonundaki .a ifadesi ile NormalHeightMap isimli dokudan fCurrSampledHeight alpha de?eri okunur. Bu de?er ile bak?? noktas?ndan yollanan eye ???n?n?n, ba?lang?? de?eri 1‘e setlenmi? yüksekli?i fCurrRayHeight kar??la?t?r?l?r. fCurrSampledHeight < fCurrRayHeight yani dokudan okunan alpha, ???n?n yüksekli?inden kü?ük oldu?u müddet?e fCurrRayHeight de?eri fStepSize kadar azalt?l?r. I??n?n yüksekli?i de?i?tik?e yeni okunan alphalar?n de?erleri ?ekil.2’deki Height Map e?risi ile temsil edilmi?tir. fStepSize * vMaxOffset ile vCurrOffset vekt?rü güncellenerek yeni fCurrSampledHeight de?eri okunur. Dokudan okunan alpha de?eri ???n?n yüksekli?inden >= oldu?unda d?ngüden ??k?l?r. Bu nokta ayn? zamanda ???n?n Height Map e?risiyle kesi?ti?i noktad?r. Dokuda bu noktaya kar??l?k gelen renk ekrana bas?larak parallax mapping y?ntemi ger?eklenmi? olur. ?ekilde doku kaplanacak yüzey polygon surface ile temsil edilmi?tir. Pürüzlü yüzeyin olu?mas?, ???n?n polygon surface ile kesi?ti?i nokta de?il, alpha bile?eninden elde edilen height map e?risi ile kesi?ti?i noktaya kar??l?k gelen doku koordinatlar?ndaki vFinalColor renginin g?rüntülenmesine dayanmaktad?r.fCurrSampledHeight = NormalHeightMap.SampleGrad( samLinear, IN.texcoord + vCurrOffset, dx, dy ).a;while ( fCurrSampledHeight < fCurrRayHeight ){fCurrRayHeight-= fStepSize;vCurrOffset += fStepSize * vMaxOffset;fCurrSampledHeight = NormalHeightMap.SampleGrad( samLinear,IN.texcoord + vCurrOffset, dx, dy ).a;}float2 vFinalCoords = IN.texcoord + vCurrOffset;float4 vFinalColor = ColorMap.SampleGrad( samLinear, vFinalCoords, dx, dy );float4 vFinalNormal = NormalHeightMap.SampleGrad(samLinear, vFinalCoords, dx, dy );vFinalNormal = vFinalNormal * 2.0f - 1.0f;float3 vAmbient= vFinalColor.rgb * 0.3f;float3 vDiffuse= vFinalColor.rgb * max(0.0f, dot( L, vFinalNormal.xyz )) * 0.7f;vFinalColor.rgb= vAmbient + vDiffuse;OUT.color = vFinalColor;?ekil 2: Alpha e?risi ve ???n?n yüksekli?ine ba?l? olarak piksel renginin bulunmas? 3. Bump Mapping Y?ntemiGiri? b?lümünde de bahsedildi?i gibi Bump Mapping y?ntemi yüzey normalini “normal map” denilen ?zel bir dokudaki renk de?erleri olarak almaya dayan?r. Kaynak kodlardaki Textures klas?ründe bulunan dokulara dikkat edilirse HLSL’deki ColorMap i?in *_colormap.dds; NormalHeightMap i?in de *_normalmap.dds gibi iki doku vard?r. *_colormap.dds dokusundan hangi vFinalColor renginin okunaca??na parallax mapping y?ntemine g?re yukar?da anlat?ld??? gibi karar verilir. *_normalmap.dds dokusunu hem parallax mapping hem de bump mapping y?ntemi kullan?r. Ger?ekte *_heightmap.dds gibi bir doku yoktur. ?ünkü parallax mapping *_normalmap.dds ‘nin (R,G,B,A) bile?enlerinden A-alphay?; bump mapping de yukar?daki kod par?as?ndan da g?rüldü?ü gibi (R,G,B)‘yi kullan?r ve yeni yüzey normali vFinalNormal olarak al?r. B?ylece bump mapping y?ntemi de ger?eklenmi? olur. Her bir piksel i?in farkl? yüzey normali kullan?lmas? her bir pikselin i?in farkl? diffuse ve specular renk de?eri hesaplanaca?? anlam?na gelir. B?ylece yüzeyde pürüzler varm?? gibi g?rülür. *_normalmap.dds‘deki (R,G,B) de?erleri [0..1] aras? de?i?ti?inden 3D uzayda normalize edilmi? [-1..1] aral???na map etmek i?in vFinalNormal * 2.0 - 1.0 i?lemi yap?lm??t?r. ?rnek programda klavyenin sa?/sol tu?lar? fStepSize de?i?kenini; yukar?/a?a?? tu?u da yükseklik de?erini artt?r?p/azaltmaktad?r. Ayr?ca “Q”, “W” ve “E” tu?lar? ile de?i?ik dokular aras?nda ge?i? yapmak mümkündür. ?ekil 3: Specular renk bile?eni eklenmi? g?rüntü4. Deney Haz?rl????rnek program yaln?zca ambient ve diffuse renk bile?enlerini hesaplamaktad?r. ParallaxMapping11.fx’e gerekli kodlar? yazarak bunlara ?ekil.3’teki gibi specular renk bile?enini ekleyiniz. Bak?? noktas?na do?ru olan vekt?r olarak E vekt?rünü kullan?n?z. I??k kayna??ndan gelen vekt?r olarak da L vekt?rünü kullan?n?z. ParallaxMapping11.fx adl? kod dosyas?n? en ge? deney saatine kadar hem mehmetcemil@ adresine grup ad?na e-mail ile g?nderiniz hem de USB bellekte deneye getiriniz.5. Deney Sorular?Yüzey normali olarak vFinalNormal yerine yüzeyin kendi normali N kullan?lacak ?ekilde kodu güncelleyiniz ve ?ncekinden farkl? y?nlerini a??klay?n?z. ?rne?in iki g?rüntü aras?ndaki specular renk farkl?l?klar? neden olu?mu?tur?Yüzeyin kendi normali N kullan?l?rken yukar? tu?una sürekli bas?l?p yükseklik s?f?rland???nda olu?an g?rüntüyü yorumlay?n?z. Yükseklik s?f?r iken vFinalNormal‘e g?re ?izilen g?rüntü ile normal N al?nd???nda olu?an aras?ndaki fark?n sebebi nedir? ?rnek program hem parallax hem de bump mapping y?ntemini ger?eklemektedir. Sadece bump mapping y?nteminin etkisini veya sadece parallax mapping y?nteminin etkisini g?rmek i?in hangi de?i?iklikleri yapmak gerekir?6. Deney Tasar?m? ve Uygulamas?“0”, “1”, “2” ve “3” tu?lar?na bas?ld???nda ?ekil.4’teki g?rüntüler elde edilecek ?ekilde program? güncelleyiniz. G?rüntülerde : “0” : bump mapping yok, parallax mapping yok, “1” : bump mapping yok,parallax mapping var, “2” : bump mapping var, parallax mapping yok, “3” : bump mapping var parallax mapping var olarak ?zetleyebilece?imiz etkileri g?rüyoruz. ?pucu .cpp program?nda 24. sat?rdaki ConstantBuffer adl? struct’a int key de?i?keni ekleyiniz. 201. sat?rdaki WndProc() i?inde case 'E': ‘den sonra 4 tane daha case ekleyiniz ve bas?lan tu?a g?re key‘i setleyiniz. .fx program?n?n 12. sat?r?nda da .cpp’dekinin benzeri bir ConstantBuffer vard?r. Buna da bir int key de?i?keni ekleyiniz. .cpp’deki key‘in de?erinin .fx’teki e?de?erine otomatik aktar?ld???n? varsay?n?z. Bas?lan tu?un de?erini tutan key’e g?re PS() adl? pixel shaderda 100. sat?rdaki fParallaxLimit de?i?kenini 0’a setleyerek parallax mapping etkisini kald?rabilirsiniz. Bump mapping etkisini kald?rmak i?in de 200. sat?rdaki vFinalNormal de?i?kenini yine key‘e g?re setleyiniz. Program default olarak hem bump hem de parallax etkisini ger?ekledi?inden key=3 i?in .fx’te kod yazman?z gerekmiyor. Fakat .cpp’de bas?lan tu?a g?re key=3 setlemesini yapmal?s?n?z. Kaynak kodlar?n oldu?u klas?rde ?ekil.4’teki bump/parallax mapping modlar?n? i?eren bpModes.mp4 isimli video payla??lm??t?r.0 : bump yok, parallax yok1 : bump yok, parallax var2 : bump var, parallax yok3 : bump var, parallax var?ekil 4: bump/parallax mapping modlar?7. Deney RaporuDeney Raporunu, Rapor.docx adl? ?ablon belgeye g?re grup ad?na haz?rlay?p ParallaxMapping11.fx ile birlikte en ge? deney saatine kadar mehmetcemil@ adresine g?nderiniz. Mailin ba?l???na grubunuzu ve deneyin ismini yaz?n?z. Rapor ayr?ca printer ??kt?s? olarak deneye de getirilecektir. ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download