1. 開発者Learn
  2. 让我们在第二个屏幕上创建一个 GUI

让我们在第二个屏幕上创建一个 GUI

随着SDK ver.2.4.0的发布,现在可以在Unity的第二屏幕显示功能(SRD2DView)上设置任何纹理(CustomTexture)并放置GUI对象(例如按钮)。
在本文中,我们将介绍如何使用这些函数创建一个简单的应用程序。

Note

第二屏显示功能的基本使用方法请参考以下内容。
显示第二屏幕

启动

Note

在本文中,我们将使用 Unity 2022.3 URP 项目。


创建一个新的Unity Project并导入ver.2.4.0 srdisplay-unity-plugin.unitypackage。
删除默认 SampleScene 中除 Directional Light 以外的所有对象,并添加 SRDisplayManager 和 SRDisplayBox。

接下来,将新的3D Object添加到 SRDisplayBox 的中心并附加 Floating Object 脚本。
最后,创建下面的 AppController 脚本并将其附加到空的GameObject,以便在应用程序启动时显示 SR2DView

using UnityEngine;

using SRD.Core;
using SRD.Utils;

public class AppController : MonoBehaviour
{
  private SRDManager _srdManager;
  private SRD2DView _srd2DView;

  void Start()
  {
    _srdManager = SRDSceneEnvironment.GetSRDManager();
    if (_srdManager.Init2DView())
    {
      _srd2DView = _srdManager.SRD2DView;
    }
  }

  void Update()
  {
    if (Input.GetKeyDown(KeyCode.Escape))
    {
      Application.Quit();
    }
  }
}


tachiage

CustomTexture

首先,让我们使用 CustomTexture 在第二个屏幕上从不同的角度显示图像。

  1. 在Assets文件夹中新建RenderTexture

second-camera-render-texture

  1. 将新的相机对象 SecondCamera 放置在场景中所需的位置,并将之前创建的RenderTexture分配给Output Texture

second-camera-scene-view

  1. 对AppController进行如下修改

为 SecondCamera 准备一个变量

[SerializeField] private Camera _secondCamera;


在 Start() 中将 SecondCamera 的 TargetTexture 设置为 SR2DView 的 CustomTexture

void Start()
{
  _srdManager = SRDSceneEnvironment.GetSRDManager();
  if (_srdManager.Init2DView())
  {
    _srd2DView = _srdManager.SRD2DView;
    if (_secondCamera != null)
    {
      _srd2DView.CustomTexture = _secondCamera.targetTexture;
    }
  }
}

  1. 在 Inspector 中将 SecondCamera 对象分配给 AppController 的 Second Camera

app-controller-second-camera
构建应用程序并运行 exe,Second Camera 图片将显示在第二个屏幕上。

custom-texture-exe

GUI

接下来我们来创建一个按钮来切换第二屏显示的图片。

在普通的 Unity 应用程序中,当您想要创建 GUI 时,您可以使用 Canvas 函数。
当调用 SR2DView  Init 函数时,内部会自动生成一个 Screen Space - Overlay 模式的Canvas,并根据屏幕尺寸显示那里设置的SourceTexture图像。。
Canvas 也用于在第二个屏幕上显示按钮,但这需要一些窍门。

  1. 创建一个新的屏幕空间画布。 排序顺序必须设置为 1 或更高,以便它显示在 SR2DView 内的画布上方。另外,关于Target Display,根据 PC 环境,显示 SR2DView 的显示屏可能会有所不同,因此将以下脚本附加到 Canvas 以便在运行时设置正确的Target Display。

using SRD.Core;
using UnityEngine;

[RequireComponent(typeof(Canvas))]
public class SecondDisplayCanvas : MonoBehaviour
{
  void Start()
  {
    var canvas = GetComponent〈Canvas〉();
    canvas.targetDisplay = SRD2DView.DisplayIndex;
  }
}

  1. 将 Button 对象添加到 Canvas

  2. 以下函数添加到 AppController 并将其与 Button 的 OnClick() 事件链接

public void SwitchCamera()
{
  if (_srd2DView.SourceTexture != SRD2DView.SRDTextureType.Custom)
  {
    _srd2DView.SetSourceTexture(SRD2DView.SRDTextureType.Custom);
  }
  else
  {
    _srd2DView.SetSourceTexture(SRD2DView.SRDTextureType.LeftEye);
  }
}


button-inspector

second-display-canvas-with-button
再次构建应用程序并运行 exe。

第二屏左下角会显示“SWITCH CAMERA”按钮,点击该按钮可以在 SRDisplayManager 的 LeftEye 图片和 SecondCamera 图片之间进行切换。

30
before-button-click
after-button-click

 

Note

如果您想了解有关如何为第二个屏幕创建 GUI 的更多信息,请参阅 Spatial Reality Display Plugin for Unity ver.2.4.0 中新添加的示例。
6 - SRDisplay2DViewUISample

 

Support information

应用的创建方法

如何在空间现实显示屏上显示从Sketchfab下载的3D内容,并详细介绍了具体步骤和设置方法。

Details
【应用介绍】 Sketchfab 3D 查看器

了解如何使用 Sketchfab 3D 查看器在空间现实显示屏上轻松查看和共享 3D 模型,提升您的开发体验。

Details
使用摄影测量技术再现真实空间的提示

了解如何使用空间现实显示技术呈现高质量的摄影测量内容,提升真实感和临场感,优化模型显示效果。

Details