Media surfaces allow you to play web content in your scene using Chromium Embedded Framework, meaning that you can display most content that could normally be displayed in a web browser. Each scene can support one media URL at a time, but can be displayed on multiple objects.
Web content is currently not interactive; visual media playback, such as an embedded YouTube video, is shown on objects that are uploaded with the VideoScreen shader. Audio from the media plays back separately, from a position designated in media surface scene settings.
You can create media surfaces yourself, or you can purchase one from another creator on the Sansar Store.
An avatar watching a YouTube video on a media surface.
Creating a media surface
Any object can be used as a media surface, but flat planes are typically most suitable for video and web playback. To upload an object as a media surface while in edit mode:
- Click Upload.
- Click Browse under Supported file types and choose a suitable model (.fbx) from your computer. Here is a 16x9 screen that we have provided.
- Click Materials Settings to open the Materials Settings panel.
- From the Use shader dropdown, choose Media Surface.
- (Optional) Choose an Albedo Map, Normal Map, Roughness Map, Metalness Map, and/or Emissive Map to apply to your media surface. Note that these maps can potentially interfere with media playback if they are not designed to look like part of a media screen.
- Click Save Settings to close the Materials Settings panel.
- Click Upload to upload your media surface.
- Drag your media surface from your inventory to the scene in order to place it in your scene.
Note: To display side-by-side 3D content, choose the Media Surface + Stereographic shader. For more details on this shader and how to properly align side-by-side 3D content using the Media Surface + Stereographic shader, see Materials editing and shaders.
Media Surface Settings
The Media Surface Settings section of the Scene Settings panel allows you to set a media URL and set the location and volume of audio playback in the scene for that media URL.
Media Surface Settings in the Scene Settings panel.
You can adjust the following settings:
- Media URL - Enter the URL of a web page you would like to play in your scene. Note that the media only plays once and then stops unless otherwise specified by the URL. For more information on how to properly format a YouTube URL for media surfaces, see the Formatting a YouTube embed URL for media surfaces section.
- Initial Width - Set the height of the media, in pixels.
- Initial Height - Set the width of the media, in pixels.
- Audio Position - Enter X, Y, and Z coordinates where you would like the audio to play in the scene. If you are also playing video, you may wish to match the audio emitter position to the position of the video screen.
- Loudness - Adjust the volume of the audio media. Choose either Level or dB from the dropdown in order to choose whether this setting is measured in percentage or decibels, respectively.
- Audio Radius - Set a maximum distance from which the audio media can be heard.
- Streaming live content currently doesn't work using media surfaces.
- Important: Many YouTube and other web videos, especially pop music videos, have a very compressed dynamic range, which means they may sound relatively loud in Sansar and drown out voice chat and other audio emitters you've placed. Typically, changing the audio level to about -12-18 dB will help balance it with other nearby sounds in your scene.
At this time, only YouTube is officially supported for video playback. For the best playback experience, you need to format your media URL using specific flags:
- Make sure to use the embed link (only the part in quotes after "src=" in the Embed field).
- Take note of the video ID, which is the text after the last forward slash in the embed link. For example:
YouTube Link Video ID https://www.youtube.com/embed/oa1s4pka2pA oa1s4pka2pA
- To make the video play automatically and loop, you will need to add a few strings to the embed link. First, start by adding (with no space in between)
?autoplay=1&loop=1&playlist=after the embed link.
- Then, add the video ID after that string. For example, it would then look like this:
- Lastly, add
&allowfullscreen=1&controls=0after the link above. Allowfullscreen= ensures that the video and not the entire webpage is shown. Controls= ensures that the playback controls do not show before the media begins. For example, the media URL for the Sansar trailer would be:
Have more questions? Submit a request