Browser Surfaces

From sine.space Wiki
Jump to: navigation, search

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.


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.


Browsersurfacescript.jpg


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.


VideoID.jpg


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 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.


Videoautoplay.jpg



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.

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.



Materialinspector.jpg



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 on 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.


Focuscamera.jpg


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 into your scene (delete the main camera and add a new one in). 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:



Screencamera.jpg


As you can see in the preview, the whole screen is in the cameras' 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.


Cameratransform.jpg


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 over 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 to it. In the inspector window you will see the focus camera script settings.

Where it says 'Target Camera Position', simply drag the empty game object from your hierarchy into this box.

It should look like this.


Targetcamera.jpg


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.