{{ label!='' ? 'Label : ' : (q!='' ? '검색 : ' : '전체 게시글') }} {{ label }} {{ q }} {{ ('('+(pubs|date:'yyyy-MM')+')') }}

[Unreal Engine] 오디오 시각화를 이용한 대화 연출

   Phil in the Mirror에서는 전화를 통해 대화하는 장면들이 있는데요. 규모가 작아 더빙을 할 수도 없는데 단순히 대사만 떠있는 것이 조금 허전해, 목소리가 들리는 느낌을 연출하고자 소리의 시각화를 함께 해주면 좋을 것 같다는 생각을 했습니다. 다음처럼요:

가운데의 원형 표시는 음성이 시각화되어 보여집니다.

  이를 수행하기 위해서, 다음과 같은 작업들이 필요했습니다:

  • 음성 데이터가 필요합니다.
  • 음성 데이터를 시간에 따라 분석하여, 각 주파수 영역의 크기가 어느정도 되는지 알아야 합니다.
  • 이렇게 분석된 크기를 텍스처로 구성하여 머티리얼 파라미터로 전달해야 합니다.
  • 머티리얼은 해당 파라미터를 기반으로 시각화를 하여 유저에게 보여줍니다.


음성 데이터

  상술하였듯, 이 게임에는 더빙 등을 하지 않았기 때문에 직접적으로 활용할 수 있는 음성 데이터는 없었습니다. 처음에는 대사 자체를 분석해서 절차적인 정보를 얻어낼 수 있는 방법이 있을까 고민하였으나, 소 잡는 칼을 쓰는 느낌이 들어 다른 방법을 고민하기로 했습니다. 여기서 필요한 음성은 플레이어가 들을 수 있는 것이 아니었기 때문에, 단순히 무료 TTS 서비스를 이용하여 대사들을 말하는 음성들을 얻어내 활용하기로 하였습니다. 

  이렇게 얻은 TTS 음원을 사용하기 위해서는 분석이 필요한데요. 푸리에 변환을 통해 각 음역대의 진폭을 얻은 뒤 이들을 이용해서 그려내야 할 것입니다. 이는 언리얼 엔진에서 제공하는 AudioSynesthesia 플러그인을 활용하기로 했습니다. 해당 플러그인에서는 ConstantQNRT 에셋 등을 지원하며, 이를 통해서 음원의 특정 시간에서 각 주파수 영역의 크기가 어느정도인지 분석할 수 있습니다.

  따라서 다음과 같은 에디터 스크립트를 작성하여 주어진 TTS 음원들을 자동으로 ConstantQNRT 에셋으로 생성하도록 하였습니다:

import unreal

def safe_update_or_create_nrt_assets():
    source_root_path = "/Game/Audio/Narrative"
    settings_asset_path = "/Game/Audio/Narrative/NRTS_Settings"
    
    asset_tools = unreal.AssetToolsHelpers.get_asset_tools()
    factory = unreal.AudioSynesthesiaNRTFactory()
    factory.set_editor_property(
        "audio_synesthesia_nrt_class",
        unreal.ConstantQNRT
    )

    preset_settings = unreal.EditorAssetLibrary.load_asset(settings_asset_path)
    if not isinstance(preset_settings, unreal.ConstantQNRTSettings):
         unreal.log_error(f"'{settings_asset_path}' 애셋이 ConstantQNRTSettings 타입이 아닙니다.")
         return
         
    asset_paths = unreal.EditorAssetLibrary.list_assets(source_root_path, recursive=True)

    # --- 로직 시작 ---
    for path in asset_paths:
        asset = unreal.EditorAssetLibrary.load_asset(path)
        if not isinstance(asset, unreal.SoundWave):
            continue

        source_name = asset.get_name()
        asset_folder_path = unreal.Paths.get_path(path)
        new_asset_name = f"NRT_{source_name}"
        new_asset_path = f"{asset_folder_path}/{new_asset_name}"

        nrt_asset = None
        # 애셋 존재 여부에 따라 생성 또는 로드
        if unreal.EditorAssetLibrary.does_asset_exist(new_asset_path):
            unreal.log(f"기존 애셋 '{new_asset_name}'을(를) 업데이트합니다.")
            nrt_asset = unreal.EditorAssetLibrary.load_asset(new_asset_path)
        else:
            unreal.log(f"새 애셋 '{new_asset_name}'을(를) 생성합니다.")
            nrt_asset = asset_tools.create_asset(new_asset_name, asset_folder_path, unreal.ConstantQNRT, factory)

        if not nrt_asset:
            unreal.log_error(f"'{new_asset_name}' 처리 중 오류 발생.")
            continue
            
        # 속성 설정
        nrt_asset.set_editor_property('sound', asset)
        nrt_asset.set_editor_property('settings', preset_settings)
        
        # 저장
        unreal.EditorAssetLibrary.save_asset(nrt_asset.get_path_name(), only_if_is_dirty=True)
            
    unreal.log("안전한 업데이트/생성 작업이 완료되었습니다.")


