Skip to content

Framework Support

Integrating with 3D Frameworks

The Cognitive3D WebXR SDK is designed to work with or without a specific 3D framework. However, to unlock the most features and simplify the integration process, we provide Adapters for popular WebXR engines.

Why Use an Adapter?

Using a framework-specific adapter offers several key advantages:

  • Automatic Data Collection: Adapters can automatically hook into your engine's render loop and scene graph to collect data.

  • Performance Profiling: Adapters enable the Built-in Performance Sensors to automatically track metrics.

  • Helper Functions: Adapters provide convenient helper functions, such as the ability to export your entire scene for upload to the Cognitive3D dashboard.

  • Engine-Specific Metadata: The SDK will automatically record which engine and version you are using.

Supported Features

Feature ThreeJS Mattercraft Wonderland Engine PlayCanvas Babylon Plain Javascript
Core API (Session Properties, Custom Events, etc... ) ✅ ✅ ✅ ✅ ✅ ✅
Automatic WebXR Gaze Tracking ✅ ✅ ✅ ✅ ✅ ❌
Automatic Performance Sensors ✅ ✅ ❌ ✅ ❌ ❌
Object Export ✅ ✅ ✅ ⚠ ❌ ❌ ❌
Scene Export ✅ ✅ ✅ ⚠ ❌ ❌ ❌
Dynamic Objects ✅ ✅ ❌ ❌ ❌ ❌
Sample app provided ✅ ✅ ✅ ❌ ❌ ❌

Note: The WebXR SDK is currently in development and we are working on new features. Support for the above may come later.

Gaze Tracking Source

The SDK supports two gaze tracking modes, configurable via the gazeTrackingSource setting:

  • "webxr" (default): Gaze position and rotation are read directly from the WebXR XRViewerPose on each XR frame. This is the standard mode for most integrations.

  • "engine": Gaze data is recorded by the engine adapter's raycaster instead from WebXR. Use this mode if your experience implements locomotion such as teleportation or snap-turning.

const settings = {
  config: {
    // ...
    gazeTrackingSource: "engine", // Use the adapter's raycaster for gaze data
  },
};

Framework Integration Guides

For detailed setup instructions, see the dedicated page for your framework:

  • Three.js — Full-featured adapter with gaze tracking, profiling, dynamic objects, and scene/object export.
  • Mattercraft — Dedicated NPM package with Mattercraft-native behaviors, visual properties panel, dynamic objects, and export.
  • Wonderland Engine — Core API with gaze tracking and scene export.
  • PlayCanvas — Core API with automatic gaze tracking and performance profiling.
  • Plain JavaScript / No Framework — Core API features without an engine adapter.

Sample Applications

For more detailed examples and complete project integrations (Mattercraft, Three.js, Wonderland Engine), please see our sample applications repository

intercom If you have a question or any feedback about our documentation please use the Intercom button (purple circle) in the lower right corner of any web page or join our Discord.