커서 트레일
webgl
- WebGL
- GLSL
- 마우스인터랙션
코드
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아이디어
처음엔 Canvas 2D로 선을 그렸지만, 이번엔 같은 점 사슬을 프래그먼트 셰이더에 넘긴다. 모든 픽셀이 GPU에서 트레일 폴리라인까지의 거리를 재고, 그 거리를 발광 세기로 바꿔 부드러운 빛의 리본을 만든다.
핵심 코드
JS는 마우스를 향해 보간(lerp)되는 24개 점 사슬만 유지하고, 거리 계산과 발광은 전부 셰이더가 맡는다.
1float segDist(vec2 p, vec2 a, vec2 b) { 2 vec2 pa = p - a, ba = b - a; 3 float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); 4 return length(pa - ba * h); 5}
머리 쪽은 굵고 밝게, 꼬리로 갈수록 가늘고 투명하게 테이퍼링하고, 가운데 흰 코어 + 무지갯빛 헤일로를 더해 네온처럼 빛나게 했다.
인터랙션
마우스를 멈추면 사슬이 중앙을 천천히 도는 아이들 드리프트로 전환된다.