# 스크립트 실행
safe_update_or_create_nrt_assets()

  이렇게 만들어진 스크립트는 [Tools-ExecutePythonScript]를 통해서 활용할 수 있습니다. 그리고 해당 에셋들을 대화에 사용되는 위젯에 바인딩해 주었습니다.

NRT 에셋들을 UPROPERTY로 넣어놓은 모습


음성 데이터 분석

  NRT 에셋은 분석에 필요한 음원 데이터를 구워낸(bake) 것입니다. 음원에 대한 다양한 분석 데이터들이 있고, ConstantQNRT는 주파수 관점의 분석에 집중하는 에셋입니다. 이를 이용해서 어느 음역대의 소리가 강한지를 알 수 있습니다. 분석 방법의 세부사항은 AudioSynesthesia 플러그인이 맡아주므로, 우리는 이를 이용해서 소리를 시각화할 수 있다는 점만 집중하면 됩니다.

  따라서 해당 UI 위젯이 나왔을 때, 시간에 따라서 정해진 음성을 분석하면 됩니다. 분석하는데에는 여러 가지 고려사항이 필요한데요. 음원의 주파수를 몇 개로 쪼개서 분석할 것인지에 대한 고려가 필요합니다. 개수는 마음대로 설정하면 되겠지만, 너무 많거나 너무 적어도 의미가 없을 것입니다. 저는 96개로 나누기로 결정했습니다. (왜냐하면 일반적으로 12반음 * 8옥타브로 나누어서 분석해주기 때문입니다)

오디오 시각화의 예시. 막대 하나하나가 특정 주파수 영역을 상징합니다.

  AudioSynesthesia 플러그인이 분석해준 주파수 영역의 각 크기들을, 제가 결정한 96개의 범위로 적절히 블렌딩해서 담아야 합니다. 일반적으로는 AudioSynesthesia 역시 96개로 나누어서 분석해주기 때문에 별다른 작업을 할 필요는 없으나, 나중에 96개가 아닌 다른 개수의 주파수 영역으로 나누어서 보는 것도 시도하고 싶었기 때문에 이를 위한 작업이었습니다. 예를 들어, 96개로 나누어진 주파수 영역을, 80개로 나누어진 주파수 영역으로 대응시켜 담아볼 수 있는 것이죠.

  이는 단순히 선형적으로 보간해서 담기로 했습니다. 로그 스케일로 나누어진 주파수 영역을 선형적으로 보간하는 것이 올바른지는 차치하고, 어쨌거나 그정도의 디테일이 필요한 시스템은 아니었기 때문입니다. 간단한 헬퍼 함수를 만들어서 해결할 수 있었고, 코드는 다음과 같습니다:

