Piksel nedir? Ekrana bir görüntü nasıl oluşur? Raster vs Vektör? GPU ne işe yarar?
Aşağıdaki plan, dersin genel gidişatını göstermek amacıyla hazırlanmıştır. Öğrenci ihtiyaçlarına, ilerleme hızına ve güncel gelişmelere bağlı olarak konu sıralaması ve içeriklerde değişiklikler yapılabilir. Sınav haftalarında ders işlenmez.
| Hafta | Konu | Teori | Uygulama / Lab |
|---|---|---|---|
| 1 | Bilgisayar Grafiğine Giriş | Piksel, Raster vs Vektör, GPU vs CPU, Grafik Pipeline | GIMP ile piksel atölyesi |
| 2 | Renk Teorisi | RGB, HSB, Alpha, Renk Paletleri, Erişilebilirlik | GIMP / Coolors.co ile renk çalışması |
| 3 | Dijital Görüntü Temelleri | Çözünürlük, DPI/PPI, Dosya Formatları, Sıkıştırma | Sprite hazırlama |
| 4 | 2D Dönüşümler ve Koordinat Sistemleri | Translation, Rotation, Scaling, Pivot, Matris Temelleri | Dönüşüm uygulamaları |
| 5 | Pixel Art ve 2D Asset Oluşturma | Pixel Art İlkeleri, Dithering, Karakter Tasarımı | Sprite Sheet oluşturma |
| 6 | 2D Animasyon Temelleri | Frame-by-frame, Tweening, Easing, Animasyon İlkeleri | Animasyon uygulaması |
| 7 | Tilemap ve Seviye Tasarımı | Tile Sistemi, Tileset Tasarımı, Parallax | Tiled Map Editor |
| 8 | 📝 ARA SINAV | Bu hafta ders işlenmez — tüm süre sınava ayrılmıştır | |
| 9 | 3D Grafik Temelleri | 3D Koordinatlar, Mesh, Vertex, Polygon | Blender'a giriş |
| 10 | 3D Modelleme | Box Modeling, Extrude, Modifier | Prop Modelleme |
| 11 | Materyal, Texture ve UV Mapping | Texture, UV Mapping, Normal Map, PBR Temelleri | Blender UV workshop |
| 12 | Işık ve Render | Işık Türleri, Gölgeler, Ambient Occlusion | Render uygulaması |
| 13 | Shader ve Post-Processing | Shader Kavramı, Post-Process Efektleri | Shadertoy |
| 14 | Grafik Optimizasyonu ve Pipeline | Draw Call, Batching, LOD, Atlas, Profiling | Profiling uygulaması |
| 15 | Final Proje Sunumları | Proje Sunumları + Akran Değerlendirmesi | |
| Final | 📝 FİNAL SINAVI | Ders işlenmez — tüm dönem konularından sınav | |
| Etkinlik | Adet | Katkı % |
|---|---|---|
| Haftalık Lab Katılım & Çalışmalar | ~10 | 15% |
| Ödevler (GitHub Classroom) | 3 | 20% |
| Ara Sınav (Teori + Uygulama) | 1 | 25% |
| Final Projesi | 1 | 40% |
Bu ders kapsamındaki tüm sınavlar, ödevler ve projeler 2547 sayılı Yükseköğretim Kanunu ve ilgili yönetmelikler çerçevesinde değerlendirilir. Sınavlarda kopya çekmek, kopya vermek veya buna teşebbüs etmek disiplin suçudur.
📄 2547 Sayılı Yükseköğretim Kanunu: PDF İndir
⚠️ Tüm öğrenciler, kayıtlı oldukları üniversitenin öğrenci disiplin yönetmeliğini okumakla yükümlüdür.
Bilgisayar grafiği, bilgisayar kullanarak görsel içerik oluşturma, düzenleme ve gösterme bilimidir. Şu an baktığınız bu web sayfası bile bilgisayar grafiğinin bir ürünüdür!
Tanımı biraz daha açalım: Bilgisayar grafiği, verileri (sayılar, koordinatlar, renk kodları) görsel temsillere dönüştürme sürecidir. Mesela bir oyun motorunda karakterinizin pozisyonu (x=150, y=300) gibi soyut bir veridir. Bilgisayar grafiği bu sayıyı ekranda görünür bir karakter haline getirir. Aslında gördüğünüz her şey — her piksel, her renk — arka planda bir sayıdır.
Bugün bilgisayar grafiklerinin olmadığı bir dünya hayal edin. Telefon ekranınız, oyunlar, filmler, Instagram, Google Maps... Hepsi bilgisayar grafiği sayesinde çalışıyor. Bilgisayar grafiği olmasa, bilgisayarlar hâlâ 1970'lerdeki gibi sadece metin (text) tabanlı terminaller olurdu!
Bilgisayar grafiği birçok alanda kullanılır:
Karakterler, dünyalar, efektler, UI — bir oyundaki gördüğünüz her şey bilgisayar grafiği. 2D sprite'lardan 3D modellere, partikül efektlerinden gölgelendirmeye kadar her görsel eleman bu disiplinin ürünüdür.
Örnekler: Unity, Unreal Engine, Godot ile yapılan her oyun
Pixar filmleri tamamen bilgisayar grafiği ile yapılır. Marvel filmlerindeki VFX (görsel efektler) olmasaydı Iron Man uçamazdı! Bir Pixar filminin tek bir karesi render edilmesi saatler sürebilir.
Örnekler: Toy Story, Avatar, Spider-Verse
Telefonunuzdaki her uygulama, her buton, her ikon, her animasyon bir grafik çalışması. Bir butona bastığınızda renk değişimi, bir sayfayı kaydırdığınızda akıcı geçişler — hepsi bilgisayar grafiği.
Örnekler: iOS arayüzü, Material Design, web siteleri
MR ve tomografi görüntüleri, 3D organ modelleri, molekül simülasyonları, hava durumu haritaları... Bilim insanları ve doktorlar verileri görselleştirmek için bilgisayar grafiğine güvenir.
Örnekler: 3D beyin haritaları, cerrahi simülasyonlar
Binalar inşa edilmeden önce 3D olarak modellenir ve fotorealistik render'lar üretilir. CAD programları, iç mekan tasarımı, şehir planlaması — hepsi bilgisayar grafiği kullanır.
Örnekler: AutoCAD, SketchUp, V-Ray render'lar
VR (sanal gerçeklik) ve AR (artırılmış gerçeklik) tamamen bilgisayar grafiğine dayanır. Meta Quest, Apple Vision Pro gibi cihazlar gerçek zamanlı 3D grafikler üretir.
Örnekler: Beat Saber, Pokémon GO, IKEA Place
Biz bu derste ağırlıklı olarak oyun geliştirme perspektifinden bilgisayar grafiğini öğreneceğiz. Ama öğreneceğiniz kavramlar (piksel, renk, animasyon, shader...) tüm alanlarda geçerli. Bilgisayar grafiği öğrenmek, sadece oyun yapmak değil — dijital dünyanın nasıl çalıştığını anlamak demek.
Bilgisayar grafiği çok geniş bir alan. İşte ana alt dalları:
Düz yüzeyde çalışma: piksel tabanlı görüntüler, sprite'lar, UI elemanları, tipografi. Bu dersin ilk yarısında buna odaklanacağız.
Üç boyutlu uzayda modelleme, texture kaplama, aydınlatma ve render. Dersin ikinci yarısında Blender ile öğreneceğiz.
Oyunlarda olduğu gibi her kare (frame) anında hesaplanır. Saniyede 30-60-120+ kare üretilmelidir.
Pixar filmlerinde olduğu gibi tek bir karenin hesaplanması dakikalar/saatler sürer ama sonuç çok gerçekçi olur.
Oyunlarda gerçek zamanlı (real-time) render kullanılır — her kare anında hesaplanmalıdır, yoksa oyun donar. Filmlerde ise offline render kullanılır — saatler sürer ama kalite çok yüksek olur. Oyun motorları (Unity, Unreal) gerçek zamanlı, Blender'ın Cycles motoru ise offline render yapar. İlginç olan şu: oyun grafikleri o kadar ilerledi ki artık gerçek zamanlı render bile film kalitesine yaklaşıyor!
Bilgisayar ekranında gördüğünüz her şey piksellerden oluşur. Piksel (Picture Element — "resim elemanı"), ekrandaki en küçük renk noktasıdır.
Pikselleri bir mozaik gibi düşünün. Uzaktan baktığınızda güzel bir resim görürsünüz, ama yakınlaştırınca küçük renkli kareler olduğunu fark edersiniz. İşte her bir kare bir pikseldir. Ya da LEGO düşünün — küçük tuğlalarla büyük yapılar oluşturuyorsunuz. Piksel de ekranın LEGO tuğlasıdır.
Her bir piksel aslında çok basit bir şeydir — sadece bir renk değeri tutar. Hiçbir piksel "ben bir yüzün parçasıyım" bilmez. Her piksel tek başına sadece "ben kırmızıyım" veya "ben koyu maviyim" der. Ama milyonlarca piksel yan yana gelince, bizim gözümüz onları anlamlı bir görüntü olarak algılar.
Bir pikselin temel özellikleri:
Matematikteki koordinat sisteminden farklı olarak, bilgisayar grafiklerinde Y ekseni aşağı doğru artar! Sol üst köşe (0,0), sağ alt köşe (genişlik, yükseklik). Bu başta kafa karıştırıcı olabilir ama alışınca çok mantıklıdır — çünkü yazıyı da soldan sağa, yukarıdan aşağı okuruz.
Aşağıdaki ızgarada her bir kareye tıklayarak piksel piksel bir şey çizin. Ekranınızdaki her görüntü tam olarak böyle çalışır — sadece çok daha fazla ve çok daha küçük piksellerle!
Küçük bir yüz veya kalp çizmeye çalışın. Ne kadar az piksel varsa, o kadar "bloklu" görünür. Bu yüzden eski oyunlar (Pac-Man, Mario) bloklu görünüyordu — az pikselle çalışıyorlardı!
Bir ekranın çözünürlüğü, yatay × dikey piksel sayısını belirtir. Çözünürlük ne kadar yüksekse, görüntü o kadar keskin ve detaylı olur, çünkü aynı alana daha fazla piksel sığar ve her piksel daha küçük olur.
| Çözünürlük Adı | Piksel Sayısı | Toplam Piksel | Nerede Kullanılır? |
|---|---|---|---|
| HD (720p) | 1280 × 720 | ~921.000 | Eski telefonlar, web videoları |
| Full HD (1080p) | 1920 × 1080 | ~2.073.600 | Çoğu monitör, TV, oyun konsolu |
| 2K (1440p) | 2560 × 1440 | ~3.686.400 | Oyun monitörleri, iyi telefonlar |
| 4K (2160p) | 3840 × 2160 | ~8.294.400 | Yeni TV'ler, PS5/Xbox Series X |
| 8K | 7680 × 4320 | ~33.177.600 | Sinema, yeni nesil (çok nadir) |
Full HD bir ekranda 2 milyondan fazla piksel var ve bilgisayar her bir pikselin rengini saniyede en az 30-60 kez yeniden hesaplıyor. Bu muazzam bir iş! Saniyede 60 FPS (frame per second) ile Full HD render = saniyede 124 milyon piksel renk hesabı. 4K'da bu rakam 498 milyona çıkıyor! İşte bu yüzden GPU denen özel bir donanıma ihtiyaç var.
Aynı çözünürlük farklı boyutlardaki ekranlarda farklı görünür. PPI (Pixels Per Inch) = bir inç'e kaç piksel sığdığı.
Bir oyun geliştirirken hedef çözünürlüğü belirlemek önemlidir. Pixel art oyunlar genellikle düşük çözünürlükte (320×180, 640×360) tasarlanıp büyütülür. 3D oyunlar ise genellikle 1080p veya 4K hedefler. Düşük çözünürlükte çalışmak sanatsal bir tercih olabilir — Celeste 320×180'de tasarlanmıştır!
Slider'ı hareket ettirerek aynı görüntünün farklı çözünürlüklerde nasıl göründüğünü karşılaştırın. Dikkat edin: az piksel = bloklu, çok piksel = pürüzsüz.
Az piksel = bulanık/bloklu görüntü · Çok piksel = keskin görüntü
Her pikselin rengi bellekte (RAM veya VRAM) saklanır. Bir piksel için gereken bellek, bit derinliğine bağlıdır:
| Format | Bit/Piksel | Renk Sayısı | 1080p Görüntü Boyutu |
|---|---|---|---|
| 1-bit (siyah/beyaz) | 1 | 2 | ~253 KB |
| 8-bit (indeksli) | 8 | 256 | ~2 MB |
| 24-bit RGB (True Color) | 24 | 16.7 milyon | ~6 MB |
| 32-bit RGBA (+ alpha) | 32 | 16.7 milyon + saydamlık | ~8 MB |
Bir oyunda onlarca texture (doku) aynı anda bellekte tutulur. Her texture aslında bir piksel dizisidir. 4K bir texture (4096×4096) RGBA formatında 64 MB yer kaplar! Bir oyunda yüzlerce texture varsa, bu hızla gigabyte'lara ulaşır. Bu yüzden texture sıkıştırma (DXT, ETC, ASTC) çok önemlidir — ilerideki haftalarda göreceğiz.
Bilgisayar grafiklerinde görüntüleri oluşturmanın iki temel yaklaşımı vardır. Bu ikisini anlamak, doğru aracı doğru iş için seçmeniz açısından çok önemlidir.
Raster grafikler, piksel ızgarasından oluşur. Her piksel bir renk değeri tutar. Fotoğraf makinenizle çektiğiniz her fotoğraf, telefonunuzdaki her ekran görüntüsü, oyunlardaki sprite'lar — hepsi raster grafiktir.
Raster görsellerin en büyük dezavantajı: büyütüldüklerinde kalite kaybı yaşanır (pikselleme / bulanıklaşma). Çünkü orijinal pikseller arasına yeni bilgi eklenemez, var olan pikseller sadece büyütülür.
Vektör grafikler, pikseller yerine matematiksel formüllerle tanımlanır. Bir daire "merkez noktası (200, 200), yarıçap 50, renk kırmızı" gibi bir formülle ifade edilir. Ekrana çizilmesi gerektiğinde, bilgisayar bu formülü o anki çözünürlüğe göre piksel piksel hesaplar (rasterize eder).
En büyük avantajı: ne kadar büyütürseniz büyütün, keskin kalır. Çünkü formül her boyutta yeniden hesaplanır. Bu yüzden logolar, fontlar ve ikonlar genellikle vektöreldir.
| Özellik | Raster (Bitmap) | Vektör |
|---|---|---|
| Yapı taşı | Piksel (küçük renk noktaları) | Matematiksel nesneler (noktalar, çizgiler, eğriler) |
| Yakınlaştırınca? | ❌ Bulanıklaşır, pikselleşir (bloklu olur) | ✅ Her zaman keskin kalır (formül yeniden hesaplanır) |
| Dosya boyutu | Çözünürlüğe bağlı — yüksek çözünürlük = büyük dosya | Karmaşıklığa bağlı — genellikle daha küçük |
| Fotoğraf için? | ✅ Mükemmel — fotoğraflar doğası gereği piksel tabanlı | ❌ Uygun değil — fotoğrafı formüllerle ifade edemezsiniz |
| Dosya formatları | PNG, JPG/JPEG, GIF, BMP, TIFF, WebP | SVG, AI, EPS, PDF (vektör içerikli) |
| Ne için uygun? | Fotoğraflar, oyun sprite'ları, texture'lar, detaylı görseller | Logolar, ikonlar, UI elemanları, fontlar, infografikler |
| Düzenleme araçları | GIMP, Photoshop, Aseprite, Krita | Illustrator, Inkscape, Figma, Affinity Designer |
| Oyunlarda kullanım | Sprite'lar, texture'lar, arka planlar, UI görselleri | UI elemanları, bazı stil seçimleri, font render |
Oyunlarda çoğunlukla raster grafikler kullanılır — sprite'lar, texture'lar, arka planlar hep piksel tabanlıdır. Ama UI elemanlarında (butonlar, menüler), logolarda ve bazı stil tercihlerinde vektör de kullanılabilir. Önemli: Oyun motoru sonuçta her şeyi piksele dönüştürür (rasterize eder) — çünkü ekran piksellerden oluşur!
Raster bir görüntüyü yakınlaştırdığınızda ne olur? Aşağıda bir manzara görseli var. Slider ile yakınlaştırarak piksellerin nasıl bloklu hale geldiğini gözlemleyin. Gerçek hayatta fotoğraflarınızı zoom yaptığınızda gördüğünüz "bulanıklık" veya "blok etkisi" tam olarak budur.
📷 Orijinal Görüntü
🔍 Yakınlaştırılmış Bölge (pikseller görünür!)
Raster görsellerde piksel sayısı sabittir. Yakınlaştırdığınızda yeni bilgi eklenemez — var olan pikseller büyütülür ve bloklar halinde görünür. Bu yüzden profesyonel fotoğrafçılar yüksek çözünürlüklü kameralarla çekim yapar. Vektör görsellerde bu sorun yoktur çünkü her zoom seviyesinde formül yeniden hesaplanır.
Bir görüntü oluşturduğunuzda veya fotoğraf çektiğinizde, bu veri bir şekilde dosya olarak saklanmalıdır. Farklı formatlar farklı amaçlara hizmet eder — bazıları kaliteyi korur, bazıları dosya boyutunu küçültür, bazıları saydamlık destekler. Hangi formatı ne zaman kullanacağınızı bilmek, oyun geliştirmede ve grafik tasarımda temel bir beceridir.
BMP (Bitmap), en eski ve en basit görüntü formatlarından biridir. Microsoft tarafından 1990'larda Windows için geliştirilmiştir. BMP'nin çalışma mantığı çok basittir: her pikselin renk değerini olduğu gibi, sıkıştırmadan saklar.
Bir BMP dosyası üç ana bölümden oluşur:
100×100 piksellik 24-bit bir BMP görüntüsü: 100 × 100 × 3 byte = 30.000 byte (~30 KB) sadece piksel verisi + başlıklar. Bir Full HD (1920×1080) görüntü ise: 1920 × 1080 × 3 = ~5.9 MB! Hiçbir sıkıştırma olmadığı için dosyalar devasa olur. Bu yüzden günümüzde BMP neredeyse hiç kullanılmaz — ama formatın basitliği onu öğretim için mükemmel yapar.
Aşağıdaki 4×4 piksel görüntüde her pikselin RGB değerini görebilirsiniz. BMP dosyası tam olarak bu değerleri sırasıyla saklar — ne sıkıştırma ne de kayıp, ham veri!
JPEG (Joint Photographic Experts Group), 1992'de geliştirilmiş ve fotoğraflar için en yaygın kullanılan formattır. JPEG'in sırrı kayıplı sıkıştırma (lossy compression) kullanmasıdır — dosya boyutunu dramatik şekilde küçültür ama karşılığında bir miktar görüntü kalitesi kaybeder.
JPEG kalite ayarını değiştirerek sıkıştırmanın görüntüye etkisini gözlemleyin. Düşük kalitede 8×8 blok artefaktları ve renk bantlaması belirginleşir.
Orijinal
JPEG Sıkıştırılmış (simüle)
PNG (Portable Network Graphics), 1996'da GIF'in patent sorunlarına alternatif olarak geliştirilmiştir. PNG kayıpsız sıkıştırma (lossless compression) kullanır — dosya boyutunu küçültür ama hiçbir piksel bilgisi kaybetmez. Sıkıştırmayı açtığınızda orijinal görüntüyü birebir geri alırsınız.
| Durum | Tercih | Neden? |
|---|---|---|
| Fotoğraf (web) | JPEG | Çok küçük dosya boyutu, saydamlık gerekmez |
| Oyun sprite'ı | PNG | Saydamlık şart, keskin kenarlar korunmalı |
| Logo / ikon | PNG veya SVG | Keskin kenarlar, saydamlık, ölçeklenebilirlik |
| Ekran görüntüsü | PNG | Metin ve UI kenarları JPEG'de bozulur |
| Sosyal medya | JPEG | Hızlı yükleme, dosya boyutu küçük |
| UI texture | PNG | Saydamlık + kalite kaybı yok |
SVG (Scalable Vector Graphics), W3C tarafından 2001'de standartlaştırılmış, XML tabanlı bir vektör grafik formatıdır. SVG'nin en büyük özelliği: bir metin dosyasıdır! Piksel içermez, bunun yerine şekilleri matematiksel olarak tanımlar. Herhangi bir metin editöründe açıp okuyabilir, düzenleyebilirsiniz.
Aşağıdaki SVG koduna bakın — bir daire, bir dikdörtgen ve bir metin:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Arka plan dikdörtgeni -->
<rect width="200" height="200" fill="#1a1a2e" rx="10"/>
<!-- Kırmızı daire -->
<circle cx="100" cy="80" r="50" fill="#e94560"/>
<!-- Yeşil dikdörtgen -->
<rect x="60" y="140" width="80" height="40"
fill="#00e676" rx="5"/>
<!-- Metin -->
<text x="100" y="175" text-anchor="middle"
fill="white" font-size="14">SVG!</text>
</svg>↑ Yukarıdaki kodun tarayıcıdaki çıktısı (bu gerçek bir SVG!)
SVG'de kullanabileceğiniz temel şekiller:
<circle cx="50" cy="50" r="40"
fill="red" stroke="white"
stroke-width="2"/>cx, cy = merkez, r = yarıçap
<rect x="10" y="10"
width="100" height="60"
fill="blue" rx="10"/>x, y = konum, rx = köşe yuvarlama
<line x1="0" y1="0"
x2="100" y2="100"
stroke="green"
stroke-width="3"/>x1,y1 → x2,y2 noktaları
<polygon
points="50,5 95,40 80,95
20,95 5,40"
fill="gold"/>Noktalar listesi → kapalı şekil
SVG'nin en güçlü elemanı <path>'tır. Bézier eğrileri dahil her türlü şekli çizebilir. Komutlar:
| Komut | Anlamı | Örnek |
|---|---|---|
M | Move to (başlangıç) | M 10 10 |
L | Line to (düz çizgi) | L 90 90 |
C | Cubic Bézier eğrisi | C 20 80, 80 80, 90 10 |
Q | Quadratic Bézier eğrisi | Q 50 0, 90 50 |
A | Arc (yay) | A 25 25 0 0 1 50 50 |
Z | Kapat (başlangıca dön) | Z |
Aşağıdaki SVG kodunu düzenleyin ve sonucun canlı olarak değiştiğini görün. Renkleri, boyutları, pozisyonları değiştirmeyi deneyin!
Grafik tasarım dünyasında onlarca araç var. İşte en popüler olanları, kategorilerine göre:
Endüstri standardı raster grafik editörü. Fotoğraf düzenleme, dijital boyama, UI tasarımı. Ücretli (abonelik).
Alternatifler: Photopea (ücretsiz, web tabanlı), Affinity Photo
Açık kaynak ve tamamen ücretsiz dijital boyama programı. Profesyonel fırça motoru, animasyon desteği, HDR boyama. Oyun asset'leri oluşturmak için mükemmel. Konsept sanatçılar ve illüstratörler tarafından seviliyor.
krita.org · Windows, Mac, Linux
Açık kaynak Photoshop alternatifi. Fotoğraf düzenleme, katman desteği, filtreler. Bu derste kullanacağız!
gimp.org · Windows, Mac, Linux
Pixel art ve sprite animasyonu için özel araç. Oyun geliştiriciler arasında çok popüler. Ücretli (küçük bir ücret).
aseprite.org · Kaynak kodu açık (derleyebilirsiniz)
Endüstri standardı vektör editörü. Logolar, ikonlar, infografikler, tipografi. Ücretli (abonelik).
Açık kaynak vektör grafik editörü. SVG formatında çalışır. Illustrator'a ücretsiz alternatif. Logo ve ikon tasarımı için harika.
inkscape.org · Windows, Mac, Linux
Web tabanlı tasarım aracı. UI/UX tasarımı, prototipleme, işbirliği. Vektör tabanlı ama raster dışa aktarım da yapar. Ücretsiz plan mevcut.
figma.com · Tarayıcı + Desktop
Hem vektör hem raster modunda çalışabilen hibrit araç. Tek seferlik ödeme (abonelik yok). Illustrator alternatifi.
Krita özellikle dijital boyama ve konsept art için tasarlanmış profesyonel bir araçtır. Photoshop'un fırça motoruna rakip olacak kalitede fırçalar sunar. Oyun geliştirme dünyasında konsept art, karakter tasarımı, arka plan boyama ve texture oluşturma için yaygın kullanılır. Animasyon özelliği de var — basit frame-by-frame animasyonlar yapabilirsiniz. Ve tamamen ücretsizdir!
| Format | Alpha (Saydamlık) | Sıkıştırma | Ne Zaman Kullan? |
|---|---|---|---|
| PNG | ✅ Destekler | Kayıpsız (lossless) | Sprite'lar, UI, saydam görseller — oyunlarda en çok kullanılan format |
| JPG / JPEG | ❌ Desteklemez | Kayıplı (lossy) — boyut çok küçülür ama kalite düşer | Fotoğraflar, arka planlar — saydamlık gerekmiyorsa |
| GIF | ⚠️ Kısmen (1-bit: ya saydam ya değil) | Kayıpsız, max 256 renk | Basit animasyonlar, ama oyun geliştirmede pek kullanılmaz |
| WebP | ✅ Destekler | Hem kayıplı hem kayıpsız seçenek | Web projeleri — PNG'den %25-35 daha küçük dosya boyutu |
| BMP | ⚠️ Kısmen | Sıkıştırma yok — çok büyük dosyalar | Neredeyse hiç kullanılmaz, çok eski format |
| SVG | ✅ Destekler (vektörel) | Metin tabanlı — çok küçük boyut (basit şekillerde) | Logolar, ikonlar, UI elemanları, web grafikleri |
Bilgisayarınızda iki ana işlemci var. İkisi de hesaplama yapar ama çok farklı şekillerde. Bu farkı anlamak, bilgisayar grafiklerinin neden özel bir donanıma ihtiyaç duyduğunu kavramanın anahtarıdır.
Central Processing Unit — Merkezi İşlem Birimi
Analoji: Çok zeki bir profesör — diferansiyel denklem de çözer, makale de yazar, sınıf da yönetir — ama aynı anda sadece 1-2 iş yapabilir.
Graphics Processing Unit — Grafik İşlem Birimi
Analoji: 10.000 kişilik bir fabrika — her işçi sadece basit bir işlem yapar (bir vidayı sıkmak gibi) ama hepsi aynı anda çalışır → muazzam üretim kapasitesi.
Bir oyun çalışırken hem CPU hem GPU aynı anda çalışır, farklı görevleri paylaşırlar:
Tüm bu süreç saniyede 60 kez tekrarlanır! (60 FPS hedefinde)
FPS (Frames Per Second) = saniyede kaç kare üretildiği. İnsan gözü ~24 FPS'te akıcı hareket algılar, ama oyunlarda 30 FPS minimum, 60 FPS standart, 120-144 FPS ise "ultra akıcı" kabul edilir. Her kare için tüm pipeline baştan sona çalışır. FPS düştüğünde oyun "kasıyor" hissini verir — CPU veya GPU yetişemiyordur.
Aşağıda 1024 pikselin renginin hesaplanmasını simüle ediyoruz. CPU pikselleri teker teker (sıralı), GPU ise hepsini aynı anda (paralel) işler. Butona basarak farkı görün:
Bekleniyor...
Bekleniyor...
Full HD bir ekranda ~2 milyon piksel var. Her pikselin rengini saniyede 60 kez hesaplamak = saniyede ~120 milyon renk hesabı. CPU bunu tek başına yapamaz çünkü sadece birkaç çekirdeği var. GPU'nun binlerce küçük çekirdeği bu işi paralel olarak anında halleder. Bu yüzden ekran kartı olmadan modern oyun oynayamazsınız!
İlk GPU: NVIDIA GeForce 256 (1999) — "dünyanın ilk GPU'su" olarak pazarlandı. Ondan önce "3D hızlandırıcı" kartlar vardı (3dfx Voodoo gibi).
Bir oyunda "ekranda bir karakter görüyorum" dediğinizde, arka planda birçok adım gerçekleşir. Bu adımların sırasına grafik pipeline (boru hattı) denir. "Pipeline" kelimesi bir fabrika bandı gibi düşünülebilir — her aşama kendi işini yapar ve sonucu bir sonraki aşamaya iletir.
Oyun motoru burada çalışır. Karakter hareket etti mi? Düşman nerede? Fizik hesapları, yapay zeka kararları, ses yönetimi, ağ (multiplayer) iletişimi... Sonuç olarak "şu objeleri şu pozisyonlarda çiz" komutu GPU'ya gönderilir. Bu komutlara "draw call" denir.
Programlama dili: C++, C#, Java, Python vb. — siz oyun geliştiriciler genellikle bu aşamada çalışırsınız!
3D modeller üçgenlerden (triangle) oluşur — binlerce, hatta milyonlarca üçgen. Bu aşamada her üçgenin köşe noktaları (vertex) 3D dünya koordinatlarından 2D ekran koordinatlarına dönüştürülür. Kamera açısı, objenin pozisyonu, dönüşü ve ölçeği burada hesaplanır. Vertex shader denilen küçük programlar bu işi yapar.
Bir oyun karakteri 10.000+ üçgenden oluşabilir. Her kare'de hepsi yeniden hesaplanır!
Matematiksel üçgenler, ekrandaki piksellere dönüştürülür. "Bu üçgen ekranda hangi pikselleri kaplıyor?" sorusu cevaplanır. Bu adıma "rasterizasyon" denir — vektörel (matematiksel) bilgiyi raster (piksel) bilgiye çevirme.
En ağır ve en eğlenceli aşama! Her pikselin son rengi hesaplanır: texture (doku) rengini al, ışık etkisini hesapla, gölge var mı kontrol et, yansıma ekle, sis efekti uygula... Fragment shader (pixel shader) denilen programlar bu işi yapar. Shader'ları ilerideki haftalarda detaylı öğreneceğiz!
Modern efektlerin çoğu (bloom, motion blur, HDR, ambient occlusion) bu aşamada shader ile yapılır.
Hesaplanan piksel renkleri framebuffer'a (ekran belleğine) yazılır. Derinlik testi (z-buffer), saydam objelerin karıştırılması (blending) ve anti-aliasing (kenar yumuşatma) gibi son işlemler burada yapılır. Sonuç monitörde görüntülenir.
Pipeline'ın her aşamasını derinlemesine bilmenize şimdilik gerek yok. Önemli olan şu: ekranda bir şey görmek basit bir iş değil, arka planda çok karmaşık bir süreç var. Bu derste bu süreci adım adım öğreneceğiz. Ama şu ana fikri kavrayın: CPU oyunu yönetir, GPU çizer.
2D oyunlarda pipeline daha basit olsa da yine çalışır. 2D sprite'lar aslında iki üçgenden oluşan düz bir dikdörtgen (quad) üzerine texture kaplamadır. GPU yine vertex ve fragment shader çalıştırır. 2D oyunlarda genellikle: sprite'ın pozisyonunu belirle → texture'u kap → ekrana çiz. Unity ve diğer motorlarda 2D oyun yaparkende arka planda GPU pipeline çalışır.
Bilgisayar grafiklerinin gelişimi inanılmaz bir yolculuk. Bakalım nereden nereye gelmişiz. Bu tarihçeyi bilmek, mevcut teknolojilerin neden var olduğunu anlamak için önemli:
İlk oyunlar ya vektörel çizgilerle (Asteroids) ya da çok düşük çözünürlükte pikseller ile çalışıyordu. Renk paleti çok sınırlıydı (2-16 renk). Atari 2600 sadece 160×192 çözünürlük ve 128 renkle çalışıyordu. Grafik donanımı çok basitti — özel GPU yoktu.
NES, SNES, Mega Drive dönemi. Sprite tabanlı 2D grafikler olgunlaştı. Paralaks kaydırma (parallax scrolling), daha zengin renk paletleri (256+ renk), döndürme/ölçekleme (Mode 7) gibi teknikler gelişti. Sonic, Mario, Zelda gibi ikonik oyunlar bu dönemde çıktı.
Doom (1993) "2.5D" ile devrim yaptı. Quake (1996) tam 3D motoru olan ilk popüler oyun oldu. PlayStation 1, Nintendo 64 ile 3D konsol oyunları başladı. İlk GPU'lar ortaya çıktı (3dfx Voodoo, NVIDIA GeForce 256). Düşük poligon, bulanık texture'lar ama devrim niteliğinde.
Programlanabilir shader'lar geldi! Artık geliştiriciler GPU'ya "her pikseli nasıl renklendir" diye talimat verebiliyordu. Normal mapping, gölge haritaları (shadow maps), HDR, bloom efektleri gibi teknikler yaygınlaştı. PS2/PS3, Xbox/Xbox 360 dönemi. Grafik kalitesinde muazzam sıçrama.
NVIDIA RTX serisi ile gerçek zamanlı ray tracing (ışın izleme) mümkün oldu. Fizik tabanlı render (PBR), global illumination, DLSS/FSR (yapay zeka ile upscaling). Unreal Engine 5'in Nanite ve Lumen teknolojileri. Oyun grafikleri neredeyse filmlerle yarışır hale geldi.
50 yılda Pong'dan fotorealistik grafiklere geldik. Sizce önümüzdeki 10 yılda grafikler nasıl olacak? Yapay zeka grafik oluşturmayı nasıl değiştirecek? Neural rendering, AI upscaling (DLSS), prosedürel içerik üretimi... Bunlar geleceğin teknolojileri mi?
Atari 2600'ün 128 byte RAM ile nasıl oyun yapıldığını, NES'in sprite sınırlamaları ve Mario'nun bıyığının teknik nedenini, SNES Mode 7'nin sahte 3D'sini ve daha fazlasını detaylı olarak öğrenmek için: Erken Dönem Grafik Donanım Sınırlamaları ve Yaratıcı Çözümler →
Bu haftanın lab çalışmasında:
Aşağıdaki oyunlardan birini seçin ve grafik özelliklerini analiz edin:
Cevaplayın:
GIMP veya Photopea (tarayıcıda çalışır, kurulum gerektirmez) açın:
Photopea'da "Nearest Neighbor" interpolasyon kullanın (Edit → Preferences → General → Image Interpolation → Nearest Neighbor). Bu, büyütme sırasında piksellerin yumuşatılmamasını sağlar — pixel art için şarttır!
Full HD (1920×1080) bir ekranda toplam kaç piksel vardır?
Bir logoyu büyütmek istiyorsunuz ve kalitesinin bozulmamasını istiyorsunuz. Hangi format kullanmalısınız?
GPU'nun CPU'dan farkı nedir?
Bilgisayar grafiğinde Y ekseni hangi yöne doğru artar?
24-bit (True Color) bir pikselde toplam kaç farklı renk mümkündür?
Grafik pipeline'da "rasterizasyon" aşaması ne yapar?
SVG formatı hakkında hangisi yanlıştır?
JPEG sıkıştırması neden fotoğraflar için uygundur ama pixel art için değildir?
BMP formatında 100×100 piksellik 24-bit bir görüntü yaklaşık kaç byte yer kaplar?
Branch Education — Grafik pipeline'ın harika görsel açıklaması. GPU'nun içini 3D animasyonlarla gösteriyor. Mutlaka izleyin!
YouTube · 15 dk · İngilizce · ⭐ TavsiyeTheCherno — C++ oyun geliştirici perspektifinden render süreci. Vertex, fragment shader, rasterizasyon gibi kavramları anlaşılır şekilde açıklıyor. Teknik ama erişilebilir.
YouTube · 20 dk · İngilizce · ⭐ TavsiyeAkademik düzeyde bilgisayar grafiği dersi. Matematiksel temellerden başlayarak ray tracing, rasterizasyon, shading konularını derinlemesine işliyor. İleri düzey ama bu dersin konularıyla birebir örtüşüyor — meraklılar için harika bir kaynak!
YouTube Playlist · İngilizce · Akademik · ⭐ TavsiyeBarış Özcan — Türkçe, piksel ve ekran teknolojisi. Alt pikseller, OLED vs LCD farkları.
YouTube · 10 dk · 🇹🇷 TürkçeAhoy — Oyun grafiklerinin tarihi, Pong'dan bugüne. Sinematik kalitede belgesel.
YouTube · 30 dk · İngilizceBranch Education — GPU'nun iç yapısını ve neden paralel hesaplama yaptığını görsel olarak anlatan mükemmel video.
YouTube · 25 dk · İngilizceYıl yıl oyun grafiklerinin gelişimini gösteren harika bir derleme.
YouTube · 20 dk · Görsel AğırlıklıPNG sıkıştırma algoritmasının detaylı açıklaması. Filtreleme ve DEFLATE nasıl çalışır?
YouTube · 12 dk · İngilizceJPEG sıkıştırmasının matematiksel arka planı: DCT, kuantizasyon ve neden bloklu artefaktlar oluşur?
YouTube · 15 dk · İngilizceSVG formatının hızlı ve eğlenceli bir özeti. Fireship'in ünlü "100 Seconds" formatında.
YouTube · 2 dk · İngilizceBilgisayar grafiğinin temel kavramlarını sıfırdan anlatan ücretsiz kaynak. Piksel, renk, ışık teorisi detaylıca işleniyor.
Web · İngilizce · ÜcretsizGabriel Gambetta — Sıfırdan bilgisayar grafiği. Raytracer ve rasterizer nasıl yazılır? Çok pedagojik, adım adım.
Kitap/Web · İngilizce · ÜcretsizMozilla'nın kapsamlı SVG rehberi. Temel şekillerden path komutlarına, filtrelerden animasyonlara kadar her şey.
Web · İngilizce · ÜcretsizRaster grafik hakkında detaylı bilgi. Terminolojiye hakim olmak için referans.
Wikipedia · İngilizceGrafik pipeline'ı OpenGL üzerinden öğrenmek isteyenler için başlangıç noktası. Şimdilik sadece göz gezdirin!
Web · İngilizce · ÜcretsizTarayıcıda çalışan ücretsiz Photoshop alternatifi — kurulum gerektirmez! PSD dosyalarını bile açar. Lab'da kullanacağız.
Web App · ÜcretsizAçık kaynak, güçlü görüntü düzenleme programı. Photoshop'a bedava alternatif. Bilgisayarınıza yükleyin!
Desktop · Ücretsiz · Açık KaynakProfesyonel dijital boyama programı. Konsept art, illüstrasyon, texture boyama için mükemmel. Açık kaynak ve tamamen ücretsiz!
Desktop · Ücretsiz · Açık KaynakAçık kaynak vektör grafik editörü. SVG formatında çalışır. Logo, ikon ve vektör illüstrasyon için ideal.
Desktop · Ücretsiz · Açık KaynakTarayıcıda pixel art yapabileceğiniz ücretsiz araç. Animasyonlu sprite yapmak için de harika. Hafta 4'te çok kullanacağız!
Web App · ÜcretsizGüzel, ücretsiz SVG ikonlar. Lab Aktivite 3'te raster vs vektör karşılaştırması için kullanın.
Web · Ücretsiz · MIT Lisans500.000+ ücretsiz SVG ikon ve vektör koleksiyonu. SVG dosya yapısını incelemek için de harika kaynak.
Web · Ücretsiz