지난 글에서 나는 명단이 라우터가 아니라고 주장했는데, 즉 당신이 visualize하는 에이전트 함대의 방식이 당신이 그것을 생각하는 방식을 형성한다는 것입니다. 평면적인 목록은 에이전트를 교환 가능하게 느끼게 합니다. 그래프는 에이전트를 파이프라인처럼 느끼게 합니다. 어느 것도 아홉 개의 에이전트가 실행되고, 위임하고, 상승시키고, 서로 다른 리듬으로 조용히 작동하는 실제 상황을 포착하지 못합니다.

그래서 내가 보고 싶었던 것을 직접 만들었습니다: 각 에이전트가 영역인, 궤도를 돌 수 있는 3D 뇌이며, 영역들은 실시간 원격 측정으로 펄스합니다. 이것이 작동 방식에 대한 엔지니어링 로그입니다.

매핑

아홉 개의 에이전트, 아홉 개의 영역. 끊어질 때까지 늘려진 메타포가 아니라, 올바른 방식으로 잘못되었기 때문에 유용한 느슨한 구조적 대응입니다. 메인 에이전트는 계획과 최상위 디스패치를 담당하므로 dorsolateral prefrontal cortex (dlPFC)에 위치합니다 — 실행 기능을 담당하는 뇌 부위입니다. 코더 에이전트는 언어와 구문을 담당하므로 left inferior frontal gyrus (L-IFG)와 pre-premotor dorsal (pre-PMd)에 위치합니다. 그리고 이와 같이 계속됩니다:

기하학

각 영역은 절차적으로 생성된 블롭입니다. 저는 분할된 이코사헤드론에서 시작하여 정점 위치에 3옥타브 프랙털 브라운 운동(fbm)을 적용했습니다 — 각 영역에 완벽한 구 대신 유기적이고 약간 울퉁불퉁한 실루엣을 주는 퍼린 유사 변위입니다. 변위 진폭은 원격 측정에 의해 구동되므로, 바쁜 영역은 idle한 영역보다 실제로 더 부풀고 떨립니다.

The whole brain sits inside a glass shell. This is where three.js r128 bit me. I wanted a real physical glass material with transmission — the property that makes light bend through a surface. But MeshPhysicalMaterial.transmission landed in r144. In r128, the closest approximation is transparent: true with low opacity, clearcoat for the specular pop, and side: DoubleSide so you see the back of the shell through the front. The shell runs at opacity 0.14 and clearcoat 0.6. It's not physically correct. It looks right, which matters more.

