Browser Surfaces
Using the browser surface script in Unity, you can set up an object to become a media surface to stream content in Space from a URL.
Examples include using a music video URL for a club, and a training video streaming for business purposes.
The browser surface script can only be used for streaming from URLs in the desktop client.
Contents
Browser Surface Script
For making a media surface, first make the 3D object you want to use as a screen.
In the inspector window, add the browser surface component to the item you are using for the screen.
This will bring up the browser surface script in the inspector window.
Script Settings
Width
Use to set the width of the screen.
Height
Use to set the height of the screen.
Aspect ratios for width and height:
1920x1080
1024x720
3840x2160 (4K)
Zoom
This sets how far the zoom is on the screen.
URL
Place the URL here for the video you want to stream.
Background Color
This is the background color of the screen, which is defaulted to black.
YouTube Videos
You can set YouTube videos to play in two different ways, depending on how you want them to be viewed.
You will need to use specific URL addresses for these two different functions.
Default to Full-screen
You can choose to set the video to play defaulted at full screen. To do this, choose the YouTube video you want, and copy the video ID.
The video ID is the last component of the URL.
Then, to make the video default to full-screen, you have to use this URL: https://www.youtube.com/embed/VIDEOID, and replace the VIDEOID part with the actual video ID.
Autoplay
You can choose to set the video to autoplay. To do this, first choose the YouTube video you want to stream,then set the autoplay button to autoplay then copy its' URL by righting clicking on the video.
Copy this URL into the browser script URL space, and then add '?rel=0&autoplay=1' at the end of the URL.
Screen Sharing
The media surface works well with screen-sharing applications that stream to the browser.
If you want to use screen sharing, you can use join.me or screenleap.com to screen share.
Recommended Shader
The recommended shader for the screen is a custom shader made by Sine Wave.
Download the file above and drag it into any folder in your Unity project.
Create a new material in your project window by right-clicking and choosing Create>Material in the pop-up menu.
When the new material is in your project window, click on it, and you will see its properties in the inspector window.
On the shader drop-down menu, choose Sine Wave>Emissive Screen.
For the best results, turn the smoothness and metallic sliders down to 0.
Viewing the Screen
When you use media surfaces, you are using them so you and other users can view the streaming content. You will need to set up a couple of things to make viewing the content easier.
Focus Camera Script
The focus camera script is used to create a focus camera. This script needs a target to focus on, and this is where an empty object comes in.
You will need to create a 3D object with a collider attached to it and add the focus camera component to it by choosing the object and clicking on Add Component in the inspector window.
You need to place this 3D object close to your screen but not too close.
Search for focus camera, and add it.
Once it's added, you will see these settings in the focus camera script.
Target Camera Position
The target camera position is where you want the camera to focus on.
Depth of Field
If you check this, depth of field will be used.
Aligning the focus camera
To align the camera, first, you need to add a camera to your scene (delete the main camera and add a new one). To do this, right-click in the hierarchy and choose 'Camera'.
Now you want to move and rotate this camera so the screen is shown fully in the preview window. The easiest way to move the camera is to use the transform tool and set the position to 0,0,0, then move it until you are satisified with the view.
Here is an example:
As you can see in the preview, the whole screen is in the camera's view.
With the camera selected, in the inspector window, you will see the transform information. The transform information has a small settings button resembling a cog.
Click on this, and it will open up a menu.
In the menu, choose 'Copy Component'. This will copy the transform values of the camera.
Create an empty game object by right-clicking in the hierarchy and choose 'Create Empty'.
Click on the empty game object in the hierarchy, and go to the transform information in the inspector window.
As before, click on the cog, and in the menu, choose 'Paste Component Values'. This will paste the transform values of the camera to the empty game object.
Doing this will ensure that the same view from the camera is now on the empty game object.
Choosing the focus camera position
Now that the empty game object has the correct view of the screen, you will need to set that empty game object to be the focal point of the focus camera.
To do this, click on the 3D object with the focus camera script attached. In the inspector window, you will see the focus camera script settings.
Where it says 'Target Camera Position, drag the empty game object from your hierarchy into this box.
It should look like this.
You can choose whether or not to use depth of field.
Choosing to turn on depth of field will blur the areas of the surface which the camera is not immediately focused on.
After you have finished with these settings, you can either add the surface into Space as a virtual good or use it in a region and upload the region.
Last updated