3D WebView comes with its own materials that it uses to render web content (i.e. the material returned by IWebView.CreateMaterial()). In some rare cases, you may want a webview to use one of Unity's standard built-in materials instead of 3D WebView's custom material. If so, you can achieve that by adding the following script to an object in your scene and then using the Editor's Inspector tab to set the script's WebViewPrefab field to your scene's WebViewPrefab or CanvasWebViewPrefab:
using UnityEngine;
using UnityEngine.UI;
using Vuplex.WebView;
/// <summary>
/// Replaces the given WebViewPrefab's material with one that uses Unity's built-in UI/Default shader.
/// From https://support.vuplex.com/articles/how-to-use-standard-material
/// </summary>
class WebViewMaterialReplacer : MonoBehaviour {
// Set this field to your scene's WebViewPrefab or CanvasWebViewPrefab via the Editor's Inspector tab.
public BaseWebViewPrefab webViewPrefab;
RenderTexture _renderTexture;
Material _webMaterial;
async void Start() {
await webViewPrefab.WaitUntilInitialized();
// First, create a new material that uses a standard built-in shader.
// The "UI/Default" shader is a good choice because it's included by default for both the built-in render pipeline and URP.
var material = new Material(Shader.Find("UI/Default"));
// Set the material's texture to a RenderTexture to which we'll blit the web content.
// Note: for CanvasWebViewPrefab, it's important to set material.mainTexture before assigning the material to webViewPrefab.Material.
var size = webViewPrefab.WebView.Size;
_renderTexture = new RenderTexture(size.x, size.y, 0, RenderTextureFormat.Default, RenderTextureReadWrite.Default);
material.mainTexture = _renderTexture;
webViewPrefab.Material = material;
// Create an instance of 3D WebView's material to use for blitting.
_webMaterial = webViewPrefab.WebView.CreateMaterial();
}
void Update() {
if (_webMaterial != null) {
// Explicitly clear the RenderTexture, otherwise it can contain
// existing content that won't be overwritten by transparent pixels.
RenderTexture previousRenderTexture = RenderTexture.active;
RenderTexture.active = _renderTexture;
GL.Clear(true, true, Color.clear);
RenderTexture.active = previousRenderTexture;
// Blit the contents of the webview's texture to the RenderTexture, applying the effects from 3D WebView's material.
Graphics.Blit(
webViewPrefab.WebView.Texture,
_renderTexture,
_webMaterial
);
}
}
}