PGSimCity - PostgreSQL'ün Nasıl Çalıştığını Keşfedilebilir 3D Bir Şehir Olarak Görselleştirmek

 (nikolays.github.io)
2 puan yazan GN⁺ 3 시간 전 | 1 yorum | WhatsApp'ta paylaş
  • PostgreSQL'ün bağlantı/backend/paylaşımlı bellek/WAL/depolama/checkpoint/autovacuum/replikasyon yapısını binalar ve bölgelerle ifade eden 3D eğitsel bir simülasyon; her bina ve animasyon gerçek veritabanı mekanizmalarına karşılık gelir
  • shared_buffers içindeki clock-sweep değiştirme süreci, WAL yazımı ve flush, checkpoint pacing, xmin ufku ve tablo şişmesi gibi iç işleyişler yavaş bir zaman ölçeğinde gözlemlenebilsin diye sayılar ve ölçek küçültülmüştür
  • Gerçek PostgreSQL kodunu çalıştıran bir emülatör değil, elle yazılmış bir modeldir; PostgreSQL belgeleri ve kaynak kodu temel alınarak üç tur uzman incelemesinden ve ayrı bir görsel denetimden geçirilmiş, ayrıca 210 test ile temel hesaplamalar ve sınır değerleri sabitlenmiştir
  • Buffer yetersizliği, uzun süren transaction, checkpoint fırtınası, synchronous_commit=off, yavaş replikasyon replay'i gibi senaryoları çalıştırarak operasyon ayarlarının gecikme/şişme/dayanıklılık/replikasyon gecikmesi üzerindeki etkilerini doğrudan inceleyebilirsiniz
  • three.js/TypeScript/Vite ile yapılmış statik bir WebGL2 uygulamasıdır; ileride gerçek WebAssembly PostgreSQL'ün sorgu çalıştırma sonuçları ve planlarını mevcut iç modelle bağlayan hibrit bir yapı da olası bir yön olarak değerlendirilmektedir

PostgreSQL'ü bir şehir olarak ifade etme biçimi

  • PGSimCity, PostgreSQL'ün iç yapısını yürüyerek keşfedebileceğiniz bağımsız ve ticari olmayan bir eğitsel görselleştirme projesidir
  • Merkez plaza shared_buffers'ı temsil eder; 1.024 sayfa çerçevesinin yüksekliği clock-sweep usage_count değerini, renkleri ise gerçek buffer durumunu ifade eder
  • Doğudaki turuncu bölge WAL'ı, plazanın altındaki kazı alanı data directory'yi, güneydeki şehir ise ana sunucunun gönderdiği WAL'ı biraz gecikmeli replay eden standby sunucuyu temsil eder
  • Veritabanını doğrudan işletmemiş mühendislerin şu olguları anlaması için tasarlanmıştır
    • checkpoint neden gecikmeyi aniden artırır
    • bitmeyen transaction'lar tablo şişmesini nasıl sürdürür
    • synchronous_commit commit sırasında nasıl bir maliyet yükler

Modelin doğruluğu ve sınırları

  • PGSimCity henüz 0.x aşamasında bir modeldir ve bir PostgreSQL emülatörü değildir
    • PostgreSQL kaynak kodunu çalıştırmaz
    • insanların değişimleri görebilmesi için sayı ve zaman ölçeklerini ayarlar
    • SQL parse etmez veya gerçek sorgu sonuçlarını hesaplamaz
  • PostgreSQL davranışının doğruluğu, postgresql.org/docs ve kaynak koduyla karşılaştırılarak üç tur uzman incelemesinden geçirilmiştir; her bulgu, buna itiraz etmekle görevlendirilmiş ayrı bir incelemeci tarafından yeniden doğrulanmıştır
  • Bina yerleşimleri/komşuluk ilişkileri/animasyonların örtük biçimde öne sürdüğü iddialar da ayrı bir denetimden geçmiştir
  • 210 test dahildir ve başarısız bir test varsa CI build durdurulur
    • WAL tabanlı checkpoint başlangıç noktası: max_wal_size / (1 + checkpoint_completion_target)
    • cache hit oranı: blks_hit / (blks_hit + blks_read)
    • clock-sweep usage_count üst sınırı: 5
  • Tespit edilen hatalar ve düzeltme süreci commit geçmişinde yer alır
  • Dokunmatik kontroller yalnızca Chrome mobil emülasyonunda doğrulanmıştır
  • Basitleştirilmiş davranışlar, her bileşenin inspector'ında açıkça belirtilir

