Sachin Pandey•2d ago

Whiteboard for multiplayer using normcore and meta avatar

I have created a multiplayer scene with whiteboard functionality but the problem is the brush strokes are viewable to other player in doted manner but owner can view completely

2 Replies

kapa.ai•2d ago

Hi @Sachin Pandey. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It sounds like you're experiencing an issue with your multiplayer whiteboard implementation using Normcore, where brush strokes appear complete to the owner but appear dotted or incomplete to other players. This issue is likely related to how the brush stroke data is being synchronized across clients. Based on the knowledge sources, here are some suggestions to fix this problem: 1. Check your ribbon point synchronization: The multiplayer drawing app example in Normcore uses a RealtimeArray<RibbonPointModel> to synchronize brush strokes. Make sure you're properly adding points to this array and that the modelAdded event is being handled correctly on all clients. Creating a Multiplayer Drawing App shows how this should be implemented. 2. Implement proper model replacement handling: When a player joins late, they need to properly render existing brush strokes. Make sure you have code similar to this in your OnRealtimeModelReplaced method:

protected override void OnRealtimeModelReplaced(BrushStrokeModel previousModel, BrushStrokeModel currentModel) {
    // Clear Mesh  
    _mesh.ClearRibbon();
      
    if (previousModel != null) {
        // Unregister from events  
        previousModel.ribbonPoints.modelAdded -= RibbonPointAdded;
    }
      
    if (currentModel != null) {
        // Replace ribbon mesh  
        foreach (RibbonPointModel ribbonPoint in currentModel.ribbonPoints)
            _mesh.InsertRibbonPoint(ribbonPoint.position, ribbonPoint.rotation);

        // Update last ribbon point to match brush tip position & rotation  
        _ribbonEndPosition = model.brushTipPosition;
        _ribbonEndRotation = model.brushTipRotation;
        _mesh.UpdateLastRibbonPoint(model.brushTipPosition, model.brushTipRotation);
// Turn off the last ribbon point if this brush stroke is finalized  
        _mesh.skipLastRibbonPoint = model.brushStrokeFinalized;
          
        // Let us know when a new ribbon point is added to the mesh  
        currentModel.ribbonPoints.modelAdded += RibbonPointAdded;
    }
}

protected override void OnRealtimeModelReplaced(BrushStrokeModel previousModel, BrushStrokeModel currentModel) {
    // Clear Mesh  
    _mesh.ClearRibbon();
      
    if (previousModel != null) {
        // Unregister from events  
        previousModel.ribbonPoints.modelAdded -= RibbonPointAdded;
    }
      
    if (currentModel != null) {
        // Replace ribbon mesh  
        foreach (RibbonPointModel ribbonPoint in currentModel.ribbonPoints)
            _mesh.InsertRibbonPoint(ribbonPoint.position, ribbonPoint.rotation);

        // Update last ribbon point to match brush tip position & rotation  
        _ribbonEndPosition = model.brushTipPosition;
        _ribbonEndRotation = model.brushTipRotation;
        _mesh.UpdateLastRibbonPoint(model.brushTipPosition, model.brushTipRotation);
// Turn off the last ribbon point if this brush stroke is finalized  
        _mesh.skipLastRibbonPoint = model.brushStrokeFinalized;
          
        // Let us know when a new ribbon point is added to the mesh  
        currentModel.ribbonPoints.modelAdded += RibbonPointAdded;
    }
}

3. Check your ribbon point density: If you're not adding enough points to your brush strokes, they might appear dotted to other players. Make sure your AddRibbonPointIfNeeded method is adding points frequently enough:

private void AddRibbonPointIfNeeded() {
    // Only add ribbon points if this brush stroke is being drawn by the local client.
    if (!realtimeView.isOwnedLocallySelf)
        return;

    // If the brush stroke is finalized, stop trying to add points to it.
    if (model.brushStrokeFinalized)
        return;

    if (Vector3.Distance(_ribbonEndPosition, _previousRibbonPointPosition) >= 0.01f ||
        Quaternion.Angle(_ribbonEndRotation, _previousRibbonPointRotation) >= 10.0f) {

        // Add ribbon point model to ribbon points array. This will fire the RibbonPointAdded event to update the mesh.
        AddRibbonPoint(_ribbonEndPosition, _ribbonEndRotation);

        // Store the ribbon point position & rotation for the next time we do this calculation
        _previousRibbonPointPosition = _ribbonEndPosition;
        _previousRibbonPointRotation = _ribbonEndRotation;
    }
}

private void AddRibbonPointIfNeeded() {
    // Only add ribbon points if this brush stroke is being drawn by the local client.
    if (!realtimeView.isOwnedLocallySelf)
        return;

    // If the brush stroke is finalized, stop trying to add points to it.
    if (model.brushStrokeFinalized)
        return;

    if (Vector3.Distance(_ribbonEndPosition, _previousRibbonPointPosition) >= 0.01f ||
        Quaternion.Angle(_ribbonEndRotation, _previousRibbonPointRotation) >= 10.0f) {

        // Add ribbon point model to ribbon points array. This will fire the RibbonPointAdded event to update the mesh.
        AddRibbonPoint(_ribbonEndPosition, _ribbonEndRotation);

        // Store the ribbon point position & rotation for the next time we do this calculation
        _previousRibbonPointPosition = _ribbonEndPosition;
        _previousRibbonPointRotation = _ribbonEndRotation;
    }
}

You might need to decrease the distance threshold (0.01f) to add points more frequently. 4. Ensure proper event handling: Make sure you're properly handling the RibbonPointAdded event to update the mesh on all clients:

private void RibbonPointAdded(RealtimeArray<RibbonPointModel> ribbonPoints, RibbonPointModel ribbonPoint, bool remote) {
    // Add ribbon point to the mesh  
    _mesh.InsertRibbonPoint(ribbonPoint.position, ribbonPoint.rotation);
}

private void RibbonPointAdded(RealtimeArray<RibbonPointModel> ribbonPoints, RibbonPointModel ribbonPoint, bool remote) {
    // Add ribbon point to the mesh  
    _mesh.InsertRibbonPoint(ribbonPoint.position, ribbonPoint.rotation);
}

For a complete implementation example, you can download the finished project from Creating a Multiplayer Drawing App. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@1172236550533300310> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Whiteboard for multiplayer using normcore and meta avatar

Did you find this page helpful?