RealityKit – 在检测到的平面上可视化网格

Question

我想在检测到的平面上绘制网格点，如ARCore视频链接所示，但我不知道如何实现。

你能帮我实现这个目标吗？预先感谢。

Answer 1

ARKit

|

RealityKit

中的经典网格可视化

在这篇文章中，我想向您展示如何使用 ARKit/RealityKit 框架启用平面检测过程的“经典”可视化。但在这种情况下，我不保证您能够以视觉上令人愉悦的方式可视化网格，因为它是在 Google ARCore 中实现的。

但是，为了可视化检测水平和垂直平面的过程（类似于您在 ARCore 中看到的行为），您应该使用场景重建方法，即使用 LiDAR 扫描仪。但这是一个不同的故事，因为您必须使用 Metal 来实现程序纹理，并为前缘设置软蒙版。

这是一个代码：

import ARKit
import RealityKit

class Grid: Entity, HasModel, HasAnchoring {        
    var planeAnchor: ARPlaneAnchor
    var planeGeometry: MeshResource!
    
    init(planeAnchor: ARPlaneAnchor) {
        self.planeAnchor = planeAnchor
        super.init()
        self.didSetup()
    }
        
    fileprivate func didSetup() {            
        self.planeGeometry = .generatePlane(width: planeAnchor.extent.x,
                                            depth: planeAnchor.extent.z)
        var material = UnlitMaterial()
        material.color = .init(tint: .white.withAlphaComponent(0.999),
                            texture: .init(try! .load(named: "grid.png")))
        let model = ModelEntity(mesh: planeGeometry, materials: [material])
        model.position = [planeAnchor.center.x, 0, planeAnchor.center.z]
        self.addChild(model)
    }
    
    fileprivate func didUpdate(anchor: ARPlaneAnchor) {            
        self.planeGeometry = .generatePlane(width: anchor.extent.x,
                                            depth: anchor.extent.z)
        let pose: SIMD3<Float> = [anchor.center.x, 0, anchor.center.z]
        let model = self.children[0] as! ModelEntity
        model.position = pose
    }        
    required init() { fatalError("Hasn't been implemented yet") }
}

ViewController.swift

class ViewController: UIViewController {
    
    @IBOutlet var arView: ARView!
    var grids = [Grid]()

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        arView.session.delegate = self
        
        let config = ARWorldTrackingConfiguration()
        config.planeDetection = [.horizontal, .vertical]
        arView.session.run(config)
    }
}

ARSessionDelegate

extension ViewController: ARSessionDelegate {
    
    func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
        
        guard let planeAnchor = anchors.first as? ARPlaneAnchor else { return }
        let grid = Grid(planeAnchor: planeAnchor)
        grid.transform.matrix = planeAnchor.transform
        self.arView.scene.anchors.append(grid)
        self.grids.append(grid)
    }
    
    func session(_ session: ARSession, didUpdate anchors: [ARAnchor]) {
        
        guard let planeAnchor = anchors[0] as? ARPlaneAnchor else { return }
        let grid: Grid? = grids.filter { grd in
            grd.planeAnchor.identifier == planeAnchor.identifier }[0]
        guard let updatedGrid: Grid = grid else { return }
        updatedGrid.transform.matrix = planeAnchor.transform
        updatedGrid.didUpdate(anchor: planeAnchor)
    }
}

仅可以更新共面检测到的平面。

P。 S.

如果您有兴趣在 RealityKit 中可视化

Canonical Face Mask

，请查看这篇文章。

Answer 2

扩展安迪的答案：

由于我真的很想使用金属纹理，而且 Andy 提供的答案很遗憾没有为我更新平面边界，所以我想出了这个解决方案：

首先，我使用了自定义金属表面着色器：

#include <metal_stdlib>
#include <RealityKit/RealityKit.h>

using namespace metal;
using namespace realitykit;

