느린 개발자

 

 

[WebGL] 웹 브라우저 환경(Nuxt,React) 에서 WebGl 연결 - 2

 

이전 포스팅에 이어서 Nuxt <-> 유니티에 대한 양방향 통신에 대해서 설명을 이어가겠습니다.

---

 

Nuxt 에서 Unity 이벤트(함수) 실행하기

 

• 이전 포스팅에서 만들어준 EditorViewer 컴포넌트를 다시 확인해서
• 버튼과 화면을 같이 보기 위해 canvas width 값을 줄여줍니다. 1900px -> 800px
• Web(Nuxt)에서 유니티로 이벤트를 전달하기 위한 버튼을 생성합니다.

<template>
  <div id="editor-container" style="display: flex">
    <canvas id="canvas" style="width: 800px; height: 1000px;"></canvas>
     // 추가 버튼
     <v-btn @click="SendUnityCountUp">Unity 내부로 countUp</v-btn>
  </div>
</template>

<script>
import UnityWebgl from 'unity-webgl';
export default {
  name: "EditorViewer",
  mounted() {
    this.ConfigBuildEditor()
    this.EditorOnLoad()
  },
  data:()=>({
    editor:null,
  }),
  methods:{
    // Static 폴더 Build 파일 연결
    ConfigBuildEditor(){
      this.editor = new UnityWebgl({
        loaderUrl:
          '/Build/app_web.loader.js',
        dataUrl:
          '/Build/app_web.data.unityweb',
        frameworkUrl:
          '/Build/app_web.framework.js.unityweb',
        codeUrl:
          '/Build/app_web.wasm.unityweb',
      })
    },
    // Unity 콘텐츠 화면 로드
    EditorOnLoad(){
      this.editor
        .on('progress', percent =>{
          console.log('Unity Loaded: ', percent)
        })
        .on('created', () => {
         console.log('Unity Instance created: ')
        })
        .on('destroyed', () => console.log('Unity Instance: Destroyed.'))
        .create(document.querySelector('#canvas'))
    },
    // 유니티로 이벤트 전송하는 메소드
    SendUnityCountUp(){
      this.editor.send('GameManager','CountUp')
    }
  }
}
</script>

 

• Web Unity 콘텐츠 화면

 

 

• Unity Hirerachy에서 스크립트가 연결된 GameManager를 확인합니다.

 

• GameManager에 연결된 GameManager 스크립트를 확인하면
• CountUp이라는 함수를 확인할 수 있습니다.

 

중요

Web(Nuxt)에 버튼에서  유니티 콘텐츠에 함수를 실행하려면
Hierarchy - GameManager에 연결된 GameManager 함수인 CountUp을 실행하면 됩니다.

    // methods
    SendUnityCountUp(){
      this.editor.send('GameManager','CountUp')
    }

 

"Unity 내부로 COUNTUP"이라는 버튼을 클릭 시 아래처럼 카운트가 증가하는 것을 볼 수 있습니다,

 

---

 

Unity에서 Nuxt로 데이터 전달받기

 

• Unity Assets - Plugins - WebGL 폴더 안에 jslib파일을 생성합니다. (메모장으로 확장자 jslib 넣어서 만들어도 됩니다.)

 

// webglLibrary.jslib 파일
mergeInto(LibraryManager.library, {
    // 함수명
    SendData: function (score) {
    console.log("SendData ",score);
    // 중요!! __UnityLib__.함수명(data)를 작성해야 Web에서 이벤트 수신 가능
    __UnityLib__.SendData(score);
    return score;
  },
});

 

• Unity - jslib 파일 - inspector 창을 보면 아래와 같이 세팅합니다.  (파일 클릭 후 오른쪽화면입니다)

 

• Unity - Assets - Script - GameManager에서 jslib을 연결합니다. (C#에서 dll 파일 불러오는 거랑 같습니다)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System.Runtime.InteropServices; //추가

public class GameManager : MonoBehaviour
{

      // jslib 함수명
      [DllImport("__Internal")]
      public static extern void SendData(int score);

      public Text testText;
      public int score = 0;

      public void CountUp()
      {
        score +=1;
        testText.text = score.ToString();
        libCall()  //연결
      }

      // jslib 함수
      public void libCall()
      {
        #if UNITY_WEBGL == true  && UNITY_EDITOR ==false
        SendData(score);
        #endif
      }


      void Start(){}
      
      void Update(){}

}

 

• jslib 파일과 GameManager 스크립트에 연결을 완료했으면, Unity 프로젝트를 다시 빌드합니다.
• 빌드파일을 기존에 있던 Nuxt - static - Build 파일을 교체합니다.
• Nuxt 프로젝트에서 EditorViewer - EditorOnLoad 메소드에 jslib에서 작성한 함수명을 등록합니다.

// methods

EditorOnLoad(){
  this.editor
    .on('progress', percent =>{
      console.log('Unity Loaded: ', percent)
    })
    .on('created', () => {
      console.log('Unity Instance created: ')
    })
    // unity 함수 등록
    .on('SendData', (score) => {
      console.log('Count : ',score)
    })
    .on('destroyed', () => console.log('Unity Instance: Destroyed.'))
    .create(document.querySelector('#canvas'))
},

 

• Nuxt 실행하면 화면과 같이 로그가 찍히는 걸 볼 수 있습니다.

 

 

---

여기까지 Nuxt와 Unity WebGL에 관해서 양방향 통신에 대한 내용으로 기본적인 데이터 주고받는 부분을 활용해서 웹에서 간단한 모델을 띄워서 에디팅 할 수도 있고, 여러 가지 다양한 콘텐츠를 만들어볼 수 있습니다. 

리액트로 Nuxt와 비슷하게  react-unity-webgl이라는 라이브러리를 써서 위와 같이 구현할 수 있습니다. 추후 기회가 되면 React WebGl에 대해서도 작성해 보겠습니다. 그러면 WebGL 관련 포스팅은 여기까지로 마무리하겠습니다. 

감사합니다.

 

 

틀린 부분이나 수정되어야 할부분은 댓글로 남겨주세요. 

읽어주셔서 감사합니다.