브라우저 기반 플랫폼의 WebGL에 대해 잘 알고 계시나요?
최근 메타버스와 암호화된 가상 화폐가 뜨거워지므로써, WebGL을 기반으로 하는 게임들도 다시 인기를 일으키고 있습니다. 
WebGL 멀티플레이 게임이 앞으로도 더욱 많이 발전할것으로 예상됩니다.

특히 지난 2년 동안 WebGL의 다양한 연결 수준에 대해 다음과 같은 관련된 질문을 많이 받았습니다.

• 멀티플레이어 WebGL 게임을 어떻게 개발하나요?
• 어떤 Photon SDK가 WebGL을 지원하나요?
• WebGL 개발은 일반 플랫폼과 많이 다른가요?

본편에서는 Fusion SDK및 WebGL용Quantum SDK의 개발, 사용 및 실행 효과에 대해 몇 가지 소개하고 이 플랫폼의 응용 및 개발에 대해 더 많이 알려 드리고자 합니다.

 

・・・

며칠 전 Photon Taiwan 유튜브 채널에서 같은 에피소드를 제작한 적이 있는데 아직 안 보신 분들은 보기 쉽게 잘라서 먼저 보시고 설명과 조작법을 읽어보시는것을 추천드립니다. 

 

 

WebGL의 사양과 역사를 간단히 살펴보겠습니다 .

• WebGL(웹 그래픽 라이브러리) API는 OpenGL ES 2.0을 기반으로 하며 HTML5 Canvas 요소로 직접 렌더링 할 수 있는 저수준 셰이더 기반 3D 그래픽 API를 사용합니다.
• 2011년 첫 버전이 나왔고 WWW(인터넷)에서 사용하는 API로
  WebGL도 웹 플랫폼의 보안 원칙을 준수해야 하므로 설계 초기부터 보안을 고려했습니다.
• 현재 OpenGL ES 3.0 기반의 API를 사용하여 WebGL 2.0으로 개발되어 전 세계적으로 널리 사용되고 있으며, Chrome/Safari/Firefox/Edge 등의 주류 웹 브라우저는 이미 WebGL 2.0을 지원하고 있습니다.

그렇게 오랜 동안 개발 기간을 거쳐 현재의 WebGL 개발 도구도 자리를 잡았습니다!

1. Unity 2021.2.x 이후 버전은 WebGL 실행 수준에 대한 성능 및 음영이 매우 크게 향상되었으며 현재 Unity 2022 버전은 모든 수준에서 WebGL 2.0에 대한 서포트를 널리 제공합니다.
2. Indie dev 독립 개발자를 위해 itch.io의 서포트를  오랫동안 희망하시고 웹 프로덕션 흐름에 익숙하지 않은 사람들도 WebGL 작업을 빠르게 게시, 공유 및 업데이트할 수 있습니다.
3. Photon의 주력 제품인 Quantum SDK와 Fusion SDK는 모두 WebGL을 직접 서포트하므로 멀티플레이어 게임을 만드는 것이 정말 N배 쉽습니다!!

・・・

 

Battle Royale, PUBG, Fall Guys, LOL, MOBA 등의 멀티 플레이어는 이러한 온라인 실시간 게임에서 수십 명에서 수백 명의 플레이어가 참여하며, 일반적으로 기술 수준에서는 아키텍처와 알고리즘이 적용됩니다.

 

따라서 Photon은 멀티플레이어 SDK 측면에서 네트워크 동기화 제품을 제공합니다.

• 현재 플래그십 수준에 연결된 두 가지 개발 도구가 있습니다. 바로 Fusion 및 Quantum
• 일반적으로 게임 산업에서 사용되며, 비게임 산업의 교육, 의학, 군사, 산업, 상업 분야에서도 활용이 가능합니다.
• 둘 다 빠르게 진행되거나 가벼운 멀티플레이어 연결 메커니즘을 구현하는 데 사용할 수 있습니다.

그러나 우리는 어떻게 선택해야 합니까?

• Quantum이 사용하는 기술 스택은 결정적이며, 특히 시장에서 가장 인기 있는 MOBA, RTS, Brawls, Sports 등과 같은 멀티플레이어 게임에 적합합니다.
• Fusion에서 사용하는 기술 스택은 Tick-Based 기반의 State-Transfer로
  FPS 5v5나 FPS/TPS 200인 생존 전투와 같은 치열한 전투를 수행할 수 있습니다.

