2.6 가짜 3D 구현하기

이 예제[1]에서는 설득력 있는 가짜 3D 효과를 만들기 위한 기술을 살펴보겠습니다. 실제 3D 장면에서 화면 평면 내에서 카메라 위치를 이동하면 시차(parallax)라는 현상이 발생합니다. 이 효과는 멀리 있는 객체가 전경에 있는 객체보다 더 느리게 움직이는 것처럼 보이기 때문에 발생합니다.

기차 창문에서 보는 실제 시차 효과[출처]

2D 이미지에 해당 깊이 맵을 활용하여 이러한 시차 효과를 시뮬레이션함으로써, 설득력 있는 3D 착시를 만들 수 있습니다. 개념은 간단합니다. 이동 오프셋을 기반으로 텍스처 좌표를 조정합니다. 이 조정의 크기는 이동과 깊이 맵에 의해 결정되며, 이는 멀리 있는 객체를 나타내는 픽셀이 가까이 있는 객체를 나타내는 픽셀보다 적게 오프셋되도록 합니다.

이미지에 대한 깊이 맵을 생성하려면 MiDaS 모델을 사용하는 것을 고려해 보세요. 깊이 맵 생성에 대한 자세한 지침은 제공된 링크를 참조하세요. 이 예제에서는 샘플 이미지와 해당 깊이 맵을 함께 사용합니다.

이 샘플에서 사용된 그림과 생성된 깊이 맵

데모를 향상시키기 위해 이동 벡터에 대한 마우스 컨트롤을 구현할 것입니다. 이 벡터는 현재 마우스 위치에서 캔버스 중앙을 빼서 계산됩니다. 결과적으로 마우스가 이미지 중앙에서 멀리 이동할수록 이미지는 반대 방향으로 더 많이 오프셋되어 동적이고 상호작용적인 경험을 제공합니다.

canvas.addEventListener('mousemove', function (event) {
    let mousePos = getMousePos(canvas, event);
    mousePos = { x: mousePos.x * 2.0 / canvas.width - 1.0, y: mousePos.y * 2.0 / canvas.height - 1.0 };
    //console.log('mousemove', mousePos);
    requestAnimationFrame(() => {
        render([mousePos.x * 0.01, mousePos.y* 0.01]);
    });
});

마법은 프래그먼트 셰이더에서 일어납니다:

@group(0) @binding(0)
var t_diffuse: texture_2d;
@group(0) @binding(1)
var t_depth: texture_2d;
@group(0) @binding(2)
var s_diffuse: sampler;
@group(0) @binding(3)
var offset: vec2;

@fragment
fn fs_main(in: VertexOutput) -> @location(0) vec4 {
    var depth:vec4 = textureSampleLevel(t_depth, s_diffuse, in.tex_coords, 0);
    var color:vec4 = textureSampleLevel(t_diffuse, s_diffuse, in.tex_coords - offset * depth.r, 0);

    return color;
}

셰이더에서는 두 가지 텍스처 샘플링 작업을 수행합니다. 첫 번째는 깊이 맵을 샘플링하여 각 픽셀의 깊이 값을 얻습니다. 두 번째는 실제 이미지를 샘플링하지만, 조정된 텍스처 좌표를 사용합니다. 이 조정은 마우스 오프셋을 깊이 값으로 스케일링하여 계산되며, 이는 깊이와 움직임의 착시를 만듭니다.

이 프로그램은 간단함에도 불구하고 놀랍도록 매력적인 결과를 제공합니다. 데모를 실험해보고 제공된 이미지를 여러분의 이미지로 바꿔서 이 효과가 다른 장면과 피사체에 어떻게 적용되는지 확인해 보시기 바랍니다.