AR Clip SDK
Überblick
AR Clip ermöglicht App-Clip-basierte AR-Erlebnisse: WebGL-Inhalte werden gestreamt, während ARKit und die WebAR³ VPS-Engine die Lokalisierung übernehmen. Folgen Sie dem Immersal-Stil: Voraussetzungen prüfen, Paket einbinden, Szene vorbereiten, VPS starten und die WebGL-Build hochladen.
Voraussetzungen
- Unity 2020 LTS oder neuer (getestet mit 2021+)
- Build-Target WebGL
- Zugriff auf den AR-Clip-Zip-Uploader (https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html)
Hinweis: Im Unity-Editor sind viele AR-Clip-APIs hinter
Application.isEditordeaktiviert. Für echtes Verhalten WebGL bauen und mit der AR-Clip-App testen.
Paket installieren
- Window → Package Manager öffnen.
- + → Add package from Git URL… auswählen.
https://github.com/WebAR-Studio/arclip_sdk.giteinfügen und bestätigen.
Vor dem Import eventuell vorhandenen Ordner Assets/ARLib löschen, um doppelte Typen zu vermeiden:
error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'
Samples importieren
In Package Manager → AR Clip → Samples:
- WebGLTemplates importieren und den Ordner in
Assets/kopieren, damit er unter Project Settings → Player → WebGL Template auswählbar ist. - TransparentBackground importieren und
TransparentBackground.jslibnachAssets/Pluginsverschieben, damit WebGL transparent rendert.
Szene vorbereiten
- Leeres GameObject
ARClipControlleranlegen. ARLibControllerhinzufügen undrenderCamerazuweisen.- Camera-Komponente deaktivieren, Clear Flags = Solid Color setzen und Farbe RGBA(0,0,0,0) wählen.
- Optional
ARLibTesteraus den Samples aktivieren, um Editor-Events zu simulieren.
Minimaler Bootstrap-Script
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}");
}
}
VPS-Lokalisierung starten
VPS nach der Initialisierung konfigurieren und starten:
var settings = new VPSSettings
{
apiKey = "your-api-key",
locationIds = new[] { "your-location-id" }
};
ARLibController.SetupVPS(settings);
ARLibController.StartVPS();
Wichtige Events:
ARLibController.VPSInitializedsignalisiert, dass VPS bereit ist.ARLibController.VPSPositionUpdatedliefert Lokalisierungsposten.ARLibController.OnVPSErrorHappenedmeldet Fehlertexte.
Timing-Helfer wie SetSendPhotoDelay, SetGpsAccuracyBarrier und SetFirstRequestDelay steuern die Anfragefrequenz.
Tracking-Module
- Bilder via
AddTrackingImageregistrieren und aufTrackedImagesArrayUpdatewarten, bevor Tracking aktiviert wird. EnableSurfaceTracking("horizontal" | "vertical" | "both")startet die Ebenenerkennung; Ergebnisse kommen überSurfaceTrackingUpdated.
Build- & Upload-Workflow
- WebGL-Template wählen: In Project Settings → Player → WebGL → Resolution and Presentation den kopierten Template auswählen.
- Build erstellen: File → Build Settings → WebGL → Build.
- Zip erstellen: Build-Inhalt zippen,
index.htmlmuss im Wurzelverzeichnis liegen. - Upload: Zip über https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html hochladen.
- Test: QR-Code mit der AR Clip iOS-App scannen (https://apps.apple.com/app/ar-clip/id6742754238).
Fehlerbehebung
- Kein Kamerabild: Prüfen, ob
TransparentBackground.jslibinAssets/Pluginsliegt und die Kamera korrekt gesetzt sowie deaktiviert ist. - Keine AR-Events im Editor: erwartetes Verhalten –
ARLibTesternutzen oder WebGL-Build testen. - Doppelte Typen: sicherstellen, dass der alte Ordner
ARLibvor dem Import entfernt wurde.