How to render a webview on a custom 3D object or mesh?

Nate Hill
Nate Hill

There are several approaches for rendering a webview on a custom 3D object or mesh:

  1. If your goal is to create a curved webview, please see this article.

  2. If your custom 3D object is flat (for example: a TV screen), then the simplest solution is to position a WebViewPrefab in front of your custom 3D object. For example, your custom object and the WebViewPrefab can be siblings under a common parent object.

  3. If you're unable to use option #2 because your custom 3D object is not flat, then an alternative is to not use 3D WebView's prefabs and instead use Web.CreateWebView() to create an IWebView that you apply to your custom custom mesh, like this:

    var webView = Web.CreateWebView();
// Initialize the webview to 600px x 300px.
await webView.Init(600, 300);
webView.LoadUrl("https://vuplex.com");
// Set the Material for the custom mesh.
GetComponent<Renderer>().material = webView.CreateMaterial();

    However, since an IWebView is unable to automatically detect user input (3D WebView's prefabs perform that functionality), the application is responsible for detecting any user input and sending it to the webview via APIs like IWebView.Click(), Scroll(), and SendKey().

  4. Another option is to modify a WebViewPrefab instance to replace its quad mesh with your custom mesh. However, WebViewPrefab's default input detector assumes that the webview is a flat rectangle, so in order for clicking and scrolling to work correctly, the application must use WebViewPrefab.SetPointerInputDetector() to set a custom IPointerInputDetector that correctly detects coordinates on the custom mesh. Also, WebViewPrefab assumes that its mesh has a 1:1 aspect ratio, so your mesh will need to have a 1:1 aspect ratio in order for WebViewPrefab to size and scale web content correctly.