[[visible]]
void PlaneGridShader(surface_parameters params)
{
    // Constants for grid parameters. bigGrid is for the thicker lines, smallGrid for the finer grid. The bigger these values are, the more grid rows you get.
    constexpr float bigGridSize = 2.0;
    constexpr float smallGridSize = 10.0;
    constexpr float gridThickness = 0.005;
    constexpr float borderThickness = 0.003;
    
    //uv1 gets a global reference, whereas uv0 gets a local UV representation. This means that uv0 has coordinates from 0 to 1 for any grid size and is useful to create a border around the plane. uv1 is dependant on the grid size and offers a great way to create evenly spaced grid rows for differently sized planes
    float2 uv = params.geometry().uv1();
    float2 absoluteUV = params.geometry().uv0();
    
    //convenience values for grid size
    float bigU = uv.x * bigGridSize;
    float bigV = uv.y * bigGridSize;
    
    float smallU = uv.x * smallGridSize;
    float smallV = uv.y * smallGridSize;
    
    //Grid color in rgb values
    //half3 gridColor = half3(1,0.71,0);
    half3 gridColor = half3(1,1,1);
    
    //Make material appear unlit. If you use an unlit material, all grid lines appear black, so you need to dial all the pbr properties down
    params.surface().set_metallic(0);
    params.surface().set_specular(0);
    params.surface().set_clearcoat(0);
    params.surface().set_ambient_occlusion(1);
    
    //Sets the grid color. Can be moved down into if statements if multiple colors are needed for different parts of the grid
    params.surface().set_emissive_color(gridColor);
    params.surface().set_base_color(gridColor);
    
    //Inverse of Outer Border selection
    if (absoluteUV.x > borderThickness && absoluteUV.x < (1.0 - borderThickness) && absoluteUV.y > borderThickness && absoluteUV.y < (1.0 - borderThickness)) {
        //Thicker inner Grid (big)
        if (fract(bigU) < gridThickness || fract(bigV) < gridThickness || fract(bigU) > 1.0 - gridThickness || fract(bigV) > 1.0 - gridThickness) {
            params.surface().set_opacity(0.7);
        }
            else{
                //Small grid
                if (fract(smallU) < gridThickness || fract(smallV) < gridThickness || fract(smallU) > 1.0 - gridThickness || fract(smallV) > 1.0 - gridThickness) {
                    params.surface().set_opacity(0.25);
                }
                //Discard all fragments that do not meet grid criteria
                else{
                    discard_fragment();
                }
            }
    }
    //Constant Outer Border
    else{
        params.surface().set_opacity(0.8);
    }
    
}

然后，我创建了一个与安迪类似的飞机，所以感谢这部分:) 值得注意的是，它对 didUpdate() 函数和平面范围的检索方式进行了一些更改，因为 Andy 的代码使用了 Apple 已弃用的函数。另外，我将其重命名为“ARGrid”，这样它就不会与 SwiftUI 的 Grid() 冲突。

import ARKit
import RealityKit

class ARGrid: Entity, HasModel, HasAnchoring {
    //Use identifier to later match the ARPlaneAnchor with the Grid
    var identifier: UUID
    var planeAnchor: ARPlaneAnchor
    var planeGeometry: MeshResource!
    
    
    init(id: UUID, planeAnchor: ARPlaneAnchor) {
        self.identifier = id
        self.planeAnchor = planeAnchor
        super.init()
        self.didSetup()
    }
    
    func didSetup() {
        self.planeGeometry = .generatePlane(width: planeAnchor.planeExtent.width, height: planeAnchor.planeExtent.height)
        
        var model = ModelEntity(mesh: planeGeometry, materials: [gridMaterial])
        model.position = [planeAnchor.center.x, 0, planeAnchor.center.z]
        // Rotate 90 degrees around the X-axis so plane is aligned to surface
        model.orientation = simd_quatf(angle: -Float.pi / 2, axis: [1, 0, 0])
        self.addChild(model)
    }
    
    func didUpdate(anchor: ARPlaneAnchor) {
        self.planeGeometry = .generatePlane(width: anchor.planeExtent.width, height: anchor.planeExtent.height)
        let pose: SIMD3<Float> = [anchor.center.x, 0, anchor.center.z]
        let model = self.children[0] as! ModelEntity
        model.model?.mesh = self.planeGeometry
        model.position = pose
    }
    required init() { fatalError("Hasn't been implemented yet") }
}

最后，我在 ARView 代理函数中实现了一些更改：

 func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
        let filtered = anchors.compactMap({$0 as? ARPlaneAnchor})
        for anchor in filtered{
            let grid = ARGrid(id: anchor.identifier, planeAnchor: anchor)
            grid.transform.matrix = anchor.transform
            self.arView.scene.anchors.append(grid)
        }
    }
    
    func session(_ session: ARSession, didUpdate anchors: [ARAnchor]) {
        let filtered = anchors.compactMap({$0 as? ARPlaneAnchor})
        let gridAnchors = arView.scene.anchors.compactMap({$0 as? ARGrid})
        for anchor in filtered{
            let updateAnchor = gridAnchors.first(where: {$0.identifier == anchor.identifier})!
            updateAnchor.transform.matrix = anchor.transform
            updateAnchor.didUpdate(anchor: anchor)
        }
    }

我对 Metal 还很陌生，这是我的第一个项目。因此，如果我在某个地方搞砸了，我会非常高兴收到改进这一点的建议。 希望这有帮助