NEUROMANTIC

自分でC/C++/UE4/Graphics/ゲームなどをやったことをメモするブログ

Bilinear Interpolationについてメモってみた

  • あくまでメモの用途で書いたものですので、間違った部分があるかもしれません。

Bilinear Interpolationとは

  • 二重線形補間(Bilinear Interpolation)は、XとYとなる2次元で投影できる値を、2次元的に線形補間する方法である。
  • 基本的なやり方は、線形補間と同じく一つの方向で線形補間をし、そしてまた一つの方向へ線形補間をする。こうやって補間した値が得られる。
  • ただし、二重線形補間は2つの線形補間を掛け算することによって、実際には得られる値は線形ではないらしい。
  • この二重線形補間はテクスチャマッピングをする時によく使われる。

GLSLで実践コード

in VertexData
{
    vec4 v_position;
    vec3 v_normal;
    vec2 v_texcoord;
} inData;
out vec4 fragColor;

vec3 checkboard[] = vec3[4]
(
    vec3(0), vec3(1),
    vec3(1), vec3(0)
);

void mainImage(in vec2 fragCoord) 
{
    vec2 puv = mod(fragCoord, 2.);
    vec2 uv = puv - floor(puv);
    
    ivec2 xlyb = ivec2(floor(puv));
    ivec2 xryt = ivec2(0);
    if (xlyb.x != 1) { xryt.x = xlyb.x + 1; }
    if (xlyb.y != 1) { xryt.y = xlyb.y + 1; }
    
    ivec2 xryb = ivec2(xryt.x, xlyb.y);
    ivec2 xlyt = ivec2(xlyb.x, xryt.y);
    
    const float t = 0.5;
    const float e = 1e-2;
    vec3 color =
        (1.0-uv.x) * (1.0-uv.y) * checkboard[xlyb.y * 2 + xlyb.x] +
        uv.x * (1.0-uv.y) * checkboard[xryb.y * 2 + xryb.x] +
        (1.0-uv.x) * uv.y * checkboard[xlyt.y * 2 + xlyt.x] +
        uv.x * uv.y * checkboard[xryt.y * 2 + xryt.x];
    color = smoothstep(t - e, t + e, color);
    
    fragColor = vec4(mix(vec3(0, 0.5, 1), vec3(1, 0.75, 0), color), 1.0);
}

void main(void)
{
    vec2 uv = (resolution * inData.v_texcoord) / 64 - time / 4;
    mainImage(uv);
}

結果

f:id:neuliliilli:20190915123953g:plain