{"id":37159,"date":"2025-12-28T06:00:43","date_gmt":"2025-12-28T03:00:43","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/"},"modified":"2025-12-28T06:00:43","modified_gmt":"2025-12-28T03:00:43","slug":"webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/","title":{"rendered":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk"},"content":{"rendered":"<h2>WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk<\/h2>\n<p>G\u00fcn\u00fcm\u00fcz\u00fcn modern, p\u00fcr\u00fczs\u00fcz ve y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc aray\u00fczleri aras\u0131nda, bazen ge\u00e7mi\u015fin o e\u015fsiz dokusuna, pikselli esteti\u011fine ve hafif\u00e7e titreyen g\u00f6r\u00fcnt\u00fclerine \u00f6zlem duyar\u0131z. Bu makalede, web teknolojilerinin en g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan WebGL&#8217;i kullanarak, eski CRT (Katot I\u015f\u0131nl\u0131 T\u00fcp) terminallerinin o ikonik g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve hissini web sitenize nas\u0131l ta\u015f\u0131yaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m inceleyece\u011fiz. \u00dcstelik, bu yarat\u0131c\u0131 yolculukta GitHub Copilot gibi yapay zeka destekli kodlama asistanlar\u0131n\u0131n (Claude Opus 4.5 taraf\u0131ndan desteklenen) size nas\u0131l inan\u0131lmaz bir h\u0131z ve kolayl\u0131k sa\u011flayaca\u011f\u0131n\u0131 da ke\u015ffedece\u011fiz. Haz\u0131r olun, dijital nostaljiye do\u011fru bir zaman yolculu\u011funa \u00e7\u0131k\u0131yoruz!<\/p>\n<h2>Retro CRT Esteti\u011fini Anlamak ve Hedef Belirlemek<\/h2>\n<p>Bir retro CRT terminali olu\u015fturman\u0131n ilk ad\u0131m\u0131, taklit etmek istedi\u011fimiz esteti\u011fi derinlemesine anlamakt\u0131r. Sadece g\u00f6rsel bir taklitten \u00f6te, o d\u00f6nemin kullan\u0131c\u0131 deneyimini de yans\u0131tmak projemizi \u00e7ok daha ba\u015far\u0131l\u0131 k\u0131lacakt\u0131r.<\/p>\n<h3>CRT Ekranlar\u0131n Karakteristik \u00d6zellikleri<\/h3>\n<p>CRT monit\u00f6rler, g\u00fcn\u00fcm\u00fcz\u00fcn LCD veya OLED ekranlar\u0131ndan \u00e7ok farkl\u0131 bir g\u00f6r\u00fcnt\u00fcleme prensibine sahipti. Bu farkl\u0131l\u0131klar, onlara \u00f6zg\u00fc bir dizi g\u00f6rsel nitelik kazand\u0131r\u0131yordu:<\/p>\n<ul>\n<li><strong>Tarama \u00c7izgileri (Scanlines):<\/strong> Elektron demetinin ekran\u0131 yatay olarak taramas\u0131ndan kaynaklanan belirgin yatay \u00e7izgiler. \u00d6zellikle d\u00fc\u015f\u00fck \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerde \u00e7ok belirgindir.<\/li>\n<li><strong>Vinyet Efekti:<\/strong> Ekran\u0131n kenarlar\u0131nda hafif bir kararma veya bozulma.<\/li>\n<li><strong>Renkli Sapma (Chromatic Aberration):<\/strong> Renklerin kenarlarda hafif\u00e7e da\u011f\u0131lmas\u0131, \u00f6zellikle parlak nesnelerin etraf\u0131nda k\u0131rm\u0131z\u0131, ye\u015fil veya mavi haleler olu\u015fturmas\u0131.<\/li>\n<li><strong>Hafif Titre\u015fim (Flicker):<\/strong> D\u00fc\u015f\u00fck yenileme h\u0131zlar\u0131ndan kaynaklanan g\u00f6zle g\u00f6r\u00fcl\u00fcr bir titre\u015fim.<\/li>\n<li><strong>Bloom ve Par\u0131lt\u0131:<\/strong> Parlak alanlar\u0131n etraf\u0131nda olu\u015fan hafif bir \u0131\u015f\u0131ma, bulan\u0131kl\u0131k.<\/li>\n<li><strong>Ekran E\u011frili\u011fi:<\/strong> Fiziksel olarak kavisli ekran y\u00fczeyi.<\/li>\n<li><strong>Fosfor Kal\u0131c\u0131l\u0131\u011f\u0131:<\/strong> G\u00f6r\u00fcnt\u00fcn\u00fcn ekranda k\u0131sa bir s\u00fcre iz b\u0131rakmas\u0131 (ghosting).<\/li>\n<\/ul>\n<p>Bu \u00f6zellikler, bir araya geldi\u011finde o benzersiz retro hissi yarat\u0131r. Projemizde bu \u00f6zelliklerin bir\u00e7o\u011funu WebGL shader&#8217;lar\u0131 arac\u0131l\u0131\u011f\u0131yla sim\u00fcle etmeye \u00e7al\u0131\u015faca\u011f\u0131z.<\/p>\n<h3>Web&#8217;de Retro Hissi Yakalaman\u0131n \u00d6nemi<\/h3>\n<p>Retro estetik, sadece nostalji merakl\u0131lar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda belirli bir atmosfer yaratmak isteyen web projeleri i\u00e7in de g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir terminal aray\u00fcz\u00fc, oyun men\u00fcs\u00fc veya hatta sanatsal bir web sitesi, retro bir dokunu\u015fla \u00e7ok daha ak\u0131lda kal\u0131c\u0131 ve benzersiz hale gelebilir. Kullan\u0131c\u0131lar i\u00e7in farkl\u0131 ve etkileyici bir deneyim sunar.<\/p>\n<h3>Proje Hedefleri ve Kapsam\u0131<\/h3>\n<p>Bu makalede odaklanaca\u011f\u0131m\u0131z proje, WebGL kullanarak g\u00f6rsel olarak bir CRT terminalini taklit eden, metin tabanl\u0131 etkile\u015fimlere izin veren basit bir web aray\u00fcz\u00fc olu\u015fturmakt\u0131r. Temel hedeflerimiz \u015funlard\u0131r:<\/p>\n<ol>\n<li>WebGL ile temel CRT efektlerini (tarama \u00e7izgileri, renk sapmas\u0131, vinyet) uygulamak.<\/li>\n<li>Kullan\u0131c\u0131dan klavye giri\u015fi alarak terminal benzeri metin \u00e7\u0131kt\u0131s\u0131 g\u00f6stermek.<\/li>\n<li>GitHub Copilot&#8217;\u0131n bu s\u00fcre\u00e7teki rol\u00fcn\u00fc ve verimlilik katk\u0131s\u0131n\u0131 g\u00f6stermek.<\/li>\n<\/ol>\n<h2>WebGL&#8217;e Giri\u015f: Neden ve Nas\u0131l?<\/h2>\n<p>Retro terminal projemizin kalbinde WebGL yat\u0131yor. WebGL, taray\u0131c\u0131da do\u011frudan GPU (Grafik \u0130\u015flem Birimi) g\u00fcc\u00fcnden yararlanmam\u0131z\u0131 sa\u011flayan bir JavaScript API&#8217;sidir.<\/p>\n<h3>WebGL&#8217;in G\u00fcc\u00fc ve Uygulama Alanlar\u0131<\/h3>\n<p>WebGL, web tabanl\u0131 2D ve 3D grafikler olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. Oyunlar, veri g\u00f6rselle\u015ftirmeleri, etkile\u015fimli deneyimler ve bizim durumumuzda oldu\u011fu gibi post-processing efektleri i\u00e7in idealdir. GPU&#8217;nun paralel i\u015flem yetene\u011fi sayesinde, karma\u015f\u0131k g\u00f6rsel efektleri ger\u00e7ek zamanl\u0131 olarak ve y\u00fcksek performansla uygulayabiliriz.<\/p>\n<h3>Temel WebGL Kavramlar\u0131: Shader&#8217;lar ve Canvas<\/h3>\n<p>WebGL&#8217;in temel yap\u0131 ta\u015flar\u0131 \u015funlard\u0131r:<\/p>\n<ul>\n<li><strong>Canvas:<\/strong> HTML&#8217;deki <code><canvas><\/code> etiketi, WebGL grafiklerinin \u00e7izilece\u011fi aland\u0131r.<\/li>\n<li><strong>Ba\u011flam (Context):<\/strong> <code>canvas.getContext('webgl')<\/code> veya <code>canvas.getContext('webgl2')<\/code> ile elde edilen WebGL API aray\u00fcz\u00fcd\u00fcr.<\/li>\n<li><strong>Shader&#8217;lar:<\/strong> GPU \u00fczerinde \u00e7al\u0131\u015fan k\u00fc\u00e7\u00fck programlard\u0131r. \u0130ki ana t\u00fcr\u00fc vard\u0131r:\n<ul>\n<li><strong>Vertex Shader:<\/strong> Geometrinin (noktalar, \u00e7izgiler, \u00fc\u00e7genler) konumunu ve di\u011fer \u00f6zelliklerini i\u015fler.<\/li>\n<li><strong>Fragment Shader (Piksel Shader):<\/strong> Her bir pikselin rengini belirler. CRT efektlerimizin \u00e7o\u011fu bu shader i\u00e7inde uygulanacakt\u0131r.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>WebGL Ortam\u0131n\u0131n Kurulumu ve Three.js Entegrasyonu<\/h3>\n<p>WebGL&#8217;i do\u011frudan kullanmak olduk\u00e7a karma\u015f\u0131k olabilir. Bu nedenle, Three.js gibi y\u00fcksek seviyeli k\u00fct\u00fcphanelerden faydalanmak geli\u015ftirme s\u00fcrecini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde basitle\u015ftirir. Three.js, sahne, kamera, geometriler, materyaller ve \u0131\u015f\u0131kland\u0131rma gibi 3D kavramlar\u0131n\u0131 soyutlar ve WebGL ile etkile\u015fimi kolayla\u015ft\u0131r\u0131r.<\/p>\n<p>Bir Three.js projesi kurmak i\u00e7in <code>index.html<\/code> dosyan\u0131zda basit\u00e7e bir <code><canvas><\/code> etiketi tan\u0131mlar ve Three.js k\u00fct\u00fcphanesini eklersiniz:<\/p>\n<pre><code class=\"language-html\">\n<!DOCTYPE html>\n<html lang=\"tr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Retro CRT Terminal<\/title>\n    <style>\n        body { margin: 0; overflow: hidden; background-color: black; }\n        canvas { display: block; }\n    <\/style>\n<\/head>\n<body>\n    <canvas id=\"crtCanvas\"><\/canvas>\n    <script type=\"module\">\n        import * as THREE from 'https:\/\/unpkg.com\/three@0.158.0\/build\/three.module.js';\n        \/\/ Proje kodunuz buraya gelecek\n    <\/script>\n<\/body>\n<\/html>\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kurulum, Three.js'i taray\u0131c\u0131n\u0131zda kullanmaya ba\u015flamak i\u00e7in yeterlidir. Ard\u0131ndan, bir sahne, kamera ve render edici (renderer) olu\u015fturarak ilk ad\u0131mlar\u0131n\u0131z\u0131 atabilirsiniz.<\/p>\n<h2>GitHub Copilot ile H\u0131zland\u0131r\u0131lm\u0131\u015f Geli\u015ftirme<\/h2>\n<p>Bu karma\u015f\u0131k g\u00f6rsel efektleri ve etkile\u015fimleri kodlarken, GitHub Copilot gibi yapay zeka destekli ara\u00e7lar, geli\u015ftirme s\u00fcrecinizi inan\u0131lmaz derecede h\u0131zland\u0131rabilir.<\/p>\n<h3>Copilot Nedir ve Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\n<p>GitHub Copilot, Open AI'\u0131n Codex modelini temel alan, yapay zeka destekli bir kod tamamlama arac\u0131d\u0131r. Yazd\u0131\u011f\u0131n\u0131z kod ba\u011flam\u0131n\u0131 analiz eder ve yorumlar\u0131n\u0131za veya yazd\u0131\u011f\u0131n\u0131z kod par\u00e7ac\u0131klar\u0131na dayanarak kod \u00f6nerileri sunar. Bir sonraki sat\u0131r\u0131, t\u00fcm bir fonksiyonu veya hatta bir shader kodunu sizin i\u00e7in tahmin edebilir. Claude Opus 4.5 gibi geli\u015fmi\u015f dil modellerinin yetenekleriyle desteklenen Copilot, karma\u015f\u0131k mant\u0131klar\u0131 bile anlayarak size yard\u0131mc\u0131 olabilir.<\/p>\n<h3>CRT Efektleri \u0130\u00e7in Copilot'tan Yararlanma<\/h3>\n<p>Copilot, \u00f6zellikle WebGL shader'lar\u0131 gibi ni\u015f ve tekrarlay\u0131c\u0131 kod bloklar\u0131nda \u00e7ok de\u011ferlidir. \u00d6rne\u011fin:<\/p>\n<ul>\n<li><strong>Shader Kodlar\u0131 Olu\u015fturma:<\/strong> Bir tarama \u00e7izgisi veya renk sapmas\u0131 efekti i\u00e7in fragment shader yazmaya ba\u015flad\u0131\u011f\u0131n\u0131zda, Copilot genellikle geri kalan\u0131n\u0131 tamamlamak i\u00e7in do\u011fru matematiksel form\u00fclleri ve GLSL (OpenGL Shading Language) sentaks\u0131n\u0131 \u00f6nerebilir. \"Fragment shader for CRT scanlines\" gibi bir yorumla ba\u015flayarak Copilot'tan tam bir shader isteyebilirsiniz.<\/li>\n<li><strong>Three.js Yard\u0131mc\u0131 Fonksiyonlar\u0131:<\/strong> Sahne kurulumu, kamera kontrol\u00fc veya post-processing ge\u00e7i\u015fleri gibi Three.js ile ilgili standart g\u00f6revler i\u00e7in Copilot, h\u0131zl\u0131 ve do\u011fru kod par\u00e7ac\u0131klar\u0131 sa\u011flayabilir.<\/li>\n<li><strong>JavaScript Mant\u0131\u011f\u0131:<\/strong> Klavye giri\u015fini yakalama, metin i\u015fleme veya terminal komutlar\u0131n\u0131 ayr\u0131\u015ft\u0131rma gibi JavaScript g\u00f6revlerinde de Copilot, yayg\u0131n kal\u0131plar\u0131 ve algoritmalar\u0131 \u00f6nererek size zaman kazand\u0131r\u0131r.<\/li>\n<\/ul>\n<h3>Verimlilik Art\u0131\u015f\u0131 ve En \u0130yi Uygulamalar<\/h3>\n<p>Copilot ile \u00e7al\u0131\u015f\u0131rken en y\u00fcksek verimi almak i\u00e7in baz\u0131 ipu\u00e7lar\u0131:<\/p>\n<ul>\n<li><strong>A\u00e7\u0131k ve Detayl\u0131 Yorumlar:<\/strong> Ne istedi\u011finizi net bir \u015fekilde a\u00e7\u0131klayan yorumlar yaz\u0131n. \"Bu, tarama \u00e7izgileri i\u00e7in bir fragment shader'd\u0131r\" gibi ifadeler, Copilot'\u0131n do\u011fru \u00f6neriler sunmas\u0131na yard\u0131mc\u0131 olur.<\/li>\n<li><strong>K\u00fc\u00e7\u00fck Ad\u0131mlarla \u0130lerleyin:<\/strong> B\u00fcy\u00fck bir kod blo\u011fu yerine, her seferinde k\u00fc\u00e7\u00fck, y\u00f6netilebilir par\u00e7alar i\u00e7in \u00f6neriler isteyin.<\/li>\n<li><strong>Kodu \u0130nceleyin:<\/strong> Copilot'\u0131n \u00f6nerilerini her zaman g\u00f6zden ge\u00e7irin ve projenizin gereksinimlerine uygun oldu\u011fundan emin olun. Bazen do\u011fru g\u00f6r\u00fcnen kod, k\u00fc\u00e7\u00fck mant\u0131k hatalar\u0131 i\u00e7erebilir veya daha verimli bir yolu olabilir.<\/li>\n<li><strong>Farkl\u0131 \u00d6nerileri Deneyin:<\/strong> Copilot birden fazla \u00f6neri sunabilir. En uygun olan\u0131 se\u00e7mek i\u00e7in alternatifleri inceleyin.<\/li>\n<\/ul>\n<h2>Temel Proje Yap\u0131s\u0131 ve K\u00fct\u00fcphane Se\u00e7imi<\/h2>\n<p>Projemizin d\u00fczenli ve s\u00fcrd\u00fcr\u00fclebilir olmas\u0131 i\u00e7in iyi bir dosya yap\u0131s\u0131 ve do\u011fru k\u00fct\u00fcphane se\u00e7imi kritik \u00f6neme sahiptir.<\/p>\n<h3>Proje Dizini ve Dosya Yap\u0131s\u0131<\/h3>\n<p>Basit bir proje i\u00e7in a\u015fa\u011f\u0131daki gibi bir yap\u0131 idealdir:<\/p>\n<pre><code class=\"language-text\">\n\/retro-crt-terminal\n\u251c\u2500\u2500 index.html          \/\/ Ana HTML dosyas\u0131\n\u251c\u2500\u2500 style.css           \/\/ Temel stil tan\u0131mlamalar\u0131\n\u251c\u2500\u2500 main.js             \/\/ Ana JavaScript mant\u0131\u011f\u0131 ve Three.js kodu\n\u2514\u2500\u2500 \/shaders            \/\/ WebGL shader dosyalar\u0131\n    \u251c\u2500\u2500 crt-vertex.glsl\n    \u2514\u2500\u2500 crt-fragment.glsl\n<\/pre>\n<p><\/code><\/p>\n<p><code>index.html<\/code>, uygulaman\u0131n giri\u015f noktas\u0131d\u0131r. <code>style.css<\/code>, sayfa i\u00e7in temel CSS stillerini i\u00e7erir. <code>main.js<\/code>, Three.js sahnesini kurar, efektleri uygular ve kullan\u0131c\u0131 etkile\u015fimini y\u00f6netir. <code>\/shaders<\/code> klas\u00f6r\u00fc ise GLSL (OpenGL Shading Language) ile yaz\u0131lm\u0131\u015f \u00f6zel shader kodlar\u0131m\u0131z\u0131 bar\u0131nd\u0131r\u0131r.<\/p>\n<h3>Three.js Entegrasyonu ve Di\u011fer K\u00fct\u00fcphaneler<\/h3>\n<p>Daha \u00f6nce de belirtildi\u011fi gibi, Three.js WebGL ile etkile\u015fimi kolayla\u015ft\u0131ran temel k\u00fct\u00fcphanemizdir. CDN \u00fczerinden veya bir paket y\u00f6neticisi (npm) arac\u0131l\u0131\u011f\u0131yla projenize dahil edebilirsiniz.<\/p>\n<p>Ek olarak, projenin kapsam\u0131na ba\u011fl\u0131 olarak \u015fu k\u00fct\u00fcphaneler faydal\u0131 olabilir:<\/p>\n<ul>\n<li><strong>dat.GUI:<\/strong> Efekt parametrelerini (tarama \u00e7izgisi yo\u011funlu\u011fu, renk sapmas\u0131 miktar\u0131 vb.) ger\u00e7ek zamanl\u0131 olarak ayarlamak i\u00e7in basit bir GUI olu\u015fturmaya yarar. Geli\u015ftirme a\u015famas\u0131nda \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<li><strong>Post-processing k\u00fct\u00fcphaneleri:<\/strong> Three.js'in kendi <code>EffectComposer<\/code>'\u0131 veya <code>postprocessing<\/code> gibi k\u00fct\u00fcphaneler, birden fazla shader efektini zincirleme (chaining) ve y\u00f6netme konusunda yard\u0131mc\u0131 olabilir.<\/li>\n<li><strong>Font Y\u00fckleyiciler:<\/strong> Retro fontlar\u0131 dinamik olarak y\u00fcklemek i\u00e7in.<\/li>\n<\/ul>\n<p>Bu makalede temel Three.js ve saf JavaScript'e odaklanarak karma\u015f\u0131kl\u0131\u011f\u0131 d\u00fc\u015f\u00fck tutaca\u011f\u0131z.<\/p>\n<h2>CRT Efektlerini WebGL ile Uygulama<\/h2>\n<p>\u015eimdi projemizin en heyecan verici k\u0131sm\u0131na geliyoruz: CRT efektlerini Three.js ve GLSL shader'lar\u0131 kullanarak nas\u0131l olu\u015fturaca\u011f\u0131m\u0131z.<\/p>\n<h3>Tarama \u00c7izgileri (Scanlines) ve Vinyet Efekti<\/h3>\n<p>Bu efektler genellikle fragment shader i\u00e7inde uygulan\u0131r. Fragment shader, ekrandaki her piksel i\u00e7in \u00e7al\u0131\u015f\u0131r ve o pikselin nihai rengini belirler.<\/p>\n<p><strong>Tarama \u00c7izgileri:<\/strong> Pikselin Y koordinat\u0131na (dikey konumuna) ba\u011fl\u0131 olarak parlakl\u0131\u011f\u0131n\u0131 veya rengini de\u011fi\u015ftirebiliriz. \u00d6rne\u011fin, her iki pikselde bir parlakl\u0131\u011f\u0131 azaltarak tarama \u00e7izgisi hissi verebiliriz.<\/p>\n<pre><code class=\"language-glsl\">\n\/\/ crt-fragment.glsl\nuniform sampler2D tDiffuse; \/\/ Sahnenin render edilmi\u015f g\u00f6r\u00fcnt\u00fcs\u00fc\nuniform float uTime;\nuniform vec2 uResolution;\n\nvoid main() {\n    vec2 uv = gl_FragCoord.xy \/ uResolution.xy;\n    vec4 color = texture2D(tDiffuse, uv);\n\n    \/\/ Tarama \u00e7izgileri (scanlines)\n    \/\/ Her 2. veya 3. sat\u0131r\u0131 karart\n    float scanline = sin(uv.y * uResolution.y * 2.0) * 0.05 + 0.95;\n    color.rgb *= scanline;\n\n    \/\/ Vinyet efekti\n    float vignette = uv.x * (1.0 - uv.x) * uv.y * (1.0 - uv.y) * 2.0;\n    color.rgb *= pow(vignette, 0.5) * 1.2; \/\/ G\u00fc\u00e7l\u00fc bir vinyet i\u00e7in\n\n    gl_FragColor = color;\n}\n<\/pre>\n<p><\/code><\/p>\n<p>Bu kod par\u00e7as\u0131, gelen g\u00f6r\u00fcnt\u00fcy\u00fc (<code>tDiffuse<\/code>) al\u0131r, tarama \u00e7izgileri ve vinyet efekti uygular ve sonucu <code>gl_FragColor<\/code>'a yazar.<\/p>\n<h3>Renkli Sapma (Chromatic Aberration) ve Titre\u015fim<\/h3>\n<p><strong>Renkli Sapma:<\/strong> Farkl\u0131 renk kanallar\u0131n\u0131 (RGB) hafif\u00e7e kayd\u0131rarak elde edilir. K\u0131rm\u0131z\u0131, ye\u015fil ve mavi kanallar\u0131 farkl\u0131 UV koordinatlar\u0131ndan \u00f6rnekleyebiliriz.<\/p>\n<pre><code class=\"language-glsl\">\n\/\/ crt-fragment.glsl (\u00f6nceki kodun devam\u0131)\n\/\/ ...\n    vec2 offset = vec2(sin(uTime * 5.0) * 0.005, cos(uTime * 3.0) * 0.005);\n    vec4 colorR = texture2D(tDiffuse, uv + offset * 0.5);\n    vec4 colorG = texture2D(tDiffuse, uv);\n    vec4 colorB = texture2D(tDiffuse, uv - offset * 0.5);\n\n    color.r = colorR.r;\n    color.g = colorG.g;\n    color.b = colorB.b;\n\/\/ ...\n<\/pre>\n<p><\/code><\/p>\n<p><strong>Titre\u015fim (Flicker):<\/strong> G\u00f6r\u00fcnt\u00fcn\u00fcn parlakl\u0131\u011f\u0131n\u0131 veya renk tonunu zamanla rastgele veya periyodik olarak hafif\u00e7e de\u011fi\u015ftirmekle elde edilir. <code>uTime<\/code> uniform'unu kullanarak bir <code>sin<\/code> veya <code>random<\/code> fonksiyonu ile parlakl\u0131\u011f\u0131 manip\u00fcle edebiliriz.<\/p>\n<h3>Bloom ve Par\u0131lt\u0131 Efektleri<\/h3>\n<p>Bloom, parlak alanlar\u0131n etraf\u0131nda yumu\u015fak bir \u0131\u015f\u0131ma olu\u015fturur. Bu genellikle birden fazla ge\u00e7i\u015f (pass) gerektiren daha karma\u015f\u0131k bir post-processing tekni\u011fidir (\u00f6rne\u011fin, g\u00f6r\u00fcnt\u00fcy\u00fc bulan\u0131kla\u015ft\u0131rma ve sonra orijinal g\u00f6r\u00fcnt\u00fcyle birle\u015ftirme). Three.js'in <code>EffectComposer<\/code>'\u0131 ile kolayca entegre edilebilir.<\/p>\n<h3>Metin Render Etme ve Glitch Efektleri<\/h3>\n<p>Terminal ekran\u0131nda metin g\u00f6stermek i\u00e7in Three.js'te \u00e7e\u015fitli y\u00f6ntemler vard\u0131r:<\/p>\n<ul>\n<li><strong>TextGeometry:<\/strong> 3D metin olu\u015fturmak i\u00e7in. Performans a\u00e7\u0131s\u0131ndan yo\u011fun olabilir.<\/li>\n<li><strong>Sprite Metin:<\/strong> Metni bir doku (texture) \u00fczerine \u00e7izip bunu bir sprite olarak g\u00f6stermek. Daha performansl\u0131d\u0131r.<\/li>\n<li><strong>HTML Overlay:<\/strong> En basit y\u00f6ntem, WebGL canvas'\u0131n\u0131n \u00fczerine \u015feffaf bir HTML div'i yerle\u015ftirip metni burada g\u00f6stermektir. Efektleri HTML i\u00e7eri\u011fine uygulamak i\u00e7in CSS filtreleri veya WebGL'den gelen veriyi kullanabiliriz.<\/li>\n<\/ul>\n<p>Glitch efektleri i\u00e7in, metin dokusunun UV koordinatlar\u0131n\u0131 rastgele kayd\u0131rabilir, renk kanallar\u0131n\u0131 anl\u0131k olarak bozabilir veya k\u0131sa s\u00fcreli\u011fine rastgele g\u00fcr\u00fclt\u00fc ekleyebiliriz. Bu da yine fragment shader i\u00e7inde <code>uTime<\/code> ve <code>random<\/code> fonksiyonlar\u0131 kullan\u0131larak yap\u0131labilir.<\/p>\n<h2>Kullan\u0131c\u0131 Etkile\u015fimi ve Metin \u0130\u015fleme<\/h2>\n<p>G\u00f6rsel efektlerin yan\u0131 s\u0131ra, retro terminalimizin etkile\u015fimli olmas\u0131 da \u00f6nemlidir.<\/p>\n<h3>Klavye Giri\u015fini Yakalama<\/h3>\n<p>JavaScript'te <code>keydown<\/code> ve <code>keyup<\/code> olay dinleyicileri (event listeners) kullanarak klavye giri\u015flerini yakalayabiliriz:<\/p>\n<pre><code class=\"language-javascript\">\ndocument.addEventListener('keydown', (event) => {\n    const key = event.key;\n    \/\/ Terminale metin ekleme veya komut i\u015fleme mant\u0131\u011f\u0131 buraya gelecek\n    if (key === 'Enter') {\n        processCommand(currentInput);\n        currentInput = '';\n    } else if (key === 'Backspace') {\n        currentInput = currentInput.slice(0, -1);\n    } else if (key.length === 1) { \/\/ Tek karakterli tu\u015flar (harfler, say\u0131lar, semboller)\n        currentInput += key;\n    }\n    updateTerminalDisplay();\n});\n<\/pre>\n<p><\/code><\/p>\n<h3>Terminal Komut \u0130\u015fleme Mant\u0131\u011f\u0131<\/h3>\n<p>Basit bir terminal i\u00e7in, kullan\u0131c\u0131dan gelen girdiyi ayr\u0131\u015ft\u0131r\u0131p belirli komutlara yan\u0131t veren bir mant\u0131k olu\u015fturabiliriz:<\/p>\n<pre><code class=\"language-javascript\">\nconst commands = {\n    'help': () => 'Mevcut komutlar: help, echo, clear',\n    'echo': (args) => args.join(' '),\n    'clear': () => { terminalOutput = []; return ''; }\n};\n\nfunction processCommand(input) {\n    const parts = input.trim().split(' ');\n    const command = parts[0].toLowerCase();\n    const args = parts.slice(1);\n\n    if (commands[command]) {\n        const result = commands[command](args);\n        terminalOutput.push(<code>> ${input}<\/code>);\n        if (result) terminalOutput.push(result);\n    } else {\n        terminalOutput.push(<code>> ${input}<\/code>);\n        terminalOutput.push(<code>Bilinmeyen komut: ${command}<\/code>);\n    }\n    \/\/ Terminal \u00e7\u0131kt\u0131s\u0131n\u0131 g\u00fcncelleyen fonksiyonu \u00e7a\u011f\u0131r\n}\n<\/pre>\n<p><\/code><\/p>\n<h3>Retro Font Kullan\u0131m\u0131 ve Terminal \u00c7\u0131kt\u0131s\u0131n\u0131 Y\u00f6netme<\/h3>\n<p>Retro bir his i\u00e7in uygun bir piksel veya monospaced font se\u00e7imi \u00e7ok \u00f6nemlidir. Google Fonts'ta \"Press Start 2P\" veya \"VT323\" gibi fontlar harika se\u00e7eneklerdir. Bunlar\u0131 CSS ile kolayca entegre edebilirsiniz.<\/p>\n<p>Terminal \u00e7\u0131kt\u0131s\u0131n\u0131 y\u00f6netmek i\u00e7in, gelen metni bir diziye (array) depolayabilir ve bu diziyi HTML elemanlar\u0131na veya Three.js metin dokusuna render edebiliriz. Metnin yukar\u0131 kayd\u0131rma animasyonu (scroll-up) ve karakterlerin tek tek yaz\u0131lma animasyonu (typewriter effect) kullan\u0131c\u0131 deneyimini zenginle\u015ftirecektir.<\/p>\n<h2>Optimizasyon ve Son Dokunu\u015flar<\/h2>\n<p>Projemizi tamamlamadan \u00f6nce, performans ve kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in baz\u0131 optimizasyonlar ve son dokunu\u015flar yapmal\u0131y\u0131z.<\/p>\n<h3>Performans \u0130pu\u00e7lar\u0131<\/h3>\n<ul>\n<li><strong>Shader Optimizasyonu:<\/strong> Shader'lar\u0131n\u0131zda gereksiz hesaplamalardan ka\u00e7\u0131n\u0131n. Karma\u015f\u0131k d\u00f6ng\u00fcler yerine matematiksel fonksiyonlar\u0131 tercih edin. <code>precision highp float;<\/code> gibi hassasiyet tan\u0131mlamalar\u0131n\u0131 do\u011fru kullan\u0131n.<\/li>\n<li><strong>Doku Boyutlar\u0131:<\/strong> Metin veya di\u011fer g\u00f6rsel \u00f6\u011feler i\u00e7in kullan\u0131lan dokular\u0131n (textures) boyutlar\u0131n\u0131 optimize edin. Gereksiz yere b\u00fcy\u00fck dokular kullanmaktan ka\u00e7\u0131n\u0131n.<\/li>\n<li><strong>GPU Belle\u011fi Y\u00f6netimi:<\/strong> Three.js'te kullan\u0131lmayan geometrileri, materyalleri ve dokular\u0131 do\u011fru bir \u015fekilde dispose edin (bellekten temizleyin).<\/li>\n<li><strong>RequestAnimationFrame:<\/strong> Animasyon d\u00f6ng\u00fcn\u00fcz\u00fc <code>requestAnimationFrame<\/code> kullanarak optimize edin. Bu, taray\u0131c\u0131n\u0131n ekran yenileme h\u0131z\u0131yla senkronize olur ve daha ak\u0131c\u0131 animasyonlar sa\u011flar.<\/li>\n<\/ul>\n<h3>Mobil Uyumluluk ve Taray\u0131c\u0131 Uyumlulu\u011fu<\/h3>\n<p>Web sitenizin farkl\u0131 cihazlarda ve taray\u0131c\u0131larda d\u00fczg\u00fcn \u00e7al\u0131\u015ft\u0131\u011f\u0131ndan emin olun:<\/p>\n<ul>\n<li><strong>Duyarl\u0131 Tasar\u0131m:<\/strong> Canvas boyutunu ve terminal metin boyutunu ekran boyutuna g\u00f6re ayarlay\u0131n.<\/li>\n<li><strong>Dokunmatik Kontroller:<\/strong> E\u011fer terminal etkile\u015fimi mobil cihazlarda da olacaksa, sanal klavye veya dokunmatik olaylar i\u00e7in destek eklemeyi d\u00fc\u015f\u00fcnebilirsiniz.<\/li>\n<li><strong>Taray\u0131c\u0131 Testi:<\/strong> Chrome, Firefox, Safari ve Edge gibi pop\u00fcler taray\u0131c\u0131larda uygulaman\u0131z\u0131 test edin. WebGL'in farkl\u0131 taray\u0131c\u0131lardaki davran\u0131\u015flar\u0131 k\u00fc\u00e7\u00fck farkl\u0131l\u0131klar g\u00f6sterebilir.<\/li>\n<\/ul>\n<h3>Da\u011f\u0131t\u0131m ve Yay\u0131nlama<\/h3>\n<p>Projenizi tamamlad\u0131\u011f\u0131n\u0131zda, onu d\u00fcnyaya a\u00e7mak i\u00e7in GitHub Pages, Netlify veya Vercel gibi \u00fccretsiz hosting hizmetlerini kullanabilirsiniz. Bu platformlar, statik web sitelerini kolayca da\u011f\u0131tman\u0131za olanak tan\u0131r ve genellikle Git entegrasyonu sunar, b\u00f6ylece kodunuzu her g\u00fcncelledi\u011finizde siteniz otomatik olarak yay\u0131nlan\u0131r.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede, WebGL'in g\u00fcc\u00fcn\u00fc ve GitHub Copilot'\u0131n ak\u0131ll\u0131 deste\u011fini birle\u015ftirerek, retro bir CRT terminal web sitesi olu\u015fturman\u0131n heyecan verici s\u00fcrecini ele ald\u0131k. Temel CRT esteti\u011fini anlamaktan, WebGL shader'lar\u0131 ile g\u00f6rsel efektleri uygulamaya, kullan\u0131c\u0131 etkile\u015fimini y\u00f6netmeye ve son olarak projenizi optimize etmeye kadar bir\u00e7ok ad\u0131m\u0131 inceledik. GitHub Copilot'\u0131n (Claude Opus 4.5'in yetenekleriyle) karma\u015f\u0131k GLSL kodlar\u0131n\u0131 veya Three.js yard\u0131mc\u0131 fonksiyonlar\u0131n\u0131 h\u0131zla \u00fcretme yetene\u011fi, bu t\u00fcr yarat\u0131c\u0131 projelerde ne kadar de\u011ferli bir ara\u00e7 oldu\u011funu bir kez daha g\u00f6sterdi. Art\u0131k siz de kendi dijital nostalji projenizi hayata ge\u00e7irmek i\u00e7in gerekli bilgi ve ara\u00e7lara sahipsiniz. Unutmay\u0131n, yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131n s\u0131n\u0131r\u0131 yok!<\/p>\n<h2>SSS (S\u0131k Sorulan Sorular)<\/h2>\n<dl>\n<dt>\n<h3>WebGL bilmeden bu projeye ba\u015flayabilir miyim?<\/h3>\n<\/dt>\n<dd>Evet, Three.js gibi k\u00fct\u00fcphaneler WebGL'i b\u00fcy\u00fck \u00f6l\u00e7\u00fcde soyutlar. Temel JavaScript bilginiz ve HTML\/CSS hakimiyetiniz varsa ba\u015flayabilirsiniz. Shader'lar i\u00e7in biraz GLSL \u00f6\u011frenmeniz gerekse de, Copilot bu konuda size \u00e7ok yard\u0131mc\u0131 olacakt\u0131r.<\/dd>\n<dt>\n<h3>GitHub Copilot'\u0131n \u00fccretsiz alternatifi var m\u0131?<\/h3>\n<\/dt>\n<dd>Copilot \u00fccretli bir hizmettir. Ancak, VS Code i\u00e7in Codeium veya Tabnine gibi baz\u0131 \u00fccretsiz veya freemium alternatifler mevcuttur. Bu ara\u00e7lar da benzer AI destekli kod tamamlama \u00f6zellikleri sunar.<\/dd>\n<dt>\n<h3>Performans sorunlar\u0131 ya\u015farsam ne yapmal\u0131y\u0131m?<\/h3>\n<\/dt>\n<dd>\u0130lk olarak, taray\u0131c\u0131n\u0131z\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki performans monit\u00f6r\u00fcn\u00fc kullanarak darbo\u011fazlar\u0131 tespit edin. Genellikle shader'lar, a\u015f\u0131r\u0131 b\u00fcy\u00fck dokular veya optimize edilmemi\u015f animasyon d\u00f6ng\u00fcleri performans sorunlar\u0131na neden olur. Daha basit shader'lar kullanmay\u0131 veya efekt yo\u011funlu\u011funu azaltmay\u0131 deneyin.<\/dd>\n<dt>\n<h3>Hangi k\u00fct\u00fcphaneyi kullanmal\u0131y\u0131m, Three.js mi PixiJS mi?<\/h3>\n<\/dt>\n<dd>E\u011fer 3D geometriler, karma\u015f\u0131k \u0131\u015f\u0131kland\u0131rma veya post-processing efektleri \u00fczerinde yo\u011funla\u015facaksan\u0131z Three.js daha uygun bir se\u00e7imdir. PixiJS ise daha \u00e7ok 2D odakl\u0131d\u0131r ve WebGL'i 2D grafikler i\u00e7in optimize eder. Bu projede 3D sahne ve shader tabanl\u0131 post-processing oldu\u011fu i\u00e7in Three.js daha do\u011fal bir uyum sa\u011flar.<\/dd>\n<dt>\n<h3>Bu terminali ger\u00e7ek bir backend ile ba\u011flayabilir miyim?<\/h3>\n<\/dt>\n<dd>Kesinlikle! Terminal komut i\u015fleme mant\u0131\u011f\u0131n\u0131z\u0131 bir API'ye istek g\u00f6nderecek \u015fekilde geni\u015fletebilirsiniz. \u00d6rne\u011fin, bir \"ls\" komutu sunucunuzdan dosya<\/p>\n","protected":false},"excerpt":{"rendered":"Bir retro CRT terminali olu\u015fturman\u0131n ilk ad\u0131m\u0131, taklit etmek istedi\u011fimiz esteti\u011fi derinlemesine anlamakt\u0131r. Sadece g\u00f6rsel bir taklitten \u00f6te, o d\u00f6ne&#8230;","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-37159","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-git","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>WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk - 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\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk\" \/>\n<meta property=\"og:description\" content=\"Bir retro CRT terminali olu\u015fturman\u0131n ilk ad\u0131m\u0131, taklit etmek istedi\u011fimiz esteti\u011fi derinlemesine anlamakt\u0131r. Sadece g\u00f6rsel bir taklitten \u00f6te, o d\u00f6ne...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-12-28T03:00:43+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=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk\",\"datePublished\":\"2025-12-28T03:00:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\"},\"wordCount\":2749,\"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\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\",\"name\":\"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-12-28T03:00:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk\"}]},{\"@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":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk - 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\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/","og_locale":"tr_TR","og_type":"article","og_title":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk","og_description":"Bir retro CRT terminali olu\u015fturman\u0131n ilk ad\u0131m\u0131, taklit etmek istedi\u011fimiz esteti\u011fi derinlemesine anlamakt\u0131r. Sadece g\u00f6rsel bir taklitten \u00f6te, o d\u00f6ne...","og_url":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-12-28T03:00:43+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk","datePublished":"2025-12-28T03:00:43+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/"},"wordCount":2749,"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\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/","url":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/","name":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-12-28T03:00:43+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/webgl-ve-github-copilot-ile-retro-crt-terminal-web-sitesi-olusturma-dijital-nostaljiye-yolculuk\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"WebGL ve GitHub Copilot ile Retro CRT Terminal Web Sitesi Olu\u015fturma: Dijital Nostaljiye Yolculuk"}]},{"@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\/37159","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=37159"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37159\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}