DrumTutorVR

Inspiration

With so many applications in education for virtual reality, we wanted to see if we could make an application to help someone learn an instrument. We decided on a virtual drumset since compared to most instruments, a drum has large objects that take much less precision to interact with compared to the small keys of a piano, or the strings on a guitar or violin.

What it does

The project provides the user with a playable drum set in VR.

How we built it

We decided to use the A-Frame library to create this VR experience on the web. We chose this library since compared to a VR application created in something like Unity or Unreal Engine, web applications are much more easily shared. The assets were modeled in Autodesk Maya and exported as OBJ to be imported by the model loader used by A-Frame.

Challenges we ran into

Most of the problems we ran into stemmed from our inexperience with the A-Frame library since neither of us had used it before. Some of these problems include:

• Getting a physics to work in A-Frame; since there is no built-in physics engine, a community built one must be incorporated and there aren't many documented examples to get started with
• Applying textures onto custom objects; apparently, .mtl files generated by Maya are unusable by the three.js object loader used by A-Frame
• Mesh colliders; we weren't able to find a way to apply a mesh collider to an object, and it would use a large box collider by default

Accomplishments that we're proud of

• Modeled the entire drum set, drumsticks, stage, and speakers in a short amount of time
• Managed to get the physics engine to work, although not perfectly. We were able to make the drumsticks be able to be picked up and thrown by the user

What we learned

The most important we learned about the A-Frame library is that in its current state (v0.7.1) it is not very robust. It can be very well suited for creating VR experiences that are meant to be viewed, but when creating an application with more complicated interactions, it can become difficult due to lack of official documentation on using the community-made libraries with the A-Frame core library.

What's next for DrumTutorVR

We would like to implement a crowd that cheers when you play correctly. We would also like to implement a system which allows you to enter midi tracks of drum performances which provides visuals on the drumset in front of the player so that the player can learn to play a particular song.

Built With

• a-frame
• javascript