오로라 셰이더
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아이디어
화면 전체를 덮는 사각형 하나에 프래그먼트 셰이더를 입힌다. 모든 픽셀이 GPU에서 동시에 계산되며, 프랙탈 노이즈를 노이즈로 한 번 더 비트는 도메인 워핑(domain warping) 기법으로 흐르는 오로라를 만든다.
핵심 코드
노이즈 좌표 자체를 노이즈 결과로 밀어내는 두 단계 워핑이 핵심이다.
1vec2 q = vec2(fbm(uv + t), fbm(uv - t)); 2vec2 r = vec2( 3 fbm(uv + 4.0 * q + t * 1.4 + mouse), 4 fbm(uv + 4.0 * q - t * 1.1 + mouse) 5); 6float f = fbm(uv + 4.0 * r);
f 값을 코사인 팔레트에 통과시켜 무지갯빛을 얻고, sin을 접어
얇은 빛의 리본을 덧그렸다.
인터랙션
커서 위치는 노이즈 도메인의 오프셋으로 들어간다. 마우스를 움직이면 오로라 전체가 그쪽으로 끌리며 출렁인다.