3次元リニア補間法を用いたUI

はじめに

UIを検討する際に、3次元空間上で8つのパラメータをモーフィングする方法を検討していた時に、画像処理の分野で用いられるバイリニア補完法を知り、これを3次元に拡張すれば上手くいくのではないかと考えました。

バイリニア補完法とは？

バイリニア補間法（Bi-linear interpolation）は、周囲の4つの画素を用いた補間法です。周辺の輝度値を線形に補完する方法です。詳しくは参考資料にて

参考[1]：https://algorithm.joho.info/image-processing/bi-linear-interpolation/
参考[2]：https://imagingsolution.net/imaging/interpolation/

3次元空間に拡張

 2次元の場合

$${ I'(x', y')= (1-dx)(1-dy)A + dx(1-dy)B + (1-dx)dyC + dxdyD}$$

 3次元空間に拡張した場合

ｚ軸のパラメータが増えるので、

$${ I'(x', y', z')= (1-dx)(1-dy)(1-dz)A + dx(1-dy)(1-dz)B}$$

$${ + (1-dx)dy(a-dz)C + (dxdy)(1-dz)D + (1-dx)(1-dy)dzE }$$

$${ + dx(1-dy)dzF + (1-dx)dydzG + dxdydzH }$$

3次元空間の図

A~Hは補完を行いたい元のパラメタが入るイメージ(画像だったら輝度とか) $${dx,dy,dz}$$は座標

実装

実装上は下記の様な形で書きました。sumは計算が上手くできているか確認用。processingでデモを作りました。全てのコードはこちらに(https://github.com/tsugumasa320/3dui_test)

void CalcWeight() {
  weightA = (1-dx)*(1-dy)*(1-dz);
  weightB = (dx)*(1-dy)*(1-dz);
  weightC = (1-dx)*(dy)*(1-dz);
  weightD = (dx)*(dy)*(1-dz);
  weightE = (1-dx)*(1-dy)*(dz);
  weightF = (dx)*(1-dy)*(dz);
  weightG = (1-dx)*(dy)*(dz);
  weightH = (dx)*(dy)*(dz);
  sum = weightA + weightB +　weightC + weightD + weightE + weightF + weightG + weightH;
}

動画