How to click or raycast through the transparent parts of a web page?

3D WebView allows web pages to be transparent, but since the entire webview is a single raycast target, clicks and raycasts don't automatically pass through the transparent parts of a page. If you need clicks or raycasts to pass through the transparent parts of a web page, here are some options to achieve that:

1. The first option is to split the web content into multiple CanvasWebViewPrefabs so that clicks can pass through the empty space between the prefabs. Please note that if you're using Native 2D Mode, this first option is the only one listed in this article that will work, and the other options below should be ignored.

2. A second option is to implement ICanvasRaycastFilter to declare parts of the webview that raycasts can pass through. However, your ICanvasRaycastFilter implementation must know where the transparent sections are located. If you know the transparent sections' locations ahead of time, you can hard code them into your ICanvasRaycastFilter implementation. If the transparent sections' locations are dynamic, an alternative is to have your web page's JavaScript determine the transparent sections' locations at runtime and then send a message to your C# script with the transparent sections' coordinates. For example, you could include JavaScript in the web page that periodically checks the rects of the transparent regions, and if it detects that the rects have changed, it could send a message to your C# script to send it the updated rects. That way, the C# script has the correct rects at runtime when implementing ICanvasRaycastFilter.

3. A third option is to set your Canvas's render mode to "Screen Space-Camera" and then place the Canvas behind the objects in your scene that should be clickable. The downside to this approach is that those 3D objects will render in front of the Canvas.

4. A fourth option is to follow the steps in option #3 but also follow these additional steps:

   • Add a second Canvas with the render mode "Screen Space-Overlay".
   • In the second Canvas, add a RawImage and disable its "Raycast Target" option.
   • Add a script that sets the RawImage's material to a material returned by CanvasWebViewPrefab.WebView.CreateMaterial(), like this:

   using UnityEngine;
   using UnityEngine.UI;
   using Vuplex.WebView;
   
   class SetImageTexture : MonoBehaviour {
   
       // Use the Editor's inspector tab to set these fields to the
       // CanvasWebViewPrefab in the first "Screen Space - Camera" Canvas and the
       // RawImage located in the second "Screen Space - Overlay" Canvas.
       public CanvasWebViewPrefab canvasWebViewPrefab;
       public RawImage rawImage;
   
       async void Start() {
           await canvasWebViewPrefab.WaitUntilInitialized();
           rawImage.material = canvasWebViewPrefab.WebView.CreateMaterial();
       }
   }

   With this approach, the web content in the Canvas should always appear in front of the 3D objects, but the 3D objects between the two Canvases will also be clickable.