webvr-musicalforest

KO | EN

gitlite — search

#python #react #llm #go #android #deep-learning #docker #java #windows #awesome #kubernetes #vue #awesome-list #ios

webvr-musicalforest

(★ 171)

Join users from around the world in a musical forest. A WebVR Experiment.

File Explorer

Download Latest Version (.zip)

- - config.js
  - index.js
  - s11n.js
  - store.js
- .babelrc
- .gitignore
- package.json
- README.md
- - background-objects.js
  - ball.js
  - bg-tree-ring-material.js
  - clicker.js
  - controller-material.js
  - controllers.js
  - copresence-server-messages.js
  - copresence-server.js
  - daydream-manager.js
  - daydream-pointer.js
  - fake-light.js
  - ga.js
  - gaze.js
  - grab-move.js
  - haptics.js
  - headset-material.js
  - listener.js
  - palette.js
  - proximity-check.js
  - quaternion.js
  - smooth-motion.js
  - teleport.js
  - tone.js
  - tool-tips.js
  - touch-color.js
  - tree.js
  - wasd-boundaries.js
- - color-set.js
  - colors.js
  - instrument.js
  - instruments.js
  - shape-data.js
  - shapes.js
- - note-head-cube.js
  - note-head-sphere.js
  - note-head-tetra.js
  - note-head.js
  - note-shadow-cube.js
  - note-shadow-sphere.js
  - note-shadow-tetra.js
  - note-shadow.js
  - note-stem.js
  - note.js
- - ball-shader.js
  - bg-tree-shader.js
  - circle-shader.js
  - shader-chunks.js
- - browserCheck.js
  - random-range-1d.js
  - random-range-3d.js
  - tetrahedron.js
  - trace.js
- ascene.js
- index.js
- orientation-arm-model.js
- splash.js
- util.js
- - __init__.py
  - api_fixer.py
  - api_fixer_test.py
  - constants.py
  - handlers.py
  - handlers_test.py
  - models.py
  - models_test.py
  - xsrf.py
  - xsrf_test.py
- __init__.py
- country_servers.py
- handlers.py
- main.py
- main_test.py
- - bg.mp3
  - bg.ogg
- - Platform-Light-Web.eot
  - Platform-Light-Web.woff
  - Platform-Light-Web.woff2
  - Platform-Medium-Web.eot
  - Platform-Medium-Web.woff
  - Platform-Medium-Web.woff2
  - Platform-Regular-Web.eot
  - Platform-Regular-Web.woff
  - Platform-Regular-Web.woff2
- - aboutbg.gif
  - ball_circles_134.png
  - ball_circles_567.png
  - ball_squares_134.png
  - ball_squares_567.png
  - ball_triangles_134.png
  - ball_triangles_567.png
  - cardboardInstructions.gif
  - error_full.gif
  - error_hit.gif
  - error_knock.gif
  - error_shake.gif
  - favicon.png
  - fbshare.jpg
  - friends_with_g@3x.png
  - Headphone.png
  - headphones@3x.png
  - loader.gif
  - mobile-trees.png
  - MusicalForest.gif
  - SplashDesktopHiR.jpg
  - SplashDesktopMedR.jpg
  - SplashMobileHiR.jpg
  - SplashMobileHiRes2.jpg
  - toot_tip_left.png
  - toot_tip_right.png
  - twittershare.jpg
  - webVR_experiment@3x.png
- - bg-tree-1.obj
  - bg-tree-2.obj
  - bg-tree-3.obj
  - bg-tree-ring.obj
  - controller.dae
  - door-frame.obj
  - door-glow.obj
  - door.dae
  - headset.dae
  - stump-shadow.obj
  - stump.obj
  - target.obj
- splash.scss
- - daydream-controller.js
  - LICENSE
  - METADATA
