Web SDKでウィンドウサイズ変更時の挙動の違いについて

Cubism SDK トラブル報告
, ,
1

報告の際には、必ず以下の項目をご入力ください
【Cubism SDKのバージョン】Cubism SDK for Web R4
【スマートフォンの場合などは端末名】Macbook Pro
【OS名・バージョン】macOS Monterey 12.3.1
【開発使用ツール】Visual Studio Code 1.66.2
【不具合の状況】
・ブラウザのウィンドウサイズを変更したときの挙動が、モデルによって異なる。
・サンプルのマークやひよりではウィンドウサイズを変更すると、モデルのサイズが変更され、中央に表示されるが、ととろ・ひじきやわんころもちではサイズの変更、移動がされない。
・コードはチュートリアルの物を利用。

以上の状況です。自作のモデルも試してみましたが、上手くリサイズされず、どういった差異でこのような違いが生まれるのかご教授いただけると助かります。

2

モデルの書き出し形式であるmoc3形式（マーク、ひより）と
旧方式のmoc方式（ととろ・ひじきやわんころもち）の違いかも

3

返信ありがとうございます。どちらのモデルもmoc3なので、そこが原因ではなさそうです。

4

@momomo 様
いつも弊社製品をご愛顧くださり誠にありがとうございます。
Live2Dスタッフでございます。

とろろやひじき、わんころもちはCubism Editor 2.1から4系に変換したモデルとなりますが、
変換によって想定と異なる動作となってしまった可能性がございます。
詳細については現在調査中です。

自作のモデルについても上手くリサイズがされないとのことですが、
モデルを作成したCubismEditorのバージョン及び書き出しバージョンを
お教えいただければと思います。
また、詳細な原因調査のため、モデルデータをDMにて提供いただけますでしょうか。

【DMの送信手順】
1.この返信の投稿者名［ueno_staff］をクリックします。
2.右上の[メッセージ]をクリックします。
3.メッセージ編集画面が開きますので、アイコン[アップロード]をクリックしファイルを選択します。
4.下部の[メッセージ]をクリックし、ご送信ください。
（ファイルは圧縮していただくか、サイズが大きくて添付できない場合はアップロードサイトなどをご利用下さい）

以上、よろしくお願いいたします。

5

@momomo 様

当該挙動につきまして調査にお時間をいただき、大変申し訳ございません。
こちら開発内で調査し原因が判明しましたので、修正方法と併せてご連絡いたします。
原因としましては、「モデルにマスクを使用していない」際に、
GLのビューポートにリサイズした値が適用されていないことで、一部モデルのリサイズ処理に不具合が生じておりました。
つきましては、以下URLにございます onResize() などにてgl.Viewportにリサイズされたcanvasを渡すことで正しく動作いたします。

以下は修正スニペットとなりますので、こちらを適用しお試しください。

  public onResize(): void {
    this._resizeCanvas();
    this._view.initialize();
    this._view.initializeSprite();

    // キャンバスサイズを渡す
    const viewport: number[] = [0, 0, canvas.width, canvas.height];

    gl.viewport(
      viewport[0],
      viewport[1],
      viewport[2],
      viewport[3]
    );
  }

この度は製品の利用にご不便をおかけし、誠に申し訳ございませんでした。

6

ご対応いただきありがとうございます。
修正スニペットを適用したところ、正常に動作いたしました。
よろしくお願い致します。

「いいね！」 1