three.js는 로컬에 벤더링되어 있습니다 — CDN을 사용하지 않습니다. 전체 라이브러리는 대시보드의 /vendor/* 경로를 통해 제공됩니다. 이로 인해 서드파티 호스트에 대한 의존성을 피하고 대시보드를 자체 포함 상태로 유지합니다.

OrbitControls는 감쇠, 거리 클램프 [2, 20], 그리고 극각 클램프를 제공하여 뇌 아래를 뒤집어 잃어버리는 것을 방지합니다. 영역을 클릭하면 카메라가 700ms 동안 Tween을 통해 해당 영역을 프레임으로 잡고, 다른 모든 영역은 불투명도를 10%로 낮추며, 글래스모피즘 디테일 패널이 슬라이드 인하여 모델 체인, 실시간 통계, 그리고 오버라이드 드롭다운을 표시합니다. 클릭을 벗어나면 모든 것이 원래 상태로 복원됩니다.

원격 측정 → 움직임

대시보드는 500ms마다 /api/state를 폴링합니다. 이 JSON은 모든 시각적 요소를 구동합니다: 각 영역의 emissive 강도, 정점 변위 진폭, 핫 존에서의 입자 스파크, 그리고 연결선 위의 펄스.

핵심 결정은 각 영역에 motion signature를 부여하는 것이었습니다 — 라벨을 읽지 않고 한눈에 에이전트를 구분할 수 있도록 서로 다른 리듬감을 주는 것입니다:

1. main — 40Hz에서의 감마 깜박임. 빠르고 우세하며, 눈이 처음 닿는 대상이다.
2. coder — 20Hz에서의 베타 파동. 안정적이고 기계적이다.
3. 코더-라이트 — 12Hz. 코더 리듬의 더 부드러운 버전.
4. diagnostician — 60Hz에서 pow(sin(t), 8)를 사용하여 중요한 폭발. 날카로운 스파이크, 부드러운 파도가 아니다. 주의가 집중으로 튀는 것처럼 보인다.
5. 진단가-라이트 — 100Hz 리플. 매우 빠르고 거의 반짝임이다.
6. 연구자 — 세타-감마 중첩: 3Hz 반송파가 40Hz 감마 봉투에 의해 변조된 것. 이것이 내가 가장 좋아하는 것이다. 이는 위에 빠른 깜박임을 타고 있는 깊은 느린 파도처럼 보인다, 이는 실제 해마 기록에서 세타-감마 결합이 보이는 그대로이다.
7. 창의적 — 1.5Hz에서의 숨쉬기, 가끔 입자 불꽃과 함께. 느리고 넓으며 약간 꿈같은.
8. 운영 — 1.2Hz에서의 저주파 소리. 배경 심장 박동으로, 보는 것보다 느끼는 것이 더 많다.
9. whatsapp‑손님 — 2Hz. 대화 속도.

연결선은 영역 사이의 CatmullRomCurve3 호이며, 위임 및 에스컬레이션 이벤트에서 발생합니다. 주요가 프로그래머에게 작업을 넘길 때, dlPFC와 L-IFG 사이의 호가 켜지고 한 번 펄스한 후 사라집니다. 이 호는 장식이 아니라 해부학적으로 렌더링된 라우팅 로그입니다.

아포스트로피

가장 오래 걸린 버그는 이것입니다.

The dashboard serves a dashboard page whose HTML is built server-side from a template. One line in that template contained the word brain's — with an apostrophe. The template engine rendered it fine. The browser received it fine. But the string was embedded inside a <script> block as part of a JavaScript string literal, and the apostrophe terminated the string early. The rest of the script block — the entire three.js initialization, the telemetry loop, the OrbitControls setup — became a syntax error. Silent. No 3D brain. No error in the network tab. Just a blank canvas and a console error buried under framework noise.

수정은 단 한 단어였습니다: 아포스트로피를 완전히 피하도록 문자열을 재작성했습니다. 이스케이프도, 엔티티 인코딩도 없이 — 단지 문자열을 재작성했을 뿐입니다. 이는 마치 패배처럼 느껴지는 수정 유형이지만, 이것이 실제로 배포되는 수정임을 깨닫게 되면 달라집니다.

This bug had been silently breaking the original flat dashboard's client JS too. The 3D brain didn't introduce it — it just made the breakage visible, because suddenly there was a canvas that should have had something in it and didn't.

폴백 및 접근성

두 가지 폴백 경로가 있습니다. WebGL을 사용할 수 없는 경우 — 헤드리스 브라우저, 오래된 기기, 잠금된 기업용 랩톱 — 3D 뷰는 .brain3d-fallback 노트로 대체되며, 여기서 누락된 내용을 설명하고 평면 대시보드를 가리킵니다. 캔버스가 깨지지 않으며, 오류 스팸도 발생하지 않습니다.

사용자가 prefers-reduced-motion를 설정하면, 정점 변위와 입자 스파크가 비활성화됩니다. 영역은 여전히 원격 측정으로 빛나며 — 발광 강도는 정상이고, 움직임이 문제입니다 — 하지만 뇌는 숨 쉬거나 떨지 않습니다. 연결선 펄스는 정보 제공 목적이지 장식이 아니므로 여전히 발사되지만, 짧고 반복되지 않습니다.

내가 얻은 교훈

3D 뇌는 평면 목록보다 나은 대시보드가 아닙니다. semplicemente 다른 것입니다. 평면 목록은 '각 에이전트가 지금 무엇을 하고 있는가?'에 답합니다. 뇌는 '작업 중인 함대가 feel인 상태는 어떠한가?'에 답합니다. 이는 서로 다른 질문이며, 둘 다 물어볼 가치가 있습니다.

내가 가장 놀랐던 것은 움직임 서명이었다. 나는 기하학과 유리 쉘이 어려운 부분일 것이라고 예상했다. 하지만 그렇지 않았다. 어려운 부분은 아홉 가지가 혼란스럽지 않으면서 구별될 수 있는 방식으로 펄스하게 만드는 것이었다. 연구자를 위한 세타-감마 중첩이 돌파구였다 — 내가 다른 것들과 categorically 다르게 느껴지는 한 영역을 갖게 되자, 나머지는 "빠르고 날카로운"(진단가)에서 "천천히 숨을 쉬는"(창의적) 스펙트럼으로 제자리를 찾았다.

아포스트로프 버그는 내가 계속해서 되새기는 교훈입니다: 무언가가 망가지고 원인을 찾을 수 없을 때는 두 가지 역할을 하는 문자를 찾아보세요. 템플릿에서는 아포스트로프가 영어입니다. 스크립트 블록에서는 구분자입니다. 동일한 바이트가 두 역할을 모두 수행하면 한쪽이 손해 봅니다.