A Minimal Example of Specs Sync Kit Transform Synchronization

Experience real-time transform synchronization across Connected Lenses with this minimal example. Watch as objects move and rotate in perfect harmony across multiple Specs devices.

NOTE: This project is designed for Connected Lenses on the Specs platform. You must set the simulation mode in Lens Studio Preview to Specs (2024) and test with multiple users for full functionality.

Specs Sync Kit Transform Example demonstrates real-time transform synchronization, showcasing how objects can be synchronized across multiple Connected Lenses users. This project focuses on transform synchronization - the ability to share position, rotation, and scale data across all participants in real-time.

• Transform Synchronization: Real-time position, rotation, and scale sharing
• Multi-User Support: Multiple users can interact with the same synchronized object
• Interactive Controls: Simple input handling for object manipulation
• Network Events: Real-time communication between Connected Lenses
• Visual Feedback: Clear indication of synchronization status

This system uses Specs Sync Kit for real-time multiplayer synchronization. The core concept is transform synchronization - when one user moves, rotates, or scales an object, those changes are instantly reflected across all other users' devices.

Objects that synchronize data/behavior across all users:

// Create a sync entity for transform synchronization
this.syncEntity = new SyncEntity(this, null, false, "Session");

Synchronized transform data that updates in real-time:

private positionProp = StorageProperty.manualVector3("position", new Vector3(0, 0, 0));
private rotationProp = StorageProperty.manualVector3("rotation", new Vector3(0, 0, 0));
private scaleProp = StorageProperty.manualVector3("scale", new Vector3(1, 1, 1));

One-time messages for immediate actions:

// Send transform update
this.syncEntity.sendEvent('transform_update', transformData);

// Listen for transform changes
this.syncEntity.onEventReceived.add('transform_update', (messageInfo) => {
    this.handleTransformUpdate(messageInfo);
});

Purpose: Manages object transform synchronization

Key Features:

• Real-time position, rotation, and scale updates across all users
• Touch/gesture controls for object manipulation
• Broadcasts transform changes to all participants
• Clear indication of synchronization status

Purpose: Handles the core synchronization logic

Key Features:

• Persistent transform data across session
• Real-time communication between users
• Determines which user can modify the object
• Manages connection and synchronization status

// Update local transform
this.transform.position = newPosition;
this.transform.rotation = newRotation;
this.transform.scale = newScale;

// Sync to network
this.positionProp.set(newPosition);
this.rotationProp.set(newRotation);
this.scaleProp.set(newScale);

// Check if this user owns the object
if (this.syncEntity.networkRoot.locallyCreated) {
    // This user can modify the object
    this.handleUserInput();
} else {
    // This user observes the object
    this.updateFromNetwork();
}

// Send transform update to all users
this.syncEntity.sendEvent('transform_update', {
    position: this.transform.position,
    rotation: this.transform.rotation,
    scale: this.transform.scale
});

• Lens Studio: v5.15.4+

Note: Ensure Lens Studio is compatible with Specs for your Specs device and OS versions.

• Specs OS: v5.64+
• Target Platform: Snap Specs (required for Connected Lenses)
• Testing: Multiple Specs devices or simulation accounts

1. Open project in Lens Studio v5.15.4+
2. Ensure all packages are imported:
   • SpectaclesSyncKit
   • SpectaclesInteractionKit

// TransformController configuration
@input syncEntity: SyncEntity              // Sync entity reference
@input transformTarget: SceneObject        // Object to synchronize
@input inputHandler: InputComponent        // Input handling component

• Requirement: Different Snapchat accounts
• Features: Full transform synchronization
• Connection: Proper user ID handling across devices

1. Set Device Type Override to Specs (2024)
2. Use Multi-User Preview for testing sync functionality
3. Test if transform changes sync across users

1. Deploy to multiple Specs devices with different Snapchat accounts
2. Test the complete transform sync flow:
   • User A moves/rotates the object
   • User B sees the changes in real-time
   • User B can also modify the object
   • Changes propagate to all users instantly

Error: Cannot sync transform - sync entity not ready

Solution: Ensure SessionController.getInstance().notifyOnReady() completes before sync operations.

Warning: Transform changes not propagating to other users

Solution:

1. Verify SpectaclesSyncKit is properly imported
2. Check network connectivity
3. Ensure proper user authentication

1. Session Creation: Users join Connected Lens session
2. Object Sync: Shared object appears for all users
3. Transform Interaction: User touches/gestures to move object
4. Real-time Sync: Changes propagate to all users instantly
5. Multi-user Interaction: Multiple users can modify the same object
6. Visual Feedback: Color changes indicate ownership and sync status

• Total Components: 3 core TypeScript modules
• Sync Entities: 1 main type (TransformController)
• Storage Properties: 3 transform data types (position, rotation, scale)
• Network Events: 1 transform update event
• Input Handling: Touch/gesture support
• Visual Feedback: Color-based ownership indication

Specs Sync Kit Transform Example follows minimal design principles for AR synchronization:

• Simple Interaction: Direct touch/gesture manipulation
• Clear Feedback: Visual indication of sync status
• Real-time Updates: Instant propagation of changes
• Multi-user Support: Shared object interaction
• Minimal Complexity: Focus on core sync functionality

We welcome contributions to improve the Specs Sync Kit Transform Example! This project demonstrates fundamental synchronization patterns that can benefit the entire Specs community.

1. Follow Sync Kit Patterns: Use established transform synchronization patterns
2. Maintain Simplicity: Keep the example minimal and focused
3. Optimize Performance: Consider multi-user scenarios and network efficiency
4. Test Thoroughly: Verify functionality across multiple Specs devices
5. Document Patterns: Share reusable sync and transform patterns

Assets/Project/Scripts/
├── TransformController.ts    # Main transform synchronization
├── SyncEntity.ts            # Core sync entity management
├── InputHandler.ts          # Input handling and processing
└── VisualFeedback.ts        # Visual status indication

• Specs Sync Kit Documentation
• Connected Lenses Guide
• SpectaclesInteractionKit Documentation
• Lens Studio Documentation

Connect with the Specs developer community:

• Specs Community: Reddit
• Developer Forums: Snap Developer Forums
• Documentation: Specs Developer Portal

We're excited to see what you build with Connected Lenses and Specs Sync Kit!

---Maintained with 👽 by the SPECS Team

​

​

​

​