오늘은 D3에서 제공되는 보간법에 대해서 살펴 볼까 합니다. 예전에 3D Volume Rendering를 공부 했던 기억이 문득 떠오르네요. 그때 선형 보간법으로 배웠었죠. 두 지점의 평균값을 구하여 선 보간을 수행하고 다시 두 선의 보간값의 평균값을 구해서 평면 보간을 수행하고 다시 두 평균의 평균값의 평균값을 구해서 공간 평균값을 구하는 Ray Casting에서 광선의 현재 위치의 값을 구하여 수백장의 이미지에서 볼륨을 랜더링을 하 수 있습니다. 과거의 기억이 떠올라 간단히 D3로 두 지점에 대한 특정 위치의 보간값을 추출해 보았습니다.
D3.js 래퍼런스에 보시면 아래와 같이 다양한 보간 함수들을 제공합니다.
전부 다루면 좋겠지만 몇개의 함수만 실행시켜서 보간함수에 대해 느낌만 살펴보도록 하죠.
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var color = d3.interpolateNumber(0, 100);
console.log(color(0.0));
console.log(color(0.5));
console.log(color(1.0));
</script>
</body>
0, 0.5, 1 이렇게 세개의 보간값을 살펴보면 다음과 같은 결과를 얻게 됩니다.
0.5로 세팅해 놓으면 두 지점의 평균 보간값을 가져오게 됩니다. 이걸 이용하면 선형 평균보간값을 가져오고 다시 두 선의 대한 평면 평균보간값을 가져오고 다시 두 평면 평균 보간값을 가져오면 3D 공간의 평균 보간값을 만들어 낼 수 있게 됩니다. 이걸 이용하면 3D 랜더링하는데 활용하는데 응용 할 수 있겠죠
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var color = d3.interpolate({color: ["red", "green","blue"]}, {color: ["blue","red", "green"]});
console.log(color(0.0));
console.log(color(0.5));
console.log(color(1.0));
</script>
</body>
[결과]
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var color = d3.interpolateRgb("red", "green");
console.log(color(0.0));
console.log(color(0.5));
console.log(color(1.0));
</script>
</body>
[결과]
결과를 보시면 red~green에 대한 색 보간이였습니다. RGB에서 RG만 보간한 값이였고 B를 추가로 살펴보면
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var color = d3.interpolateRgb("red", "blue");
console.log(color(0.0));
console.log(color(0.5));
console.log(color(1.0));
</script>
</body>
[결과]
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var ch = d3.interpolateString("codingman a0","codingman a10");
console.log(ch(0));
console.log(ch(0.5));
console.log(ch(1.0));
</script>
</body>
문자열 보간은 문자열 안에 들어 있는 숫자를 자동으로 보간을 해줍니다. 이 기능이 좀 맘에 드는 함수이더군요.
[결과]
오늘은 두 지점의 값을 이용하여 특정 위치의 보간값을 구해 보았습니다. 그리고 설명은 굳이 할 필요 없이 실행 시킨 결과만 보시면 쉽게 이해가 되 실 거에요. D3 래퍼런스에 보간 함수 중 몇개만 간단히 post로 작성했는데 나머지 함수는 여러분이 함수명만 바꿔서 돌리시면 아마 간단히 결과를 확인 하실 수 있을 거에요.
이걸 어디다 써먹지 하고 생각하시는 분도 있을 거에요. 제 경우는 예전 3D Volume Rendering 할 때 활용한 원리였었습니다. 지금은 다 까먹었지만요. 그냥 잊었던 추억의 기술 원리를 한번 떠올리면서 실험을 했네요.