There are two main approaches for displaying a webview in multiple places. These approaches work when using the default 3D rendering mode, but don't work when Native 2D Mode is enabled. For more details about Native 2D Mode (including 2D WebView for WebGL), please see this section below.
If you need for the user to be able to interact with the copies of the webview (i.e. so the user can click and scroll any of the copies), your app can call WebViewPrefab.Instantiate(IWebView) or CanvasWebViewPrefab.Instantiate(IWebView) to create additional prefab instances that are connected to an existing webview. For examples, please see the documentation for those methods.
If you don't need for the user to be able to interact with the copies of the webview (i.e. the app will just display the copies and the user won't be able to click them), the simplest approach is to call IWebView.CreateMaterial() to get a material with the webview's web content and then apply it to a blank object, like a Quad. For example, here's an example script that applies the material from a WebViewPrefab to a Quad:
using UnityEngine;
using Vuplex.WebView;
class CopyWebViewToQuad : MonoBehaviour {
// TODO: Use the editor's inspector tab to set these fields to the
// WebViewPrefab and Quad in your scene.
public WebViewPrefab webViewPrefab;
public GameObject quad;
async void Start() {
if (webViewPrefab == null || quad == null) {
Debug.LogError("The CopyWebViewToQuad script's webViewPrefab and quad fields haven't been set. Please use the editor's inspector tab to set them to the WebViewPrefab and Quad in your scene.");
return;
}
await webViewPrefab.WaitUntilInitialized();
quad.GetComponent<Renderer>().material = webViewPrefab.WebView.CreateMaterial();
}
}
And here's an example script that applies the material from a CanvasWebViewPrefab to a RawImage:
using UnityEngine;
using UnityEngine.UI;
using Vuplex.WebView;
class CopyWebViewToRawImage : MonoBehaviour {
// TODO: Use the editor's inspector tab to set these fields to the
// CanvasWebViewPrefab and RawImage in your scene.
public CanvasWebViewPrefab canvasWebViewPrefab;
public RawImage rawImage;
async void Start() {
if (canvasWebViewPrefab == null || rawImage == null) {
Debug.LogError("The CopyWebViewToRawImage script's canvasWebViewPrefab and rawImage fields haven't been set. Please use the editor's inspector tab to set them to the CanvasWebViewPrefab and RawImage in your scene.");
return;
}
await canvasWebViewPrefab.WaitUntilInitialized();
rawImage.material = canvasWebViewPrefab.WebView.CreateMaterial();
}
}
Native 2D Mode
When Native 2D Mode is enabled, a native 2D webview widget is positioned in front of the Unity game view instead of rendering web content to a texture. So, when Native 2D Mode is enabled (including 2D WebView for WebGL, which requires Native 2D Mode), it's not possible to render a single webview to multiple locations. However, a potential alternative could be to include multiple CanvasWebViewPrefabs in the scene that each separately load the same URL.