! 주의 ! ! 주의 ! ! 주의 !

그러고 보니 일부 개발자들은 Quantum이나 Fusion이 슈퍼하드코어(Hard-Core) 연결에만 적합하다고 잘못 생각하는 분들이 있는데, 사실 Quantum이나 Fusion은 가벼운 여가, 사교, 휴식, 턴제( 캐주얼/소셜/쉬움/턴제) 및 기타 게임 유형입니다!!

WebGL에 대한 Quantum/Fusion의 지원을 예로 보면 소규모 프로토타입이나 데모용 소규모 프로젝트에 매우 적합합니다.

게다가 많은 WebGL 게임은 온라인에서만 플레이할 수 있는 1인용 게임입니다.
게임은 분명히 온라인이지만 1인용으로만 플레이할 수 있고 여러 명이 함께 플레이할 수 있는 온라인 게임은 아닙니다. 

때문에 Photon에서 제공하는 SDK를 사용하면 WebGL 측면에서 진정한 멀티플레이어가 됩니다!

 

・・・

 

그렇다면 WebGL에서 Fusion SDK 또는 Quantum SDK를 어떻게 사용합니까?
현재 방법은 다음과 같습니다.

• Unity +Quantum SDK+ WebGL 타겟 빌드
• Unity +Fusion SDK+ WebGL 타겟 빌드

생성된 파일은 WebGL 기술을 서포트하는 웹사이트 플랫폼(예: itch.io) 또는 자체 구축한 WebServer Hosting에 공개되며 게시된 플레이어가 공용 URL에서 다운로드하여 재생할 수 있습니다~

 

・・・

 

WebGL의 출력 단계인 Fusion의 예제 Fusion Golf를 살펴보겠습니다.

 

(1) 이 예제의 소스 코드 다운로드 위치는 아래 링크를 참조하세요.

https://doc.photonengine.com/ko-kr/fusion/current/game-samples/fusion-golf

 

(2) 다운로드한 zip은 Fusion-FusionGolf-1.1.2.zip과 같은 파일이어야 합니다. 압축 해제 후 전체 Unity 프로젝트에 필요한 파일이 있을 것이므로 Unity Hub에서 이 디렉토리를 직접 선택하고 열기만 하면 됩니다.

 

(3) Photon 앱 설정 선택 ,

위치: /Assets/Photon/Fusion/Resources/PhotonAppSettings

App Id Fusion에서 Photon 공식 홈페이지에서 신청한 Fusion App ID를 입력하고,

테스트 시 Fixed Region을 jp로 설정하여 테스트 속도를 빠르게 할 수 있으며, 기타 설정은 다음과 같습니다.

 

Photon 앱 설정 (참고: AppID는 직접 신청하시길 바라며 사진 숫자는 포맷용입니다.)

 

(4) 네트워크 프로젝트 구성을 구성하려면 /Assets/Photon/Fusion/Resources/NetworkProjectConfig로 이동하세요.

 

기본적으로 이 프로젝트의 모든 파라미터는 최적화되어 있으므로 변경할 필요가 없으나, 변경을 피하기 위해 기본 값이 다음과 같이 설정되어 있는지 확인하시길 바랍니다.
* Peer Mode가 Single로 설정되어 있음
* Physics Engine이 Physics3D로 되어 있음
* Server Physics Mode는 Client Prediction으로 설정.

 

　네트워크 프로젝트 구성 참조 설정

 

더 중요한 부분은Simulation의 Tick Rate이므로 수동으로 30 tick으로 변경하세요.

모바일과 같은 WebGL 플랫폼은 리소스가 상대적으로 부족하기 때문에 Tick Rate가 너무 높으면 구형 컴퓨터나 느린 네트워크에서 리소스 낭비가 발생할 수 있습니다.

 

(5) Unity의 Build Settings를 열고 이 프로젝트의 Scene에 있는 Menu와 Game이 목록에 있는지 확인하고 다음과 같이 Platform이 WebGL로 전환되어야 합니다.

 

