GuidesReferenceIssuesSupportGet API Key


Adding video to your scenes

Viro supports various components for displaying video. Video can be displayed in 360 degrees, surrounding the user, or on a flat plane, simulating a physical video screen. Partially transparent video (or "alpha" video) is also supported through chroma-key filtering.

Video Texture

The VideoTexture object is used to render video. Because this extends Texture, it can be assigned to any Material, and from any Material to any Geometry and Node. In the example below, a VideoTexture is loaded onto a Surface, simulating a video screen.

VideoTexture videoTexture = new VideoTexture(context, uri);
Material material = new Material();

Quad quad = new Quad(10, 10);

Supported video formats are .mov, .mp4, .mpv, and .3gp. The video source may be a remote URL or a local file resource. To invoke with a remote URL, set the source to a URI. For example, Uri.parse(""). To load an asset as video, use URI's of the form file:///android_asset/[asset-name].

360 Video

Spherical videos that surround the user can be displayed via VideoTexture as well. To do this, simply assign the VideoTexture to the Scene's background, as shown below.

VideoTexture videoTexture = new VideoTexture(context, uri);

Alpha Video (Chroma Key Filtering)

Viro supports rendering partially transparent video over any VR, AR, or 3D scene. For AR scenes in particular, this enables "hologram" type experiences like Will.I.Am on CNN or Princess Leia in Star Wars.

Alpha video works via "chroma key filtering". Chroma key filtering removes (makes transparent) all colors from a video that are within an epsilon range of a target color. This technique is useful when rendering "green screen" or "blue screen" videos, as is commonly seen in newscasting and motion pictures. The videos in their raw form look something like the image below.

The code below shows how to enable chroma-key filtering, by invoking setChromaKeyFilteringColor(int) and setChromaKeyFilteringEnabled(bool) on the Material that houses the VideoTexture.

// Load the video
VideoTexture videoTexture = new VideoTexture(mViroView.getViroContext(), Uri.parse("URL to Video"));
// Place the video in a Material
final Material material = new Material();

// Enable chroma-key filtering on the Material

// Create a Quad on which the video will be displayed
Quad surface = new Quad(4, 4, 0, 0, 1, 1);

// Create a Node in which to house the Quad with the video
Node node = new Node();
node.setPosition(new Vector(0, 0, -3));

// Add the Node to the Scene

// Finally, play the video;

Manipulating Video

VideoTexture also controls the playback of the video. You can:

  • Adjust volume via the volume property
  • Mute the video via the muted property
  • Make the video loop by setting the loop property
  • Pause and play the video
  • Seek the video to a specific time in seconds by invoking the seekToTime(float) method

You can also respond to various playback events by implementing a PlaybackListener.