녹색 덩어리는 물이 아니라 수학입니다.

네 개의 블록이 쌓여 goo가 된다

각 블록은 따로 보면 아주 단순합니다. 합쳐졌을 때 "살아있는 끈적한 덩어리"처럼 보일 뿐이에요.

모양을 "거리"로 들고 있기

화면의 한 점 p가 있을 때, "표면까지 얼마나 떨어졌나"를 숫자로 돌려주는 함수를 SDF라고 합니다. 구(공)는 세상에서 가장 쉬운 SDF예요.

합쳐짐의 비밀은 "부드러운 최소값"

두 모양을 합치려면 두 거리 중 더 가까운 것(최소값)을 고르면 됩니다. 그런데 그냥 min을 쓰면 만나는 곳에 날카로운 주름이 생겨요. 부드럽게 최소화하면 — 거기서 끈적임이 태어납니다.

메시 없이 그리는 법

우리에겐 삼각형이 없습니다. 거리 함수만 있죠. 그래서 픽셀마다 카메라에서 광선을 쏘고, "지금 위치에서 표면까지 거리"만큼 안전하게 한 발씩 전진합니다. 거리가 0에 가까워지면 = 표면에 닿음.

왜 "젖은 녹색"으로 보이나

표면에 닿으면, 그 점이 어느 방향을 보는지(노멀)를 구해 빛을 입힙니다. 노멀은 거리장의 "기울기"로 공짜로 얻어요.

튐·바운스·킥은 어디서 오나

덩어리 중심마다 아주 단순한 물리를 매 프레임 적용합니다. 모양(메타볼)과 완전히 분리된, 수십 줄짜리 코드예요.

두 겹이 동시에 벌어지게

레이어는 "서로 섞이지 않는 별개의 goo 그룹"입니다. 같은 레이어끼리만 smin으로 끈적이고, 다른 레이어와는 그냥 겹쳐 보일 뿐이에요.

무엇이 비용을 결정하나

goo의 비용은 거의 하나의 곱으로 설명됩니다. 이 식만 이해하면 미디어월(4K+)에서 60fps를 맞추는 법이 보여요.

손잡이별 비용 vs 효과

병목 3종

슬라이더 ↔ 수식 ↔ 결과

프로토타입의 각 손잡이가 어떤 수식/코드를 건드리는지, 올리면/내리면 어떻게 보이는지.

한 장으로 보는 전체 흐름

// 1) 한 덩어리까지의 거리 (SDF)
float sdSphere(p, c, r) return length(p - c) - r;

// 2) 부드러운 최소 = 끈적임 (merge/split)
float smin(a, b, k){
  h = clamp(0.5 + 0.5*(b-a)/k, 0, 1);
  return mix(b, a, h) - k*h*(1-h);
}

// 3) 모든 덩어리를 레이어별로 합침
float scene(p){
  for (덩어리 i) d[layer] = smin(d[layer], sdSphere(p, c_i, r_i), uSmoothK);
  return min(d0, d1, d2);   // 레이어끼리는 안 섞임
}

// 4) 레이마칭 — 표면 찾기
t = 0;
for (i < uSteps){ d = scene(o + dir*t); if(d < 0.001) 닿음; t += d*0.85; }

// 5) 노멀 + 빛 (젖은 녹색)
n = normalize(차분(scene));  diffuse = n·l;  fresnel = (1-n·v)^3;  spec = (n·h)^64;

// 6) 물리 (JS, 매 프레임) — 모양과 분리
v.y -= g*dt;  p += v*dt;  if(바닥) v.y = -v.y*e;  v *= damping;  // 킥: v.y += impulse

▶ 이제 실제 프로토타입에서 직접 확인하기 · 기획서로