Gerçek motorla birleşme olasılığı

  • Şu anda, clock-sweep'in her frame'de kurban sayfayı seçmesi gibi PostgreSQL dışında görünmeyen iç adımları gösterebilmek için elle yazılmış bir simülasyon kullanılmaktadır
  • PGlite gibi gerçek PostgreSQL'ü WebAssembly üzerinde çalıştırmak, sorgu sonuçları ve execution plan'larını gerçek motora bırakmayı mümkün kılabilir
  • Gerçek motorun tarayıcıda sağlayabileceği bilgi, catalog, pg_stat_* görünümleri, EXPLAIN gibi PostgreSQL'ün dışarı açtığı kapsamla sınırlıdır
  • Gerçek çalışma ve planın, model içindeki hareketleri sürüklediği hibrit bir yöntem de mümkündür; ancak bu kesinleşmiş bir geliştirme taahhüdü değil, geleceğe dönük bir yöndür

Şehrin bölgeleri ve bileşenleri

  • Client sky: uygulama katmanından gelen bağlantılar
  • Postmaster: her bağlantı için backend process oluşturur ama kullanıcı verisine doğrudan erişmeyen gözetleyici process'tir
  • Backend row: 16 backend process'ten oluşur; ışıklarla idle in transaction dahil mevcut durum gösterilir
  • Shared memory plaza
    • shared_buffers
    • wal_buffers
    • ProcArray
    • lock table
    • CLOG
    • buffer mapping table
  • The excavation: bellek alanı ile disk alanı arasındaki sınır
  • Storage
    • 8KiB sayfalardan oluşan heap dosyaları
    • gerçek ağaç biçiminde B-tree
    • TOAST
    • FSM
    • visibility map
    • işletim sistemi page cache'i
    • disk
  • WAL district: walwriter → pg_wal segmentleri → archiver → walsender
  • Maintenance yard: checkpointer/background writer/autovacuum launcher ve worker'lar
  • Standby: walreceiver/WAL replay eden startup process/iki process arasındaki gecikme
  • Query lab: seçilen backend'in ifadesini parse → rewrite → plan → execute aşamalarında açarak gösterir

Renkler ve görsel anlamları

  • Renkler süs değil, durum ve mekanizmayı iletir
    • WAL: turuncu
    • dirty page: kırmızı
    • clean page: mavi
    • vacuum: mor
    • checkpoint: pembe
    • background writer: camgöbeği
    • replication: turuncu
    • storage: yeşil
    • index: su mavisi
    • lock: kırmızı
  • Yapılar mat olarak, anlam taşıyan ögeler neon olarak gösterilir; yalnızca parıltı materyalleri bloom eşiğini aşacak şekilde yapılandırılmıştır

Doğrudan deneyebileceğiniz senaryolar

  • shared_buffers değerini 64 sayfaya düşürün
    • usage_count çöker ve clock hand hızla dönmeye başlar
    • çıkarılacak clean page kalmadığında backend'ler kendi dirty page'lerini doğrudan yazmaya başlar
  • Long-running transaction'ı etkinleştirin
    • ProcArray'in xmin ufku aşağı iner ve kırmızıya döner
    • autovacuum worker sürekli dolaşsa da temizlenebilir tuple'ları kaldıramaz
    • sessions tablosu şişer ve toparlanmaz
  • Checkpoint storm'u çalıştırın
    • checkpointer hızlanır ve fsync aşaması sarsılır
    • ardından full-page write'lar WAL bölgesine yoğun biçimde akar
  • synchronous_commit=off ayarlayın
    • backend artık commit_wait içinde beklemez
    • anında yanıt karşılığında hangi dayanıklılık koşullarından vazgeçildiğini birlikte görebilirsiniz
  • Slow replay'i etkinleştirin
    • standby sunucudaki sent/written/flushed/applied LSN'ler birbirinden açılır
    • bu fark, pg_stat_replication içinde gözlenen replikasyon gecikmesine karşılık gelir
  • G tuşuna basarsanız, 1,7 m yükseklikte yaya bakışına inerek buffer'lara ve binalara göz hizasından bakabilirsiniz

