Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API’si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
G\u00f6rsel d\u00fcnyalar\u0131m\u0131zda \u00e7e\u015fitlilik ve ger\u00e7ek\u00e7ilik yaratmak, kullan\u0131c\u0131 deneyimini do\u011frudan etkileyen kritik bir unsurdur. Statik, tekrar eden dokular genellikle “yapay” bir his b\u0131rak\u0131rken, prosed\u00fcrel olarak \u00fcretilen dokular her zaman taze, benzersiz ve dinamik bir g\u00f6r\u00fcn\u00fcm sunar. Peki, bu dinamizmi nas\u0131l yakalayabiliriz? \u0130\u015fte burada prosed\u00fcrel doku \u00fcretimi devreye giriyor. \u00d6zellikle Voronoi dokular\u0131, do\u011fal d\u00fcnyadaki h\u00fccre yap\u0131lar\u0131, \u00e7atlaklar, su y\u00fczeyindeki k\u00f6p\u00fckler, deriler veya ta\u015f y\u00fczeyler gibi bir\u00e7ok karma\u015f\u0131k deseni \u015fa\u015f\u0131rt\u0131c\u0131 bir do\u011frulukla taklit edebilir.<\/p>\n
Voronoi diyagramlar\u0131, bir d\u00fczlemi belirli “\u00e7ekirdek” noktalar\u0131na olan uzakl\u0131\u011fa g\u00f6re b\u00f6lgelere ay\u0131r\u0131r. Her nokta, kendisine di\u011fer t\u00fcm \u00e7ekirdek noktalardan daha yak\u0131n olan alan\u0131n tek sahibidir. Bu geometrik yap\u0131, g\u00f6rsel olarak farkl\u0131 h\u00fccreler ve bu h\u00fccrelerin kenarlar\u0131n\u0131 olu\u015fturan \u00e7izgilerle karakterize edilir. Bu basit kural, \u015fa\u015f\u0131rt\u0131c\u0131 derecede karma\u015f\u0131k ve estetik olarak ho\u015f dokular\u0131n temelini olu\u015fturur. \u00d6rne\u011fin, bir \u00e7atlak dokusu olu\u015fturmak istedi\u011finizde, Voronoi h\u00fccrelerinin kenarlar\u0131 bu \u00e7atlaklar\u0131 do\u011fal bir \u015fekilde taklit edebilir. Ya da bir ta\u015f y\u00fczeyindeki mineral da\u011f\u0131l\u0131m\u0131n\u0131 sim\u00fcle etmek i\u00e7in, her h\u00fccre farkl\u0131 bir renk veya parlakl\u0131k de\u011feri alabilir. Bu esneklik, Voronoi’yi grafik programc\u0131lar\u0131 ve tasar\u0131mc\u0131lar i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\n
Geleneksel doku haritalama y\u00f6ntemleri genellikle \u00f6nceden \u00e7izilmi\u015f veya foto\u011fraflanm\u0131\u015f resimlere dayan\u0131r. Bu y\u00f6ntemler, bellekte yer kaplar ve tekrarlayan desenler olu\u015fturma e\u011filimindedir, bu da b\u00fcy\u00fck \u00f6l\u00e7ekli veya sonsuz d\u00fcnyalarda g\u00f6rsel yorgunlu\u011fa yol a\u00e7abilir. Buna kar\u015f\u0131l\u0131k, prosed\u00fcrel dokular, bir algoritma arac\u0131l\u0131\u011f\u0131yla an\u0131nda hesapland\u0131\u011f\u0131 i\u00e7in bellekte \u00e7ok daha az yer kaplar ve iste\u011fe ba\u011fl\u0131 olarak sonsuz varyasyonlar \u00fcretebilir. Ayr\u0131ca, bu dokular\u0131n parametrelerini de\u011fi\u015ftirerek an\u0131nda farkl\u0131 g\u00f6r\u00fcn\u00fcmler elde edebiliriz, bu da tasar\u0131mc\u0131lara inan\u0131lmaz bir esneklik sunar. Bu nedenle, oyun motorlar\u0131nda, mimari g\u00f6rselle\u015ftirmelerde ve hatta bilimsel sim\u00fclasyonlarda prosed\u00fcrel yakla\u015f\u0131mlar giderek daha fazla tercih edilmektedir.<\/p>\n
WebGPU (WGPU), bu t\u00fcr karma\u015f\u0131k grafik i\u015flemlerini web taray\u0131c\u0131lar\u0131nda bile modern GPU donan\u0131m\u0131n\u0131n tam g\u00fcc\u00fcn\u00fc kullanarak ger\u00e7ekle\u015ftirmemizi sa\u011flayan yeni nesil bir web standard\u0131d\u0131r. WebGL’e k\u0131yasla daha d\u00fc\u015f\u00fck seviyeli ve performans odakl\u0131 bir API sunan WGPU, prosed\u00fcrel doku \u00fcretimini daha verimli ve daha kolay hale getirir. Bu rehber boyunca, Voronoi dokular\u0131n\u0131n arkas\u0131ndaki matematiksel temelleri ve WGPU’nun sundu\u011fu imkanlar\u0131 bir araya getirerek, taray\u0131c\u0131n\u0131zda \u00e7al\u0131\u015fan, tamamen dinamik ve g\u00f6rsel a\u00e7\u0131dan zengin Voronoi dokular\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 \u00f6\u011freneceksiniz. \u015eimdi, bu heyecan verici yolculu\u011fa ba\u015flamadan \u00f6nce, Voronoi dokular\u0131n\u0131n temelini daha derinlemesine anlayal\u0131m.<\/p>\n
Voronoi diyagramlar\u0131, matematiksel olarak tan\u0131mlanm\u0131\u015f, b\u00fcy\u00fcleyici ve estetik a\u00e7\u0131dan zengin yap\u0131lard\u0131r. Bir Voronoi diyagram\u0131 olu\u015fturmak i\u00e7in, \u00f6ncelikle bir d\u00fczlem \u00fczerinde bir dizi “\u00e7ekirdek nokta” veya “site” (points, seeds) belirlenir. Bu noktalar, diyagram\u0131n temelini olu\u015fturur. Ard\u0131ndan, d\u00fczlemdeki her bir noktay\u0131, kendisine en yak\u0131n olan \u00e7ekirdek noktaya g\u00f6re bir h\u00fccreye atayarak d\u00fczlemi b\u00f6lgelere ay\u0131r\u0131r\u0131z. Yani, her bir h\u00fccre (Voronoi h\u00fccresi), i\u00e7inde bulunan \u00e7ekirdek noktas\u0131na, di\u011fer t\u00fcm \u00e7ekirdek noktalardan daha yak\u0131n olan t\u00fcm noktalar\u0131n k\u00fcmesidir. Bu b\u00f6lgelerin s\u0131n\u0131rlar\u0131, kom\u015fu \u00e7ekirdek noktalar\u0131n orta dikmeleri \u00fczerinde olu\u015fur ve bu s\u0131n\u0131rlar, Voronoi kenarlar\u0131 olarak adland\u0131r\u0131l\u0131r. Bu kenarlar\u0131n kesi\u015fti\u011fi noktalara ise Voronoi k\u00f6\u015feleri denir. Bu basit ama g\u00fc\u00e7l\u00fc prensip, do\u011fal g\u00f6r\u00fcn\u00fcml\u00fc ve karma\u015f\u0131k desenler yaratmak i\u00e7in harika bir temel sa\u011flar.<\/p>\n
Bu diyagramlar\u0131n g\u00fczelli\u011fi, rastgeleli\u011fin ve d\u00fczenin birle\u015fmesinden gelir. \u00c7ekirdek noktalar\u0131n rastgele da\u011f\u0131l\u0131m\u0131, organik ve tahmin edilemez bir yap\u0131 olu\u015ftururken, her noktan\u0131n en yak\u0131n \u00e7ekirde\u011fe atanmas\u0131 i\u015flemi, belirli bir d\u00fczeni ve s\u00fcreklili\u011fi garanti eder. Bu sayede, \u00e7atlam\u0131\u015f toprak, hayvan postlar\u0131, sabun k\u00f6p\u00fckleri, b\u00f6cek kanatlar\u0131 veya gezegen y\u00fczeyindeki kraterler gibi do\u011fal fenomenleri taklit etmek i\u00e7in kullan\u0131labilir. Hatta mimari tasar\u0131mlarda, \u015fehir planlamas\u0131nda ve hatta veri analizinde de kendine yer bulmu\u015ftur. G\u00f6rsel olarak, Voronoi dokular\u0131 genellikle h\u00fccrelerin kenarlar\u0131 boyunca koyu renkler ve h\u00fccre i\u00e7lerinde daha a\u00e7\u0131k renklerle temsil edilir, bu da “\u00e7atlak” veya “mozaik” bir etki yarat\u0131r.<\/p>\n
WGSL (WebGPU Shading Language) gibi bir g\u00f6lgelendirici dilinde Voronoi dokusu hesaplamas\u0131 yaparken, genellikle her piksel i\u00e7in a\u015fa\u011f\u0131daki ad\u0131mlar izlenir:<\/p>\n
sqrt(dx*dx + dy*dy)<\/code> form\u00fcl\u00fc ile yap\u0131l\u0131r.<\/li>\n- En Yak\u0131n Noktay\u0131 Bulma:<\/strong> Hesaplanan uzakl\u0131klar aras\u0131ndan en k\u00fc\u00e7\u00fc\u011f\u00fc belirlenir. Bu en k\u00fc\u00e7\u00fck uzakl\u0131k, pikselin ait oldu\u011fu Voronoi h\u00fccresinin kenar\u0131na ne kadar yak\u0131n oldu\u011funu g\u00f6sterir. Bu de\u011feri do\u011frudan pikselin rengi olarak kullanmak, h\u00fccre kenarlar\u0131n\u0131n daha koyu, merkezlerinin daha a\u00e7\u0131k oldu\u011fu bir g\u00f6r\u00fcnt\u00fc olu\u015fturur. Bu en k\u00fc\u00e7\u00fck uzakl\u0131k, F1 olarak adland\u0131r\u0131lan temel Voronoi g\u00fcr\u00fclt\u00fc de\u011feridir.<\/li>\n
- \u0130kinci En Yak\u0131n Noktay\u0131 Bulma (Opsiyonel):<\/strong> Daha karma\u015f\u0131k ve ilgin\u00e7 varyasyonlar i\u00e7in, sadece en yak\u0131n noktay\u0131 de\u011fil, ayn\u0131 zamanda ikinci en yak\u0131n noktay\u0131 da bulabiliriz (F2). F2 – F1 fark\u0131n\u0131 kullanmak, h\u00fccrelerin i\u00e7 k\u0131s\u0131mlar\u0131n\u0131n daha homojen oldu\u011fu, ancak kenarlar\u0131n \u00e7ok daha belirgin ve “\u00e7atlak” g\u00f6r\u00fcnd\u00fc\u011f\u00fc bir doku olu\u015fturur. Bu, bir\u00e7ok do\u011fal malzeme dokusunu taklit etmek i\u00e7in \u00f6zellikle kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<\/ol>\n
Bu hesaplamalar, GPU’nun paralel i\u015flem g\u00fcc\u00fc sayesinde her piksel i\u00e7in e\u015f zamanl\u0131 olarak milyonlarca kez \u00e7ok h\u0131zl\u0131 bir \u015fekilde ger\u00e7ekle\u015ftirilebilir. Bu, ger\u00e7ek zamanl\u0131 olarak dinamik dokular \u00fcretmemize olanak tan\u0131r. WGPU ile bu i\u015flemleri nas\u0131l entegre edece\u011fimizi ve WGSL’de nas\u0131l kodlayaca\u011f\u0131m\u0131z\u0131 bir sonraki b\u00f6l\u00fcmde daha detayl\u0131 inceleyece\u011fiz. Prosed\u00fcrel Voronoi dokular\u0131, basit kurallardan do\u011fan karma\u015f\u0131kl\u0131\u011f\u0131n m\u00fckemmel bir \u00f6rne\u011fidir ve modern grafik uygulamalar\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n
WGPU’ya Giri\u015f: Neden Taray\u0131c\u0131da GPU Programlama Gelece\u011fimiz?<\/h2>\n
WebGPU (WGPU), modern web taray\u0131c\u0131lar\u0131 i\u00e7in geli\u015ftirilen yeni nesil bir grafik ve hesaplama API’sidir. Geleneksel olarak web tabanl\u0131 3D grafikler i\u00e7in kullan\u0131lan WebGL’nin yerini almas\u0131 hedeflenen WGPU, daha g\u00fc\u00e7l\u00fc, daha esnek ve g\u00fcncel GPU donan\u0131mlar\u0131n\u0131n sundu\u011fu \u00f6zelliklere daha do\u011frudan eri\u015fim sa\u011flayan bir platform sunar. Peki, WGPU’yu bu kadar \u00f6zel k\u0131lan nedir ve neden bu kadar \u00f6nemli?<\/p>\n
\u0130lk olarak, WGPU, modern grafik API’leri olan Vulkan, Metal ve DirectX 12’den ilham alarak tasarlanm\u0131\u015ft\u0131r. Bu, geli\u015ftiricilere d\u00fc\u015f\u00fck seviyeli GPU kontrol\u00fc imkan\u0131 sunar, bu da daha iyi performans ve daha ince optimizasyonlar yapma potansiyeli anlam\u0131na gelir. WebGL, eski ve daha k\u0131s\u0131tl\u0131 bir API olan OpenGL ES’e dayan\u0131yordu ve bu nedenle modern GPU mimarilerinden tam olarak yararlanam\u0131yordu. WGPU ile birlikte, GPU donan\u0131m\u0131n\u0131n \u00f6zelliklerini \u00e7ok daha verimli bir \u015fekilde kullanabiliriz, bu da \u00f6zellikle y\u00fcksek performans gerektiren uygulamalar (oyunlar, bilimsel sim\u00fclasyonlar, 3D modelleme ara\u00e7lar\u0131) i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r.<\/p>\n
\u0130kinci olarak, WGPU sadece grafik olu\u015fturma (rendering) yetenekleriyle s\u0131n\u0131rl\u0131 de\u011fildir; ayn\u0131 zamanda genel ama\u00e7l\u0131 GPU hesaplamalar\u0131 (compute shaders) i\u00e7in de g\u00fc\u00e7l\u00fc bir aray\u00fcz sa\u011flar. Bu, Voronoi doku \u00fcretimi gibi karma\u015f\u0131k algoritmalar\u0131 do\u011frudan GPU \u00fczerinde \u00e7al\u0131\u015ft\u0131rmak i\u00e7in kritik \u00f6neme sahiptir. Hesaplama g\u00f6lgelendiricileri sayesinde, CPU’nun y\u00fck\u00fcn\u00fc hafifleterek ve GPU’nun paralel i\u015flem g\u00fcc\u00fcnden faydalanarak b\u00fcy\u00fck veri k\u00fcmeleri \u00fczerinde inan\u0131lmaz h\u0131zda i\u015flemler ger\u00e7ekle\u015ftirebiliriz. Bu, sadece doku \u00fcretimi de\u011fil, ayn\u0131 zamanda fizik sim\u00fclasyonlar\u0131, yapay zeka \u00e7\u0131kar\u0131mlar\u0131 ve veri analizi gibi bir\u00e7ok alanda da kap\u0131lar\u0131 a\u00e7ar.<\/p>\n
\u00dc\u00e7\u00fcnc\u00fc olarak, WGPU’nun bellek y\u00f6netimi ve kaynak ba\u011flama (bind groups) modelleri, geli\u015ftiricilere daha fazla kontrol ve daha az hata pay\u0131 sunar. WebGL’de kaynak y\u00f6netimi biraz daha karma\u015f\u0131k ve hata e\u011filimli olabilirken, WGPU’nun a\u00e7\u0131k ve yap\u0131land\u0131r\u0131lm\u0131\u015f yakla\u015f\u0131m\u0131, performans\u0131 art\u0131r\u0131rken geli\u015ftirme s\u00fcrecini de kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, farkl\u0131 t\u00fcrdeki verileri (uniforms, storage buffers, textures) GPU’ya aktarmak ve shader’lar i\u00e7inde bunlara eri\u015fmek i\u00e7in bind gruplar\u0131 kullan\u0131l\u0131r, bu da kaynak y\u00f6netimini \u00e7ok daha d\u00fczenli hale getirir.<\/p>\n
Son olarak, WGPU, Rust programlama dilinde geli\u015ftirilen wgpu-rs<\/code> k\u00fct\u00fcphanesi arac\u0131l\u0131\u011f\u0131yla ve web’de JavaScript\/TypeScript ile kullan\u0131labilir. Bu platformlar aras\u0131 uyumluluk, geli\u015ftiricilerin ayn\u0131 mant\u0131\u011f\u0131 ve shader kodunu farkl\u0131 ortamlarda yeniden kullanmas\u0131na olanak tan\u0131r. Web ortam\u0131nda ise, do\u011frudan taray\u0131c\u0131 API’si olarak sunulmas\u0131, herhangi bir eklenti veya \u00f6zel kurulum gerektirmeden modern GPU yeteneklerine eri\u015fim anlam\u0131na gelir. Bu, \u00f6zellikle etkile\u015fimli web uygulamalar\u0131 ve web tabanl\u0131 oyunlar i\u00e7in devrim niteli\u011findedir.<\/p>\n\n Uzman \u0130pucu: WGPU’nun sa\u011flad\u0131\u011f\u0131 d\u00fc\u015f\u00fck seviyeli eri\u015fim, geli\u015ftiricilere GPU donan\u0131m\u0131n\u0131n \u00f6zelliklerini do\u011frudan kullanma imkan\u0131 verir. Bu sayede, WebGL’de m\u00fcmk\u00fcn olmayan veya \u00e7ok zor olan teknikleri (\u00f6rne\u011fin, bind gruplar\u0131n\u0131 optimize ederek \u00e7a\u011fr\u0131 say\u0131s\u0131n\u0131 azaltmak) uygulayarak performans\u0131 %30-50 oran\u0131nda art\u0131rabilirsiniz. \u00d6zellikle b\u00fcy\u00fck \u00f6l\u00e7ekli dokular veya karma\u015f\u0131k sahneler i\u00e7in bu optimizasyonlar hayati \u00f6neme sahiptir.\n <\/div>\n\u00d6zetle, WGPU sadece WebGL’nin bir sonraki versiyonu de\u011fil, ayn\u0131 zamanda web’de GPU programlaman\u0131n gelece\u011fidir. Geli\u015fmi\u015f performans\u0131, esnekli\u011fi, genel ama\u00e7l\u0131 hesaplama yetenekleri ve platformlar aras\u0131 uyumlulu\u011fu ile geli\u015ftiricilere, taray\u0131c\u0131da daha \u00f6nce hayal bile edilemeyen g\u00f6rsel ve hesaplama g\u00fcc\u00fc sunar. Bu g\u00fc\u00e7l\u00fc API sayesinde, prosed\u00fcrel Voronoi dokular\u0131n\u0131 olu\u015fturmak gibi karma\u015f\u0131k g\u00f6revler art\u0131k \u00e7ok daha eri\u015filebilir ve verimli hale gelmi\u015ftir. \u015eimdi, WGPU ortam\u0131n\u0131 nas\u0131l kuraca\u011f\u0131m\u0131z\u0131 inceleyelim.<\/p>\n
WGPU Ortam\u0131n\u0131 Kurma: Temel Bile\u015fenler Nelerdir?<\/h2>\n
WGPU ile prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmaya ba\u015flamadan \u00f6nce, temel bir WGPU ortam\u0131n\u0131 kurmam\u0131z gerekiyor. Bu, genellikle bir HTML sayfas\u0131, JavaScript dosyas\u0131 ve taray\u0131c\u0131n\u0131z\u0131n WGPU API’sini desteklemesiyle ba\u015flar. Modern taray\u0131c\u0131lar (Chrome, Firefox, Edge, Safari) WGPU deste\u011fini kademeli olarak sunmaktad\u0131r. Temel olarak, bir WGPU uygulamas\u0131 \u015fu bile\u015fenlerden olu\u015fur:<\/p>\n
\n- HTML Canvas:<\/strong> GPU \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00f6sterece\u011fimiz ana y\u00fczeydir.<\/li>\n
- GPUAdapter:<\/strong> Mevcut GPU donan\u0131m\u0131n\u0131 temsil eder.<\/li>\n
- GPUDevice:<\/strong> GPU ile etkile\u015fim kurmak i\u00e7in kullan\u0131lan mant\u0131ksal bir ayg\u0131t.<\/li>\n
- GPUCanvasContext:<\/strong> Canvas ile GPU aras\u0131nda bir ba\u011flant\u0131 kurar.<\/li>\n
- GPURenderPipeline:<\/strong> Grafik \u00e7izim i\u015fleminin t\u00fcm a\u015famalar\u0131n\u0131 tan\u0131mlar (shader’lar, d\u00fczenler, \u00e7\u0131kt\u0131 formatlar\u0131).<\/li>\n
- GPUBufferlar:<\/strong> Vertex verileri, indeks verileri, uniform de\u011fi\u015fkenler gibi GPU’ya g\u00f6nderilecek verileri i\u00e7erir.<\/li>\n
- GPUTexture:<\/strong> Doku verilerini saklar ve i\u015fler.<\/li>\n<\/ol>\n
\u015eimdi, minimum bir WGPU kurulumunun nas\u0131l g\u00f6r\u00fcnece\u011fine dair genel bir yap\u0131ya g\u00f6z atal\u0131m. Unutmay\u0131n, bu sadece Voronoi dokusunu olu\u015fturmak i\u00e7in gerekli olan temel \u00e7er\u00e7evedir. Tam bir uygulama \u00e7ok daha fazla detay i\u00e7erecektir.<\/p>\n
\u00d6ncelikle, HTML dosyam\u0131zda bir canvas elementine ihtiyac\u0131m\u0131z var:<\/p>\n
\n\n\n\n \n \n WGPU Voronoi Doku Olu\u015fturucu<\/title>\n <style>\n body { margin: 0; overflow: hidden; background-color: #222; display: flex; justify-content: center; align-items: center; min-height: 100vh; }\n canvas { border: 1px solid #555; max-width: 90vw; max-height: 90vh; }\n \/* Mobil uyumluluk i\u00e7in media query \u00f6rnekleri *\/\n @media (max-width: 768px) {\n canvas { width: 100vw; height: auto; }\n }\n @media (max-width: 480px) {\n canvas { width: 100vw; height: 100vh; }\n }\n <\/style>\n<\/head>\n<body>\n <canvas id=\"voronoiCanvas\" width=\"800\" height=\"600\"><\/canvas>\n <script src=\"main.js\"><\/script>\n<\/body>\n<\/html>\n <\/pre>\n<p><\/code><\/p>\n<p>Ard\u0131ndan, <code>main.js<\/code> dosyam\u0131zda WGPU'yu ba\u015flatacak kodlar\u0131 yazmaya ba\u015flayabiliriz. Bu k\u0131s\u0131mda, temel WGPU nesnelerini olu\u015fturacak ve render d\u00f6ng\u00fcs\u00fcn\u00fc ayarlayaca\u011f\u0131z.<\/p>\n<pre><code class=\"language-javascript\">\nasync function initWGPU() {\n if (!navigator.gpu) {\n alert(\"Taray\u0131c\u0131n\u0131z WebGPU'yu desteklemiyor!\");\n return;\n }\n\n const canvas = document.getElementById(\"voronoiCanvas\");\n const adapter = await navigator.gpu.requestAdapter();\n const device = await adapter.requestDevice();\n\n const context = canvas.getContext(\"webgpu\");\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\n context.configure({\n device,\n format: presentationFormat,\n alphaMode: \"opaque\",\n });\n\n \/\/ Vertex buffer'\u0131 olu\u015fturma (Ekran\u0131 kaplayan bir d\u00f6rtgen i\u00e7in)\n const vertices = new Float32Array([\n -1.0, -1.0, \/\/ Sol alt\n 1.0, -1.0, \/\/ Sa\u011f alt\n -1.0, 1.0, \/\/ Sol \u00fcst\n 1.0, 1.0, \/\/ Sa\u011f \u00fcst\n ]);\n const vertexBuffer = device.createBuffer({\n label: \"Ekran D\u00f6rtgeni Vertex Buffer\",\n size: vertices.byteLength,\n usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,\n mappedAtCreation: true,\n });\n new Float32Array(vertexBuffer.getMappedRange()).set(vertices);\n vertexBuffer.unmap();\n\n \/\/ Shader kodunu burada tan\u0131mlayaca\u011f\u0131z (Sonraki b\u00f6l\u00fcmlerde).\n \/\/ ...\n\n \/\/ Render pipeline'\u0131 ve bind gruplar\u0131 burada olu\u015fturulacak.\n \/\/ ...\n\n function renderLoop() {\n \/\/ Render komutlar\u0131 burada verilecek.\n \/\/ ...\n requestAnimationFrame(renderLoop);\n }\n\n renderLoop();\n}\n\ninitWGPU();\n <\/pre>\n<p><\/code><\/p>\n<p>Yukar\u0131daki JavaScript kodu, WGPU'nun temelini atar: canvas'\u0131 al\u0131r, bir GPU adapt\u00f6r\u00fc ve ayg\u0131t\u0131 ister, ard\u0131ndan canvas ba\u011flam\u0131n\u0131 yap\u0131land\u0131r\u0131r. Ayr\u0131ca, t\u00fcm ekran\u0131 kaplayacak basit bir d\u00f6rtgenin k\u00f6\u015fe verilerini i\u00e7eren bir vertex buffer olu\u015ftururuz. Bu d\u00f6rtgen, Voronoi dokusunu \u00fczerine \u00e7izece\u011fimiz y\u00fczey olacakt\u0131r. <code>renderLoop<\/code> fonksiyonu ise grafiklerin s\u00fcrekli olarak g\u00fcncellenmesini sa\u011flayacak ana d\u00f6ng\u00fcd\u00fcr. Bu temel yap\u0131 \u00fczerine, WGSL shader kodumuzu ve render pipeline'\u0131m\u0131z\u0131 in\u015fa edece\u011fiz. Bu kurulum, WGPU ile etkile\u015fim kurmak i\u00e7in gerekli olan minimum \u00e7er\u00e7eveyi sunar ve Voronoi dokusu \u00fcretiminin kalbine inmemize olanak tan\u0131r.<\/p>\n<h2>Voronoi Shader'\u0131 Yazmak: Ad\u0131m Ad\u0131m Yakla\u015f\u0131m<\/h2>\n<p>WGPU'daki Voronoi doku \u00fcretiminin kalbi, WGSL (WebGPU Shading Language) ile yazd\u0131\u011f\u0131m\u0131z g\u00f6lgelendirici kodudur. Bu g\u00f6lgelendirici, her pikselin rengini hesaplayarak Voronoi desenini olu\u015fturur. \u015eimdi ad\u0131m ad\u0131m bu shader'\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za bakal\u0131m.<\/p>\n<h3>Rastgele Noktalar Nas\u0131l Belirlenir?<\/h3>\n<p>Voronoi'nin temelini olu\u015fturan \u00e7ekirdek noktalar\u0131, her bir pikselin bulundu\u011fu \"\u0131zgara h\u00fccresi\" i\u00e7inde rastgele olarak olu\u015fturulur. Ancak bu rastgelelik, her \u00e7al\u0131\u015ft\u0131rmada ayn\u0131 dokuyu elde etmek i\u00e7in deterministik olmal\u0131d\u0131r. Bunu sa\u011flamak i\u00e7in, pikselin d\u00fcnya koordinatlar\u0131na dayal\u0131 bir hash fonksiyonu kullan\u0131r\u0131z. Bu hash fonksiyonu, her bir \u0131zgara h\u00fccresi i\u00e7in benzersiz, ancak sabit bir \"rastgele\" de\u011fer \u00fcretir. Bu sayede, ayn\u0131 koordinatlardaki pikseller her zaman ayn\u0131 \u00e7ekirdek noktalar\u0131n\u0131 g\u00f6r\u00fcr.<\/p>\n<p>\u0130\u015fte basit bir hash fonksiyonu ve rastgele nokta olu\u015fturma mant\u0131\u011f\u0131:<\/p>\n<pre><code class=\"language-wgsl\">\n\/\/ Basit bir hash fonksiyonu. Daha karma\u015f\u0131k ve kaliteli hash fonksiyonlar\u0131 da kullan\u0131labilir.\nfn hash(p: vec2f) -> vec2f {\n let p_floor = floor(p);\n let p_fract = fract(p);\n let h = vec2f(dot(p_floor, vec2f(127.1, 311.7)),\n dot(p_floor, vec2f(269.5, 183.3)));\n return fract(sin(h) * 43758.5453) * 2.0 - 1.0; \/\/ [-1, 1] aral\u0131\u011f\u0131nda rastgele de\u011ferler\n}\n\n\/\/ Bir \u0131zgara h\u00fccresi i\u00e7inde rastgele bir nokta \u00fcretir\nfn get_cell_point(cell_coord: vec2f, seed: f32) -> vec2f {\n \/\/ cell_coord'u kullanarak deterministik bir rastgelelik elde edelim.\n let random_offset = hash(cell_coord + seed);\n return cell_coord + (random_offset * 0.5 + 0.5); \/\/ [0, 1] aral\u0131\u011f\u0131nda ofset ekler\n}\n <\/pre>\n<p><\/code><\/p>\n<h3>Uzakl\u0131k Hesaplama: En Yak\u0131n Noktay\u0131 Bulma Algoritmas\u0131<\/h3>\n<p>\u015eimdi, mevcut piksel koordinat\u0131m\u0131z i\u00e7in en yak\u0131n \u00e7ekirdek noktay\u0131 bulmam\u0131z gerekiyor. Bu, pikselin \u00e7evresindeki 3x3 (veya daha b\u00fcy\u00fck) \u0131zgara h\u00fccrelerindeki t\u00fcm \u00e7ekirdek noktalar\u0131n\u0131 kontrol etmeyi gerektirir. Her bir \u00e7ekirdek noktas\u0131 i\u00e7in pikselden olan mesafeyi hesaplayacak ve en k\u0131sa olan\u0131 se\u00e7ece\u011fiz.<\/p>\n<pre><code class=\"language-wgsl\">\nfn voronoi_distance(uv: vec2f, scale: f32, seed: f32) -> f32 {\n let scaled_uv = uv * scale;\n let current_cell_coord = floor(scaled_uv);\n var min_dist = 100000.0; \/\/ \u00c7ok b\u00fcy\u00fck bir ba\u015flang\u0131\u00e7 de\u011feri\n\n \/\/ 3x3 kom\u015fu h\u00fccreleri kontrol et\n for (var y_offset: i32 = -1; y_offset <= 1; y_offset++) {\n for (var x_offset: i32 = -1; x_offset <= 1; x_offset++) {\n let neighbor_cell_coord = current_cell_coord + vec2f(f32(x_offset), f32(y_offset));\n let cell_point = get_cell_point(neighbor_cell_coord, seed);\n\n let dist = distance(scaled_uv, cell_point);\n min_dist = min(min_dist, dist);\n }\n }\n return min_dist;\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu fonksiyon, verilen UV koordinatlar\u0131n\u0131 belirli bir \u00f6l\u00e7ekte b\u00fcy\u00fct\u00fcr, mevcut h\u00fccre koordinat\u0131n\u0131 bulur ve \u00e7evresindeki 9 h\u00fccredeki her bir \u00e7ekirdek nokta i\u00e7in uzakl\u0131\u011f\u0131 hesaplar. En k\u00fc\u00e7\u00fck uzakl\u0131k, bu pikselin Voronoi h\u00fccresinin kenar\u0131na olan mesafesini temsil eder (F1 de\u011feri).<\/p>\n<h3>Renk De\u011ferlerini Belirleme: \u00c7e\u015fitli Voronoi G\u00f6r\u00fcn\u00fcmleri<\/h3>\n<p>En yak\u0131n mesafeyi bulduktan sonra, bu mesafeyi kullanarak pikselin rengini belirleyebiliriz. \u0130\u015fte baz\u0131 yayg\u0131n yakla\u015f\u0131mlar:<\/p>\n<ul>\n<li><strong>F1 G\u00fcr\u00fclt\u00fcs\u00fc:<\/strong> <code class=\"language-wgsl\">min_dist<\/code> de\u011ferini do\u011frudan renk olarak kullanmak, h\u00fccre kenarlar\u0131n\u0131n koyu, merkezlerinin a\u00e7\u0131k oldu\u011fu temel bir Voronoi deseni verir.<\/li>\n<li><strong>F2-F1 G\u00fcr\u00fclt\u00fcs\u00fc:<\/strong> \u0130kinci en yak\u0131n mesafeyi (F2) bulup F2-F1 fark\u0131n\u0131 almak, h\u00fccrelerin i\u00e7 k\u0131s\u0131mlar\u0131n\u0131n daha d\u00fczg\u00fcn, kenarlar\u0131n ise daha belirgin ve \"\u00e7atlak\" g\u00f6r\u00fcnd\u00fc\u011f\u00fc bir doku olu\u015fturur. Bu genellikle en pop\u00fcler Voronoi doku tipidir.<\/li>\n<\/ul>\n<p>F2-F1 yakla\u015f\u0131m\u0131n\u0131 entegre edelim:<\/p>\n<pre><code class=\"language-wgsl\">\nfn voronoi_noise(uv: vec2f, scale: f32, seed: f32) -> f32 {\n let scaled_uv = uv * scale;\n let current_cell_coord = floor(scaled_uv);\n\n var min_dist1 = 100000.0;\n var min_dist2 = 100000.0; \/\/ \u0130kinci en yak\u0131n mesafeyi tutar\n\n for (var y_offset: i32 = -1; y_offset <= 1; y_offset++) {\n for (var x_offset: i32 = -1; x_offset <= 1; x_offset++) {\n let neighbor_cell_coord = current_cell_coord + vec2f(f32(x_offset), f32(y_offset));\n let cell_point = get_cell_point(neighbor_cell_coord, seed);\n\n let dist = distance(scaled_uv, cell_point);\n\n if (dist < min_dist1) {\n min_dist2 = min_dist1; \/\/ Eski min_dist1, yeni min_dist2 olur\n min_dist1 = dist; \/\/ dist, yeni min_dist1 olur\n } else if (dist < min_dist2) {\n min_dist2 = dist;\n }\n }\n }\n return min_dist2 - min_dist1; \/\/ F2-F1 fark\u0131n\u0131 d\u00f6nd\u00fcr\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Bu temel WGSL kodunu bir fragman g\u00f6lgelendiriciye (fragment shader) entegre ederek, her piksel i\u00e7in yukar\u0131daki hesaplamalar\u0131 \u00e7al\u0131\u015ft\u0131r\u0131r\u0131z. Fragment shader'\u0131n ana fonksiyonu a\u015fa\u011f\u0131daki gibi g\u00f6r\u00fcnecektir:<\/p>\n<pre><code class=\"language-wgsl\">\nstruct VertexOutput {\n @builtin(position) position: vec4f,\n @location(0) uv: vec2f,\n}\n\n\/\/ Uniform de\u011fi\u015fkenleri (GPU'dan shader'a g\u00f6nderilen sabitler)\n@group(0) @binding(0)\nvar<uniform> uniforms: struct {\n resolution: vec2f,\n time: f32,\n scale: f32,\n seed: f32,\n};\n\n@fragment\nfn fragment_main(input: VertexOutput) -> @location(0) vec4f {\n let uv = input.uv; \/\/ Ekran koordinatlar\u0131 (0,0) - (1,1) aral\u0131\u011f\u0131nda\n let voronoi_val = voronoi_noise(uv, uniforms.scale, uniforms.seed + uniforms.time * 0.05); \/\/ Zamanla de\u011fi\u015fen seed\n \n \/\/ De\u011feri normalize edip renk olarak kullan\n let color_val = smoothstep(0.0, 0.6, voronoi_val); \/\/ G\u00f6rsel iyile\u015ftirme i\u00e7in smoothstep\n \n return vec4f(color_val, color_val, color_val, 1.0); \/\/ Gri tonlamal\u0131 \u00e7\u0131kt\u0131\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Burada <code>uniforms<\/code> struct'\u0131 arac\u0131l\u0131\u011f\u0131yla JavaScript'ten shader'a \u00e7\u00f6z\u00fcn\u00fcrl\u00fck, zaman, \u00f6l\u00e7ek ve seed gibi de\u011ferleri iletiyoruz. <code>smoothstep<\/code> fonksiyonu, renk ge\u00e7i\u015flerini daha yumu\u015fak hale getirerek g\u00f6rsel olarak daha ho\u015f bir sonu\u00e7 elde etmemizi sa\u011flar. Bu WGSL kod par\u00e7ac\u0131klar\u0131, WGPU ile prosed\u00fcrel Voronoi dokusu \u00fcretmenin temelini olu\u015fturur. \u015eimdi, bu shader'\u0131 WGPU render pipeline'\u0131m\u0131za nas\u0131l entegre edece\u011fimizi ve dokuyu ekrana nas\u0131l \u00e7izece\u011fimizi g\u00f6relim.<\/p>\n<h2>WGPU Pipeline Olu\u015fturma ve Dokuyu Render Etme: G\u00f6rselle\u015ftirme Ad\u0131mlar\u0131<\/h2>\n<p>Voronoi g\u00f6lgelendirici kodumuzu WGSL'de yazd\u0131ktan sonra, bu kodu WGPU ortam\u0131nda \u00e7al\u0131\u015ft\u0131racak bir render pipeline olu\u015fturmam\u0131z ve dokuyu ekrana \u00e7izmemiz gerekiyor. Bu s\u00fcre\u00e7, birka\u00e7 temel ad\u0131mdan olu\u015fur: g\u00f6lgelendirici mod\u00fcl\u00fc olu\u015fturma, bind grup d\u00fczenlerini ve bind gruplar\u0131n\u0131 tan\u0131mlama, render pipeline'\u0131 yap\u0131land\u0131rma ve son olarak \u00e7izim komutlar\u0131n\u0131 kaydetme ve y\u00fcr\u00fctme.<\/p>\n<h3>G\u00f6lgelendirici Mod\u00fcl\u00fc ve Pipeline D\u00fczenleri<\/h3>\n<p>\u0130lk olarak, WGSL kodumuzu bir <code>GPUShaderModule<\/code> nesnesine d\u00f6n\u00fc\u015ft\u00fcrmemiz gerekir. Bu mod\u00fcl, GPU'nun do\u011frudan anlayaca\u011f\u0131 bir formata \u00e7evrilir. Ard\u0131ndan, g\u00f6lgelendiricimizin nas\u0131l veri alaca\u011f\u0131n\u0131 (uniform de\u011fi\u015fkenler, dokular vb.) belirten <code>GPUBindGroupLayout<\/code> ve <code>GPUPipelineLayout<\/code> nesnelerini olu\u015ftururuz.<\/p>\n<pre><code class=\"language-javascript\">\n\/\/ ... initWGPU fonksiyonunun i\u00e7inde ...\n\n const shaderCode = <code>\/\/ WGSL hash ve voronoi_noise fonksiyonlar\u0131 buraya gelecek\n \/\/ ... (Yukar\u0131daki WGSL kodunu buraya yap\u0131\u015ft\u0131r\u0131n) ...\n\n struct VertexOutput {\n @builtin(position) position: vec4f,\n @location(0) uv: vec2f,\n }\n\n @vertex\n fn vertex_main(@location(0) position: vec2f) -> VertexOutput {\n var output: VertexOutput;\n output.position = vec4f(position, 0.0, 1.0);\n \/\/ [-1, 1] aral\u0131\u011f\u0131ndaki position'\u0131 [0, 1] aral\u0131\u011f\u0131na \u00e7evir\n output.uv = (position * 0.5) + 0.5; \n return output;\n }\n\n @group(0) @binding(0)\n var<uniform> uniforms: struct {\n resolution: vec2f,\n time: f32,\n scale: f32,\n seed: f32,\n };\n\n @fragment\n fn fragment_main(input: VertexOutput) -> @location(0) vec4f {\n let uv = input.uv;\n let voronoi_val = voronoi_noise(uv, uniforms.scale, uniforms.seed + uniforms.time * 0.05);\n let color_val = smoothstep(0.0, 0.6, voronoi_val);\n return vec4f(color_val, color_val, color_val, 1.0);\n }<\/code>;\n\n const shaderModule = device.createShaderModule({\n label: \"Voronoi Shader\",\n code: shaderCode,\n });\n\n const bindGroupLayout = device.createBindGroupLayout({\n label: \"Uniform Bind Group Layout\",\n entries: [{\n binding: 0,\n visibility: GPUShaderStage.FRAGMENT, \/\/ Sadece fragment shader'da g\u00f6r\u00fclecek\n buffer: { type: \"uniform\" },\n }],\n });\n\n const pipelineLayout = device.createPipelineLayout({\n label: \"Render Pipeline Layout\",\n bindGroupLayouts: [bindGroupLayout],\n });\n <\/pre>\n<p><\/code><\/p>\n<h3>Render Pipeline Olu\u015fturma<\/h3>\n<p>Render pipeline, vertex ve fragment g\u00f6lgelendiricilerimizi, hangi formatta veri bekledi\u011fimizi (vertex buffer'lar i\u00e7in), hangi \u00e7\u0131kt\u0131 format\u0131n\u0131 kullanaca\u011f\u0131m\u0131z\u0131 (canvas format\u0131) ve di\u011fer render ayarlar\u0131n\u0131 bir araya getirir. Bu, GPU'ya \u00e7izim i\u015flemi i\u00e7in tam bir talimat setidir.<\/p>\n<pre><code class=\"language-javascript\">\n const renderPipeline = device.createRenderPipeline({\n label: \"Voronoi Render Pipeline\",\n layout: pipelineLayout,\n vertex: {\n module: shaderModule,\n entryPoint: \"vertex_main\",\n buffers: [{ \/\/ Ekran\u0131 kaplayan d\u00f6rtgenin vertex format\u0131\n arrayStride: 2 * 4, \/\/ 2 float * 4 byte\/float\n attributes: [{\n shaderLocation: 0,\n offset: 0,\n format: \"float32x2\",\n }],\n }],\n },\n fragment: {\n module: shaderModule,\n entryPoint: \"fragment_main\",\n targets: [{\n format: presentationFormat,\n }],\n },\n primitive: {\n topology: \"triangle-strip\", \/\/ D\u00f6rtgeni \u00e7izmek i\u00e7in\n },\n });\n <\/pre>\n<p><\/code><\/p>\n<h3>Uniform Buffer ve Bind Grubu Olu\u015fturma<\/h3>\n<p>\u015eimdi, shader'\u0131m\u0131zda tan\u0131mlad\u0131\u011f\u0131m\u0131z <code>uniforms<\/code> struct'\u0131na veri g\u00f6ndermek i\u00e7in bir <code>GPUBuffer<\/code> olu\u015fturmam\u0131z ve bu buffer'\u0131 bir <code>GPUBindGroup<\/code>'a ba\u011flamam\u0131z gerekiyor. Bu, zaman, \u00f6l\u00e7ek ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fck gibi de\u011ferleri JavaScript'ten WGSL shader'\u0131na aktarmam\u0131z\u0131 sa\u011flar.<\/p>\n<pre><code class=\"language-javascript\">\n const uniformBufferSize = (2 + 1 + 1) * 4; \/\/ resolution (vec2f) + time (f32) + scale (f32) + seed (f32) = 4 * 4 byte = 16 byte\n const uniformBuffer = device.createBuffer({\n label: \"Uniform Buffer\",\n size: uniformBufferSize,\n usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,\n });\n\n const bindGroup = device.createBindGroup({\n label: \"Uniform Bind Group\",\n layout: bindGroupLayout,\n entries: [{\n binding: 0,\n resource: { buffer: uniformBuffer },\n }],\n });\n <\/pre>\n<p><\/code><\/p>\n<h3>Render D\u00f6ng\u00fcs\u00fc ve \u00c7izim Komutlar\u0131<\/h3>\n<p><code>renderLoop<\/code> fonksiyonumuzun i\u00e7inde, her karede g\u00fcncellenmesi gereken uniform de\u011ferlerini yazar\u0131z ve ard\u0131ndan \u00e7izim komutlar\u0131n\u0131 kaydederiz.<\/p>\n<pre><code class=\"language-javascript\">\n let startTime = performance.now();\n const voronoiScale = 15.0; \/\/ Voronoi \u00f6l\u00e7e\u011fi\n const voronoiSeed = Math.random() * 1000.0; \/\/ Ba\u015flang\u0131\u00e7 seed de\u011feri\n\n function renderLoop() {\n const currentTime = performance.now();\n const elapsedTime = (currentTime - startTime) \/ 1000.0; \/\/ Saniye cinsinden\n\n \/\/ Uniform verilerini g\u00fcncelle\n const uniformsData = new Float32Array([\n canvas.width, canvas.height, \/\/ resolution\n elapsedTime, \/\/ time\n voronoiScale, \/\/ scale\n voronoiSeed, \/\/ seed\n ]);\n device.queue.writeBuffer(uniformBuffer, 0, uniformsData);\n\n const commandEncoder = device.createCommandEncoder();\n const textureView = context.getCurrentTexture().createView();\n\n const renderPassEncoder = commandEncoder.beginRenderPass({\n label: \"Render Pass\",\n colorAttachments: [{\n view: textureView,\n clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },\n loadOp: \"clear\",\n storeOp: \"store\",\n }],\n });\n\n renderPassEncoder.setPipeline(renderPipeline);\n renderPassEncoder.setBindGroup(0, bindGroup);\n renderPassEncoder.setVertexBuffer(0, vertexBuffer);\n renderPassEncoder.draw(4, 1, 0, 0); \/\/ 4 k\u00f6\u015fe (triangle-strip ile 2 \u00fc\u00e7gen olu\u015fturur)\n\n renderPassEncoder.end();\n device.queue.submit([commandEncoder.finish()]);\n\n requestAnimationFrame(renderLoop);\n }\n <\/pre>\n<p><\/code><\/p>\n<p>Bu ad\u0131mlar tamamland\u0131\u011f\u0131nda, web sayfan\u0131zda dinamik olarak olu\u015fturulmu\u015f bir Voronoi dokusu g\u00f6rmeye ba\u015flayacaks\u0131n\u0131z. <code>renderLoop<\/code> i\u00e7indeki <code>elapsedTime<\/code> de\u011fi\u015fkeni sayesinde, doku zamanla hafif\u00e7e de\u011fi\u015febilir, bu da daha dinamik bir g\u00f6rsel deneyim sunar. <code>voronoiScale<\/code> ve <code>voronoiSeed<\/code> gibi de\u011fi\u015fkenleri de\u011fi\u015ftirerek farkl\u0131 doku g\u00f6r\u00fcn\u00fcmleri elde edebilirsiniz. Bu yap\u0131, WGPU'nun modern grafik boru hatt\u0131n\u0131 kullanarak prosed\u00fcrel doku \u00fcretimi i\u00e7in nas\u0131l bir temel olu\u015fturdu\u011fumuzu a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<h2>Geli\u015fmi\u015f Teknikler ve Ger\u00e7ek D\u00fcnya Uygulamalar\u0131: Voronoi Dokular\u0131n\u0131 Zenginle\u015ftirme<\/h2>\n<p>Temel bir Voronoi dokusunu WGPU ile olu\u015fturmay\u0131 \u00f6\u011frendi\u011fimize g\u00f6re, \u015fimdi bu tekni\u011fi daha da ileri ta\u015f\u0131yacak geli\u015fmi\u015f y\u00f6ntemlere ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131na g\u00f6z atal\u0131m. Prosed\u00fcrel Voronoi dokular\u0131, sadece soyut desenler olmaktan \u00f6te, bir\u00e7ok karma\u015f\u0131k g\u00f6rsel efekti taklit etmek i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Pert\u00fcrbasyon ve Renk Paletleri: Daha Organik G\u00f6r\u00fcn\u00fcmler<\/h3>\n<p>Temel Voronoi deseni genellikle geometrik ve d\u00fczg\u00fcn h\u00fccrelerden olu\u015fur. Ancak, do\u011fal d\u00fcnyadaki desenler genellikle daha \"organik\" ve \"d\u00fczensizdir\". Bu d\u00fczensizli\u011fi eklemek i\u00e7in \"pert\u00fcrbasyon\" ad\u0131 verilen bir teknik kullanabiliriz. Bu, Voronoi \u00e7ekirdek noktalar\u0131n\u0131n konumlar\u0131n\u0131, ba\u015fka bir g\u00fcr\u00fclt\u00fc fonksiyonu (\u00f6rne\u011fin Perlin veya Simplex g\u00fcr\u00fclt\u00fcs\u00fc) kullanarak hafif\u00e7e kayd\u0131rmakt\u0131r. Bu kayd\u0131rma, h\u00fccre kenarlar\u0131n\u0131n dalgal\u0131, \u00e7atlakl\u0131 veya daha az d\u00fczg\u00fcn g\u00f6r\u00fcnmesini sa\u011flar, bu da onu kaya, ah\u015fap veya y\u0131pranm\u0131\u015f y\u00fczeyler gibi malzemeleri taklit etmek i\u00e7in m\u00fckemmel k\u0131lar.<\/p>\n<pre><code class=\"language-wgsl\">\n\/\/ ... \u00f6nceki hash ve voronoi_noise fonksiyonlar\u0131 ...\n\n\/\/ \u00d6rnek bir Perlin g\u00fcr\u00fclt\u00fcs\u00fc fonksiyonu (Basitli\u011fi i\u00e7in basitle\u015ftirilmi\u015f)\nfn perlin_noise(p: vec2f) -> f32 {\n let p_floor = floor(p);\n let p_fract = fract(p);\n let n00 = hash(p_floor);\n let n10 = hash(p_floor + vec2f(1.0, 0.0));\n let n01 = hash(p_floor + vec2f(0.0, 1.0));\n let n11 = hash(p_floor + vec2f(1.0, 1.0));\n \n let u = p_fract * p_fract * (3.0 - 2.0 * p_fract); \/\/ Smoothstep\n \n let res = mix(mix(n00.x, n10.x, u.x), mix(n01.x, n11.x, u.x), u.y);\n return res;\n}\n\n@fragment\nfn fragment_main(input: VertexOutput) -> @location(0) vec4f {\n let uv_orig = input.uv;\n \n \/\/ Perlin g\u00fcr\u00fclt\u00fcs\u00fc ile UV koordinatlar\u0131n\u0131 pert\u00fcrbe et\n let perturbation = vec2f(perlin_noise(uv_orig * 10.0 + uniforms.time * 0.1), \n perlin_noise(uv_orig * 10.0 + uniforms.time * 0.1 + 123.45));\n let uv_perturbed = uv_orig + perturbation * 0.05; \/\/ Pert\u00fcrbasyon miktar\u0131n\u0131 ayarla\n\n let voronoi_val = voronoi_noise(uv_perturbed, uniforms.scale, uniforms.seed + uniforms.time * 0.05);\n let color_val = smoothstep(0.0, 0.6, voronoi_val);\n \n \/\/ Renk paleti kullan\u0131m\u0131 (\u00d6rnek: Kahverengi tonlar\u0131)\n let color_a = vec3f(0.2, 0.1, 0.05); \/\/ Koyu kahverengi\n let color_b = vec3f(0.8, 0.6, 0.4); \/\/ A\u00e7\u0131k kahverengi\n let final_color = mix(color_a, color_b, color_val);\n\n return vec4f(final_color, 1.0);\n}\n <\/pre>\n<p><\/code><\/p>\n<p>Ayr\u0131ca, tek bir gri tonlamal\u0131 de\u011fer yerine, belirli renk paletleri kullanarak dokulara daha fazla hayat katabiliriz. <code>mix<\/code> fonksiyonunu kullanarak, Voronoi de\u011ferine g\u00f6re iki veya daha fazla renk aras\u0131nda ge\u00e7i\u015f yapabiliriz. Bu, \u00e7atlaklar\u0131n farkl\u0131 bir renkte, h\u00fccre i\u00e7lerinin farkl\u0131 bir renkte olmas\u0131n\u0131 sa\u011flayarak daha zengin ve g\u00f6rsel olarak \u00e7ekici sonu\u00e7lar verir.<\/p>\n<h3>Farkl\u0131 Voronoi Fonksiyonlar\u0131 ve Hacimsel Dokular<\/h3>\n<p>Daha \u00f6nce F1 ve F2-F1 varyasyonlar\u0131n\u0131 g\u00f6rd\u00fck. Ancak Voronoi g\u00fcr\u00fclt\u00fcs\u00fcn\u00fcn ba\u015fka \u00e7e\u015fitleri de mevcuttur. \u00d6rne\u011fin, F2, F3-F2, F4-F3 gibi de\u011ferler kullanarak farkl\u0131 estetik sonu\u00e7lar elde edilebilir. Her bir varyasyon, belirli do\u011fal desenleri daha iyi taklit edebilir. \u00d6rne\u011fin, F2-F1 h\u00fccre kenarlar\u0131n\u0131 vurgularken, F1 daha yumu\u015fak bir h\u00fccre yap\u0131s\u0131 g\u00f6sterir. Ayr\u0131ca, Voronoi dokusunu 2D d\u00fczlem yerine 3D uzayda hesaplayarak hacimsel dokular (3D g\u00fcr\u00fclt\u00fc) olu\u015fturmak da m\u00fcmk\u00fcnd\u00fcr. Bu, bulutlar, duman veya kaya olu\u015fumlar\u0131 gibi hacimsel materyalleri modellemek i\u00e7in kullan\u0131labilir.<\/p>\n<h3>Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve Vaka Analizleri<\/h3>\n<ul>\n<li>\n <strong>Oyunlarda Arazi ve Kaya Dokular\u0131:<\/strong> Minecraft gibi voksel tabanl\u0131 oyunlarda veya di\u011fer 3D oyunlarda, Voronoi g\u00fcr\u00fclt\u00fcs\u00fc arazi olu\u015fumlar\u0131 i\u00e7in kullan\u0131labilir. \u00d6rne\u011fin, bir gezegen y\u00fczeyindeki kraterleri veya lav ak\u0131\u015flar\u0131n\u0131 sim\u00fcle etmek i\u00e7in F2-F1 Voronoi g\u00fcr\u00fclt\u00fcs\u00fcn\u00fc rak\u0131m verilerine uygulayabilirsiniz.<\/p>\n<div class=\"expert-tip\">\n Uzman \u0130pucu: Oyunlarda Voronoi dokular\u0131n\u0131 sadece g\u00f6rsel de\u011fil, ayn\u0131 zamanda oynan\u0131\u015f mekanikleri i\u00e7in de kullanabilirsiniz. \u00d6rne\u011fin, h\u00fccre kenarlar\u0131 boyunca daha zorlu araziler veya d\u00fc\u015fman spawn noktalar\u0131 belirleyebilirsiniz.\n <\/div>\n<\/li>\n<li>\n <strong>Bilimsel G\u00f6rselle\u015ftirmelerde H\u00fccre Yap\u0131s\u0131 Modelleme:<\/strong> Biyolojik sim\u00fclasyonlarda, Voronoi diyagramlar\u0131 h\u00fccrelerin veya dokular\u0131n b\u00fcy\u00fcme ve b\u00f6l\u00fcnme modellerini g\u00f6rselle\u015ftirmek i\u00e7in do\u011fal bir yoldur. Her h\u00fccre, belirli bir merkezin etki alan\u0131n\u0131 temsil edebilir. Bu sayede, h\u00fccrelerin birbirlerine g\u00f6re nas\u0131l konumland\u0131\u011f\u0131n\u0131 ve etkile\u015fimde bulundu\u011funu dinamik olarak g\u00f6sterebilirsiniz.\n <\/li>\n<li>\n <strong>Mimari Tasar\u0131m ve Malzeme Prototipleme:<\/strong> Mimarlar, cephe tasar\u0131mlar\u0131nda veya i\u00e7 mekanlarda benzersiz desenler olu\u015fturmak i\u00e7in prosed\u00fcrel Voronoi dokular\u0131ndan ilham alabilirler. \u00d6rne\u011fin, bir binan\u0131n cam panellerinin veya bir duvar\u0131n y\u00fczey kaplamas\u0131n\u0131n rastgele ama d\u00fczenli desenlerini olu\u015fturmak i\u00e7in kullan\u0131labilir. Ayr\u0131ca, fayans desenleri veya mozaik efektler i\u00e7in de idealdir.\n <\/li>\n<li>\n <strong>Animasyon ve G\u00f6rsel Efektler (VFX):<\/strong> Ak\u0131\u015fkan sim\u00fclasyonlar\u0131nda su y\u00fczeyindeki k\u00f6p\u00fckler veya \u00e7arp\u0131\u015fma efektlerindeki par\u00e7ac\u0131k da\u011f\u0131l\u0131mlar\u0131 gibi bir\u00e7ok dinamik efekt, Voronoi g\u00fcr\u00fclt\u00fcs\u00fc ile ger\u00e7ek\u00e7i bir \u015fekilde olu\u015fturulabilir. Zaman parametresini de\u011fi\u015ftirerek dokunun s\u00fcrekli olarak evrimle\u015fmesini sa\u011flayabilirsiniz.\n <\/li>\n<\/ul>\n<p>WGPU'nun sa\u011flad\u0131\u011f\u0131 performans ve esneklik sayesinde, bu geli\u015fmi\u015f teknikleri ve ger\u00e7ek d\u00fcnya uygulamalar\u0131n\u0131 do\u011frudan web taray\u0131c\u0131n\u0131zda veya yerel masa\u00fcst\u00fc uygulamalar\u0131n\u0131zda (Rust ile <code>wgpu-rs<\/code> kullanarak) hayata ge\u00e7irebilirsiniz. Prosed\u00fcrel Voronoi dokular\u0131, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 ve teknik becerilerinizi birle\u015ftirerek s\u0131n\u0131rs\u0131z g\u00f6rsel potansiyel sunar.<\/p>\n<h2>Sonu\u00e7: Prosed\u00fcrel Voronoi Dokular\u0131yla S\u0131n\u0131rs\u0131z Yarat\u0131c\u0131l\u0131k<\/h2>\n<p>Bu makale boyunca, WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131n\u0131n nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131, temel prensiplerinden ileri d\u00fczey tekniklerine ve ger\u00e7ek d\u00fcnya uygulamalar\u0131na kadar detayl\u0131 bir \u015fekilde inceledik. Ba\u015flang\u0131\u00e7ta Voronoi diyagramlar\u0131n\u0131n ne oldu\u011funu ve neden dinamik dokular\u0131n g\u00f6rsel projelerimiz i\u00e7in vazge\u00e7ilmez oldu\u011funu anlamakla yola \u00e7\u0131kt\u0131k. Ard\u0131ndan, WGPU'nun modern GPU programlama d\u00fcnyas\u0131nda sundu\u011fu avantajlar\u0131 ve temel kurulum ad\u0131mlar\u0131n\u0131 ele ald\u0131k. En \u00f6nemlisi, WGSL kullanarak Voronoi g\u00fcr\u00fclt\u00fcs\u00fcn\u00fc hesaplayan shader kodunu ad\u0131m ad\u0131m in\u015fa ettik ve bu shader'\u0131 WGPU render pipeline'\u0131na nas\u0131l entegre edece\u011fimizi \u00f6\u011frendik.<\/p>\n<p>Prosed\u00fcrel doku \u00fcretimi, sanat\u00e7\u0131lara ve geli\u015ftiricilere sonsuz say\u0131da benzersiz ve organik desen olu\u015fturma \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. WGPU'nun g\u00fcc\u00fcyle birle\u015fen Voronoi dokular\u0131, sadece statik g\u00f6r\u00fcnt\u00fcler de\u011fil, ayn\u0131 zamanda dinamik ve etkile\u015fimli g\u00f6rsel deneyimler yaratmak i\u00e7in de kullan\u0131labilir. Pert\u00fcrbasyon teknikleri, renk paletleri ve farkl\u0131 Voronoi varyasyonlar\u0131 ile dokular\u0131n\u0131z\u0131 daha da zenginle\u015ftirme potansiyeli, hayal g\u00fcc\u00fcn\u00fczle s\u0131n\u0131rl\u0131d\u0131r. \u0130ster oyun geli\u015ftiriyor, ister bilimsel verileri g\u00f6rselle\u015ftiriyor, isterse mimari tasar\u0131mlar yap\u0131n, prosed\u00fcrel Voronoi dokular\u0131 projelerinize derinlik ve ger\u00e7ek\u00e7ilik katacakt\u0131r. Bu teknikleri kullanarak, dijital d\u00fcnyalara yeni bir soluk getirebilir ve kullan\u0131c\u0131lar\u0131n\u0131za unutulmaz g\u00f6rsel deneyimler sunabilirsiniz.<\/p>\n<h2>S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h2>\n<dl>\n<dt>WGPU nedir ve WebGL'den fark\u0131 nedir?<\/dt>\n<dd>WGPU (WebGPU), web taray\u0131c\u0131lar\u0131 i\u00e7in tasarlanm\u0131\u015f yeni nesil bir grafik ve hesaplama API'sidir. WebGL'e k\u0131yasla daha d\u00fc\u015f\u00fck seviyeli GPU kontrol\u00fc, modern GPU API'leri (Vulkan, Metal, DirectX 12) ile daha fazla uyumluluk, daha iyi performans ve genel ama\u00e7l\u0131 GPU hesaplamalar\u0131 (compute shaders) i\u00e7in destek sunar. Bu sayede, daha karma\u015f\u0131k ve verimli grafik uygulamalar\u0131 geli\u015ftirmeye olanak tan\u0131r.<\/dd>\n<dt>WGSL (WebGPU Shading Language) nedir?<\/dt>\n<dd>WGSL, WGPU i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir g\u00f6lgelendirici dilidir. C benzeri bir s\u00f6zdizimine sahiptir ve modern GPU'lar\u0131n \u00f6zelliklerinden tam olarak yararlanmak i\u00e7in optimize edilmi\u015ftir. Fragment ve vertex g\u00f6lgelendiricileri gibi GPU \u00fczerinde \u00e7al\u0131\u015fan programlar\u0131 yazmak i\u00e7in kullan\u0131l\u0131r.<\/dd>\n<dt>Voronoi dokular\u0131n\u0131 olu\u015ftururken performans\u0131 nas\u0131l optimize edebilirim?<\/dt>\n<dd>Performans\u0131 optimize etmek i\u00e7in birka\u00e7 y\u00f6ntem bulunmaktad\u0131r:<\/p>\n<ul>\n<li><strong>Daha Az Kom\u015fu H\u00fccre Kontrol\u00fc:<\/strong> Genellikle 3x3 kom\u015fu h\u00fccre kontrol\u00fc yeterlidir, ancak \u00f6l\u00e7ek \u00e7ok k\u00fc\u00e7\u00fckse veya daha y\u00fcksek h\u00fccre yo\u011funlu\u011fu gerekiyorsa 5x5 veya daha b\u00fcy\u00fck bir alan\u0131 kontrol etmek gerekebilir. Gereksiz h\u00fccreleri kontrol etmekten ka\u00e7\u0131n\u0131n.<\/li>\n<li><strong>Daha H\u0131zl\u0131 Hash Fonksiyonlar\u0131:<\/strong> Karma\u015f\u0131k matematiksel i\u015flemler i\u00e7eren hash fonksiyonlar\u0131 yerine daha hafif ve h\u0131zl\u0131 \u00e7al\u0131\u015fan hash fonksiyonlar\u0131 kullan\u0131n.<\/li>\n<li><strong>Detay Seviyesi (LOD):<\/strong> Uzak nesneler i\u00e7in daha d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc veya daha az karma\u015f\u0131k Voronoi hesaplamalar\u0131 kullanarak performans\u0131 art\u0131rabilirsiniz.<\/li>\n<li><strong>Uniform Veri Optimizasyonu:<\/strong> Shader'a g\u00f6nderilen uniform verilerin boyutunu ve g\u00fcncellenme s\u0131kl\u0131\u011f\u0131n\u0131 minimize edin.<\/li>\n<\/ul>\n<\/dd>\n<dt>Sadece 2D Voronoi mi olu\u015fturabilirim, yoksa 3D de m\u00fcmk\u00fcn m\u00fc?<\/dt>\n<dd>Evet, hem 2D hem de 3D Voronoi dokular\u0131 olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr. Bu makalede 2D bir d\u00fczlem \u00fczerinde Voronoi dokusu olu\u015fturmaya odakland\u0131k. Ancak, WGSL shader'\u0131ndaki matematiksel hesaplamalar\u0131 3 boyutlu vekt\u00f6rler ve kom\u015fu k\u00fcpler (3x3x3) \u00fczerinde \u00e7al\u0131\u015facak \u015fekilde geni\u015fleterek hacimsel (3D) Voronoi dokular\u0131 da \u00fcretebilirsiniz. Bu, bulutlar, sis veya di\u011fer hacimsel efektler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/dd>\n<dt>Olu\u015fturdu\u011fum Voronoi dokular\u0131n\u0131 ba\u015fka projelerde nas\u0131l kullanabilirim?<\/dt>\n<dd>WGPU ile olu\u015fturdu\u011funuz Voronoi dokusunu bir <code>GPUTexture<\/code> olarak al\u0131p, bu dokuyu daha sonra ba\u015fka bir shader i\u00e7inde \u00f6rnekleyerek (sampling) kullanabilirsiniz. \u00d6rne\u011fin, 3D bir modelin malzemesine normal harita veya dif\u00fcz harita olarak uygulayabilirsiniz. Ayr\u0131ca, canvas'\u0131 bir g\u00f6r\u00fcnt\u00fc olarak kaydederek (<code>canvas.toDataURL()<\/code>) veya <code>OffscreenCanvas<\/code> kullanarak dokuyu bir dosyaya aktarabilirsiniz. Bu sayede, doku ba\u015fka oyun motorlar\u0131nda veya grafik uygulamalar\u0131nda da kullan\u0131labilir.<\/dd>\n<\/dl>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz?…","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":[1],"tags":[],"class_list":{"0":"post-31571","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi<\/title>\n<meta name=\"description\" content=\"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.\" \/>\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\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi\" \/>\n<meta property=\"og:description\" content=\"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-11T08:01:24+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\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi\",\"datePublished\":\"2025-10-11T08:01:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\"},\"wordCount\":4531,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\",\"name\":\"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-11T08:01:24+00:00\",\"description\":\"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi\"}]},{\"@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":"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi","description":"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.","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\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/","og_locale":"tr_TR","og_type":"article","og_title":"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi","og_description":"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-11T08:01:24+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\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi","datePublished":"2025-10-11T08:01:24+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/"},"wordCount":4531,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/","url":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/","name":"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-11T08:01:24+00:00","description":"Oyun geli\u015ftirme, g\u00f6rselle\u015ftirme veya sim\u00fclasyon projelerinizde tekrarlayan ve s\u0131k\u0131c\u0131 dokular yerine dinamik, benzersiz ve organik y\u00fczeyler mi ar\u0131yorsunuz? WGPU kullanarak prosed\u00fcrel Voronoi dokular\u0131 olu\u015fturmak, projelerinize yeni bir soluk getirecek ve g\u00f6rsel zenginli\u011fi art\u0131racakt\u0131r. Bu rehberde, Voronoi dokular\u0131n\u0131n temelinden ba\u015flay\u0131p modern WebGPU API'si ile ad\u0131m ad\u0131m nas\u0131l uygulanaca\u011f\u0131n\u0131, ileri d\u00fczey teknikleri ve ger\u00e7ek d\u00fcnya kullan\u0131m senaryolar\u0131n\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/wgpu-ile-procedural-voronoi-doku-olusturma-rehberi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WGPU ile Procedural Voronoi Doku Olu\u015fturma Rehberi"}]},{"@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\/31571","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=31571"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31571\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}