UnityのPUN2で描画処理をうまく同期させたい

Question

前提・実現したいこと

Unityでオンラインマルチプレイ対応のお絵描きアプリ（スマホ版お絵かきの森のようなもの）を作成しています。
PUN2を使って同期処理の実装をしているのですが、描画の部分での同期がうまくいきません。
同期自体はできるのですが、実際に描画した側と、同期をとって描画された側とでかなり描画に差が出てしまいます。
下記の画像のような感じになります。
ちなみに描画自体は、下記のスクリプトをアタッチした「LineRenderer」をコンポーネントとして持つオブジェクト（プレハブ）をPhotonNetwork.Instantiateで生成して行っています。

発生している問題

Update関数での描画処理に対して、IPunObservable.OnPhotonSerializeViewでのポジションの値の送受信が少ない？為か、
同期した側がカクカクで描画されてしまう。

該当のソースコード

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using Photon.Pun;

public class Paint : MonoBehaviourPunCallbacks, IPunObservable
{
    LineRenderer paint; //描画担当
    Vector3 mousePosition; //タッチした座標
    Vector3 position; //タッチした座標を変換した値
    int count; //頂点の数
    bool paintOn; //描画するかどうか

    void Start()
    {
        paintOn = true;
        //paintの初期設定
        paint = GetComponent<LineRenderer>();
        paint.startWidth = 0.1f;
        paint.endWidth = 0.1f;
        paint.material.color = Color.black;
        
        mousePosition = Input.mousePosition; //タッチした場所の座標を取得
        position = Camera.main.ScreenToWorldPoint(mousePosition); //座標の変換
        if((2.7f > position.x) && (position.x > -2.7f) && (2.2f > position.y) && (position.y > -3.4f)){ //描画範囲内か確認
            count += 1;
            paint.positionCount = count; //頂点の数設定
            paint.SetPosition(count - 1, new Vector3(position.x, position.y, 1f)); //描画処理
        }
    }


    void Update()
    {
        if(paintOn == true){
            if(Input.GetMouseButton(0)){
                mousePosition = Input.mousePosition;
                position = Camera.main.ScreenToWorldPoint(mousePosition);
                if((2.7f > position.x) && (position.x > -2.7f) && (2.2f > position.y) && (position.y > -3.4f)){ 
                    count += 1;
                    paint.positionCount = count; 
                    paint.SetPosition(count - 1, new Vector3(position.x, position.y, 1f));
                }
            }
            if(Input.GetMouseButtonUp(0)){
                paintOn = false; //指を離したら、このオブジェクトでの描画を終わる
            }
        }
    }

    void IPunObservable.OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info){
        if(stream.IsWriting){
            if(count > 0){
                stream.SendNext(position.x);
                stream.SendNext(position.y);
            }
        } else {
            //描画した側の座標を受け取って、他クライアント側でも描画する
            position.x = (float)stream.ReceiveNext();
            position.y = (float)stream.ReceiveNext();
            paint = GetComponent<LineRenderer>();
            Vector3 pos = new Vector3(position.x, position.y, 1f);
            count += 1;
            paint.positionCount = count;
            paint.SetPosition(count - 1, pos);
        }
    }
}

考えた対策案

①数秒ごとに同期させて、完全なリアルタイムではなく、徐々に絵を他のクライアントに見せる。
②同期できるポジションの値をどうにかして増やす。
③カメラを同期させて、描画している部分を映す。（カメラの同期なんてない？）
などを考えてみましたが、正直①～③のどれもどうやっていいのか分かりません。
①～③のどれかは実現できるのか、他に対策があるのか、そもそも描画処理自体を別の方法で行った方が良いのかなど、
何かアドバイスが欲しいです。よろしくお願いします！

補足情報

PCはWindows10を使用しています。
Unityのバージョンは2019.3.13です。

Answer 1

そのままでは転送量が多すぎて改良が必要ですが、こんな感じでとりあえず描けます。

using UnityEngine;
using Photon.Pun;
using System.Collections.Generic;
using System.Linq;

[RequireComponent(typeof(LineRenderer), typeof(PhotonView))]
public class NetworkLineDrawingController : MonoBehaviour
{
    LineRenderer m_line;
    PhotonView m_view;
    /// <summary>描画中フラグ</summary>
    bool m_isPainting;
    /// <summary>非オーナー側でのみ利用する。送られてきた Line Renderer の Positions を追加する。</summary>
    SortedDictionary<int, Vector3> pDict = new SortedDictionary<int, Vector3>();

    void Start()
    {
        Camera.main.orthographic = true;
        m_line = GetComponent<LineRenderer>();
        m_view = GetComponent<PhotonView>();
    }

    void Update()
    {
        if (PhotonNetwork.IsConnected && !m_view.IsMine) return;    // 接続していない時に描画可能にすることで、シーンにただ置くだけで描画動作確認だけはできる

        if (m_isPainting)
        {
            if (Input.GetMouseButton(0))
            {
                Vector3 pos = Camera.main.ScreenToWorldPoint(Input.mousePosition);
                pos.z = 0;
                m_line.positionCount++;
                m_line.SetPosition(m_line.positionCount - 1, pos);
                SendLinePosition(m_line.positionCount - 1, pos);
            }
            if (Input.GetMouseButtonUp(0))
            {
                m_isPainting = false;
                m_view.RPC("ResetLinePositions", RpcTarget.Others, null);
            }
        }
        else
        {
            if (Input.GetMouseButtonDown(0))
            {
                m_line.positionCount = 0;
                m_isPainting = true;
            }
        }
    }

    /// <summary>
    /// Line Renderer の Potision を RPC で送る。オーナーのみが呼ぶことを想定している。
    /// </summary>
    /// <param name="index"></param>
    /// <param name="position"></param>
    void SendLinePosition(int index, Vector3 position)
    {
        object[] p = { (object)index, (object)position };
        m_view.RPC("SetLinePosition", RpcTarget.Others, p);
    }