Keşif ve kontroller

  • Fare ve dokunmatik kontroller
    • Sol sürükleme: haritayı tutup taşır gibi hareket
    • Sağ sürükleme: şehir etrafında dönme
    • Tekerlek: imleç konumunu merkez alarak yakınlaştırma/uzaklaştırma
    • Tek parmak: hareket
    • İki parmak: yakınlaştırma/uzaklaştırma, döndürme, eğim değiştirme
  • Hareket modları
    • W/A/S/D veya ok tuşları: hareket
    • Space/E: yükselme
    • C/Q: alçalma
    • Shift: hızlı hareket
    • Alt: hassas hareket
  • Temel tuşlar
    • F: uçuş/yörünge kamera geçişi
    • G: yerden yürüme
    • H: başlangıç görünümüne dön
    • T: tüm şehri anlatan 14 bölümlük tur
    • / veya Ctrl-K: bileşen/ayar/senaryo arama
    • ?: klavye haritası ve renk lejandı
    • K veya P: duraklat/devam ettir
    • ,/.: 0.1×~5× hız ayarı
    • 1~8: clients/backends/shared buffers/WAL/storage/checkpointer/autovacuum/standby bölgelerine git

Lisans ve ticari markalar

  • Apache-2.0 lisansı ile dağıtılır
  • SimCity'nin kodunu/asset'lerini/çizimlerini/logolarını/karakterlerini/seslerini/oyun içeriğini içermez
  • Electronic Arts ve PostgreSQL projesiyle bağlantılı, sponsorlu veya onaylı olmayan bağımsız bir eğitim projesidir

İlgili okumalar

