uEngine4 Ser\u00fcveni – BasicGLPainter – I<\/a><\/strong><\/span><\/p>\n Bir \u00f6nceki yaz\u0131mda GLPainter ile metin g\u00f6sterimi ve resim \u00e7izmeye y\u00f6nelik kabiliyetlere de\u011finmi\u015ftik. \u015eimdi, kalan hususlara de\u011finelim. Bunlardan ilki d\u00f6n\u00fc\u015f\u00fcmler, di\u011feri ise stencil operasyonlar\u0131.<\/p>\n D\u00f6n\u00fc\u015f\u00fcmler mevzusuna asl\u0131nda SDLPainter’da biraz de\u011finmi\u015ftim. SDL2 ile b\u00fct\u00fcn sahneyi veya ilgili nesneleri topyek\u00fcn ya da tek tek ta\u015f\u0131ma ya da d\u00f6nd\u00fcrme ya da boyutland\u0131rman\u0131n bir y\u00f6ntemi yok (detaylar i\u00e7in https:\/\/wiki.libsdl.org\/SDL2\/APIByCategory<\/strong><\/span><\/a> sayfas\u0131na g\u00f6z atabilirsiniz). Her ne kadar bu temel uygulamalar i\u00e7in \u00e7ok s\u0131k\u0131nt\u0131 olmasa da, harita ve benzeri uygulamalarda hayat\u0131n\u0131z olduk\u00e7a zorla\u015ft\u0131rabilmekte. GLPainter’\u0131n en b\u00fcy\u00fck avantajlar\u0131ndan birisi de bu transformasyonlar. Peki nedir bu d\u00f6n\u00fc\u015f\u00fcmler?<\/p>\n D\u00f6n\u00fc\u015f\u00fcmler asl\u0131nda bilgisayar grafiklerinin temelini olu\u015fturulan kavramlardan birisidir ve genel olarak 2B\/3B nesnelerin konum, y\u00f6n ya da boyutlar\u0131n\u0131 modifiye etmek i\u00e7in kullan\u0131lan matematiksel operasyonlard\u0131r. 2B temel bilgisayar grafikleri d\u00f6n\u00fc\u015f\u00fcmleri \u015funlard\u0131r:<\/p>\n bunlar\u0131ndan yan\u0131nda a\u015fa\u011f\u0131daki t\u00fcretilmi\u015f d\u00f6n\u00fc\u015f\u00fcmler de kullan\u0131lmaktad\u0131r:<\/p>\n B\u00fct\u00fcn bu operasyonlar matris i\u015flemleri arac\u0131l\u0131\u011f\u0131 ile ger\u00e7ekle\u015ftirilir ve her birine kar\u015f\u0131l\u0131k gelen matris g\u00f6sterimleri bulunmaktad\u0131r. 2B\/3B noktalar ile ifade edilen nesnelerin her bir noktas\u0131na bunlar uygulanarak, yukar\u0131da verilen i\u015flevler ger\u00e7ekle\u015ftirilir.<\/p>\n A\u015fa\u011f\u0131da, 2B bir nokta d\u00f6nd\u00fcrmenin grafiksel g\u00f6sterimini ve bundan matris formu nas\u0131l edece\u011fimiz g\u00f6sterece\u011fiz:<\/p>\n Yukar\u0131daki grafikte g\u00f6r\u00fclece\u011fi \u00fczere x ve y noktalar\u0131 a\u015fa\u011f\u0131daki \u015fekilde bulunabilir:<\/p>\n x<\/span>=<\/span>r<\/span>cos<\/span>(<\/span>\u03b1<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n <\/span><\/span><\/span><\/span>y<\/span>=<\/span>r<\/span>sin<\/span>(<\/span>\u03b1<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n d\u00f6nd\u00fcrme sonucu elde edilen x’ ve y’ noktalar\u0131 ise a\u015fa\u011f\u0131daki \u015fekilde bulunabilir:<\/p>\n x<\/span>\u2032<\/span><\/span>=<\/span>r<\/span>\u2032<\/span><\/span>cos<\/span>(<\/span>\u03b1<\/span>+<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n <\/span><\/span><\/span><\/span>y<\/span>\u2032<\/span><\/span>=<\/span>r<\/span>\u2032<\/span><\/span>sin<\/span>(<\/span>\u03b1<\/span>+<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n \u015eimdi x ve y form\u00fcllerini, cos\/sin’leri, r\/r’ ‘leri de yerine koydu\u011fumuzda a\u015fa\u011f\u0131daki form\u00fclleri elde ediyoruz:<\/p>\n x<\/span>\u2032<\/span><\/span>=<\/span>r<\/span>cos<\/span>(<\/span>\u03b1<\/span>)<\/span>cos<\/span>(<\/span>\u03b2<\/span>)<\/span>\u2013<\/span>r<\/span>sin<\/span>(<\/span>\u03b1<\/span>)<\/span>sin<\/span>(<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n y<\/span>\u2032<\/span><\/span>=<\/span>r<\/span>cos<\/span>(<\/span>\u03b1<\/span>)<\/span>sin<\/span>(<\/span>\u03b2<\/span>)<\/span>+<\/span>r<\/span>sin<\/span>(<\/span>\u03b1<\/span>)<\/span>cos<\/span>(<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n Bunlara da x=rcos(\u03b1), y=rsin(\u03b1)’lar\u0131 koyarsak<\/p>\n x<\/span>\u2032<\/span><\/span>=<\/span>x<\/span>cos<\/span>(<\/span>\u03b2<\/span>)<\/span>\u2013<\/span>y<\/span>sin<\/span>(<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n y<\/span>\u2032<\/span><\/span>=<\/span>x<\/span>sin<\/span>(<\/span>\u03b2<\/span>)<\/span>+<\/span>y<\/span>cos<\/span>(<\/span>\u03b2<\/span>)<\/span><\/span><\/span><\/span><\/strong><\/p>\n elde ediyoruz. Bunun matris formu ise a\u015fa\u011f\u0131daki gibi olmakta:<\/p>\n burada 2×2’lik matrise \u03b2 a\u00e7\u0131s\u0131 ile 2B d\u00f6n\u00fc\u015f\u00fcm matrisi denilmektedir.<\/p>\n Tabi yukar\u0131da verdi\u011fimiz sadece d\u00f6nd\u00fcrme matrisi. Bunun benzeri ta\u015f\u0131ma ve boyutland\u0131rma i\u00e7in de olu\u015fturulabilir. A\u015fa\u011f\u0131da verilen resimde, 2B i\u00e7in kullan\u0131labilecek b\u00fct\u00fcn d\u00f6n\u00fc\u015f\u00fcm matrisleri tek resimde \u00f6zetlenmi\u015ftir:<\/p>\n sonu\u00e7 olarak oyunlarda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz milyonlarca noktan\u0131n konumland\u0131r\u0131lmas\u0131\/boyutland\u0131r\u0131lmas\u0131 ya da d\u00f6nd\u00fcr\u00fclmesi asl\u0131nda bu matrislerin birbirleri ile \u00e7arp\u0131lmas\u0131 ile elde edilmekte. 3B uzaya ge\u00e7ince ve i\u015fin i\u00e7ine perpektif hesaplamalar\u0131 da girince, bu matrisler bir nebze kar\u0131\u015fabilir ama \u015fu an mevzumuz 2B ile s\u0131n\u0131rl\u0131.<\/p>\n Tabi ki, GLPainter’\u0131n temel motivasyonu sizleri b\u00fct\u00fcn bu detaylardan korumak ama neden bunlara girdin o zaman sevgili yaz\u0131l\u0131mperver diyebilirsiniz \ud83d\ude00<\/p>\n \u0130\u015fin \u015fakas\u0131 bir yana, 2B\/3B g\u00f6rselle\u015ftirme ya da oyun i\u015fine girecekseniz bunlar\u0131 sular, seller gibi bilmenizde fayda var, onu da buraya not d\u00fc\u015felim. \u015eimdi gelelim GLPainter ile bunlar\u0131 nas\u0131l yapabilece\u011finize. \u00d6nce API’lerimizi bir s\u0131ralayal\u0131m:<\/p>\n Yukar\u0131da da bahsetti\u011fim \u00fczere bu d\u00f6n\u00fc\u015f\u00fcmlerin matrise \u00e7evrilmesinin arkas\u0131nda yatan en \u00f6nemli motivasyon asl\u0131nda bunlar\u0131n \u00e7arp\u0131m\u0131 sayesinde tek bir matris elde edip bunu uygulamaktan ge\u00e7er. Arkadaki matemati\u011fe bakt\u0131\u011f\u0131n\u0131zda da bunu rahat bir \u015fekilde g\u00f6rebilirsiniz. Elbette burada dikkat etmeniz gereken en \u00f6nemli konu, bunlar\u0131n s\u0131ralamas\u0131n\u0131n \u00f6nemli oldu\u011fu ve \u00e7arp\u0131m yaparken de birle\u015ftirmede kulland\u0131\u011f\u0131n\u0131z bile\u015fenlerin sa\u011fdan sola do\u011fru uyguland\u0131\u011f\u0131d\u0131r. \u00d6rne\u011fin bir nesnemizi, (x, y, z) ekseninde (1, 2, 3) ta\u015f\u0131y\u0131p, 2 birim \u00f6l\u00e7eklendirme istiyorsak, \u00f6nce ta\u015f\u0131ma\/\u00f6teleme, sonra \u00f6l\u00e7eklendirme matrisini yerle\u015ftirip \u00e7arp\u0131yoruz:<\/p>\n Bu matrisleri \u00e7arpt\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki matrisi elde ederiz:<\/p>\n Bunu uygularken de \u00f6nce \u00f6l\u00e7eklendirme sonra boyutland\u0131rma yap\u0131l\u0131r. Ger\u00e7ekten de a\u015fa\u011f\u0131daki \u00f6rnekte g\u00f6rece\u011finiz \u00fczere kullanaca\u011f\u0131n\u0131z d\u00f6n\u00fc\u015f\u00fcm API’lerinin s\u0131ralamas\u0131 da bununla uyumlu olmal\u0131d\u0131r. D\u00f6nd\u00fcrmeyi de ekleyecek olursak, \u00f6zel bir durum yok ise \u00f6nce \u00f6l\u00e7eklendirme, sonra d\u00f6nd\u00fcrme ve en son da ta\u015f\u0131ma i\u015flemleri yap\u0131l\u0131r. Bu \u00fc\u00e7 d\u00f6n\u00fc\u015f\u00fcm\u00fc 2B i\u00e7in g\u00f6steren \u00f6rne\u011fi a\u015fa\u011f\u0131da g\u00f6rebilirsiniz (uEngine4 reposu i\u00e7erisinde gl_example projesinde ilgili kullan\u0131m\u0131 birebir g\u00f6rebilirsiniz):<\/p>\n Yukar\u0131daki \u00f6rnekte d\u00f6n\u00fc\u015f\u00fcm \u00e7a\u011fr\u0131lar\u0131n\u0131n s\u0131ras\u0131n\u0131 de\u011fi\u015ftirerek, bunun \u00e7izimleri ve animasyonu nas\u0131l etkiledi\u011fini birinci elden g\u00f6rebilirsiniz. Elbette, OpenGL d\u00f6n\u00fc\u015f\u00fcm olay\u0131 olduk\u00e7a derin, gerekirse o konuya da ayr\u0131ca girebiliriz ama yukar\u0131daki \u00f6rnek BasicGLPainter’\u0131n temel kabiliyetlerini g\u00fczel bir \u015fekilde ortaya koymakta. \u015eimdi gelelim stencil operasyonlar\u0131na.<\/p>\n Stencil testi asl\u0131na bakarsan\u0131z bu ve \u00f6nceki yaz\u0131mda bahsetti\u011fim \u00f6zelliklere nazaran daha ileri seviye bir \u00f6zellik. Normal kullan\u0131mlarda \u00e7ok ihtiyac\u0131n\u0131z olaca\u011f\u0131n\u0131z d\u00fc\u015f\u00fcnm\u00fcyorum ama velev ki oldu, BasicGLPainter size bunu da sunuyor olacak \ud83d\ude00<\/p>\n Peki stencil test ne anlama geliyor? Stencil test, fragment shader sonras\u0131nda her bir pixel i\u00e7in yap\u0131lan teste deniliyor. Bu testin sonucuna g\u00f6re ilgili piksel g\u00f6steriliyor ya da g\u00f6sterilmiyor (test kal\u0131rsa). Stencil testi i\u00e7in, ayn\u0131 derinlik testinde oldu\u011fu gibi ayr\u0131 “buffer” ‘lar kullan\u0131lmakta. Bu sebeple de SDL2 kullan\u0131yorsan\u0131z, buna ili\u015fkin ayarlamalar\u0131 yapman\u0131z gerekiyor. Elbette, BasicGLPainter sizler i\u00e7in bunu arka planda hallediyor \ud83d\udc4d<\/p>\n Kaynaklar k\u0131sm\u0131nda verdi\u011fim sitelerde bu konuya ili\u015fkin olduk\u00e7a detayl\u0131 bilgiler bulabilirsiniz fakat benim ho\u015fuma giden bir \u00f6rne\u011fi de burada g\u00f6stermeden ge\u00e7emeyece\u011fim:<\/p>\n Soldaki resim, stencil testi uygulamadan \u00f6nceki sahne ve ilgili stencil test a\u00e7\u0131ld\u0131\u011f\u0131nda ve ilgili testlerin ge\u00e7ti\u011fi k\u0131s\u0131mlar nihayetinde kullan\u0131c\u0131ya sunuluyor.<\/p>\n \u015eimdi gelelim bu test k\u0131sm\u0131na. OpenGL bu testi neye g\u00f6re yap\u0131yor. \u00d6ncelikle stencil testinin aktifle\u015ftirilmesi gerekiyor. Sonras\u0131nda ise glStencilFunc<\/em>, glStencilMask<\/em> ve glStencilOp<\/em> ile bu testi \u015fekillendirebiliyorsunuz. Sizlerin de tahmin edebilece\u011finiz \u00fczere, bu ayarlar ile olduk\u00e7a ilgin\u00e7 i\u015flevleri ger\u00e7ekle\u015ftirmeniz m\u00fcmk\u00fcn ama ben BasicGLPainter kapsam\u0131nda temel k\u0131rpma kabiliyeti i\u00e7in (“clip”) bu testi kulland\u0131m. Peki bunu nas\u0131l kullanacaks\u0131n\u0131z? \u00d6ncelikle API’lerimize bir bakal\u0131m:<\/p>\n Tabi bunlar\u0131 nas\u0131l kullanaca\u011f\u0131m\u0131z da \u00f6nemli \u00f6yle de\u011fil mi, hemen bir \u00f6rne\u011fe bakal\u0131m:<\/p>\n Yukar\u0131daki \u00f6rnekte, ortas\u0131nda bir delik olan kareyi BasicGLPainter ile nas\u0131l kolay bir \u015fekilde \u00e7izebilece\u011fimiz g\u00f6rd\u00fck.<\/p>\n Evet bu yaz\u0131m ile birlikte BasicGLPainter tan\u0131t\u0131m serimizin sonuna geldik. BasicGLPainter ile bir \u00e7ok temel oyun i\u00e7in ihtiya\u00e7 duyaca\u011f\u0131n\u0131z 2B grafikleri \u00e7izdirebilirsiniz. Elbette, uEngine4 serimiz burada bitmiyor, bir sonraki yaz\u0131mda g\u00f6r\u00fc\u015fmek dile\u011fiyle, bol kodlu g\u00fcnler diliyorum.<\/p>\n Evet dostlar, GLPainter s\u0131n\u0131f\u0131m\u0131z\u0131n kalan kabiliyetlerine bakma vakti geldi. Bu yaz\u0131m\u0131zda a\u015fa\u011f\u0131daki yaz\u0131larda eksik b\u0131rakt\u0131\u011f\u0131m\u0131z konulara de\u011finerek, GLPainter’\u0131 sizlerin kullan\u0131m\u0131na sunuyorum. uEngine4 Ser\u00fcveni – Giri\u015f (Painter S\u0131n\u0131flar\u0131) uEngine4 Ser\u00fcveni – BasicGLPainter – I Bir \u00f6nceki yaz\u0131mda GLPainter ile metin g\u00f6sterimi ve resim \u00e7izmeye y\u00f6nelik kabiliyetlere de\u011finmi\u015ftik. \u015eimdi, kalan hususlara de\u011finelim. Bunlardan ilki d\u00f6n\u00fc\u015f\u00fcmler, di\u011feri ise… Continue reading D\u00f6n\u00fc\u015f\u00fcmler (“Transformations”)<\/span><\/strong><\/h2>\n
\n
\n
![\"2D](\"https:\/\/blogmedia.testbook.com\/blog\/wp-content\/uploads\/2022\/11\/2d_rotation-matrix_derivation_2-769a8554.png\")
<\/p>\n![\"\"](\"https:\/\/www.yazilimperver.com\/wp-content\/uploads\/2023\/10\/img_6525a91c05762.png\")
<\/p>\n![\"2D](\"https:\/\/i.pinimg.com\/originals\/b6\/4d\/88\/b64d88b5898ffff0885db0ff9f1ccb27.png\")
<\/p>\n\/** @brief OpenGL Painter transformasyon API'si *\/\r\n\/\/ Boyutlandirma \r\nvoid Scale(float sx, float sy); \r\n\r\n\/\/ Dondurme\r\nvoid Rotate(float rotation); \r\n\r\n\/\/ Tasima\/oteleme\r\nvoid Translate(float tx, float ty); \r\nvoid Translate(const glm::vec2& translation);\r\n\r\n\/\/ Son donusum durumu\/matrisini sifirlama (sol ust 0, 0 olacak sekilde)\r\nvoid ResetTransform();\r\n\r\n\/\/ Mevcut donusum durumunu\/matrisini sakla\r\nvoid SaveState();\r\n\r\n\/\/ Son saklanan donusum durumu\/matrisini geri yukle\r\nvoid RestoreState();<\/pre>\n
![\"\"](\"https:\/\/www.yazilimperver.com\/wp-content\/uploads\/2023\/10\/img_652c19a676206.png\")
<\/p>\n![\"\"](\"https:\/\/www.yazilimperver.com\/wp-content\/uploads\/2023\/10\/img_652c19f7ba1f6.png\")
<\/p>\n \/\/ Ekranin ortasi\r\n glm::vec2 screenCenter{ mParameters.Width\/2, mParameters.Height\/2 };\r\n\r\n \/\/ Donusumleri sifirliyoruz (sol ust 0, 0 olacak sekilde)\r\n mPainter.ResetTransform();\r\n\r\n \/\/ Mevcut donusum durumunu\/matrisini sakla\r\n mPainter.SaveState();\r\n mPainter.AssignPen(Pen{ PenStyle::SolidLine, Color::Black, 2 });\r\n mPainter.AssignBrush(Brush{ Color::Green });\r\n\r\n \/\/ Donme animasyonu bilesenleri\r\n static float rotationInDegree = 0;\r\n rotationInDegree += 0.01f;\r\n rotationInDegree = fmod(rotationInDegree, 360.0f);\r\n\r\n \/\/ Boyutlandirma animasyonu bilesenleri\r\n static float scale = 1.0;\r\n static float increment = 0.0001F;\r\n scale += increment;\r\n if (scale > 2.0F || scale < -2.0F)\r\n increment *= (-1);\r\n\r\n \/\/ Asagidakilerin siralamasinia degistirerek nasil bir etkisi oldugunu gorebilirsin\r\n mPainter.Translate(glm::vec2{screenCenter.x, screenCenter.y});\r\n mPainter.Rotate(rotationInDegree);\r\n mPainter.Scale(scale, scale);\r\n\r\n \/\/ Asagida da cizdirdigimiz dikdortgen mevcut\r\n mPainter.DrawRectangle({ -50, -50, 100, 100 });\r\n\r\n \/\/ Son saklanan donusum durumu\/matrisini geri yukle\r\n mPainter.RestoreState();<\/pre>\nStencil Testi<\/span><\/strong><\/h2>\n
![](\"https:\/\/open.gl\/media\/img\/c5_stencil.png\")
<\/p>\n\/** @brief Stencil API'leri *\/\r\nvoid BeginClippingArea();\r\nvoid EndClippingArea();\r\nvoid ResetClippingArea();<\/pre>\n
\/\/ Donusumleri sifirliyoruz (sol ust 0, 0 olacak sekilde)\r\n mPainter.ResetTransform();\r\n\r\n \/\/ Ekranin ortasi\r\n glm::vec2 screenCenter{ mParameters.Width \/ 2, mParameters.Height \/ 2 };\r\n\r\n mPainter.AssignPen(Pen{ PenStyle::SolidLine, Color::Black, 3 });\r\n mPainter.AssignBrush(Brush{ Color::Yellow });\r\n\r\n \/\/ Ortasinda cember deligi olan bir dikdortgen cizebilir miyiz? Elbette\r\n \/\/ Once maskeleyecimiz kismi cizdiriyoruz\r\n mPainter.BeginClippingArea();\r\n mPainter.DrawEllipse(glm::vec2{ screenCenter.x, screenCenter.y}, 50, 50);\r\n mPainter.EndClippingArea();\r\n\r\n \/\/ Sonra maskelemek icin olan cizimi yapiyoruz\r\n mPainter.AssignBrush(Brush{ Color::Green });\r\n mPainter.Translate(glm::vec2{screenCenter.x, screenCenter.y});\r\n mPainter.DrawRectangle({ -100, -100, 200, 200 });\r\n mPainter.ResetClippingArea();\r\n\r\n \/\/ Son saklanan donusum durumu\/matrisini geri yukle\r\n mPainter.RestoreState();<\/pre>\nKaynaklar<\/span><\/strong><\/h2>\n
\n