// 선형 리샘플: src(0..M-1) -> dst(0..NumBars-1)
static void ResampleLinear(const TArray<float> &Src, TArray<float> &Dst)
{
    const int32 M = Src.Num();
    const int32 N = Dst.Num();
    if (M <= 0 || N <= 0)
    {
        return;
    }
    if (M == N)
    {
        FMemory::Memcpy(Dst.GetData(), Src.GetData(), sizeof(float) * N);
        return;
    }

    for (int32 i = 0; i < N; ++i)
    {
        const float pos = (float)i * (float)(M - 1) / (float)(N - 1);
        const int32 i0 = FMath::Clamp((int32)FMath::FloorToInt(pos), 0, M - 1);
        const int32 i1 = FMath::Clamp(i0 + 1, 0, M - 1);
        const float a = pos - (float)i0;
        Dst[i] = FMath::Lerp(Src[i0], Src[i1], a);
    }
}

void UWaitingDialogWidgetSequence::UpdateFromConstantQNRT(float DeltaTime)
{
    if (TextAudioList.Num() <= CurrentIndex)
    {
        for (int32 i = 0; i < NumBars; ++i)
        {
            NRTMagnitudesResampled[i] = FMath::FInterpTo(NRTMagnitudesResampled[i], 0.0f, DeltaTime, 12.f);
        }

        return;
    }

    UConstantQNRT *ConstantQNRT = TextAudioList[CurrentIndex];
    if (ConstantQNRT == nullptr)
    {
        return;
    }

    if (PlayheadSec > ConstantQNRT->DurationInSeconds || PlayheadSec < 0.0f)
    {
        for (int32 i = 0; i < NumBars; ++i)
        {
            NRTMagnitudesResampled[i] = FMath::FInterpTo(NRTMagnitudesResampled[i], 0.0f, DeltaTime, 12.f);
        }
    }
    else
    {
        // 0번 채널의 Constant-Q (정규화) 값을 시간 위치에서 추출
        TArray<float> CQ;
        ConstantQNRT->GetNormalizedChannelConstantQAtTime(PlayheadSec, 0, CQ);

        if (CQ.Num() > 0)
        {
            TArray<float> Temp;
            Temp.SetNumUninitialized(NumBars);
            ResampleLinear(CQ, Temp); // 0..1 정규화 값

            for (int32 i = 0; i < NumBars; ++i)
            {
                NRTMagnitudesResampled[i] = FMath::FInterpTo(NRTMagnitudesResampled[i], Temp[i], DeltaTime, 12.f);
            }
        }
    }

    PlayheadSec += DeltaTime;
}

  UpdateFromConstantQNRT()는 매 틱마다 호출되어, NRTMagnitudesResampled을 갱신합니다. FInterpTo를 이용해서 갱신함에 유의하세요. 샘플된 값을 그대로 쓰는 것은 약간의 튀는 느낌을 만들 수 있습니다. 따라서 이들을 최대한 부드럽게 움직이도록 하였습니다. 이는 렌더링에서 anti-aliasing을 하는 것과 완벽하게 동일한 원리입니다. 주파수 관점에서 고주파 대역을 약하게 만드는 것이기 때문입니다.


분석 데이터 가공 및 전달

  이렇게 분석된 데이터는 0과 1 사이의 선형적인 값을 갖습니다. 하나의 가공이 필요했는데, 가장 낮은 음역대와 가장 높은 음역대의 값이 부드럽게 이어지도록 하는 것입니다. 왜냐하면 제가 원하는 것은 원형으로 이루어진 오디오 시각화였고, 가장 낮은 음역대와 가장 높은 음역대의 영역이 서로 만나게 될 것이기 때문이었습니다. 따라서 가우시안 필터를 통해 부드러운 값 변화를 유도했습니다.

  또한 이렇게 분석된 데이터는 렌더링에 쓰일 수 있도록 머티리얼 파라미터로 전달되어야 합니다. 저는 이렇게 만들어진 분석 데이터를 텍스처로 만들어 머티리얼 파라미터로 전달하기로 했습니다. 간단하게 텍스처를 하나 만들고, 해당 텍스처의 최상위 밉 레벨의 값에 앞서 도출된 값들을 입력했습니다. 이는 차후 해당 유저 위젯의 Image 위젯에 접근하여, 다이나믹 머티리얼의 파라미터를 수정하여 전달됩니다. 다음 코드를 참고하세요:

