Parçacık Galaksisi Shader Tasarımı

Üç Spiral Kol, Tek Bir Nokta Çizim Çağrısı

Particle Galaxy, koyu ve neredeyse boş bir tuval ile geniş bir soluk parçacık alanı etrafında kurulan resmî bir OpenDesign örneğidir. Yazarın belirlediği başlık, “Fifty thousand points, one draw call.”, teknik öncülü arayüz öğelerinin ardına gizlemek yerine görsel kimliğin parçası yapar.

Parçacık alanı ve sol alttaki sabit başlık tek bir görünüm alanını paylaşır; başlık, ilk ekranın altında ayrı bir bölüm değildir. Soluk yeşil, mavi ve açık renkli noktalar üç kol arasında geniş koyu boşluklar bırakır. Görsel denge açıktır: ölçülü alan parlak yazının yanında sakin görünür, ancak düşük kontrastı tam boyutlu görsele yakından bakmayı gerektirir.

Bu Tasarım Nerede İşe Yarar

Bu tasarım, yaratıcı kodlama açılış sahnesi, etkileşimli bir teknoloji vitrini veya sanat yönetimli bir WebGL çalışması için uygundur. Görselin kendisi konu olduğunda ve destekleyici metin kısa kalabildiğinde değeri en yüksektir.

Sabit kontrollerin olmaması dikkati değişen parçacık alanında tutar. Bu ölçülülük keşfedilebilirliği de sınırlar: sağlanan işaretlemede yazar tanımlı kontrol yoktur; bu nedenle tasarım, açık etkileşim ipuçları yerine hareket, tipografi ve kompakt istatistik bloğu aracılığıyla iletişim kurar.

Kompozisyon Nasıl Çalışır

Sağ üstteki blok 50,000 POINTS, 1 DRAW CALL ve değişen bir FPS tahmini gösterir. Vertex shader, nokta konumlarını gl_VertexID'den türetir, bunları üç kola dağıtır ve açısal hızlarını değiştirir; böylece iç noktalar daha hızlı döner. Sabit bir eğim ve yavaşça değişen genel dönüş, diskin perspektifini şekillendirir. Yumuşak nokta sprite'ları ve toplamalı karıştırma (additive blending), yeşil, camgöbeği ve açık renkli parçacıklara parıltılarını verir.

İstatistikler büyük beyaz rakamlar ve daha küçük, aralıklı etiketler kullanırken, çalışma çok daha düşük kontrastlı yeşil, mavi ve açık renkli parçacıklar kullanır. Bu ayrım, üst verinin galaksiyle yarışmadan kolay taranmasını sağlar. Algısal bir denge de yaratır: performans bloğu hemen okunurken parçacık kolları daha uzun bakmayı ve uygun ekran kontrastını gerektirir.

Yakalanan görüntüler, aynı nokta sayısı ve draw call etiketlerini korurken farklı FPS değerleri gösterir. Bu değişim, FPS alanının cihazlar arası kararlı bir performans iddiası değil, değişen yerel bir görüntüleme durumu olarak okunmasını sağlar.

Yetenek Sınırı

WebGL2 kaynağı N = 50000 tanımlar ve her işlenen karede POINTS ile gl.drawArrays'i bir kez çağırır. Parçacık konumları, CPU konum tamponuyla güncellenmek yerine vertex shader'da hesaplanır. Ana iş parçacığı yine de kurulumu, zamanlama uniform'larını, yeniden boyutlandırmayı ve çizimi yönetir. İşaretçi, klavye, kamera yönlendirme veya parametre kontrolü yoktur. Bu, bilimsel bir kütleçekim simülasyonu değil, prosedürel galaksi benzeri bir görsel çalışmadır.

Kaynak yorumları 60fps iddia eder, ancak tekil durağan görüntüler ve yerel FPS sayacı garantili performansı kanıtlamaz. Ayrıca üretim ortamında dağıtımı, bağlı servisleri veya geçmişteki bir oluşturma sürecini de kanıtlamaz. Nokta ve draw call sayıları kod olgularıdır; kare hızı değeri ise ortama bağlı bir gözlemdir.

Sayaçların Neyi Anlattığı

Nokta sayısı göstergesi yapılandırılmış N değerinden gelir ve draw call etiketi, render döngüsündeki tek POINTS draw'u ile uyumludur. FPS değeri, yaklaşık yarım saniyelik pencereler boyunca requestAnimationFrame temposunu tahmin eder. Bu anlamları ayrı tutmak, çalışmayı dayanaksız bir kıyaslamaya dönüştürmeden yararlı teknik bağlamı korur.