.gitignore
app.yaml
config.js
config.template
CONTRIBUTING.md
index.html
LICENSE
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<table>
 <tr>
 <td>
 This project is no longer actively maintained by the Google Creative Lab but remains here in a read-only Archive mode so that it can continue to assist developers that may find the examples helpful. We aren’t able to address all pull requests or bug reports but outstanding issues will remain in read-only mode for reference purposes. Also, please note that some of the dependencies may not be up to date and there hasn’t been any QA done in a while so your mileage may vary.
 
 For more details on how Archiving affects Github repositories see <a href="https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-archiving-repositories">this documentation </a>.
 
 We welcome users to fork this repository should there be more useful, community-driven efforts that can help continue what this project began.
 </td>
 </tr>
</table>

# Musical Forest

Musical Forest is a multiplayer musical experiment in virtual reality. It uses copresence —the synchronization of multiple people in a virtual space— to allow people to play music together in VR. WebSockets are used to sync all of the connected players in real-time.

Musical Forest, a [WebVR Experiment](https://webvrexperiments.com/).

## Basic Interaction

Each of the shapes triggers a note when it’s hit. Users can navigate the space, play notes and also hear and play with all of the other players in the space at the same time. 
 
![alt text](https://forest.webvrexperiments.com/static/img/MusicalForest.gif "The Musical Forest, mixed reality interaction example")

## Objects & Audio

There are three different shapes of musical objects corresponding to three different sets of sounds. Each set has six notes, chosen from a pentatonic scale.

* Spheres: Percussion (Conga, Woodblock, COWBELL!)
* Triangular Pyramids: Voice + Flute
* Cubes: Marimba

Sounds are positioned in 3D space using the Web Audio API’s PannerNode.

## Headsets & Interaction Models

Musical Forest responsively adapts features depending on the capabilities of the VR Hardware.

### Vive/Oculus

Play: hit the shapes with your controller to hear its sound. The volume of the sound changes depending on how hard you hit it. 
Create: tap the trigger to create a new shape. Rotate the circular pad to change the note. 
Rearrange: place the controller over an existing object, press and hold the trigger to grab it. Move your controller and release to move it to a new space. Hovering your controller over an object and rotating the circular pad will change the type of shape and it’s sound. 
Navigation: move within the bounds of your roomscale environment to interact with the objects within the experience.

### Daydream

Play: Hit the shapes with your controller to hear their sounds. 
Navigation: point the Daydream controller at the ground and a circle will appear. Press the main button on the controller to teleport to that highlighted spot.

### Cardboard

Play: gaze at an object and see it glow. Tap the interaction button to hear that object. 
Navigation: gaze at the ground and a circle will appear. Tap the interaction button to teleport to the highlighted spot.

### Magic Window

Interaction: tap any object to hear the sound of that object. 
Navigation: gaze at the ground and a circle will appear. Tap anywhere to teleport to where the reticle is pointing.

### Desktop

Interaction: use the mouse to click any object to hear its sound. The volume of the sound is dictated by the object’s distance from the user. 
Navigation: use the WASD keys on the keyboard. Use the mouse to change the field of view by clicking in empty space and dragging.

## Technologies Used
### Frontend

Musical Forest uses [A-Frame](https://aframe.io) which is built with the WebVR standard and [Tone.js](https://github.com/Tonejs/Tone.js/) for sound.

### Backend

The backend is developed in Node.js. To get a full overview of the technologies and libraries used, see the [backend readme](backend/README.md#Description)

## Running the Frontend Code

Download the source code, and install all dependencies by running `npm install`. To run the frontend, run `npm start`, this will start a local webserver using `budo` connecting to the default backend server. If you have a local backend server running, append `?server=localhost` to the url.

## Acknowledgements

[Manny Tan](https://github.com/mannytan), [Igor Clark](https://github.com/igorclark), [Yotam Mann](https://github.com/tambien), [Alexander Chen](https://github.com/alexanderchen), [Jonas Jongejan](https://github.com/halfdanj), [Jeremy Abel](https://github.com/jeremyabel), [Saad Moosajee](https://github.com/moosajee), Alex Jacobo-Blonder, [Ryan Burke](https://github.com/ryburke), and many others at Google Creative Lab.

webvr-musicalforest

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

webvr-musicalforest

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README