AR Clip SDK

Bauen Sie AR-Erlebnisse in Unity, die sich in AR Clip als App Clip öffnen. Ihre WebGL-Inhalte werden gestreamt, und ARKit und AR Clip VPS übernehmen die Lokalisierung.

Bevor Sie beginnen

• Unity 2020 LTS oder neuer (getestet mit 2021+)
• Das Build-Ziel WebGL
• Zugang zum AR Clip Zip-Uploader

Auf einem Smartphone testen

Im Unity Editor sind die meisten AR Clip APIs in Application.isEditor gekapselt. Für echtes Tracking erstellen Sie einen WebGL-Build und testen in der mobilen AR Clip App.

Das Paket installieren

1. Öffnen Sie Window → Package Manager.
2. Klicken Sie auf + → Add package from Git URL….
3. Fügen Sie https://github.com/WebAR-Studio/arclip_sdk.git ein und bestätigen Sie.

Löschen Sie vor dem Import einen eventuell vorhandenen alten Ordner Assets/ARLib. Sonst erhalten Sie Fehler wegen doppelter Symbole wie diesen:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Die Beispiele importieren

Unter Package Manager → AR Clip → Samples:

• Importieren Sie WebGLTemplates und kopieren Sie den dabei erzeugten Ordner in die oberste Ebene von Assets/. Er erscheint dann unter Project Settings → Player → WebGL Template.
• Importieren Sie TransparentBackground und verschieben Sie TransparentBackground.jslib nach Assets/Plugins. So erhält WebGL einen transparenten Hintergrund.

Die Szene einrichten

1. Fügen Sie ein leeres GameObject mit dem Namen ARClipController hinzu.
2. Fügen Sie ihm ARLibController hinzu und weisen Sie dem Feld renderCamera eine Kamera zu.
3. Schalten Sie die Camera-Komponente an diesem GameObject aus. Setzen Sie Clear Flags = Solid Color und verwenden Sie RGBA(0,0,0,0) als Hintergrund.
4. Optional: Fügen Sie im Editor ARLibTester (aus den Samples) hinzu, um native Callbacks zu simulieren.

Minimales Bootstrap-Skript

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

Die VPS-Lokalisierung starten

Richten Sie VPS nach der Initialisierung und vor dem Start der Lokalisierung ein:

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Hören Sie auf diese Ereignisse:

• ARLibController.VPSInitialized – VPS ist bereit.
• ARLibController.VPSPositionUpdated – eine neue Pose aus der Lokalisierung.
• ARLibController.OnVPSErrorHappened – ein Fehler, als String.

Um festzulegen, wie oft an einem bestimmten Ort Anfragen gesendet werden, nutzen Sie SetSendPhotoDelay, SetGpsAccuracyBarrier und SetFirstRequestDelay.

Bild- und Flächen-Tracking

• Registrieren Sie Bilder mit AddTrackingImage, bevor Sie das Tracking einschalten. Warten Sie auf TrackedImagesArrayUpdate als Bestätigung, dass sie geladen sind.
• Rufen Sie EnableSurfaceTracking("horizontal" | "vertical" | "both") auf, um Ebenen zu finden. Die Ergebnisse kommen über SurfaceTrackingUpdated.

Build und Upload

1. WebGL-Vorlage wählen. Wählen Sie unter Project Settings → Player → WebGL → Resolution and Presentation die Vorlage, die Sie aus dem Paket kopiert haben.
2. Build erstellen. Nutzen Sie File → Build Settings → WebGL → Build.
3. Zippen. Packen Sie den Build so, dass index.html in der obersten Ebene des Zip-Archivs liegt.
4. Hochladen. Laden Sie das Archiv im Zip-Uploader hoch.
5. Testen. Scannen Sie den QR-Code, den Sie erhalten, mit der AR Clip App für iOS.

Fehlerbehebung

• Kein Kamerabild in WebGL. Prüfen Sie, dass TransparentBackground.jslib in Assets/Plugins liegt und die Render-Kamera zugewiesen und ausgeschaltet ist.
• Keine AR-Ereignisse im Play-Modus des Editors. Das ist zu erwarten. Nutzen Sie ARLibTester oder erstellen Sie einen WebGL-Build, um echte Daten zu bekommen.
• Fehler wegen doppelter Symbole. Prüfen Sie, ob Sie den alten Ordner ARLib vor dem Import des Pakets entfernt haben.