static void CircularSmooth(const TArray<float> &In, TArray<float> &Out, int32 HalfWidth, float Sigma)
{
    const int32 N = In.Num();
    if (N == 0)
    {
        return;
    }
    Out.SetNumUninitialized(N);

    // 가우시안 커널
    TArray<float> W;
    W.SetNumUninitialized(2 * HalfWidth + 1);
    float sumW = 0.f;
    for (int i = -HalfWidth; i <= HalfWidth; ++i)
    {
        const float w = FMath::Exp(-0.5f * (i * i) / FMath::Max(1e-6f, Sigma * Sigma));
        W[i + HalfWidth] = w;
        sumW += w;
    }
    for (float &v : W)
    {
        v /= sumW;
    }

    auto at = [&](int32 idx) -> float
    {
        // 원형 래핑 인덱싱
        idx %= N;
        if (idx < 0)
        {
            idx += N;
        }
        return In[idx];
    };

    for (int32 k = 0; k < N; ++k)
    {
        float acc = 0.f;
        for (int j = -HalfWidth; j <= HalfWidth; ++j)
        {
            acc += W[j + HalfWidth] * at(k + j);
        }
        Out[k] = acc;
    }
}

void UWaitingDialogWidgetSequence::CombineAndUpload()
{

    for (int32 i = 0; i < NumBars; ++i)
    {
        ...

            // 최종 출력 버퍼(Magnitudes)에 기록
            Magnitudes[i] = outLin;
    }

    // 마지막과 끝값이 자연스럽게 연결되도록
    static TArray<float> Smoothed;
    CircularSmooth(Magnitudes, Smoothed, /*HalfWidth=*/2, /*Sigma=*/0.5f);
    Magnitudes = Smoothed;

    UpdateDataTexture();
}

void UWaitingDialogWidgetSequence::UpdateDataTexture()
{
    // 첫 mip에 그대로 써 넣는 간단한 패스 (1*NumBars, PF_R32_FLOAT)
    FTexture2DMipMap &Mip = DataTexture->GetPlatformData()->Mips[0];
    void *Data = Mip.BulkData.Lock(LOCK_READ_WRITE);
    FMemory::Memcpy(Data, Magnitudes.GetData(), sizeof(float) * Magnitudes.Num());
    Mip.BulkData.Unlock();
    DataTexture->UpdateResource(); // 리소스 갱신(소형이라 오버헤드 작음)
}

void UWaitingDialogWidgetSequence::InitAudioVisualization()
{
    ...

	// MID 구성
	if (AudioVisualizationImage)
	{
		MID = AudioVisualizationImage->GetDynamicMaterial();
		MID->SetTextureParameterValue(TEXT("DataTex"), DataTexture);
		MID->SetScalarParameterValue(TEXT("NumBars"), static_cast<float>(NumBars));
		MID->SetScalarParameterValue(TEXT("InnerRadius"), InnerRadius);
		MID->SetScalarParameterValue(TEXT("AmplitudeScale"), AmplitudeScale);
	}
    
    ...
}


렌더링

  제가 원하는 것은 원형으로 그려지는 오디오 시각화였습니다. 따라서 우선 원을 그릴 필요가 있었습니다. 텍스처 좌표만을 이용해서 절차적으로 그려지는 것을 원했기 때문에, 전부 머티리얼 노드만으로 그려야 했습니다. 우선 원형으로 그릴 것이기 때문에, 원의 반지름을 정의해볼 수 있습니다. 텍스처의 특정 점과 중점 사이의 거리가, 이 반지름보다 길고 반지름에 음역대의 진폭값을 더한 것보다 작은 경우에만 시각화의 색깔을 렌더링하면 될 것입니다. 다음 그림을 참고해보세요:

중점으로부터의 거리를 기준으로 CircleRadius보다는 크고, CircleRadius+Magnitude보다는 작은 영역을 색칠하면 될 것입니다.

  CircleRadius < DistFromCenter < CircleRadius + Magnitude 영역에 대한 색을 다음과 같은 노드 구성으로 결정할 수 있습니다.


  이를 위해서는 Magnitude를 결정할 수 있어야 합니다. Magnitude는 각 픽셀을 극좌표계로 따졌을 때 각도를 기준으로, 머티리얼 파라미터로 넘어온 텍스처를 샘플링해야 할 것입니다. 저는 추가적으로 샘플링 시에 약간의 노이즈를 주어 조금 더 자연스럽게 보이도록 만들었습니다.


  Angle과 DistanceFromCenter는 다음과 같은 노드 구성으로 얻을 수 있습니다:


