react-unity-webgl

Why use it

react 내에서 unity 게임엔진으로 개발된 webgl을 보여주고 unity-react간의 커뮤니케이션을 도와주어 관리할 수 있게 해주는 라이브러리이다.
이 라이브러리를 활용하여 프론트 개발자는 직접 캔버스 위에 결과물을 올려 렌더링하는 과정을 심플하게 진행할 수 있고 window 등의 글로벌 변수를 통해 수동적으로 데이터를 관리하지 않고도 유니티 내의 이벤트를 구독하거나, 원하는 타이밍에 react에서 필요한 데이터를 가져오는 등의 상호작용이 가능해진다.

Mobile Support

공식적으로 지원하지 않는다고 기재 되어있으나 iOS / Android 최신 브라우저에서 작동하는 것을 검증하였음

Unity WebGL doesn’t support mobile devices. It might work on high-end devices, but current devices are often not powerful enough and don’t have enough memory to support Unity WebGL content.

(번역)
Unity WebGL은 모바일 기기를 지원하지 않습니다. 고성능 기기에서는 작동할 수 있지만, 현재의 기기들은 종종 충분히 강력하지 않고 Unity WebGL 콘텐츠를 지원하기에 충분한 메모리가 없습니다. 이를 사용자에게 알리기 위해, Unity WebGL의 기본 템플릿은 사용자가 모바일 브라우저에서 Unity WebGL 애플리케이션을 로드하려고 할 때 경고 메시지를 표시합니다. 이 경고를 애플리케이션에서 제거하려면, 자체 WebGL 템플릿을 추가하세요. 이를 수행하는 방법에 대한 정보는 WebGL 템플릿 추가를 참조하세요.

Browser compability (Mobile)

Edge	Firefox	Chrome	iOS Safari	Samsung	Opera
-	last versions ✔	last versions ✔	last versions ✔	-	-

Entry

Initialize

Unity에서 빌드한 결과물을 react 앱 내로 가져와, public 디렉토리 내에 파일을 배치한다.
아래 코드의 경우는 public/build/myunityapp.loader.js 등으로 배치한 결과임

import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

function App() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "build/myunityapp.loader.js",
    dataUrl: "build/myunityapp.data",
    frameworkUrl: "build/myunityapp.framework.js",
    codeUrl: "build/myunityapp.wasm",
  });

  return <Unity unityProvider={unityProvider} />;
}

• loader :
  • 웹페이지가 유니티 콘텐츠를 로드하는데 필요한 js 코드
• framework :
  • JS 런타임 및 플러그인
• wasm :
  • 웹 어셈블리 바이너리 파일
• data :
  • 에셋 데이터 및 씬

빌드 시 압축 방식

• default : gzip
• better : Brotli
  

⚠️ Brotli 압축방식에서는 Decompression Fallback설정을 해제해야 하며 , 배포 서버 Nginx에서 설정이 필요

Communication

React → Unity

• sendMessage: unity webGL 컨테이너 내의 게임 오브젝트에 메시지를 보낼 수 있음. 즉, React 앱에서 Unity 내의 함수를 호출 가능하게 한다.

게임 오브젝트:

Unity의 기초적인 오브젝트로 캐릭터 / 소품 / 배경을 나타냄. 컴포넌트의 컨테이너 역할 담당

React ← Unity

• addEventListener
• removeEventListener
• dispatchReactUnityEvent: 리액트 앱에서 유니티로 이벤트 전송하는 역할. 리액트 앱에서 발생한 사용자의 행동을 유니티 게임 내에서 반영하고자 할 때 사용한다.