(6) 플레이어 설정에 들어가면 Unity 2022.x에서 Graphics API에 WebGL 2 사양만 있는 것을 볼 수 있습니다. 이전 사양을 선택하는 것에 대해 걱정할 필요가 없습니다^^.

 

(7) Unity의 Build Settings로 돌아가서 Build And Run을 누릅니다.

~ 잠시 쉬세요, 컴퓨터가 출력을 실행하는 데 시간이 걸릴 수 있습니다 ~

 

(8) 이제 브라우저가 팝업되어 게임 파일 다운로드를 시작해야 하며 Unity가 자체적으로 웹 호스팅 역할을 하기 때문에 브라우저의 URL은 로컬 관련 URL이 됩니다. 로딩이 완료되면 이 연결 게임을 테스트할 수 있습니다!!

 

(9) 마지막으로 WebServer/WebGL 호스팅 플랫폼에 퍼블리싱을 하고 싶다면 Unity 프로젝트로 이동하여 WebGL의 출력 위치를 찾아 모든 파일을 패키징 및 업로드하고 URL을 퍼블리싱하면 됩니다.

 

itch.io를 예로 들면, 공식 웹사이트에서 계정을 신청하고 새 프로젝트를 생성하기만 하면 프로젝트 정보 페이지에서 몇 가지 설명과 설정을 입력할 수 있습니다. 예를 들어 Fusion Golf 설정은 다음과 같습니다.

itch.io의 설정은 간단하고 이해하기 쉽습니다.

 

같은 페이지에서 Uploads를 찾아 Unity의 WebGL에서 출력한 디렉토리를 Zip 파일로 패키징하고 이 페이지에 업로드하여 저장합니다.

"이 파일은 브라우저에서 재생될 것입니다."라는 아주 중요한 부분에 주목하세요. 플레이어가 브라우저에서 게임을 실행할 수 있도록 반드시 확인해야 합니다!

 

Unity 출력 프로젝트를 업로드합니다.

 

itch 프로젝트 페이지에 저장한 후 오류 메시지가 표시되면 itch 문서를 참조하여 해결해 주시길 바랍니다. 게임이 아직 실행되지 않은 상태에서 발생하는 에러는 기본적으로 Photon SDK와 관련이 없기 때문입니다.

 

(10) 바로 itch에서 제공하는 프로젝트 URL을 자신의 브라우저에 입력하고 프로그램을 다시 다운로드하여 재생할 수 있습니다!!

 

연결 및 재생 부분은 본 기사 앞서 영상에 조작법이 있으니, 여기서는 말로 설명하지 않고 영상의 내용을 직접 보시면 이해가 쉽습니다.^^

 

・・・

 

다음으로 Quantum Blueless 실행 화면을 살펴 보겠습니다.

Quantum Blueless, 2D 플랫포머 게임.

 

보다 완벽한 WebGL 연결 실행의 효과는이 기사의 앞서 부분에 있는 비디오 링크에서 확인해 주세요. 아직 보지 않았다면 먼저 확인하는 것을 권장합니다!

 

본 프로젝트의 기술 해설은 Photon 공식 사이트에 게재되어 있으므로 아래를 참조하시길 바랍니다.

https://doc.photonengine.com/zh-TW/quantum/current/game-samples/blueless

 

 

마무리

위의 소개와 구현을 예제로 일부 이해한 후, 제품 또는 게임 아이디어를 개발하거나 추가로 개발할 수 있어야 합니다. 아이디어가 없으면 WebGL에서 다른 개발자나 게임을 참고할 수도 있습니다. 플랫폼은 그렇게 하고 모방에서 시작하려고 하면 개발 프로세스와 구조에 익숙해지면 더 많은 경험과 아이디어를 실현하는 능력을 갖게 될 것입니다! 🎯

Fusion SDK의 정확한 클록 Tick 기반 개념 아키텍처 또는 Quantum SDK의 ECS 코어를 통해 이러한 아키텍처가 캐주얼 게임이든 강렬한 실생활이든 많은 게임이나 애플리케이션에 사용할 수 있으며 무료로 플레이할 수 있습니다. 미래의 멀티버스에서는 확실히 더 많은 개발을 할 수 있을거라 믿습니다. 🚀