Video in the 3D View

Studio

Video in the 3D View

Example of video in the 3D view

Video in the 3D view is video set as the material or skin of plane nodes or other objects. It maps to the object and gives the appearance of existing in 3D space. An example of this can be seen in the video to the right.

Getting Video in the 3D View

The first step towards getting video into the 3D view is to import a video file into the Media Library. The following formats are supported for this purpose:

  • MP4, web-optimized, baseline or main profile, maximum resolution of 1920 pixels in either dimension
  • OGG Theora, no audio, .ogv extension

For technical reasons the video resolution of OGV videos must be a power of two in both dimensions, e.g. 128px, 256px etc. Due to limitations of mobile hardware it's recommended to keep video used as a texture to 256px by 256px or less.

Setting a VideoTexture as a material

Next, drag the video into the Hierarchy to create a VideoTexture node with the video as the source material.

With an existing plane in the Hierarchy selected, locate the materials property in the Properties panel and set it to the newly-created VideoTexture. This will cause the first frame of the video will appear on the plane.

MP4 video will show a generic preview on the plane.

The final step is to play the VideoTexture by dragging the VideoTexture node from the Hierarchy into a script and calling the start( ) function on it.

The example below shows the relevant code within the show script node.

Example
var display_shown = symbol.controllers.display.elements.shown;
var display_hidden = symbol.controllers.display.elements.hidden;

// The VideoTexture node dragged in
var myVideo_ogv = symbol.nodes.myVideo_ogv;

parent.on("show", parent_show);
function parent_show() {

    // Make sure we start from fully hidden
    display_hidden.reset();

    // Move to the shown state
    display_shown.activate();

    // Play the video
    myVideo_ogv.start();

}

In the example above myVideo_ogv is the name of the VideoTexture node in the Hierarchy, this may differ in your project.

As with audio, VideoTexture nodes can be controlled from both timelines and scripts.

As audio is not supported in OGV videos imported into Studio, you will need to separately import and play your audio file. For more information on audio please see our Audio and Video article.

Device Limitations

When an experience is scanned, MP4 videos instanced in the project's Hierarchy are loaded onto the user's device. Due to differences in hardware and OS capabilities some devices limit the number of videos that can be loaded at once.

Due to this limitation, we recommend keeping the number of video nodes in your Hierarchy to a minimum. If your experience makes use of multiple videos consider reusing existing video nodes and changing their source property instead.

To load a video file in the Media Library into a video node from within a script, follow these steps:

  • Select the script node in which the video will be played, and drag the video node from the Hierarchy into the top of the script to create a reference to it.
  • Call the source(...) function on the new video node variable.
  • Drag the media file into the script, within the source function's brackets, and select Insert media file reference.

Using this method it's possible to have a single video node in the Hierarchy and dynamically update the attached video file throughout the experience.

More Information

Open in new window