Artoke

선형 보간(lerp): 두 점 사이를 부드럽게 채우는 마법

선형 보간(lerp): 두 점 사이를 부드럽게 채우는 마법 대표 이미지
출처: 선형 보간(lerp) — 키프레임 사이 움직임 채우기

선형 보간(lerp): 두 점 사이를 부드럽게 채우는 마법

만화 영화를 본 적 있나요? 그림 한 장 한 장을 사람이 다 그리는 것 같지만, 사실 컴퓨터는 중요한 몇 장면만 알아도 그 사이를 스스로 채웁니다. 이때 쓰는 아주 쉬운 방법이 바로 선형 보간, 영어로 lerp예요.

보간이 뭐예요?

"보간"은 빈칸을 채운다는 뜻이에요. 우리가 아는 점이 두 개 있어요. 그 두 점 사이에 아직 모르는 값이 있죠. 그 사이를 자연스럽게 이어 채우는 것이 보간입니다.

"선형"은 곧은 직선이라는 뜻이에요. 그러니까 선형 보간은 "두 점을 곧은 직선으로 이어서 그 사이를 채우기"예요.

계단을 오르는 이야기로 생각해요

집에 계단이 있다고 해봐요. 1층은 높이가 0이고, 2층은 높이가 10이에요. 그럼 계단 딱 중간에 서 있으면 높이가 얼마일까요?

맞아요, 5예요! 0과 10의 딱 가운데니까요. 이게 바로 선형 보간이에요. 시작과 끝만 알면, 그 사이 어디든 높이를 알 수 있어요.

t라는 작은 친구

"얼마나 갔는지"를 나타내는 숫자를 t라고 불러요. t는 0부터 1까지의 숫자예요.

  • t = 0 이면? 아직 출발점에 있어요.
  • t = 1 이면? 이미 도착점에 왔어요.
  • t = 0.5 이면? 딱 절반만큼 왔어요.

그래서 계산은 이렇게 해요: 결과 = 시작 + (끝 − 시작) × t

위의 계단으로 해볼까요? 시작 0, 끝 10, 절반이니 t는 0.5.
결과 = 0 + (10 − 0) × 0.5 = 5. 딱 맞죠!

선형 보간(lerp): 두 점 사이를 부드럽게 채우는 마법 도식

더 잘게 나누면 부드러워요

t를 0.1, 0.2, 0.3... 이렇게 아주 조금씩 늘려가면 어떻게 될까요? 결과 값도 조금씩 늘어나요. 그래서 뚝뚝 끊기지 않고 스르르 부드럽게 움직이는 것처럼 보여요.

게임 속 캐릭터가 이쪽에서 저쪽으로 미끄러지듯 걸어가는 것도, 이렇게 사이사이를 아주 잘게 채워서 만든 거예요.

초록 점의 위치를 양쪽 빨강·파랑 점과 거리로 나타낸 그림
In this geometric visualisation, the value at the green circle multiplied by the horizontal distance between the red and blue circles is equal to the sum of the value at the red circle multiplied by t · 출처: 선형 보간(lerp) — 키프레임 사이 움직임 채우기

점이 여러 개면?

점이 두 개가 아니라 여러 개면 어떻게 할까요? 걱정 마세요. 옆에 있는 두 점씩만 짧은 직선으로 이어주면 돼요. 그러면 톱니처럼 이어진 선이 만들어져요. 여러 개의 짧은 직선이 손을 잡고 쭉 이어진 모습이에요.

빨간 점들을 짧은 파란 직선 조각으로 이어붙인 그림
Linear interpolation on a data set (red points) consists of pieces of linear interpolants (blue lines). · 출처: 선형 보간(lerp) — 키프레임 사이 움직임 채우기

키프레임과 애니메이션

만화 영화를 만들 때, 사람은 중요한 순간만 그려요. 이 중요한 그림을 키프레임이라고 불러요. "키"는 열쇠, 즉 중요하다는 뜻이에요.

예를 들어 공이 왼쪽 끝(키프레임 1)에서 오른쪽 끝(키프레임 2)으로 굴러가요. 그 사이 그림은? 컴퓨터가 선형 보간으로 착착 채워줘요. 사람은 힘을 덜 쓰고, 움직임은 부드러워져요. 정말 똑똑하죠?

2층으로 넓혀볼까요? (조금 어려운 이야기)

지금까지는 왼쪽·오른쪽, 한 줄 위에서만 채웠어요. 그런데 종이처럼 넓은 판 위에서 위·아래·양옆 네 점 사이를 채우고 싶으면 어떻게 할까요?

먼저 가로로 한 번 선형 보간을 하고, 그 다음 세로로 또 한 번 하면 돼요. 이렇게 두 번 하는 걸 이중 선형 보간이라고 불러요. 어려운 이름이지만, 결국 "쉬운 채우기를 두 번 하기"일 뿐이에요.

1차원과 2차원 보간을 비교한 그림
Comparison of linear and bilinear interpolation some 1- and 2-dimensional interpolations. Black and red / yellow / green / blue dots correspond to the interpolated point and neighbouring samples, resp · 출처: 선형 보간(lerp) — 키프레임 사이 움직임 채우기

이렇게 색깔이 위치에 따라 부드럽게 섞이는 그림도 이중 선형 보간으로 만들 수 있어요.

네 꼭짓점 값 사이를 색으로 부드럽게 채운 정사각형 그림
Example of bilinear interpolation on the unit square with the z values 0, 1, 1, and 0.5 as indicated. Interpolated values in between are represented by colour. · 출처: 선형 보간(lerp) — 키프레임 사이 움직임 채우기

기억해요, 딱 세 가지

  • 시작과 끝을 안다.
  • 얼마나 왔는지 t(0부터 1까지)를 정한다.
  • 결과 = 시작 + (끝 − 시작) × t 로 사이를 채운다.

이 세 가지만 알면, 여러분도 컴퓨터처럼 두 점 사이를 부드럽게 이을 수 있어요. 선형 보간은 게임, 애니메이션, 그림 그리기 어디에나 숨어 있는 아주 쓸모 많은 마법이랍니다!

출처

광고

리깅 파이프라인 자동화 도구

반복 작업은 스크립트에게. 현업에서 쓰는 리깅 툴 모음.

리깅 도구 보기