리퀴드 크롬
webgl
- WebGL
- 레이마칭
- 셰이더
코드
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아이디어
폴리곤 메시 없이, 픽셀마다 광선을 쏘아 거리장(SDF)을 따라 행진하는 **레이마칭(ray marching)**으로 3D 형상을 그린다. 다섯 개의 구를 부드럽게 녹여 붙여 하나의 흐르는 크롬 덩어리를 만들었다.
핵심 코드
smin — 두 거리장을 매끄럽게 잇는 부드러운 최소값 함수가 메타볼의 핵심이다.
1float smin(float a, float b, float k) { 2 float h = clamp(0.5 + 0.5 * (b - a) / k, 0.0, 1.0); 3 return mix(b, a, h) - k * h * (1.0 - h); 4}
표면 법선으로 절차적 스튜디오 환경을 반사시키고, 프레넬(Fresnel)로 가장자리를 밝혀 금속처럼 보이게 했다.
인터랙션
커서 위치가 카메라의 yaw·pitch가 된다. 마우스를 움직이면 크롬 덩어리 주위를 돌며 반사가 흐른다. 가만히 두면 천천히 자전한다.