wiki.sine.space | sinespace

Difference between revisions of "Browser Surfaces"

From wiki.sine.space
Jump to: navigation, search
m (Hannahjt moved page Media Surfaces to Browser Surfaces)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Using the browser surface script in Unity, You can set up an object to become a media surface to stream content from a URL in space.
+
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.
  
For example, you could use a music video URL for a club, or have a training video streaming for business purposes.  
+
Examples include using a music video URL for a club, and a training video streaming for business purposes.  
  
  
Line 10: Line 10:
  
  
For making a media surface, you will first need to make the 3D object you want to use as a screen.  
+
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.  
+
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.  
 
This will bring up the browser surface script in the inspector window.  
Line 27: Line 27:
 
'''Width'''
 
'''Width'''
  
This is used to set the width of the screen.  
+
Use to set the width of the screen.  
  
  
 
'''Height'''
 
'''Height'''
  
This is used to set the height of the screen.  
+
Use to set the height of the screen.  
  
 
Aspect ratios for width and height:
 
Aspect ratios for width and height:
Line 43: Line 43:
 
'''Zoom'''
 
'''Zoom'''
  
Zoom allows you to set how far the zoom is on the screen.
+
This sets how far the zoom is on the screen.
  
  
 
'''URL'''
 
'''URL'''
  
This is where you place the URL for the video you want to stream.  
+
Place the URL here for the video you want to stream.  
  
  
Line 68: Line 68:
  
  
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.  
+
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 piece of the URL.
+
The video ID is the last component of the URL.
  
  
Line 98: Line 98:
  
  
The media surface works well with screen-sharing applications that stream to the browser.  
+
The media surface works well with screen sharing applications that stream to the browser.  
  
If you want to use screen-sharing, you can use [https://www.join.me join.me] or [http://www.screenleap.com screenleap.com] to screen-share.  
+
If you want to use screen sharing, you can use [https://www.join.me join.me] or [http://www.screenleap.com screenleap.com] to screen share.  
  
  
Line 107: Line 107:
 
The recommended shader for the screen is a custom shader made by Sine Wave.  
 
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.  
+
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 it's properties in the Inspector window.  
+
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.  
+
On the shader drop down menu, choose Sine Wave>Emissive Screen.
 +
 
 +
For the best results, turn the smoothness and metallic sliders down to 0.
  
Turn the smoothness and metallic sliders down to 0 for the best results.
 
  
  
Line 125: Line 126:
  
  
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.  
+
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===
 
===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.  
+
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 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.
 
You need to place this 3D object close to your screen, but not too close.
  
Search for focus camera and add it.  
+
Search for focus camera, and add it.  
  
 
Once it's added, you will see these settings in the focus camera script.
 
Once it's added, you will see these settings in the focus camera script.
Line 157: Line 158:
 
===Aligning the focus camera===
 
===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'.  
+
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 first, then move it until you are happy with the view.  
+
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:
 
Here is an example:
Line 171: Line 172:
 
As you can see in the preview, the whole screen is in the cameras' view.  
 
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.  
+
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.  
 
Click on this and it will open up a menu.  
Line 183: Line 184:
 
Create an empty game object by right clicking in the hierarchy and choose 'Create Empty'.
 
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.
+
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.  
 
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.  
Line 194: Line 195:
 
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.
 
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.  
+
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.  
 
Where it says 'Target Camera Position', simply drag the empty game object from your hierarchy into this box.  
Line 204: Line 205:
  
  
You can choose whether or not to use Depth of Field.  
+
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.  
  
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.
  
After you have finished with these settings, you can go ahead and either add the surface into space as a virtual good or use it in a region and upload the region!
+
{{Component Navbox}}

Latest revision as of 03:19, 9 January 2019

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.