wiki.sine.space | sinespace

Difference between revisions of "Browser Surfaces"

From wiki.sine.space
Jump to: navigation, search
Line 109: Line 109:
  
  
===Target Camera Position===
 
  
To get the camera to focus on the screen correctly, you need to create an empty object. You can do this by right clicking in the hierarchy and choosing 'Create Empty'.
+
===Aligning the focus camera===
  
This empty game object needs to be placed in the center of the screen, but not too close to it.  
+
To align the camera, you will first need to add a camera into your scene (delete the main camera and a new one in). To do this, right click in the hierarchy and choose 'Camera'.  
  
Also make sure you test the positioning in a test region to make sure you can click on the 3D object properly, and see the screen properly.  
+
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 first, then move it until you are happy with the view.  
  
Here is an example of positioning for the screen, 3D object and empty object.
+
Here is an example:
  
  
<div><ul>
+
 
<li style="display: inline-block;">
+
 
[[File:Placementofobjects.jpg|thumb|none|600px|White=Screen, Red=3D Object with focus camera script attached, 3D icon with arrows=Empty game object]]
+
[[File: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 that looks like a cog.
 +
 
 +
Click on this and it will open up a menu.
 +
 
 +
 
 +
[[File: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'.

Revision as of 07:10, 3 February 2017

Unity has the ability to make media surfaces. You can set up an object to become a media surface, to stream content from a URL.

For example, you could use a music video url for a club, or have 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, you will first need to 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

This is used to set the width of the screen.


Height

This is used to set the height of the screen.

Aspect ratios for width and height:

  • 1920x1080
  • 1024x720
  • 3840x2160 (4K)


Zoom

Zoom allows you to set how far the zoom is on the screen.


URL

This is where you place the URL for the video you want to stream.


Background Color

This is the background color of the screen, which is defaulted to black.


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 righting clicking, and choosing Create>Material on the pop up menu.

When the new material is in your project window, click on it, and you will see it's properties in the Inspector window.

On the Shader drop down menu, choose Sine Wave>Emissive Screen.

Turn the smoothness and metallic sliders down to 0 for the best results.


Materialinspector.jpg



Viewing the Screen

When you use media surfaces, you are using them so yourself 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 focus camera 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, you will first need to add a camera into your scene (delete the main camera and 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 first, then move it until you are happy 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 that looks like 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'.