This document is about: FUSION 2
SWITCH TO

메타버스 WebGL 빌드


Available in the Industries Circle
Circle

개요

메타버스 샘플은 WebGL 대상으로 구축할 수 있습니다.

그러나 WebGL 빌드와 관련된 일부 유니티의 제한으로 인해 몇 가지 사항은 제대로 작동하기 위해 특별한 주의가 필요하며 아래에 자세히 설명되어 있습니다.

이 WebGL 빌드는 WebXR(브라우저의 가상 현실)을 지원하지 않습니다. unity-webxr-export와 같은 일부 오픈 소스 라이브러리에서는 가능하지만 유니티에서는 아직 기본적으로 지원되지 않으므로 여기에서는 설명하지 않습니다.

메타버스 WebGL 빌드(Fusion 1)는 여기에서 테스트할 수 있습니다.

비동기 코드: Task.Delay

WebGL 빌드에서는 일부 asnyc/await 메소드가 의도한 대로 작동하지 않아 문제가 발생합니다.
주로 System.Threading.Tasks.Task.Delay 메소드는 WebGL 빌드에서 동작하지 않습니다.

이러한 제한을 피하기 위해 메타버스 샘플은 WebGL과 호환되는 AsyncTask.Task 메소드를 제공합니다.
웹GL 빌드에 호환되는 Task.Yield에 의존합니다.

C#

public static class AsyncTask
{
    public static async Task Delay(int milliseconds)
    {
#if !UNITY_WebGL
        await Task.Delay(milliseconds);
#else
        // Unity 2021 do NOT support Task.Delay() in WebGL
        float startTime = Time.realtimeSinceStartup;
        float delay = (float)milliseconds / 1000f;

        while (Time.realtimeSinceStartup - startTime < delay)
        {
            // Wait for the delay time to pass
            await Task.Yield();
        }
#endif
    }
}

AudioSource 및 립 동기화

현재 유니티 버전에서는 WebGL 빌드의 경우 Audiosource 컴포넌트가 형제 컴포넌트에 대한 OnAudioFilterRead 콜백을 트리거 하지 않습니다.

따라서 이 콜백의 데이터를 사용하여 음성 볼륨을 계산하는 VoiceDetection 컴포넌트가 제대로 작동하지 않습니다.
대신 WebGL 컨텍스트에서 VoiceDetection은 PhotonVoice 콜백을 사용하여 원시 오디오 데이터에 접근합니다.

사용자 네트워크로 연결된 프리팹에서 헤드셋은 PhotonVoice의 일부인 Speaker 컴포넌트를 보유하고 있으며, 이 컴포넌트에는 RemoveVoice 필드가 있습니다.
여기서 FloatFrameDecoded를 구독하면 오디오 데이터 수신 시 경고를 받을 수 있습니다.

스피커가 초기화되면(IsLinked가 true로 반환됨), OnFloatFrameDecoded 콜백을 추가할 수 있습니다:

C#

if (speaker == null) speaker = audioSource.GetComponent<Speaker>();
if(HasSubscribedToVoice == false && speaker != null && speaker.IsLinked)
{
    speaker.RemoteVoice.FloatFrameDecoded += OnFloatFrameDecoded;
    HasSubscribedToVoice = true;
}

여기서 콜백은 수신된 모든 오디오 데이터를 제공하여 평균 음성 레벨을 계산할 수 있도록 하여 그에 따른 립 동기화를 표시합니다:

C#

private void OnFloatFrameDecoded(FrameOut<float> frame)
{
    float writeVoiceVolume = 0f;
    foreach (var sample in frame.Buf)
    {
        writeVoiceVolume += Mathf.Abs(sample);
    }
    writeVoiceVolume /= frame.Buf.Length;

    // audioWriteCalls and accumulatedVolume are reset during Update
    audioWriteCalls++;
    accumulatedVolume += writeVoiceVolume;
    voiceVolume = accumulatedVolume / audioWriteCalls;
}

이 애플리케이션은 단순 아바타 모델과 ReadyPlayerMe 아바타에 사용됩니다.
ReadyPlayerMe 아바타와 관련하여 데스크톱 및 Quest 빌드에서는 Oculus Lipsync에 의존하지만 WebGL 빌드에서는 기본 라이브러리를 사용할 수 없습니다.
그래서 여기서는 단순화된 버전을 사용합니다. ReadyPlayerMe에서 제공하는 기본 RPMLipSync 코드가 PhotonVoice 콜백을 사용하도록 조정됩니다.

TextMeshPro 머티리얼

어떤 씬에 TextMeshProTextMeshProUGUI 컴포넌트가 완전히 동일한 글꼴 머티리얼을 사용하는 경우 TextMeshPro 텍스트가 표시되지 않는 경우도 있습니다.
이 문제를 해결하려면 글꼴과 관련된 자료를 복제해야 합니다.
그런 다음 씬에 있는 TextMeshProTextMeshProUGUI 컴포넌트가 동일한 Material Preset을 사용하지 않도록 합니다.

Back to top