1 yorum

 
GN⁺ 3 시간 전
Hacker News yorumları

  • Burada denenen yönü gerçekten beğendim ama tur özelliğinde çok fazla gürültü var. Ekrandaki sayısız kutu ve öğe durmadan değişiyor, bu yüzden ne olduğunu kavramak zorlaşıyor; ayrıca bir sonraki konuya otomatik geçmek yerine kullanıcı kendisi ilerlemeli
    Aynı anda üzerinize yığılan bilgiyi sadece pasif biçimde izlemek kafa karıştırıcı. Teknolojinin iç işleyişini gösterme yaklaşımı faydalı olsa da veri, grafik ve bilgi kutuları eklemektense odağı daraltmak gerekiyor

    • Harika 3D ekranın %80'i açılır pencerelerle kapanıyor. Gürültüyü kolayca azaltan bir özellik görünür biçimde sunulsa ve açılır pencereler yarı saydam olsa iyi olur
    • Tura TTS eklenebilir
    • Bir yazılımın tur özelliğine ihtiyacı varsa bu, UX'in iyileştirilmesi gerektiğinin işareti olabilir. Yeni özellikleri göstermek isteseniz de kullanıcılar bunları ihtiyaç duyduklarında doğal biçimde keşfeder

  • İnsan beyninin sınırları geliştirici ve kullanıcı için aynıdır. LLM ile karmaşık bir şey yapmak mümkün olsa da süs amaçlı karmaşıklık olan greeble belli bir seviyeyi aşınca artık başka insanların deneyimlemesi için tasarlanmış gibi gelmiyor
    Bu LLM olmadan yapılmış olsaydı geliştirici kendi zihninde tüm zihinsel modeli taşıyamayacağı için karmaşıklığı azaltırdı; kullanıcı da aynı sınırlara sahip. Animasyonlar ve yanıp sönen ışıkların metaforunu anlamaya çalışsanız da anlam kayboluyor
    Yeni bir prosesin neden borulardan geçip binaya ulaşan bir dikdörtgen olduğunu ve ardından pinball anahtarının neden kırmızı yandığını bilmiyorum. Bir şeye tıklayınca "sessions is the victim" yazan küçük bir açılır pencere kısa süreliğine bir paragrafla belirip kayboluyor, bu da daha fazla kafa karıştırıyor
    Belki eğitsel olmayı amaçlamıyordur ve belki de bilgi eksikliği bendendir ama sadece ilginç bir çalışma olarak bakınca oldukça havalı

  • İlk ekranı görür görmez bir sorgu girince girdi ayrıştırmasından sonuç döndürmeye kadar tüm akışı adım adım göstereceğini, ayrıca sorgudan bağımsız olarak paralel biçimde sürekli çalışan otonom prosesleri de anlamamı sağlayacağını ummuştum
    Denemenin kendisi harika ama nereden başlayıp nerede bitirmem gerektiğini bilmiyorum

    • T tuşuna basın

  • Veritabanı içindeki zamanlamayı anlamak için eskiden sayısız mimari diyagram gerekirdi. PGSimCity, karmaşık bir teknik uygulama sürecini ilgi çekici şekilde ifade ederek şaşırtıyor
    Açık kaynak olduğu için aynı fikrin bulut bilişim ya da Kubernetes gibi başka alanlarda da yeniden kullanılabileceği görülüyor

    • Fly.io'nun deployment sistemi ile durum takibini Factorio gibi görsel bir metaforla anlatan bir araç yapmayı hep istemiştim
    • Sürekli bir Kubernetes görselleştirme aracı yapmak istiyorum. Mevcut araçlar da var ama en son baktığımda pek iyi görünmüyorlardı

  • gdb ile bir programı debug ederken derin odak halinde zihnimde canlandırdığım şeye çok benziyor. Bu tür grafiklerle VR debugging deneyimlenebilse, bir kod tabanını öğrenmek için bundan daha iyi bir yol olmayabilir
    Rastgele bir koddan 3D harita üretmenin ne kadar iyi bir deneyim sağlayacağını merak ediyorum

  • Eğer bu 48 saatten kısa sürede yapılmış bir vibe coding ürünü ise içeriğin gerçekten doğru olup olmadığını sorgularım. Yanlış sonuçlara ya da yarım bilgiye götürme riski yok mu diye merak ediyorum

    • Tam emin olamam ama bunu yapan kişi Postgres'i çok iyi biliyor
    • Buradan özellikle çıkardığınız ya da öğrendiğiniz somut bir şey var mı merak ediyorum. Bana daha çok brutalist bir süs eşyası gibi görünüyor
    • Bu günlerde LLM'lerin doğruluğu o kadar da kötü değil

  • "Rendering The First Frame..." yerine "Reticulating Splines..." yazmamasına inanmak zor. UI havalı

  • Postgres'in iç yapısını oldukça iyi biliyorum ama yine de kafa karıştırıcı buldum. Ekran fazla yoğun ve anlaması zor; en azından bir yavaşlatma düğmesi olsa iyi olurdu

    • Sol altta duraklatma ve hızı 0.1x'e kadar ayarlayan iki düğme var. Şehrin bazı öğelerine tıklayıp değerlerini değiştirebiliyorsunuz; bunu transactions/s kısmında da gördüm

  • Görünüşü gerçekten harika. Birkaç hafta önce Beam VM içinde fabrika zemininde dolaşıyormuş gibi modüllerle fonksiyonlar arasındaki bağlantıları, yürütme yükünü ve kıvılcım saçan hataları görebileceğiniz Beam için Doom benzeri bir şeyi vibe coding ile yapmaya başladım
    Henüz çok ilerlemedim ama bir VR başlığı alma bahanesi olarak geliştirmeyi sürdürmek istiyorum

  • Bu, AI yardımıyla yapılmış gibi görünüyor. Ben de AI kullanarak catastrophic forgetting kavramını açıklayan benzer bir vibe coding projesi yaptım
    Artık gerçekten bir şey öğrenmek istediğimde her zaman AI yardımına başvurabiliyor olmak hoşuma gidiyor. Eskiden iyi materyal bulmak zordu ama şimdi darboğaz materyal değil, kişinin odağı ve inisiyatifi