    /// <summary>
    /// Line Renderer の Position を受け取る。
    /// </summary>
    /// <param name="index"></param>
    /// <param name="position"></param>
    [PunRPC]
    void SetLinePosition(int index, Vector3 position)
    {
        // 辞書に追加して index でソートし、position のみを配列に変換して Line Renderer の Positions にセットする。
        // Position がオーナー側で描画された順番に送られてくるとは限らないためこのような実装にしている。
        pDict.Add(index, position);
        Vector3[] positions = pDict.Values.ToArray();
        m_line.positionCount = positions.Length;
        m_line.SetPositions(positions);
    }

    /// <summary>
    /// 辞書をクリアする。次に SetLinePosition が呼ばれた時に新しい線を描くために呼ぶ。
    /// </summary>
    [PunRPC]
    void ResetLinePositions()
    {
        Debug.Log("Enter ResetLinePositions");
        pDict.Clear();
    }
}

実行中の動画

このコードのままではマウスが止まっている時も毎フレーム Position を送ってしまうので、MonoBehaviour.OnMouseDrag() で Position を追加・送信するなど転送量を減らす工夫が必要だと思います。また、クライアント２つでとりあえずテストしただけで、３人以上とかのいろいろなケースは考慮してません。

Comments

[bboydaisuke]

observe というのは毎フレーム監視するわけではないし、stream は普通に間が抜けます。
全ての Positions を確実に送るために、Position が増えるたびにその Position を RPC で送るというのが基本的なアイデアです。
途中で順番が狂ったり通信速度が落ちて一時的に乱れたり遅くなったりすることはあるでしょうが、なるべくリアルタイムに描画して、かつ最終的にオーナー側と同じ Line になるであろう実装を試みました。

[sh0i]

bboydaisukeさん、回答ありがとうございます！
一応自己解決できたのですが、回答頂いたような方法とは違ったので勉強になります。今回のような場合だとRPCの使用が基本なんですね。よりベターな方法を見つけれるようにもっと学びを深めたいと思います。回答助かりました。

Answer 2

一応自己解決したので、コードを載せておきます。
参考程度に見てください。何かご指摘あればご教授ください。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

using Photon.Pun;
public class Paint : MonoBehaviourPunCallbacks, IPunObservable
{
    LineRenderer paint; //描画担当
    Vector3 mousePosition; //タッチした座標
    Vector3 position; //タッチした座標を変換した値
    int count; //頂点の数
    bool paintOn; //描画するかどうか
    List<Vector3> receivePosition = new List<Vector3>(); //受信側で扱うポジションのリスト
    int receiveCount; //受信側で扱うポジションのインデックス番号
    bool receivePaint = false; //受信側で描画するかどうか

    void Start()
    {
        paintOn = true;
        //paintの初期設定
        paint = GetComponent<LineRenderer>();
        paint.startWidth = 0.05f;
        paint.endWidth = 0.05f;
        paint.material.color = Color.black;
        paint.startColor = Color.black;
        paint.endColor = Color.black;

        if(photonView.IsMine){
            mousePosition = Input.mousePosition; //タッチした場所の座標を取得
            position = Camera.main.ScreenToWorldPoint(mousePosition); //座標の変換
            if((2.7f > position.x) && (position.x > -2.7f) && (2.2f > position.y) && (position.y > -3.4f)){ //描画範囲内か確認
                count += 1;
                paint.positionCount = count; //頂点の数設定
                paint.SetPosition(count - 1, position); //描画処理
                receivePosition.Add(position);
            }
        }
    }


    void Update()
    {
        if(photonView.IsMine){
            if(paintOn == true){
                if(Input.GetMouseButton(0)){
                    mousePosition = Input.mousePosition;
                    position = Camera.main.ScreenToWorldPoint(mousePosition);
                    if((2.7f > position.x) && (position.x > -2.7f) && (2.2f > position.y) && (position.y > -3.4f)){ 
                        count += 1;
                        paint.positionCount = count; 
                        paint.SetPosition(count - 1, new Vector3(position.x, position.y, 1f));
                        receivePosition.Add(position);
                    }
                }
                if(Input.GetMouseButtonUp(0)){
                    paintOn = false; //指を離したら、このオブジェクトでの描画を終わる
                }
            }
        }
    }

    void IPunObservable.OnPhotonSerializeView(PhotonStream stream, PhotonMessageInfo info){
        if(stream.IsWriting){
            stream.SendNext(count);
            stream.SendNext(paintOn);
            //描画したポジションを送信する
            for(int i = receiveCount; receiveCount < count; receiveCount++){
                stream.SendNext(receivePosition[receiveCount]);
            }
        } else {
            //描画した人の座標を受け取って、他クライアント側でも描画する
            count = (int)stream.ReceiveNext();
            paintOn = (bool)stream.ReceiveNext();
            if(paintOn == true){
                receivePaint = true;
            }
            if(receivePaint == true){
            paint = GetComponent<LineRenderer>();
                for(int i = receiveCount; receiveCount < count; receiveCount++){
                    position = (Vector3)stream.ReceiveNext();
                    receivePosition.Add(position);
                    paint.positionCount = receiveCount + 1; 
                    paint.SetPosition(receiveCount, new Vector3(receivePosition[receiveCount].x, receivePosition[receiveCount].y, 1f));
                }
            }
            if(paintOn == false){
                receivePaint = false;
            }
        }
    }
}

Comments

[bboydaisuke]

全ての position を毎回送り直してたりしませんか？もしそうだったら転送データに無駄が多すぎる（転送量が不必要に大きくなりすぎる）と思います。