최종 결과는 다음과 같습니다.



끝.

댓글

댓글 쓰기

이 블로그의 인기 게시물

[코딩의탑] 5층: 포탈(Portal), 더 나아가기

이미지
2층에서 많은 부족함이 있었죠..   2층 에서 우리가 구현한 포탈은 다음과 같은 부족함이 있습니다: 포탈을 단순히 월드에 배치하기만 했으며, 포탈 건의 요구사항을 고려하지 않았습니다. 가령 포탈은 벽에 생성될 수 있어야 합니다. 플레이어의 포탈 이동만을 고려했습니다. 큐브 등 다른 오브젝트 역시 통과할 수 있어야 합니다. 포탈에 걸쳐있는 오브젝트는 포탈 양면에서 보일 수 있어야 합니다. 즉, 오브젝트의 복사가 이루어져야 합니다. Near plane clippng으로 인해 포탈에 들어가기 직전 카메라가 평면과 겹치는 순간, 포탈 평면의 뒷면 모습이 비춰집니다. 포탈에 비추는 플레이어의 모습이 3인칭으로 보여야 합니다. 효율적인 포탈 재귀 렌더링 방법이 필요합니다. 복습해봅시다. 벡터와 점의 변환   포탈 건너편으로 이동하는 효과를 주기 위해서, 우리는 적절히 오브젝트를 이동 및 회전시켜야 합니다. 속도 역시 적절한 방향으로 보존되어야 하죠. 포탈   먼저 위치와 속도는 3차원 벡터로 표현될 수 있습니다. 그리고 이것이 포탈과 포탈 사이에서 자연스럽게 이어져야 하죠. 마치 포탈이 붙어있는 것처럼요! 다음 그림을 참고해보세요. 블루 포탈과 오렌지 포탈은 서로가 위 방향 축을 기준으로 180도 회전한 상태에서 맞붙어있는 것처럼 느껴야 합니다. 블루 포탈과 오렌지 포탈   이는 각 포탈을 일종의 지역 좌표계로 생각해볼 수 있습니다. 포탈의 [앞 방향 벡터, 우측 방향 벡터, 위 방향 벡터]를 각각 [X, Y, Z]축으로 삼는 셈이죠. 우리는 마치 "이어져 있는" 환상을 선사해야 하므로, 한쪽 지역 좌표계의 좌표 값을 그대로 다른쪽 지역 좌표계의 좌표 값으로 자연스럽게 넘겨주면 됩니다. 다양한 방법이 있겠지만 성능을 위해, 각 축에 대한 내적의 값을 이용하도록 합시다. 각 축은 정규화되어 있고 수직이므로, 내적을 이용할 수 있습니다. 좌표계의 변환 소스 코드: APortal::TransformVectorToDestSpace(), Tra...
자세한 내용 보기

[코딩의탑] 4층: 툰 쉐이딩

