ios – How can I make the background of a WKWebView clear when used as content material for an SCNMaterial?

I am engaged on an AR app that makes use of SceneKit and ARKit, and I must show a webpage with a clear background in my scene. I’ve managed so as to add a standard UIView to my ARSCNView and set its background to clear, however this method would not appear to work for WKWebView.

Though the difficulty I encountered was in AR improvement, it appears to be associated to SceneKit. Due to this fact, I’ll use SceneKit individually to explain the issue I encountered.

To set a WKWebView as content material for an SCNMaterial, I am utilizing a WKWebView because the content material of an SCNMaterial like so:

let webNode = SCNNode()
webNode.geometry = SCNPlane(width: 1, top: 1)
webNode.geometry?.firstMaterial?.diffuse.contents = webView

I’ve efficiently made the background of most UIViews clear by setting the isOpaque property to false, like this:

myView.isOpaque = false

Nevertheless, once I apply this method to a WKWebView, the result’s a aircraft with a black background as a substitute of a clear one. I’ve already set the background of the webpage’s root node to clear, and I’ve tried a number of methods of setting the WKWebView’s background, equivalent to:

html,
physique {
    width: 100%;
    top: 100%;
    background-color: clear;
}

webView.isOpaque = false
webView.backgroundColor = .clear
webView.layer.backgroundColor = UIColor.clear.cgColor

I’ve created a demo as an example the difficulty:

On this demo, I’ve set the background coloration of the SCNView to blue, and added a UILabel and a WKWebView because the contents of two totally different SCNMaterials. The content material of UILabel is a pink “Whats up World”, and the content material of WKWebView is a pink sq. rotating in a clear web page. The UILabel has a clear background, however the background of the WKWebView is black as a substitute of clear.

The important thing code of this demo is as follows:

ViewController.swift:

import UIKit
import SceneKit
import WebKit

class ViewController: UIViewController {

    lazy var sceneView: SCNView = {
        let sceneView = SCNView(body: self.view.bounds)
        sceneView.allowsCameraControl = true
        sceneView.backgroundColor = .blue
        sceneView.showsStatistics = true
        return sceneView
    }()

    lazy var webView: WKWebView = {
        let webView = WKWebView(body: CGRect(x: 0, y: 0, width: 1000, top: 1000))
        let url = URL(fileURLWithPath: Bundle.predominant.path(forResource: "index", ofType: "html")!)
        let request = URLRequest(url: url)
        webView.load(request)
        webView.isOpaque = false
        webView.backgroundColor = .clear
        webView.layer.backgroundColor = UIColor.clear.cgColor
        return webView
    }()

    override func viewDidLoad() {
        tremendous.viewDidLoad()
        setupUI()
        setupConstraints()
        setupScene()
    }

    func setupUI() {
        view.addSubview(sceneView)
    }

    func setupConstraints() {
        sceneView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            sceneView.topAnchor.constraint(equalTo: view.topAnchor),
            sceneView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            sceneView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            sceneView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }

    func setupScene() {
        let webNode = SCNNode()
        webNode.geometry = SCNPlane(width: 1, top: 1)
        webNode.geometry?.firstMaterial?.diffuse.contents = webView
        webNode.geometry?.firstMaterial?.isDoubleSided = true
        webNode.place = SCNVector3(0.5, 0, 0)

        let label = UILabel(body: CGRect(x: 0, y: 0, width: 100, top: 100))
        label.textual content = "Whats up World"
        label.backgroundColor = .clear
        label.textColor = .pink
        label.isOpaque = false

        let labelNode = SCNNode()
        labelNode.geometry = SCNPlane(width: 1, top: 1)
        labelNode.geometry?.firstMaterial?.diffuse.contents = label
        labelNode.geometry?.firstMaterial?.isDoubleSided = true
        labelNode.place = SCNVector3(-0.5, 0, 0)

        let scene = SCNScene()
        scene.rootNode.addChildNode(webNode)
        scene.rootNode.addChildNode(labelNode)
        sceneView.scene = scene
    }
}

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Suitable" content material="IE=edge">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <title>Doc</title>
    <fashion>
        html,
        physique {
            width: 100%;
            top: 100%;
            background-color: clear;
        }

        * {
            margin: 0;
            padding: 0;
        }

        physique {
            show: flex;
            justify-content: heart;
            align-items: heart;
        }

        div {
            width: 200px;
            top: 200px;
            background-color: pink;
            animation: rotate 1s linear infinite;
        }

        @keyframes rotate {
            from {
                rework: rotate(0);
            }
            to {
                rework: rotate(360deg);
            }
        }
    </fashion>
</head>

<physique>
<div></div>
</physique>

</html>

I am undecided if this can be a bug or a limitation of WKWebView, so I am questioning if there’s any solution to show a WKWebView in an SCNView with a clear background. Any assist could be tremendously appreciated!