Contents

<aside> 📖 개요

참고 및 레퍼런스

작업 현황표

</aside>

개요

피아노를 처음 배우는 사람들에게 큰 벽으로 느껴지는 것은 막연하게 그냥 치는 것 자체일 수도 있지만, 악보를 보는 법을 아는 것이 어렵다는 것 또한 있을 것이다. MR 기술을 이용해서 실제 피아노에 떨어지는 노트를 보고 연습할 수 있다면 더 흥미를 가지고 피아노를 배워나갈 수 있을 것이다.

배경

피아노를 연습하려고 할 때 악보를 보는 법을 배우는 것이 너무 어려웠다. 악보를 보는 법을 모르니 피아노 연습에도 시간이 걸리게 되었다. 악보를 보는 법을 잘 모르는 초심자에게도 직관적으로 피아노를 치는 방법을 재미있게 제공하는 방법이 없을까 고민하게 되었다. 최근 VR 기기들의 가격이 점점 낮아지고 있는 추세이기 때문에 VR 기기를 이용한 피아노 연습 서포터를 만들어 보는 것은 어떨까 생각되어 주제를 잡게 되었다.

기능

연습 모드	배속 조절, 구간 반복, 노트 입력 대기
연주 모드	노트 입력 대기X, 레코드(정확도, 랭킹 등), 연주 녹화(MIDI)
리플레이 모드	녹화된 미디파일 재생, 비교 재생 옵션
사용자 프로필	어플리케이션 내에서 이름, 이미지 등 변경
커리큘럼	하농 체르니 같이, 올클리어시 뱃지
랭킹	정확도를 기준으로 임의의 곡에 대한 다른사람과의 경쟁 시스템

AR을 사용한 피아노 연습 모드
- 전자피아노의 연결을 통해 제대로 건반을 눌렀는지의 여부 확인
실시간으로 연주하고 성과를 확인하는 실전 모드
- 사용자의 올바른 건반 입력이 들어올 때까지 기다리는 연습모드와 다르게 선택한 곡의 속도에 맞춰 떨어지는 노트를 최대한 완성도 있게 연주하는 모드.
곡의 연습에 대한 성과(정확도 등의 요소)를 데이터베이스에 저장, 연동해서 다른 사용자와의 성과를 통한 경쟁
날짜별로 연습의 성과를 저장해서 사용자의 연습 스케줄링

참고 및 레퍼런스

https://www.youtube.com/watch?v=kLQsUIS01nM

관련 링크

깃허브 레포지토리

https://github.com/ayuriK152/Crescendor

Figma

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FWcSby2ooOQACX2nGX7sUeb%2FUntitled%3Ftype%3Ddesign%26node-id%3D0%3A1%26mode%3Ddesign%26t%3DwIc6epNA3LnFNfRO-1

구글드라이브(문서)

발표 자료

서버 관련

회의록

김창호	이원섭	조한웅	한유빈
자료조사

Unity+Node.js 연동
Unity 소켓 클라이언트 구성
AWS 환경 구성 | 자료조사
MIDI 입출력 방법 모색
연습/연주 기능의 실구현 가능 여부 테스트
프로젝트 설계를 위한 여러 가지 레퍼런스 자료 조사 | 자료조사
MIDI 데이터
악표표시 알고리즘
음악 이론 자료 | 자료조사
AR 구현 방식 조사 - Marker / Markerless
XR Interaction 활용 범위 조사
Unity 내장 AR 라이브러리 / XR Interactor조사 | | 설계
DB 테이블 설계
서버-클라이언트 통신 데이터 정의
서버 환경 설계 | 설계
미디 파일 처리 및 유니티 클라이언트에서의 표현
미디 입력 신호 처리
주요 개발 구현 기능 시나리오 | 설계
MIDI 데이터 해석
악보표시 알고리즘
연주 정확도 알고리즘
UI 설계 | 설계
피아노 너비 계산 방법
핸드트래킹의 이벤트 처리 방식 구상 | | 구현
서버 환경 구성
DB 구현
서버 구현 | 1. 연습 모드(고정 노트 생성, 반복 섹션 구현, 배속조절, 연습기록 저장 및 통계)구현
연주 모드(실시간 노트 판정, 연주 기록 저장, 랭킹 시스템 )구현
사용자의 연주 정확성 판단 기능 구현 | 구현
악보 표시 및 이동 기능 구현
미디 녹화 및 리플레이
UI 구현
서버 정보 연동 | 구현
AR 노트 생성
XR Hands Interaction - HandTracking 구현 및 XR UI 이벤트 처리 | | 1. http 통신 테스트
로그인 테스트
기록 저장 및 조회 테스트
api 테스트 | 1. 미디 입력 처리 테스트
오픈소스 라이브러리를 사용한 미디 파일 로드
하드웨어 기기(피아노)의 연결 | 테스트
악보 표시 테스트 | 테스팅
XR Hands의 이벤트 처리
OpenCV로 피아노 인식
인식한 위치에 AR 노트 생성 |

참가 인원

김창호

golapaduck - Overview

이원섭

ayuriK152 - Overview

조한웅

johwoong - Overview

한유빈

onenewkong - Overview

기술

미디의 입출력

기본적으로 전자피아노의 입력을 받고 이게 맞는지 확인하려면 미디의 입출력 처리가 필요하다. 당연히 출력은 우리가 미디 파일을 읽어서 GUI로 보여주는 것이 될 것이고, 입력은 키보드로 부터의 입력이 될 것이다.

DRYWETMIDI라는 아주 좋은 오픈소스가 존재하는데, 이를 이용해서 미디의 입출력 처리를 할 수 있을 것으로 보인다.

https://github.com/melanchall/drywetmidi

미디의 정보를 읽어들이고 이를 오브젝트로 표현하는 것이 과제다.

개발환경

OS: Windows10, 11

개발 툴: Unity 2022.3.3f1

IDE: visual studio 2022, visual code

언어: C#, Javascript, SQL

라이브러리: xr interaction toolkit, xr hands, AR Foundation, DrywetMIDI, SmfLite (일부 리팩토링)

배포: AWS(Ubuntu 64-bit)

서버: Node.js

서버 프레임워크: express.js

DB: MySQL

빌드환경

PC (Windows)

중간점검 보고 페이지

데모 피드백에 대한 해결 방안

[2024.07.11] 한유빈 오큘러스 UI

작업용 매크로

작업 현황표

개인메모장