Son gönderimde, bir ajan listesi bir yönlendirici olmadığını savundum — ve siz visualize bir ajan filosunu nasıl gördüğünüz, onu nasıl düşündüğünüzü şekillendirir. Düz bir liste ajanların yerine geçebilecek hissettirir. Bir graf onları bir boru hattı gibi hissettirir. Hiçbiri, dokuz ajan çalıştıkça, görev devrettiği, sorunları yükselttiği ve farklı ritimlerde sessizce zımıldadığını yakalamaz.

İstediğimi görmek için yaptığım şey: her bir ajan bir bölge olan, ve bölgeler canlı telemetri ile nabzolanabilen dönebilen 3D beyin. Bu, nasıl çalıştığını gösteren mühendislik günlüğü.

Eşleme

Nine ajanlar, nine bölgeler. Gerilip kopana kadar gerilmiş bir metafor değil — doğru yollarla yanlış olduğu için tam olarak kullanışlı olan gevşek bir yapısal karşılık. Ana ajan planlama ve üst seviye dağıtımı yönetir, bu yüzden dorsolateral prefrontal korteks (dlPFC) içinde bulunur — yürütücü fonksiyonu yapan beyin kısmı. Kodlayıcı ajanlar dil ve sözdizimini yönetir, bu yüzden sol alt frontal jiro (L-IFG) ve pre-premotor dorsal (pre-PMd) yerleşir. Ve böyle devam eder:

Geometri

Her bölge, prosedürel olarak üretilmiş bir blob'dur. Bir icosahedron'u altıkanıra bölerek başladım ve köşe pozisyonlarına 3-oktav fraktal Brownian hareketi (fbm) uyguladım — Perlin-ish bir yer değiştirme, her bölgeye mükemmel bir küre yerine organik, hafifçe topuklu bir silüet verir. Yer değiştirme genliği telemetri tarafından sürüklenir, bu yüzden yoğun bir bölge boşta olan bölgeye göre gerçekten daha fazla şişer ve titreşir.

Tüm beyin bir cam kabuk içinde bulunur. Bu, three.js r128'in beni zorladığı yer. Gerçek fiziksel bir cam malzemesi transmission ile olmak istedim — bir yüzeyden ışık kırmasını sağlayan özellik. Ama MeshPhysicalMaterial.transmission r144'te çıktı. r128'de en yakın yaklaşım transparent: true düşük opaklıkla, clearcoat specular pop için ve side: DoubleSide sayesinde ön kısmından arka kısmı görebilirsiniz. Kabuk opaklık 0.14 ve clearcoat 0.6 ile çalışır. Fiziksel olarak doğru değil. Ancak görünüşü doğru ve bu daha önemli.

