메타버스는 국내 기업 및 대학 등 다양한 분야에서 관심을 갖고 활용하고 있는 기술로 이번 프로젝트에서 다방면으로 활용 가능한 웹기반의 메타버스 플랫폼을 제작할 예정이며, 이 프로젝트로 많은 사람들이 웹상에서 다양한 공간에 대해 쉽게 접하고 필요한 정보를 얻어갈 수 있을 것으로 생각함
The Metaverse is a technology that is interested in and used in various fields such as domestic companies and universities, and we plan to create a web-based Metaverse platform that can be used in various ways in this project, so many people can easily access various spaces on the web and get necessary information.
외산 게임엔진에 대한 의존도를 낮추고, 웹에서 구동되는 메타버스 플랫폼 자체 개발을 목표로 함. 회사의 3D 콘텐츠 개발 기술력을 활용해 실증화 가능한 서비스 개발 목표
게임엔진(Unity, Unreal)을 활용한 메타버스 플랫폼 개발(VR/AR 기술 적용, 360도 파노라마 기능 개발)해 소상공인 및 지역경제에 기여할 수 있는 맞춤형 기능 구현
범용적인 플랫폼 개발을 위한 Web 3D 기반 Three.js Babylon.js 등 타입스크립트를 활용한 콘텐츠 개발
Unity3D와 360도 카메라(insta130 ONE X2)를 사용하여 메타버스 플랫폼 개발. 제작한 플랫폼으로 공대 1층 SW빌리지를 구현해 다양한 기능을 넣어 제작. 만들어진 기능은 이후에 소상공인을 위한 콘텐츠 제작에서도 사용될 수 있게 제작.
It aims to reduce dependence on foreign game engines and develop its own web-powered Metaverse platform. The goal is developing services that can be demonstrated using the company's 3D content development technology.
We well develop a Metaverse platform using Unity (Unreal) (application of VR/AR technology, development of 360-degree panorama function) to implement customized functions that can contribute to small business owners and the local economy.
The Metaverse contents will be developed using scripts such as Web 3D-based Three.js and Babylon.js for general-purpose platform development.
After distributing the produced platform, various festivals, travel destinations, and unique places in the region can be used as Metaverse games or virtual experiences through avatars. By modifying and utilizing the platform with various contents, it can contribute to small business owners and the local economy.
제작된 플랫폼을 배포 후 다양한 축제나 여행지, 지역의 특색있는 장소를 아바타를 통한 메타버스 게임이나 가상체험 등으로 사용될 수 있음. 플랫폼을 다양한 콘텐츠로 수정, 활용할 수 있도록 하여, 소상공인 및 지역경제에 기여할 수 있도록 함.
After distributing the manufactured platform, various festivals, travel destinations, and unique places in the region can be used as Metaverse games or virtual experiences through avatars.
The platform can be modified and utilized with various contents so that it can contribute to small business owners and the local economy.
코로나19 여파로 콘서트나 페스티벌과 같이 많은 사람들이 모이는 대부분의 행사들은 연기되거나 없어지는 등 시행되기 어려워지게 되었고, 상황에 따라 비대면으로 진행된다. 이러한 상황으로 인해 메타버스는 다양한 분야에서 더욱 주목받고 있다. 때문에 이제까지 진행되기 어려웠던 다양한 행사들이 현실이 아닌 메타버스 속에서 충분히 이루어질 수 있을 것이라 기대된다.
메타버스는 국내 기업 및 대학 등 다양한 분야에서 관심을 가지고 활용하고 있는 기술로, 현실 세계와 같은 사회, 경제, 문화 활동이 이뤄지는 3차원 가상세계를 일컫는 말이다. 메타버스에서는 아바타를 활용해 단지 게임이나 가상현실을 즐기는 데 그치지 않고 실제 현실과 같은 문화적, 사회적 활동을 할 수 있다. 또한 자신의 캐릭터를 골라 다른 사람과 소통할 수 있고, 메타버스로 제작된 맵에 만들어진 다양한 기능을 사용할 수 있다.
유니티 또는 언리얼 엔진을 이용해 개발을 하게 되면 사용자는 애플리케이션을 설치하고 사용해야 한다. 하지만 사용자의 입장에서는 일회성으로 사용하기 위해서 설치를 해야만 한다는 점이 비효율적으로 느껴질 수 있다. 때문에 해당 행사 이후에는 사용량이 줄어드는 것이 일반적이다. 이러한 이유로 애플리케이션 설치를 하지 않고도 웹사이트를 통해 바로 접속해 실행할 수 있는 babylon.js를 사용해 메타버스를 개발하는 것이 조금 더 사용자들이 편리하게 사용할 수 있을 것이라 생각된다.
최종적으로는 개발하고자 하는 메타버스 플랫폼이 소상공인 및 지역 경제에 기여할 수 있는 기능을 가진 플랫폼이 되도록 개발하고자 한다.
In the aftermath of COVID-19, most events where many people gather, such as concerts and festivals, have become difficult to implement, such as being postponed or disappeared, and depending on the situation, they are conducted non-face-to-face. Due to this situation, the Metaverse is attracting more attention in various fields. Therefore, it is expected that various events that have been difficult to proceed so far will be fully carried out in the Metaverse, not in reality.
The Metaverse is a technology that is used with interest in various fields such as domestic companies and universities, and refers to a three-dimensional virtual world in which social, economic, and cultural activities such as the real world take place. In the Metaverse, you can not only enjoy games or virtual reality by using avatars, but also engage in cultural and social activities such as real life. You can also choose your character to communicate with others, and use various functions created on a map made of the Metaverse.
When developing using Unity or Unreal engines, users must install and use applications. However, from the user's point of view, it may feel inefficient that it must be installed for one-time use. Therefore, it is common for usage to decrease after the event. For this reason, I think it will be more convenient for users to develop a metaverse using Babylon.js, which can be accessed and executed directly through the website without installing an application.
Finally, the metaverse platform to be developed is intended to be a platform with a function that can contribute to small business owners and the local economy.
메타버스 플랫폼을 제작하기 위해 사용할 오픈소스 “babylon”은 해외에서 많이 사용되고 있다. 하지만 국내에서는 해외에 비해 매우 적은 수인 2-3개 정도의 기업만이 해당 소스를 사용하고 있다. 때문에 관련 자료를 통한 공부와 개발을 위한 기본 환경을 설정하기에 여러 어려움이 있었다.
이러한 문제점을 해결하기 위해 협업체인 “더 픽트”와의 회의를 진행하였고, 기업체에서는 앞으로 진행할 방향성을 잡아주시는 것뿐만 아니라, 개발을 위한 기본 설정, 기초적인 예제, 에셋 제공 등 많은 도움을 주시고 있다. 현재는 제공받은 자료들을 통해 관련 언어 공부를 진행 중에 있으며, 추후 중간고사 이후에 본격적인 메타버스 플랫폼 개발을 진행할 예정이다.
360도 카메라를 이용해 공학관 일부를 촬영, 해당 이미지를 유니티를 활용해 VR 콘텐츠 제작을 진행해 보았으나, 이미지가 자연스럽게 이어지지 못했다. 이와 관련된 내용은 조금 더 공부 후에 플랫폼 개발이 진행되는 상황을 보면서 추가하는 방향으로 계획 중이다.
현재 공부하고 있는 내용들은 깃허브에 모두 업로드하는 중.
The open source "babylon" used to create the metaverse platform is widely used overseas. However, in Korea, only 2-3 companies, which are very few compared to overseas, use the source. Therefore, there were many difficulties in setting up a basic environment for study and development through related data.
In order to solve these problems, we held a meeting with our cooperative company, "The Pict," and not only helped us to set the direction of the future, but also to provide basic development, basic examples, and assets. Currently, we are studying related languages through the provided materials, and we plan to develop a metaverse platform in earnest after the midterm exam in the future.
We filmed part of the engineering center using a 360-degree camera and tried to produce VR contents using the image, but the image did not continue naturally. The related content is planned to be added while watching the development of the platform after further study.
We are uploading all the contents I'm currently studying on GitHub.
- 3월 7~14일 : Github repository 작성, 프로젝트 신청서 작성, 추가할 기능 찾아보기
- 3월 15~21일 : 360 카메라 사용법 익히고 이미지 활용해 만들어보기
- 3월 22~28일 : 더 픽트 회의, babylon 기본 환경설정 세팅, 구 제작
- 3월 29일~4월 4일 : babylon 개인 공부, camera 활성법, light 종류, material과 texture 예제 수행
- 4월 5~11일 : model 관련 확장자 및 방식, babylon scene의 debug 및 inspector, hierachy 보는 법
더 픽트에서 제공해 주시는 babylon 내용을 충분히 숙지한 후 회의를 통해 메타버스 플랫폼 개발 시작.
공학관 1층의 소프트웨어 빌리지를 예시로 하여 여러 기능들을 추가한 메타버스 플랫폼 제작
After fully understanding the Babylon content provided by The Pict, we will start developing the Metabus platform through a meeting.
Using the software village on the first floor of the engineering building as an example, the Metaverse platform with various functions added
다방면으로 활용 가능한 웹 기반의 메타버스 플랫폼 개발과 동시에 Unity 프로젝트도 제작함.
At the same time as developing a web-based metaverse platform that can be used in many ways, the Unity project is also produced.
[Babylon.js]
구현부분 자세히 보러가기
- main 화면에 공학관 및 그 주변을 구현하기 위해 tree 에셋을 복제해 여러 개를 생성하고 잔디 부분은 material을 사용해 mapping 함. 공학관 건물은 blender를 사용해 제작함.
- camera는 target을 player로 설정해 따라다닐 수 있게 함.
- player는 w와 s로 앞뒤 이동, a와 d로 rotation.y 값을 변경해 좌우 이동을 적용해 주고, 걷는 효과를 위해 walk 애니메이션을 적용함.
- 특정 위치에 있는 버튼 클릭 시 다음 장소로 이동 및 360 이미지를 메타버스 안에서 구현함. 이때 클릭 값을 이용해 scene 전환을 해줌.
Get a closer look at the implementation
- In order to implement the engineering center and its surroundings on the main screen, several tree assets are duplicated and the grass part is mapped using material. The engineering building is built using blender.
- Camera sets target to player so that it can follow.
- The player moves back and forth with w and s, changes rotation.y values with a and d to apply left and right movement, and applies walk animation for walking effect.
- When you click a button in a specific location, you move to the next location and implement the 360 image in the Metaverse. At this time, use the click value to change the scene.
[Unity]
구현부분 자세히 보러가기
- main 화면에 공학관 및 주변을 구현하기 위해 여러 에셋들을 구매, 배치함.
- camera는 player의 자식으로 넣어주어 player의 시점으로 보일 수 있게 함.
- player는 w, a, s, d로 상하좌우 이동, space로 점프, 마우스로 시야 이동을 적용해 줌.
- 특정 point에 충돌 시 메뉴창을 통해 원하는 서비스를 선택할 수 있게 함.
- 메뉴 창에는 <멘토링 실 예약 시스템>, <360 이미지로 둘러보기>, <각 층의 정보제공> 등의 기능을 추가함.
- <멘토링실 예약 시스템>은 panel에서 예약할 멘토링 실과 시간대를 선택하면 예약이 완료 메시지가 보이도록 적용해 줌.
- <360 이미지로 둘러보기>는 먼저 360 카메라로 이미지를 촬영 후 sphere, material을 생성함. 그 후 inspector 창에서 이미지와 material을 cubemap 형식으로 변경, 적용해 줌. 추가적으로 버튼 이벤트를 만들어 다른 이미지로의 scene 이동을 적용함.
- <각 층의 정보제공>은 panel에서 정보 리스트를 작성 후 버튼 이벤트를 만들어 다른 리스트로의 scene 이동을 적용함.
Get a closer look at the implementation
- Purchased and placed several assets to implement the engineering center and surroundings on the main screen.
- Camera is put as a child of the player so that it can be seen as a player's point of view.
- The player moves up and down in w, a, s, and d, jumps in space, and moves the field of view with the mouse.
- Allows you to select the desired service through the menu window in case of a conflict with a particular point.
- In the menu window, functions such as , <360 image tour>, and are added.
- is applied so that you can see the completion message when you select the mentoring room and time zone to reserve on the panel.
- <360 Image Tour> first takes an image with a 360 camera and creates spheres and materials. After that, the image and material are changed to cubemap format in the inspector window and applied. Additionally, a button event is created to apply the scene move to another image.
- creates an information list on the panel and creates a button event to apply the scene movement to another list.
COVID-19의 여파로 많은 인파가 모이는 행사들은 대부분 연기되거나 시행되기 어려워졌고, 상황에 따라 일부는 비대면으로 진행되고는 했다. 상황이 나아지지 않고 지속되자 비대면으로 웹상에서 행사를 즐기는 등 다양한 문화적, 사회적 활동을 할 수 있는 메타버스가 더욱 주목받기 시작했다. 그로 인해 다방면에서 메타버스를 찾는 등 해당 기술에 대한 수요가 많아졌다.
따라서 이전의 프로그램들과 달리 사용자의 관점에서 접근하고 사용하기 편리하도록 웹에서 구동되는 메타버스 플랫폼을 개발하고자 한다.
In the aftermath of COVID-19, most of the events where large crowds gathered became difficult to postpone or implement, and depending on the situation, some were conducted non-face-to-face. As the situation continued without getting better, metaverse, which allows people to engage in various cultural and social activities, such as enjoying events on the web non-face-to-face, began to attract more attention. As a result, demand for the technology has increased, such as finding the Metaverse in various fields.
Therefore, unlike previous programs, we intend to develop the Metaverse platform that is driven on the web to be accessible and convenient to use from a user's point of view.
과제를 진행하기에 앞서 플랫폼 개발에 사용할 언어인 <Babylon.js>에 대해서 이전에 배우고 사용해 본 경험이 전무하기에 이 부분에 대해서 (주) 더 픽트에서 도움을 받아 해당 언어에 대해서 공부하는 기간을 가짐.
Before proceeding with the task, I have no previous experience learning and using <Babylon.js>, the language to be used for platform development, so I have a period of time to study the language with help from The Pict.
- 4월 12~5월 1일 : event 종류(window의 event와 babylon의 event)와 instance, clone의 개념과 예제에 대해 공부함
- 5월 2~15일 : class(js형 클래스와 ts형 클래스)와 waterMaterial, shadow, hl(highlight), glow의 개념과 예제에 대해 공부함
- 5월 16~27일 : 개발 및 마무리
[초기 구현 계획]
[개발 구조도]
㈜더 픽트에서 제공한 Babylon.js 예제를 공부, 활용하여 초기 구현 계획을 바탕으로 다음과 같이 메타버스 플랫폼을 개발함
배운 부분을 활용하여 개발할 수 있는 부분에 대해서는 Babylon.js로 최대한 구현하였으나, 한 학기라는 한정적인 기간 안에서 개발에 필요한 모든 부분에 대해 배우기에는 시간적인 한계가 존재했음. 따라서 구현하지 못한 부분은 다음과 같이 Unity로 추가 구현함 프로젝트로 개발한 메타버스 플랫폼(Babylon.js , Unity)과 유사한 아이템으로는 (주) 더 픽트에서 개발한 춘천 커피도시 페스타(https://metaverse.cccf.co.kr/) 가 존재
해당 아이템은 메타버스를 구현해 내부에서 플레이어를 이동시키며 다른 유저와 게임, 소통 등 다양한 기능을 즐길 수 있음. 뿐만 아니라 춘천의 5대 커피거리의 주요 지형물을 통해 카페들에 대한 360 이미지와 정보를 제공함
우리 프로젝트는 해당 플랫폼이 제공하는 기능에 예약 시스템을 추가하여 추후에 소상공인들이 플랫폼을 제공받아 사용할 경우에 음식 주문, 자리 예약 등으로 바꾸어 활용 가능하도록 만듦
Based on the initial implementation plan by studying and utilizing Babylon.js example provided by The Pict Co., Ltd Developed a metaverse platform as follows
Babylon.js implemented the parts that can be developed using the learned parts as much as possible, but there was a time limit to learn all the parts necessary for development within a limited period of one semester. Therefore, the parts that have not been implemented are further implemented as Unity as follows: Similar items to the Metaverse platform (Babylon.js, Unity) developed by the project include Chuncheon Coffee City Festa (https://metaverse.cccf.co.kr/)) developed by The Pict Co., Ltd
This item implements a metaverse, moves players from inside, and can enjoy various functions such as games and communication with other users. In addition, 360 images and information on cafes are provided through the major topography of Chuncheon's five major coffee streets
Our project adds a reservation system to the functionality provided by the platform so that small business owners can use it by ordering food, booking seats, etc. when they receive and use the platform in the future
본 프로젝트의 결과물로 누구나 360 이미지를 통해 한림대학교 공학관의 소프트웨어 빌리지 및 북 카페의 시설 현황과 강의실, 연구실 등에 대한 위치정보를 제공받을 수 있음. 뿐만 아니라 자율적으로 멘토링 실을 대여해 사용 가능. (babylon.js로는 360이미지로 시설 현황까지만 제공 가능)
소프트웨어 빌리지를 이용하는 학생이라면 멘토링 실을 예약하기 위해 해당 부서를 방문해야 하는 수고로움이 줄어드는 동시에 시간 절약 또한 가능. 신입생과 외부인에게는 학교 시설을 접할 수 있는 기회 제공
시간적인 여유와 개발 언어에 대한 추가적인 내용을 더 배울 수 있는 기회가 주어진다면 다양한 기능(디자인적인 부분과 더불어 멘토링실 예약 시스템, 강의실 정보 제공 등)을 추가하여 공학관 1층에 대한 메타버스 플랫폼(babylon.js) 개발을 추가적으로 진행할 예정
이후 제작된 플랫폼에 대해 다양한 콘텐츠로 수정, 활용하여 소상공인 및 지역 경제에 기여할 수 있을 것으로 기대됨
As a result of this project, anyone can be provided with 360 images of the current status of the software village and book cafe of Hallym University Engineering Center, and location information of the lecture room, laboratory, etc. In addition, the mentoring room can be rented and used autonomously (babylon.js can only be provided up to the current status of the facility in 360 images)
Less time-saving for students in software villages to visit the department to book a mentoring room, giving freshmen and outsiders access to school facilities
Given time and opportunity to learn more about the development language, we will add various functions (design, mentoring room reservation system, classroom information, etc.) to develop the Metaverse Platform (babylon.js) on the first floor of the engineering building
It is expected that the platform produced will be modified and utilized with various contents to contribute to small business owners and the local economy