beta
cables is under heavy development.
There might be one or another bug, please let us know about it!
cables Documentation      How To Use            Working with files            Keyboard Shortcuts            User Interface Walkthrough      Beginner Tutorial            Beginner 1: Drawing A Circle            Beginner 2: Transformations            Beginner 3: Color            More Transformations      intermediate            Image Compositions            Post-Processing 3D Scenes      communication            cables API            Communication with an Arduino via Serial            Communicating with Arduino over MQTT      Exporting And Embedding            How to serve files externally and fix CORS headers            Embedding Patches            External triggers / functions            Embedding Patches            Previewing / uploading exported cables patches      coding ops            Creating Attachments            General op/Port Callbacks            Ports                  Dynamic Ports                  Array Ports                  Boolean ports                  Integer Number Ports                  Object Ports                  String ports                  Trigger Ports                  Floating Point Number Ports            GUI/UI attributes            Hello Op - Part 1            Libraries            Developing Ops            Guidelines            Object Ports            Writing Shaders            Web Audio Op Development      HTML and CSS in cables      Lighting            Lights            Shadows      FAQ            Embedding                  How to remove grey rectangles on touch (mobile)?                  Why doesn't the DownloadTexture op work on iOS?                  How to disable page scrolling on mobile?                  Transparent Canvas            Features and Support                  Will there be support for (animated) GIFs?            General questions            Licences and payment                  What licence do i need to use cables?                  Will I have to pay for it in the future?                  How is my work licenced when using cables?            Does cables support midi and OSC?            Shadertoy            Technical questions            UI / Editor            Guide to VR in cables            WebGL1 and WebGL2

Guide to VR in cables

This guide will help you get started with using a virtual reality headset inside of cables. Please be aware this is very experimental software.

VR in the web browser is currently only working with firefox on desktop and laptops.
On mobile it will work with IOS and android.

Currently tested headsets are the Oculus rift and the Vive.
To test on mobile make sure to go to your view patch screen and then click open in new window. If you now press the VR icon your patch can be tested in fullscreen with two rendered views.

On desktop and laptops make sure that your VR software isn't running before you start the example patch.
It's a good idea to make sure that VR auto start is disabled when you put on the headset. This is to make sure that when firefox wants to connect that there's nothing else running which could interfere with the process.

This example patch will show a simple interactive environment that can be used to test your VR setup.
Be aware that using an op like WASDcamera can override the head tracking and stop it working.

If the VR headset is correctly connected and you start the patch then a pop up will appear requesting permission to allow firefox to access the VR headset.
If the pop up doesn't appear then close firefox and check that the VR headset is working in some other software.

The MainloopWebVr op can function as a normal mainloop op or as a VR mainloop op.
VR Mainloop will render twice, once for each eye.

To start VR a user interaction is always required.
Click the VR headset icon in the top right corner to start. It may take a few seconds for it to connect.
You should now be able to look around the scene.
The raycasting ops allow you to interact with objects by looking at them.

####Tips and troubleshooting:

  • Resolution. For slow devices it's a good idea to use the scale resolution option. Setting it to 0.5 will render half of the reported resolution.
  • Disabling resize canvas on desktop is recommended. Most of the time 1920 x 1080 is more than enough and has to be rendered once for each eye. Using the resolution of a widescreen monitor will cause most headsets to render incorrectly.
  • Mobile VR uses a WebVR polyfill to simulate a VR headset. This means that patches can be made to work with low end units like the google cardboard.
  • You may need to enable certain permissions like the accelerometer and device orientation on a mobile device to allow the VR polyfill to work.

help cables get better and edit this file on github