three.js yerel olarak satıcıya alınmıştır — CDN kullanılmaz. Tüm kütüphane, panodaki /vendor/* rotalarından sunulur. Bu, üçüncü parti bir hosta bağımlılığı önler ve panoyu kendi içinde tamamlayıcı hale getirir.

OrbitControls, sönümleme, [2, 20] aralığında mesafe sınırlaması ve beyin altında çevirme yapmanızı ve kaybolmanızı önleyen kutupsal açı sınırlaması sağlar. Bir bölgeye tıkladığınızda kamera 700ms boyunca onu kare içine alacak şekilde hareket eder, diğer tüm bölgeler opaklığını %10'a düşürür ve model zinciri, canlı istatistikler ve geçersiz kılma açılır menüsünü gösteren bir glassmorphism detay paneli kayararak gelir. Uzakta tıkladığınızda tüm şeyler önceki haline döner.

Telemetri → Hareket

Panodaki /api/state her 500ms'de bir sorgulanır. Bu JSON, tüm görsel öğeleri yönlendirir: her bölgede emisif şiddet, düğüm yer değiştirme genliği, sıcak bölglerde parçacık çınertileri ve bağlantı hatları boyunca darbeler.

Ana karar, her bölgeye motion signature vermekti — etiketleri okumadan bir bakışta ajanları ayrı tutabileceğiniz farklı bir ritmik hiss.

1. ana — gama titreşimi 40Hz'te. Hızlı, baskın, gözün ilk olarak aldığı şey.
2. kodlayıcı — beta dalgası 20Hz'te. Stabil, mekanik.
3. kodlayıcı hafif — 12Hz. Kodlayıcı ritminin daha nazik versiyonu.
4. tanı uzmanı — önemi artış patlaması 60Hz'te pow(sin(t), 8) kullanılarak. Keskin şpikler, düz bir dalga değil. Dikkatin ani odaklanması gibi görünür.
5. tanı uzmanı hafif — 100Hz dalgalanması. Çok hızlı, hafif bir parıltı gibi.
6. araştırmacı — teta-gama yuvalanması: 3Hz taşıyıcı, 40Hz gama envolopu ile modulate edilmiştir. Bu benim favorim. Derin yavaş dalgaların üstünde hızlı titreşim sürüklenerek görünür; bu, gerçek hipokampus kayıtlarında teta-gama kupplamasının görünüşüne tamamen eşittir.
7. yaratıcı — 1.5Hz'te nefes alımı, ara ara parçacık çentikleriyle. Yavaş, genişletici, biraz hayalci.
8. operasyon — 1.2Hz'te düşük frekanslı bir zumbura. Arka plandaki kalp atışı, görmek yerine hissettiğiniz şey.
9. whatsapp-guest — 2Hz. Konuşma temposu.

Bağlantı çizgileri, bölgeler arasındaki CatmullRomCurve3 yaylarıdır; devretme ve eskalasyon olaylarında tetiklenir. Ana bir görevi kodöre verdiğinde, dlPFC ve L-IFG arasında bir yay yanıp söner, bir kez pulslanır ve solur. Bu yaylar süsleme değildir — yönlendirme kaydını anatomik olarak oluşturur.

Apostrof

Burada bulmak en uzun süren hatadır.

Kontrol paneli, bir şablon üzerinden sunucu tarafında oluşturulan HTML ile bir kontrol paneli sayfası sunar. Şablonun bir satırı, brain's kelimesini içeriyordu — bir apostrof ile. Şablon motoru bunu sorunsuz şekilde oluşturdu. Tarayıcı da bunu sorunsuz şekilde aldı. Ancak dize, <script> bloğunun içine bir JavaScript dize litereali olarak gömülüydü ve apostrof dizeyi erken sonlandırdı. Script bloğunun geri kalanı — three.js başlatmasının tamamı, telemetri döngüsü ve OrbitControls kurulumu — bir sözdizimi hatası haline geldi. Sessiz. 3D beyin yok. Ağ sekmesinde hata yok. Sadece boş bir tuval ve çerçeve gürültüsü altında gizli bir consol hatası var.

Düzeltme tek kelimelikti: dizeyi apostrof kullanmadan tamamen yeniden ifade ettik. Kaçış yok, varlık kodlaması yok — sadece yeniden ifade ettik. Bu tür bir düzeltme, gerçekten üretime alınan düzeltme olduğunu fark ettiğiniz kadar bir mağlubiyet gibi hisseder.

Bu hata, orijinal düz kontrol paneli'nin istemci JavaScript'ini de sessizce bozuyordu. 3D beyin bunu tanıtmadı — sadece arızayı görünür kıldı, çünkü ani olarak, içinde bir şey olmasını beklediğimiz bir tuval boştu.

Yedek ve Erişilebilirlik

İki yedek yol. WebGL kullanılamıyorsa — başsız tarayıcılar, eski makineler, kilitli kurumsal laptoplar — 3D görünüm, .brain3d-fallback notuyla değiştirilir; bu not, eksik olanı açıklayıp düz kontrol paneline işaret eder. Bozuk canvas yok, hata spamı yok.

If kullanıcı prefers-reduced-motion ayarlıysa, köşe yer değiştirme ve parçacık ateşleri devre dışı bırakılır. Bölgeler telemetriyle hâlâ aydınlar — emisif intensidad iyi, hareket sorun — ancak beyin nefes almaz veya titreşmez. Bağlantı çizgi impulslari hâlâ ateşler, çünkü bilgilendirici olup dekoratif değil, ama kısa ve döngüye girmez.

Öğrendiklerim

3D beyin, düz listeden daha iyi bir kontrol paneli değildir. Başka biridir. Düz liste, 'her ajent şu anda ne yapıyor?' sorusunu yanıtlar. Beyin, "filo çalışırken hisset nasıl?" sorusunu yanıtlar. Bu farklı sorular olup, ikisi de sorabilmek değerdedir.

En çok beni şaşırtan şey hareket imzalarıydı. Geometri ve cam kabuğun zor kısmı olacağını düşündüm. O değildi. Zor olan şey, dokuz şeyi kaotik olmadan ayrı ayrı hissedilecek şekilde pulslatmaktı. Araştırmacı için theta-gamma iç içe geçmesi bir açıklama sağladı — bir bölge kategorik olarak diğerlerinden farklı hissettiğimde, geri kalanlar "hızlı ve keskin" (tanılayıcı) ile "yavaş ve nefesli" (yaratıcı) arasında bir spektrum olarak yerini buldu.

Tek tırnak hatası, sürekli yeniden öğrettiğim bir dersydi: bir şey bozukken ve nedeni bulamıyorsanız, iki iş yaplayan karaktere bakın. Bir şablonda, tek tırnak İngilizcedir. Bir script bloğunda, ayırıcıdır. Aynı bayt her iki rolü oynadığında, biri kaybeder.