이미지
가끔은 만화스러운 느낌이 좋을 때도 있죠.   셀 쉐이딩(Cel shading)이라고도 불리는 툰 쉐이딩 기법은 절제된 빛 표현으로 화면을 그리는 비사실적(non-photorealistic) 렌더링 기법 중 하나입니다.  <Borderlands 시리즈>   이러한 툰 쉐이딩은 다양한 방식으로 실현되고 있으며, 언리얼 엔진을 활용한 툰 쉐이딩 역시 어렵지 않습니다. 특히, 포스트 프로세싱을 이용하여 만화스럽게 후처리를 해주는 방법은 클라이언트 프로그래머들이 손쉽게 사용할 수 있는 방법입니다.   하지만, 포스트 프로세싱을 이용한 툰 쉐이딩은 다음과 같은 단점이 존재하는데요: 포스트 프로세싱 자체의 비용이 존재합니다. 특정한 머티리얼에만 툰 쉐이딩을 적용하기 어렵습니다. (커스텀 스텐실 버퍼를 활용하는 것이 대표적인 방법이며, 이는 개발자를 피곤하게 합니다)   따라서, 우리는 포스트 프로세싱을 활용하지 않는 툰 쉐이딩을 구현해보도록 하죠. 우리는 다음을 구현할 것입니다: 특정 물체의 윤곽선을 추가로 렌더링합니다. 특정 물체의 음영을 부드럽지 않은 단계별 음영으로 변경합니다. 이들의 사용 여부와 윤곽선 굵기, 색을 머티리얼 에디터 속성으로 결정할 수 있습니다. 반복되는 컴파일을 줄이기 위해 머티리얼 인스턴스로 만들 수 있으며, 윤곽선의 굵기를 재컴파일 없이 변경할 수 있습니다.   이는  언리얼 엔진 5의 소스를 직접 수정하는 방법임에 주의하세요. 이러한 방법 역시 마법이 아니므로, 비용이 존재합니다. 이는 차차 이야기하도록 하겠습니다. 그 전에 언리얼 엔진 5를 살펴보도록 하죠. 렌더링 패스 디퍼드 쉐이딩으로 렌더링에 필요한 다양한 정보를 담는 버퍼들   언리얼 엔진은 기본적으로 PC 게임에 한해 디퍼드 쉐이딩을 수행합니다. 디퍼드 쉐이딩이란 포워드 쉐이딩의 반대 개념입니다. 한 물체를 렌더링한다고 생각해보죠. 그 물체의 3차원 세계 좌표와 물체 표면의 법선, 표면 거칠기의 정도,...
자세한 내용 보기

[코딩의탑] 3층: 바다 렌더링

이미지
바다를 그려봅시다.   수많은 게임들은 바다를 배경으로 하고 있습니다. 굳이 바다를 게임의 메인 배경으로 하지 않더라도, 게임 어느 중간에는 꼭 바다를 볼 수 있는 순간이 나오기 마련이죠.  <Sea of Thieves>   이러한 바다를 유체역학적 지식으로 구현하는 것은 쉽지 않습니다. 화면에 보이는 입자가 너무 많아 현실적으로 계산 능력이 부족하기 때문입니다. 따라서 많은 게임들은 바다를 구현하기 위해서 수많은 편법을 활용하고 있습니다. 대표적인 방법은 Displacement Mapping(변위 매핑)을 이용하는 것이죠.  Displacement Mapping   Displacement Mapping이란 Displacement Map을 이용해 물체를 구성하는 일련의 정점들을 재배치하는 것을 의미합니다. 가령, 평평한 격자의 물체가 있고 다음과 같은 두 개의 Displacement Map이 있다면 우리는 파도와 같은 현상을 만들어낼 수 있습니다. 하나는 큰 파도(저주파)를, 다른 하나는 작은 파도(고주파)를 재현합니다. 흰색일수록 위에 있으며, 검은색일수록 아래에 있게 됩니다.   이러한 Displacement Map들을 겹친 후에, 서로 다른 방향으로 움직이게 만들고 겹쳐진 값을 이용해서 Displacement Mapping을 한다면 저렴한 연산으로 파도와 같은 환상을 만들어낼 수 있습니다. 하지만 이 방법은 정적으로 파도가 만들어진다는 한계가 있습니다. 바람의 방향, 파도의 세기 등을 조절하기가 어렵죠. 조금 더 멋진 Displacement Map을 만들 수 있는 방법이 있을까요? Jerry Tessendorf의 'Simulating Ocean Water'   영화 프로듀서이자 교수인 Tessendorf는 그럴듯한 바다를 시뮬레이션할 수 있는 방법을 논문으로 정리해 제안하였습니다. 제가 다룰 내용을 간단히 요약하면 다음과 같습니다: 파도는 일종의 사인파와 코사인파의 합입니다. 따라서 ...
자세한 내용 보기