슬라임 몰드
webgl
- WebGL2
- GPGPU
- 시뮬레이션
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>슬라임 몰드</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="gl">점균류 에이전트 시뮬레이션</canvas>
11 <p id="fallback"></p>
12 <script src="./script.js"></script>
13 </body>
14</html>
15아이디어
점균류 Physarum polycephalum는 뇌가 없지만 미로의 최단 경로를 찾는다. 그 비밀은 단순하다 — 길에 화학물질을 남기고, 그 화학물질이 진한 쪽으로 간다. 이 작품은 262,144마리의 에이전트로 그 행동을 재현한다.
규칙은 세 줄
각 에이전트는 매 프레임:
- 감지 — 앞쪽 세 지점(좌·중·우)의 페로몬 농도를 본다
- 회전 — 가장 진한 쪽으로 방향을 튼다
- 전진 — 한 걸음 나아가며 자기 자리에 페로몬을 남긴다
페로몬 맵은 매 프레임 살짝 번지고(확산) 옅어진다(감쇠). 이 피드백 루프만으로 — 설계자 없이 — 잎맥 같은 망이 창발한다.
핵심 기법
에이전트 26만 개의 위치·방향이 GPU 텍스처에 담기고, 페로몬 맵은 별도의 부동소수점 텍스처다. 한 프레임은 네 패스 — 에이전트 갱신, 페로몬 침착, 확산·감쇠, 렌더 — 의 핑퐁으로 돈다.
인터랙션
커서를 움직이면 그 자리에 페로몬이 칠해진다. 망 전체가 커서를 향해 자라난다. WebGL2와 부동소수점 렌더 타깃이 필요하다.