feno-canvas · apex frontier · tier 4
WASM 커널과 워커 렌더링
파동 방정식 스텐실은 인라인 WebAssembly가 계산하고, 화면은 OffscreenCanvas를 넘겨받은 워커가 그린다. 메인 스레드는 입력만 받는다.
부팅 중…
무대를 누르거나 끌면 그 자리에서 파동이 퍼진다. 키보드만 쓸 때는 버튼을 사용한다.
왜 이 두 가지를 쓰는가
둘 다 장식이 아니다. 스텐실은 셀마다 다섯 번 읽고 라플라시안을 구하므로 자바스크립트로는 메인 스레드를 붙잡는다. 그리기까지 같은 스레드에서 하면 입력이 밀린다. 그래서 계산은 WASM으로, 그리기는 워커로 보낸다. 아래 메인 스레드 여유 값이 그 결과다.
| 능력 | 필요한 CSP | 상태 |
|---|
CSP는 쓰는 만큼만 선언한다. 'wasm-unsafe-eval'은 WebAssembly 컴파일만 허용하고 자바스크립트 eval은 열지 않는다. worker-src blob:으로 만든 워커는 문서의 connect-src 'none'을 그대로 물려받아 네트워크로 나갈 수 없다. 검증기는 이 짝이 어긋나면 양방향으로 거부한다 — 선언만 하고 안 쓰면 얻지 않은 권한이고, 쓰는데 선언하지 않으면 브라우저가 막는다.
커널
인라인된 WebAssembly는 243바이트다. 손으로 조립했고, 내보내는 것은 선형 메모리와 step(w, h, cur, next, prev, c2, damp) 하나뿐이다. 셀마다 좌·우·상·하와 자기 값을 읽어 5점 라플라시안을 만들고, 이전 프레임 값과 합쳐 감쇠를 곱한다.