Bu makalede, el hareketleriyle kontrol edilebilen etkile\u015fimli bir ak\u0131\u015fkan sim\u00fclasyonu geli\u015ftirme ser\u00fcvenimi anlataca\u011f\u0131m. Projenin teknik detaylar\u0131ndan, kar\u015f\u0131la\u015f\u0131lan zorluklara ve bu s\u00fcre\u00e7te GitHub ile ya\u015fad\u0131\u011f\u0131m beklenmedik “kap\u0131\u015fmaya” kadar her \u015feyi samimi bir dille payla\u015faca\u011f\u0131m. Amac\u0131m, benzer projelere giri\u015fmek isteyenlere ilham vermek ve olas\u0131 tuzaklara kar\u015f\u0131 uyarmakt\u0131r.<\/p>\n
Her \u015fey, ger\u00e7ek zamanl\u0131 fizik sim\u00fclasyonlar\u0131na olan hayranl\u0131\u011f\u0131mla ba\u015flad\u0131. \u00d6zellikle su, duman gibi ak\u0131\u015fkanlar\u0131n dinamiklerini dijital ortamda canland\u0131rmak, hem g\u00f6rsel a\u00e7\u0131dan b\u00fcy\u00fcleyici hem de teknik a\u00e7\u0131dan olduk\u00e7a zorlay\u0131c\u0131 bir meydan okumayd\u0131. Bu projeyi sadece bir ak\u0131\u015fkan sim\u00fclasyonu olmaktan \u00e7\u0131kar\u0131p, kullan\u0131c\u0131yla etkile\u015fimini art\u0131rmak istedim. \u0130\u015fte bu noktada hareket kontrol\u00fc fikri devreye girdi.<\/p>\n
Ak\u0131\u015fkan sim\u00fclasyonlar\u0131, bilgisayar grafiklerinin en karma\u015f\u0131k alanlar\u0131ndan biridir. Navier-Stokes denklemleri gibi fiziksel prensiplere dayan\u0131r ve genellikle y\u00fcksek i\u015flem g\u00fcc\u00fc gerektirir. Ancak g\u00fcn\u00fcm\u00fcz\u00fcn modern taray\u0131c\u0131lar\u0131 ve WebGL gibi teknolojiler sayesinde, bu t\u00fcr sim\u00fclasyonlar\u0131 web \u00fczerinde ger\u00e7ek zamanl\u0131 olarak \u00e7al\u0131\u015ft\u0131rmak m\u00fcmk\u00fcn hale geldi. Bu alandaki bilgimi derinle\u015ftirmek ve pratik bir uygulama geli\u015ftirmek istedim.<\/p>\n
Kullan\u0131c\u0131lar\u0131n fare veya klavye yerine do\u011fal el hareketleriyle bir sim\u00fclasyonu kontrol etmesi fikri beni \u00e7ok heyecanland\u0131rd\u0131. Bu, sadece teknik bir ba\u015far\u0131 de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini zenginle\u015ftiren bir yenilik olacakt\u0131. Sanal d\u00fcnyayla fiziksel etkile\u015fim kurma potansiyeli, projeye benzersiz bir boyut katt\u0131.<\/p>\n
Bu proje, sadece e\u011flenceli bir fikir olman\u0131n \u00f6tesinde, benim i\u00e7in bir \u00f6\u011frenme platformuydu. WebGL ile derinlemesine \u00e7al\u0131\u015fmak, shader programlama (GLSL) becerilerimi geli\u015ftirmek, fizik tabanl\u0131 sim\u00fclasyon algoritmalar\u0131n\u0131 uygulamak ve hareket alg\u0131lama API’lar\u0131 ile entegrasyon yapmak gibi bir\u00e7ok teknik hedefim vard\u0131. Ayr\u0131ca, b\u00fcy\u00fck ve karma\u015f\u0131k bir projeyi ba\u015ftan sona y\u00f6netme deneyimi kazanmak da \u00f6nemliydi.<\/p>\n
Ak\u0131\u015fkan sim\u00fclasyonlar\u0131, genellikle Navier-Stokes denklemlerinin say\u0131sal \u00e7\u00f6z\u00fcmlerine dayan\u0131r. Bu denklemler, bir ak\u0131\u015fkan\u0131n h\u0131z\u0131n\u0131, bas\u0131nc\u0131n\u0131 ve yo\u011funlu\u011funu zamanla nas\u0131l de\u011fi\u015fti\u011fini tan\u0131mlar. Ger\u00e7ek zamanl\u0131 uygulamalar i\u00e7in bu denklemler basitle\u015ftirilir ve genellikle grid tabanl\u0131 y\u00f6ntemlerle \u00e7\u00f6z\u00fcl\u00fcr.<\/p>\n
Navier-Stokes denklemleri, ak\u0131\u015fkan dinami\u011finin temelini olu\u015fturur. Ancak bu denklemlerin do\u011frudan \u00e7\u00f6z\u00fcm\u00fc son derece karma\u015f\u0131kt\u0131r. Ger\u00e7ek zamanl\u0131 sim\u00fclasyonlarda, genellikle “incompressible” (s\u0131k\u0131\u015ft\u0131r\u0131lamaz) ak\u0131\u015fkanlar varsay\u0131l\u0131r ve viskozite gibi baz\u0131 terimler basitle\u015ftirilir veya tamamen g\u00f6z ard\u0131 edilir. Bu, hesaplama maliyetini d\u00fc\u015f\u00fcrerek interaktif deneyimler yaratmam\u0131z\u0131 sa\u011flar.<\/p>\n
Sim\u00fclasyon alan\u0131, genellikle bir \u0131zgaraya (grid) b\u00f6l\u00fcn\u00fcr. Her \u0131zgara h\u00fccresi, ak\u0131\u015fkan\u0131n h\u0131z, yo\u011funluk ve bas\u0131n\u00e7 gibi \u00f6zelliklerini depolar. En yayg\u0131n kullan\u0131lan y\u00f6ntemlerden biri, h\u0131z bile\u015fenlerinin farkl\u0131 noktalarda depoland\u0131\u011f\u0131 “Staggered Grid” veya “MAC Grid” yakla\u015f\u0131m\u0131d\u0131r. Bu, say\u0131sal kararl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/p>\n
Bir ak\u0131\u015fkan sim\u00fclasyonu genellikle \u015fu ad\u0131mlarla ilerler:<\/p>\n
Bu ad\u0131mlar her karede tekrarlanarak ak\u0131\u015fkan\u0131n dinamiklerini olu\u015fturur. WebGL ile bu ad\u0131mlar\u0131n her biri ayr\u0131 bir shader program\u0131 olarak GPU \u00fczerinde \u00e7al\u0131\u015ft\u0131r\u0131l\u0131r, bu da b\u00fcy\u00fck performans kazanc\u0131 sa\u011flar.<\/p>\n
Sim\u00fclasyonun hesaplamalar\u0131 genellikle GPU \u00fczerinde dokulara (textures) yaz\u0131l\u0131r. \u00d6rne\u011fin, bir doku ak\u0131\u015fkan\u0131n h\u0131z\u0131n\u0131, di\u011feri yo\u011funlu\u011funu tutabilir. Bu dokular daha sonra bir fragment shader taraf\u0131ndan okunarak ekrana g\u00f6rsel olarak render edilir. Bu yakla\u015f\u0131m, karma\u015f\u0131k hesaplamalar\u0131n paralel olarak y\u00fcr\u00fct\u00fclmesine olanak tan\u0131r ve ak\u0131c\u0131 bir ger\u00e7ek zamanl\u0131 deneyim sunar.<\/p>\n
\n\/\/ \u00d6rnek bir advection shader'\u0131ndan par\u00e7a\nvoid main() {\n vec2 uv = gl_FragCoord.xy \/ u_resolution;\n vec2 velocity = texture2D(u_velocityTexture, uv).xy;\n vec2 prevPos = uv - velocity * u_dt; \/\/ u_dt zaman ad\u0131m\u0131\n gl_FragColor = texture2D(u_densityTexture, prevPos);\n}\n<\/pre>\n<\/code><\/p>\n
Hareket Alg\u0131lama Entegrasyonu<\/h3>\n
Sim\u00fclasyonun en heyecan verici k\u0131sm\u0131, onu el hareketleriyle kontrol edebilmekti. Bu, kullan\u0131c\u0131dan gelen kamera g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc i\u015fleyerek el iskeletini tespit etmeyi ve bu veriyi sim\u00fclasyona aktarmay\u0131 gerektiriyordu.<\/p>\n
Kullan\u0131lan Sens\u00f6rler ve API'lar<\/h4>\n
Ba\u015flang\u0131\u00e7ta farkl\u0131 yakla\u015f\u0131mlar\u0131 de\u011ferlendirdim. Leap Motion gibi \u00f6zel donan\u0131mlar daha hassas veri sunsa da, projenin web tabanl\u0131 ve eri\u015filebilir olmas\u0131n\u0131 istedi\u011fim i\u00e7in taray\u0131c\u0131 tabanl\u0131 \u00e7\u00f6z\u00fcmlere y\u00f6neldim. MediaPipe Hands veya PoseNet gibi k\u00fct\u00fcphaneler, s\u0131radan bir web kameras\u0131 kullanarak el iskeleti tespiti yapabiliyor ve bu verileri JavaScript ortam\u0131na aktarabiliyordu. Ben MediaPipe Hands'i tercih ettim \u00e7\u00fcnk\u00fc hem performans\u0131 iyiydi hem de detayl\u0131 el iskeleti verisi sa\u011fl\u0131yordu.<\/p>\n
Veri \u0130\u015fleme ve Normalizasyon<\/h4>\n
MediaPipe'tan gelen veriler, kameran\u0131n koordinat sisteminde 3D nokta listeleri (el parmak eklemleri) \u015feklindeydi. Bu noktalar\u0131n sim\u00fclasyonun 2D koordinat sistemine d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi ve normalizasyonu gerekiyordu. \u00d6rne\u011fin, elin merkez noktas\u0131n\u0131 al\u0131p, ekran\u0131n geni\u015fli\u011fine ve y\u00fcksekli\u011fine oranlayarak 0-1 aral\u0131\u011f\u0131nda bir de\u011fere \u00e7evirdim. Ayr\u0131ca, elin hareket h\u0131z\u0131n\u0131 hesaplamak i\u00e7in \u00f6nceki karedeki konumunu da takip ettim.<\/p>\n
Sim\u00fclasyona Girdi Olarak Aktarma<\/h4>\n
Normalle\u015ftirilmi\u015f el pozisyonu ve h\u0131z\u0131, sim\u00fclasyonun d\u0131\u015f kuvvetler a\u015famas\u0131nda kullan\u0131ld\u0131. Elin hareket etti\u011fi konuma bir \"kuvvet\" veya \"yo\u011funluk\" eklenerek ak\u0131\u015fkan\u0131n o noktada hareket etmesi veya renklenmesi sa\u011fland\u0131. \u00d6rne\u011fin, elin h\u0131z\u0131 ne kadar y\u00fcksekse, ak\u0131\u015fkana uygulanan kuvvet de o kadar b\u00fcy\u00fck oluyordu. Bu, kullan\u0131c\u0131n\u0131n parma\u011f\u0131n\u0131 suya dald\u0131r\u0131p kar\u0131\u015ft\u0131rmas\u0131na benzer bir etki yaratt\u0131.<\/p>\n
\n\/\/ \u00d6rnek: Hareket verisini sim\u00fclasyona aktarma\nfunction applyGestureForce(x, y, vx, vy) {\n \/\/ x, y: normalize edilmi\u015f el pozisyonu (0-1)\n \/\/ vx, vy: normalize edilmi\u015f el h\u0131z\u0131\n \/\/ Sim\u00fclasyonun kuvvet dokusuna bu de\u011ferleri yaz\n simulator.addForce(x * simulator.width, y * simulator.height, vx * forceScale, vy * forceScale, color);\n}\n<\/pre>\n<\/code><\/p>\n
Teknolojik Se\u00e7imler ve Geli\u015ftirme S\u00fcreci<\/h3>\n
Projenin teknolojik omurgas\u0131 JavaScript, WebGL ve GLSL \u00fczerine kuruluydu. Bu se\u00e7imler, web tabanl\u0131 bir uygulama i\u00e7in en uygun ve performansl\u0131 \u00e7\u00f6z\u00fcmleri sunuyordu.<\/p>\n
Programlama Dili ve K\u00fct\u00fcphaneler<\/h4>\n
Ana programlama dili JavaScript idi. WebGL API'si do\u011frudan JavaScript \u00fczerinden kullan\u0131ld\u0131. GLSL (OpenGL Shading Language) ise GPU \u00fczerinde \u00e7al\u0131\u015fan shader programlar\u0131n\u0131 yazmak i\u00e7in kullan\u0131ld\u0131. \u00dc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphane olarak, MediaPipe Hands'in yan\u0131 s\u0131ra, WebGL'i daha kolay y\u00f6netmek i\u00e7in Three.js gibi b\u00fcy\u00fck bir framework yerine, daha d\u00fc\u015f\u00fck seviyeli bir WebGL wrapper veya kendi yazd\u0131\u011f\u0131m yard\u0131mc\u0131 fonksiyonlar\u0131 kulland\u0131m. Bu, performans\u0131 optimize etme ve her detay\u0131 anlama konusunda bana daha fazla kontrol sa\u011flad\u0131.<\/p>\n
Geli\u015ftirme Ortam\u0131 ve Ara\u00e7lar<\/h4>\n
Geli\u015ftirme ortam\u0131 olarak Visual Studio Code kulland\u0131m. Canl\u0131 yeniden y\u00fckleme (live reload) \u00f6zellikli bir geli\u015ftirme sunucusu (\u00f6rne\u011fin, http-server<\/code> veya Webpack Dev Server) ile \u00e7al\u0131\u015fmak, h\u0131zl\u0131 iterasyonlar yapmam\u0131 sa\u011flad\u0131. WebGL hata ay\u0131klamas\u0131 i\u00e7in taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131ndaki \"WebGL Inspector\" gibi eklentiler paha bi\u00e7ilmezdi.<\/p>\n\u0130teratif Geli\u015fim Yakla\u015f\u0131m\u0131<\/h4>\n
Proje, k\u00fc\u00e7\u00fck ad\u0131mlarla ve iteratif bir yakla\u015f\u0131mla ilerledi. \u00d6nce temel ak\u0131\u015fkan sim\u00fclasyonunu \u00e7al\u0131\u015f\u0131r hale getirdim, ard\u0131ndan hareket alg\u0131lamay\u0131 entegre ettim ve son olarak ikisini birle\u015ftirdim. Her a\u015famada, performans\u0131 ve g\u00f6rsel kaliteyi iyile\u015ftirmeye odakland\u0131m. Bu yakla\u015f\u0131m, karma\u015f\u0131k sorunlar\u0131 daha y\u00f6netilebilir par\u00e7alara b\u00f6lmeme yard\u0131mc\u0131 oldu.<\/p>\n
GitHub M\u00fccadelesi: B\u00fcy\u00fck Dosyalar ve LFS<\/h3>\n
Her \u015fey yolunda giderken, projenin sonlar\u0131na do\u011fru GitHub ile beklenmedik bir \"kap\u0131\u015fma\" ya\u015fad\u0131m. Sim\u00fclasyonun doku verileri ve modellemeleri (e\u011fer olsayd\u0131) gibi b\u00fcy\u00fck dosyalar, standart Git'in s\u0131n\u0131rlar\u0131n\u0131 zorlad\u0131.<\/p>\n
Sim\u00fclasyon Verilerinin Boyutu<\/h4>\n
Ak\u0131\u015fkan sim\u00fclasyonu, her ne kadar temel olarak koddan ibaret olsa da, zamanla biriken test verileri, farkl\u0131 \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerdeki \u00f6nceden olu\u015fturulmu\u015f dokular veya deneme ama\u00e7l\u0131 videolar gibi dosyalar depoda yer kaplamaya ba\u015flad\u0131. \u00d6zellikle, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc dokular veya sim\u00fclasyon \u00e7\u0131kt\u0131lar\u0131, Git'in normalde i\u015fleyebilece\u011fi dosya boyutlar\u0131n\u0131n \u00fczerine \u00e7\u0131kabiliyordu. Ba\u015flang\u0131\u00e7ta bu dosyalar\u0131 g\u00f6rmezden gelsem de, bir noktada bunlar\u0131 versiyonlamak veya en az\u0131ndan depoda tutmak istedim.<\/p>\n
Normal Git'in S\u0131n\u0131rlar\u0131<\/h4>\n
Git, genellikle k\u00fc\u00e7\u00fck metin tabanl\u0131 dosyalar ve kod i\u00e7in optimize edilmi\u015ftir. B\u00fcy\u00fck ikili dosyalar\u0131 (resimler, videolar, ses dosyalar\u0131 vb.) depolamak, deponun boyutunu h\u0131zla \u015fi\u015firir ve klonlama, \u00e7ekme, itme i\u015flemlerini yava\u015flat\u0131r. Her bir versiyonda bu b\u00fcy\u00fck dosyalar\u0131n tam kopyas\u0131n\u0131 saklamak, Git'in verimli \u00e7al\u0131\u015fma prensiplerine ayk\u0131r\u0131d\u0131r. Bu durum, GitHub'\u0131n \u00fccretsiz depolarda uygulad\u0131\u011f\u0131 boyut limitleriyle birle\u015fince ger\u00e7ek bir sorun haline geldi.<\/p>\n
Git LFS (Large File Storage) \u00c7\u00f6z\u00fcm\u00fc<\/h4>\n
Ara\u015ft\u0131rmalar\u0131m sonucunda Git LFS (Large File Storage) ile tan\u0131\u015ft\u0131m. Git LFS, b\u00fcy\u00fck dosyalar\u0131 Git deponuzdan \u00e7\u0131kar\u0131p ayr\u0131 bir sunucuda depolayan ve Git deponuzda bu dosyalara sadece birer i\u015faret\u00e7i (pointer) b\u0131rakan bir Git uzant\u0131s\u0131d\u0131r. Bu sayede, deponuzun boyutu k\u00fc\u00e7\u00fck kal\u0131r ve Git'in performans\u0131 etkilenmez. B\u00fcy\u00fck dosyalar sadece gerekti\u011finde indirilir.<\/p>\n
LFS'in Kurulumu ve Kullan\u0131m\u0131yla \u0130lgili Sorunlar<\/h4>\n
Git LFS'i kurmak ve mevcut b\u00fcy\u00fck dosyalar\u0131 LFS'e ta\u015f\u0131mak, bekledi\u011fimden daha karma\u015f\u0131k oldu. \u0130lk denemelerimde, LFS'i do\u011fru \u015fekilde yap\u0131land\u0131ramad\u0131\u011f\u0131m i\u00e7in dosyalar hala normal Git taraf\u0131ndan izleniyor veya LFS'e ta\u015f\u0131nm\u0131\u015f gibi g\u00f6r\u00fcnse de depoda yer kaplamaya devam ediyordu. \u00d6zellikle ge\u00e7mi\u015f commit'lerdeki b\u00fcy\u00fck dosyalar\u0131 temizlemek ve LFS'e ta\u015f\u0131mak, git filter-branch<\/code> veya BFG Repo-Cleaner<\/code> gibi ara\u00e7larla u\u011fra\u015fmay\u0131 gerektirdi. Bu s\u00fcre\u00e7te yanl\u0131\u015fl\u0131kla deponun ge\u00e7mi\u015fini bozmaktan veya \u00f6nemli verileri kaybetmekten korktum. Birka\u00e7 deneme yan\u0131lma, bolca Stack Overflow okumas\u0131 ve GitHub dok\u00fcmanlar\u0131n\u0131 kar\u0131\u015ft\u0131rman\u0131n ard\u0131ndan, sonunda LFS'i ba\u015far\u0131yla entegre ettim ve depomun boyutunu kabul edilebilir seviyelere indirdim. Bu s\u00fcre\u00e7, bana Git'in derinliklerini ve versiyon kontrol\u00fcn\u00fcn inceliklerini bir kez daha \u00f6\u011fretti.<\/p>\nKar\u015f\u0131la\u015f\u0131lan Zorluklar ve \u00c7\u00f6z\u00fcmler<\/h3>\n
Her b\u00fcy\u00fck projede oldu\u011fu gibi, bu sim\u00fclasyonu geli\u015ftirirken de \u00e7e\u015fitli zorluklarla kar\u015f\u0131la\u015ft\u0131m. Ancak her zorluk, yeni bir \u015feyler \u00f6\u011frenme f\u0131rsat\u0131 sundu.<\/p>\n
Performans Optimizasyonu<\/h4>\n
Ger\u00e7ek zamanl\u0131 ak\u0131\u015fkan sim\u00fclasyonlar\u0131 do\u011fas\u0131 gere\u011fi yo\u011fun hesaplama gerektirir. Taray\u0131c\u0131da 60 FPS hedeflemek i\u00e7in ciddi optimizasyonlar yapmam gerekti. Bunlar aras\u0131nda:<\/p>\n
\n- Daha d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc sim\u00fclasyon \u0131zgaralar\u0131 kullanmak.<\/li>\n
- Gereksiz shader i\u015flemlerini kald\u0131rmak.<\/li>\n
- GPU'dan CPU'ya veri transferini minimuma indirmek.<\/li>\n
- Frame Buffer Object (FBO) kullan\u0131m\u0131n\u0131 optimize etmek.<\/li>\n
- Taray\u0131c\u0131da donan\u0131m h\u0131zland\u0131rman\u0131n do\u011fru \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olmak.<\/li>\n<\/ul>\n
Bu optimizasyonlar sayesinde, \u00e7o\u011fu modern taray\u0131c\u0131da ak\u0131c\u0131 bir deneyim sunmay\u0131 ba\u015fard\u0131m.<\/p>\n
Hareket Alg\u0131lama Do\u011frulu\u011fu<\/h4>\n
MediaPipe gibi k\u00fct\u00fcphaneler etkileyici olsa da, \u00f6zellikle farkl\u0131 \u0131\u015f\u0131k ko\u015fullar\u0131nda veya karma\u015f\u0131k arka planlarda el tespiti bazen hatal\u0131 olabiliyordu. Bu durum, sim\u00fclasyona yanl\u0131\u015f girdiler gelmesine neden oluyordu. \u00c7\u00f6z\u00fcm olarak:<\/p>\n
\n- Gelen veriyi yumu\u015fatmak i\u00e7in basit bir ortalama filtresi (moving average filter) kulland\u0131m.<\/li>\n
- Belirli bir g\u00fcven e\u015fi\u011finin alt\u0131ndaki tespitleri g\u00f6z ard\u0131 ettim.<\/li>\n
- Kullan\u0131c\u0131ya iyi \u0131\u015f\u0131kland\u0131rma ve sade bir arka plan sa\u011flama konusunda ipu\u00e7lar\u0131 verdim.<\/li>\n<\/ul>\n
Git LFS Konfig\u00fcrasyon Hatalar\u0131<\/h4>\n
Yukar\u0131da bahsedilen Git LFS sorunlar\u0131, projenin teknik k\u0131sm\u0131ndan ziyade operasyonel bir zorluktu. \u00c7\u00f6z\u00fcm, sab\u0131rla dok\u00fcmantasyonu okumak, farkl\u0131 komutlar\u0131 denemek ve Git'in dahili \u00e7al\u0131\u015fma prensiplerini daha iyi anlamaktan ge\u00e7ti. \u00d6zellikle git lfs migrate import --everything<\/code> gibi komutlar\u0131 dikkatli kullanmak, deponun ge\u00e7mi\u015fini temizlemek i\u00e7in kritikti.<\/p>\nHata Ay\u0131klama Stratejileri<\/h4>\n
WebGL ve GLSL ile hata ay\u0131klama, geleneksel JavaScript hata ay\u0131klamas\u0131na g\u00f6re daha zordur. Taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131ndaki WebGL Inspector, shader hatalar\u0131n\u0131 tespit etmede ve doku i\u00e7eriklerini incelemede \u00e7ok yard\u0131mc\u0131 oldu. Ayr\u0131ca, sim\u00fclasyonun ara ad\u0131mlar\u0131ndaki dokular\u0131 g\u00f6rselle\u015ftirmek (\u00f6rne\u011fin, h\u0131z dokusunu renklendirmek), sorunlar\u0131n nerede ba\u015flad\u0131\u011f\u0131n\u0131 anlamam\u0131 sa\u011flad\u0131.<\/p>\n
Sonu\u00e7<\/h3>\n
Hareket kontroll\u00fc ak\u0131\u015fkan sim\u00fclasyonu projesi, benim i\u00e7in inan\u0131lmaz bir \u00f6\u011frenme deneyimi oldu. Ak\u0131\u015fkan dinami\u011finin karma\u015f\u0131kl\u0131\u011f\u0131ndan, WebGL'in g\u00fcc\u00fcne, hareket alg\u0131laman\u0131n inceliklerinden, Git LFS'in derinliklerine kadar bir\u00e7ok alanda bilgi ve becerilerimi geli\u015ftirdim. GitHub ile ya\u015fad\u0131\u011f\u0131m \"kap\u0131\u015fma\" ise, versiyon kontrol sistemlerinin sadece kod depolamaktan ibaret olmad\u0131\u011f\u0131n\u0131, ayn\u0131 zamanda b\u00fcy\u00fck veri y\u00f6netimi gibi operasyonel zorluklar\u0131 da beraberinde getirebilece\u011fini g\u00f6sterdi.<\/p>\n
Bu proje, teknolojiyle etkile\u015fim kurman\u0131n yeni yollar\u0131n\u0131 ke\u015ffetmenin ne kadar \u00f6d\u00fcllendirici olabilece\u011fini kan\u0131tlad\u0131. Umar\u0131m bu makale, benzer projelere giri\u015fmek isteyen di\u011fer geli\u015ftiricilere ilham verir ve kar\u015f\u0131la\u015f\u0131labilecek potansiyel zorluklar hakk\u0131nda bir yol haritas\u0131 sunar.<\/p>\n
SSS (S\u0131k Sorulan Sorular)<\/h3>\n1. Ak\u0131\u015fkan sim\u00fclasyonu i\u00e7in neden WebGL'i se\u00e7tiniz?<\/h4>\n
WebGL, taray\u0131c\u0131da do\u011frudan GPU eri\u015fimi sa\u011flayarak, ak\u0131\u015fkan sim\u00fclasyonu gibi yo\u011fun grafik ve hesaplama gerektiren uygulamalar\u0131 ger\u00e7ek zamanl\u0131 olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in ideal bir platformdur. JavaScript ile entegrasyonu kolayd\u0131r ve ek bir eklenti veya yaz\u0131l\u0131m kurulumu gerektirmez.<\/p>\n
2. Hareket alg\u0131lama i\u00e7in ba\u015fka hangi k\u00fct\u00fcphaneleri d\u00fc\u015f\u00fcnd\u00fcn\u00fcz?<\/h4>\n
MediaPipe Hands'in yan\u0131 s\u0131ra, Google'\u0131n PoseNet'ini ve daha eski bir teknoloji olan Leap Motion API'sini d\u00fc\u015f\u00fcnd\u00fcm. PoseNet, v\u00fccut pozisyonu tespiti i\u00e7in harika olsa da, el iskeleti detay\u0131nda MediaPipe kadar geli\u015fmi\u015f de\u011fildi. Leap Motion ise \u00f6zel bir donan\u0131m gerektirdi\u011fi i\u00e7in projenin genel eri\u015filebilirli\u011fi hedefine uymad\u0131.<\/p>\n
3. Git LFS kullan\u0131rken en \u00e7ok zorland\u0131\u011f\u0131n\u0131z nokta neydi?<\/h4>\n
Mevcut bir Git deposundaki ge\u00e7mi\u015f commit'lerde yer alan b\u00fcy\u00fck dosyalar\u0131 LFS'e ta\u015f\u0131mak en zor k\u0131s\u0131md\u0131. Sadece git lfs track<\/code> komutunu \u00e7al\u0131\u015ft\u0131rmak yeterli olmuyor; ge\u00e7mi\u015fi temizlemek ve deponun boyutunu k\u00fc\u00e7\u00fcltmek i\u00e7in git filter-branch<\/code> veya BFG Repo-Cleaner<\/code> gibi ara\u00e7larla deponun tarih\u00e7esini yeniden yazmak gerekti. Bu i\u015flemler, do\u011fru yap\u0131lmad\u0131\u011f\u0131nda veri kayb\u0131na yol a\u00e7abilece\u011fi i\u00e7in olduk\u00e7a stresliydi.<\/p>\n4. Sim\u00fclasyonun performans\u0131n\u0131 art\u0131rmak i\u00e7in hangi temel optimizasyonlar\u0131 yapt\u0131n\u0131z?<\/h4>\n
En temel optimizasyonlar, sim\u00fclasyon \u0131zgaras\u0131n\u0131n \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc d\u00fc\u015f\u00fcrmek, her karede tekrarlanan shader i\u015flemlerini basitle\u015ftirmek ve GPU ile CPU aras\u0131ndaki veri transferini en aza indirmek oldu. Ayr\u0131ca, taray\u0131c\u0131daki WebGL ba\u011flam\u0131n\u0131n donan\u0131m h\u0131zland\u0131rmay\u0131 kulland\u0131\u011f\u0131ndan emin olmak da kritikti.<\/p>\n
5. Bu projeyi geli\u015ftirirken \u00f6\u011frendi\u011finiz en de\u011ferli ders ne oldu?<\/h4>\n
En de\u011ferli ders, karma\u015f\u0131k bir problemi k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alara b\u00f6lerek ad\u0131m ad\u0131m ilerlemenin \u00f6nemi oldu. Ayr\u0131ca, sadece kod yazmakla kalmay\u0131p, kullan\u0131lan ara\u00e7lar\u0131n (Git, GitHub, taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131) derinlemesine nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlaman\u0131n, beklenmedik sorunlarla ba\u015fa \u00e7\u0131kmada ne kadar kritik oldu\u011funu bir kez daha anlad\u0131m.<\/p>\n","protected":false},"excerpt":{"rendered":"Her \u015fey, ger\u00e7ek zamanl\u0131 fizik sim\u00fclasyonlar\u0131na olan hayranl\u0131\u011f\u0131mla ba\u015flad\u0131. \u00d6zellikle su, duman gibi ak\u0131\u015fkanlar\u0131n dinamiklerini dijital ortamda …","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1401],"tags":[],"class_list":{"0":"post-37622","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-git","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak\" \/>\n<meta property=\"og:description\" content=\"Her \u015fey, ger\u00e7ek zamanl\u0131 fizik sim\u00fclasyonlar\u0131na olan hayranl\u0131\u011f\u0131mla ba\u015flad\u0131. \u00d6zellikle su, duman gibi ak\u0131\u015fkanlar\u0131n dinamiklerini dijital ortamda ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-10T16:30:36+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak\",\"datePublished\":\"2026-01-10T16:30:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\"},\"wordCount\":2642,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Git\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\",\"name\":\"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-10T16:30:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/","og_locale":"tr_TR","og_type":"article","og_title":"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak","og_description":"Her \u015fey, ger\u00e7ek zamanl\u0131 fizik sim\u00fclasyonlar\u0131na olan hayranl\u0131\u011f\u0131mla ba\u015flad\u0131. \u00d6zellikle su, duman gibi ak\u0131\u015fkanlar\u0131n dinamiklerini dijital ortamda ...","og_url":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-10T16:30:36+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak","datePublished":"2026-01-10T16:30:36+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/"},"wordCount":2642,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Git"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/","url":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/","name":"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-10T16:30:36+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/hareket-kontrollu-akiskan-simulasyonu-gelistirirken-github-ile-kapismak\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Hareket Kontroll\u00fc Ak\u0131\u015fkan Sim\u00fclasyonu Geli\u015ftirirken GitHub ile Kap\u0131\u015fmak"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37622","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37622"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37622\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37622"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37622"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37622"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}