반응-확산

webgl

WebGL2
시뮬레이션
GLSL

ZIP 다운로드

코드

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

아이디어

가상의 화학물질 A와 B가 격자 위에서 확산하고 반응한다. 단순한 규칙 두 줄이지만, 수천 번 반복되면 산호·얼룩말·세포 분열을 닮은 무늬가 저절로 자라난다 — 1952년 앨런 튜링이 예견한 패턴 형성이다.

핵심 기법

각 텍셀이 화학 농도 (A, B)를 담고, 갱신 셰이더가 3×3 라플라시안으로 확산을, 곱셈항으로 반응을 계산한다. 핑퐁 FBO로 상태를 이어가며 한 프레임에 여섯 번 갱신한다.

1float reaction = A * B * B;
2float A2 = A + (1.0 * lapA - reaction + f * (1.0 - A));
3float B2 = B + (0.5 * lapB + reaction - (k + f) * B);

f(공급률)와 k(제거율) 단 두 상수가 무늬의 종류를 결정한다 — 이 데모는 산호형 값을 쓴다.

인터랙션

커서는 화학물질 B를 칠한다. 빈 곳을 문지르면 거기서 새 무늬가 번지기 시작한다. WebGL2와 부동소수점 렌더 타깃이 필요하다.

Index

아이디어 핵심 기법 인터랙션