| (7 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
| − | Using the browser surface script in Unity, | + | 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. | |
| Line 10: | Line 10: | ||
| − | For making a media surface, | + | For making a media surface, first make the 3D object you want to use as a screen. |
| − | In the | + | 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''' | ||
| − | + | Use to set the width of the screen. | |
'''Height''' | '''Height''' | ||
| − | + | 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''' | ||
| − | + | This sets how far the zoom is on the screen. | |
'''URL''' | '''URL''' | ||
| − | + | Place the URL here for the video you want to stream. | |
| Line 57: | Line 57: | ||
| − | == | + | ==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. | ||
| + | |||
| + | |||
| + | |||
| + | [[File: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. | ||
| + | |||
| + | |||
| + | |||
| + | [[File: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 [https://www.join.me join.me] or [http://www.screenleap.com screenleap.com] to screen share. | ||
| + | |||
| + | |||
| + | ==Recommended Shader== | ||
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 | + | 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 | + | When the new material is in your project window, click on it, and you will see its properties in the inspector window. |
| − | On the | + | On the shader drop down menu, choose Sine Wave>Emissive Screen. |
| + | |||
| + | For the best results, turn the smoothness and metallic sliders down to 0. | ||
| − | |||
| Line 80: | Line 126: | ||
| − | When you use media surfaces, you are using them so | + | 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 | + | 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 | + | 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 112: | Line 158: | ||
===Aligning the focus camera=== | ===Aligning the focus camera=== | ||
| − | To align the 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 | + | 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 126: | 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 | + | 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 138: | 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 | + | 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 149: | 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 | + | 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 159: | Line 205: | ||
| − | You can choose whether or not to use | + | 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. | ||
| + | |||
| + | {{Component Navbox}} | ||
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.
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.
Width
Use to set the width of the screen.
Height
Use to set the height of the screen.
Aspect ratios for width and height:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
| |||||||||||||||||||||||