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!