Update to Cubism 4 SDK for Web R5 beta1

.eslintrc.yml

@@ -4,7 +4,6 @@ extends:
   - plugin:@typescript-eslint/recommended
   - plugin:@typescript-eslint/recommended-requiring-type-checking
   - plugin:prettier/recommended
-  - prettier/@typescript-eslint
 plugins:
   - '@typescript-eslint'
 parser: '@typescript-eslint/parser'
@@ -16,7 +15,35 @@ rules:
   prettier/prettier:
     - error
     - singleQuote: true
-  '@typescript-eslint/camelcase': warn
+  camelcase: "off"
+  '@typescript-eslint/naming-convention':
+    - warn
+    - selector: default
+      format:
+      - camelCase
+    - selector: variable
+      format:
+      - camelCase
+      - UPPER_CASE
+      leadingUnderscore: allow
+      trailingUnderscore: allow
+    - selector: class
+      format:
+      - PascalCase
+      trailingUnderscore: allow
+    - selector: parameter
+      format:
+      - camelCase
+      leadingUnderscore: allow
+    - selector: memberLike
+      modifiers:
+      - private
+      format:
+      - camelCase
+      leadingUnderscore: require
+    - selector: typeLike
+      format:
+      - PascalCase
   '@typescript-eslint/no-use-before-define': off
   no-empty-function: off
   '@typescript-eslint/no-empty-function':
@@ -25,6 +52,12 @@ rules:
       - constructors
   'no-fallthrough': warn
   '@typescript-eslint/unbound-method': off
+  '@typescript-eslint/no-unsafe-assignment': off
+  '@typescript-eslint/restrict-plus-operands': off
+  '@typescript-eslint/no-unsafe-return': off
+  '@typescript-eslint/no-unsafe-member-access': off
+  '@typescript-eslint/no-unsafe-argument': off
+  '@typescript-eslint/no-unsafe-call': off
   'no-inner-declarations': off
-  '@typescript-eslint/class-name-casing': warn
+  'no-global-assign': off
   'prefer-const': warn

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+
+## [4-r.5-beta.1] - 2022-05-19
+
+### Added
+
+* Add processing related to multiply colors and screen colors added in Cubism 4.2.
+
+### Fixed
+
+* Fix usage of Anisotropy filtering.
+* Fix model was not displayed when the number of masks exceeded the limit.
+* Fix getTextureDirectory() to return the directory name of the 0th texture path.
+
+
 ## [4-r.4] - 2021-12-09
 
 ### Fixed
@@ -66,6 +80,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Reformat code using Prettier and ESLint.
 
 
+[4-r.5-beta.1]: https://github.com/Live2D/CubismWebFramework/compare/4-r.4...4-r.5-beta.1
 [4-r.4]: https://github.com/Live2D/CubismWebFramework/compare/4-r.3...4-r.4
 [4-r.3]: https://github.com/Live2D/CubismWebFramework/compare/4-r.3-beta.1...4-r.3
 [4-r.3-beta.1]: https://github.com/Live2D/CubismWebFramework/compare/4-r.2...4-r.3-beta.1

README.md

@@ -17,14 +17,15 @@ Live2D Cubism 4 Editor で出力したモデルをアプリケーションで利
 
 ### Node.js
 
-* 17.2.0
+* 18.1.0
-* 16.13.1
+* 17.9.0
-* 14.18.2
+* 16.15.0
-* 12.22.7
+* 14.19.2
+
 
 ### TypeScript
 
-4.5.2
+4.6.4
 
 
 ## 開発環境構築
@@ -140,4 +141,4 @@ JSONパーサーやログ出力などのユーティリティ機能を提供し
 ユーザー同士でCubism SDKの活用方法の提案や質問をしたい場合は、是非コミュニティをご活用ください。
 
 - [Live2D 公式コミュニティ](https://creatorsforum.live2d.com/)
-- [Live2D community(English)](http://community.live2d.com/)
+- [Live2D community(English)](https://community.live2d.com/)

package.json

@@ -8,13 +8,13 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^2.18.0",
+    "@typescript-eslint/parser": "^5.23.0",
-    "eslint": "^6.8.0",
+    "eslint": "^8.15.0",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^4.0.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.6.2",
-    "rimraf": "^3.0.1",
+    "rimraf": "^3.0.2",
-    "typescript": "^3.7.5"
+    "typescript": "^4.6.4"
   }
 }

src/cubismdefaultparameterid.ts

@@ -60,7 +60,7 @@ export const CubismDefaultParameterId = Object.freeze<Record<string, string>>({
   ParamBustY: 'ParamBustY',
   ParamBaseX: 'ParamBaseX',
   ParamBaseY: 'ParamBaseY',
-  ParamNONE: 'NONE:'
+  ParamNONE: 'NONE:',
 });
 
 // Namespace definition for compatibility.

src/cubismmodelsettingjson.ts

@@ -73,7 +73,7 @@ enum FrequestNode {
   FrequestNode_Textures, // getRoot().getValueByString(FileReferences).getValueByString(Textures)
   FrequestNode_Physics, // getRoot().getValueByString(FileReferences).getValueByString(Physics)
   FrequestNode_Pose, // getRoot().getValueByString(FileReferences).getValueByString(Pose)
-  FrequestNode_HitAreas // getRoot().getValueByString(HitAreas)
+  FrequestNode_HitAreas, // getRoot().getValueByString(HitAreas)
 }
 
 /**
@@ -183,9 +183,25 @@ export class CubismModelSettingJson extends ICubismModelSetting {
    * @return テクスチャが配置されたディレクトリの名前
    */
   public getTextureDirectory(): string {
-    return this._jsonValue
+    const texturePath = this._jsonValue
       .at(FrequestNode.FrequestNode_Textures)
+      .getValueByIndex(0)
       .getRawString();
+
+    const pathArray = texturePath.split('/');
+    // 最後の要素はテクスチャ名なので不要
+    const arrayLength = pathArray.length - 1;
+    let textureDirectoryStr = '';
+
+    // 分割したパスを結合
+    for (let i = 0; i < arrayLength; i++) {
+      textureDirectoryStr += pathArray[i];
+      if (i < arrayLength - 1) {
+        textureDirectoryStr += '/';
+      }
+    }
+
+    return textureDirectoryStr;
   }
 
   /**
@@ -496,10 +512,7 @@ export class CubismModelSettingJson extends ICubismModelSetting {
       }
 
       if (refI.getValueByString(Name).getRawString() == EyeBlink) {
-        num = refI
+        num = refI.getValueByString(Ids).getVector().getSize();
-          .getValueByString(Ids)
-          .getVector()
-          .getSize();
         break;
       }
     }
@@ -531,10 +544,7 @@ export class CubismModelSettingJson extends ICubismModelSetting {
 
       if (refI.getValueByString(Name).getRawString() == EyeBlink) {
         return CubismFramework.getIdManager().getId(
-          refI
+          refI.getValueByString(Ids).getValueByIndex(index).getRawString()
-            .getValueByString(Ids)
-            .getValueByIndex(index)
-            .getRawString()
         );
       }
     }
@@ -564,10 +574,7 @@ export class CubismModelSettingJson extends ICubismModelSetting {
       }
 
       if (refI.getValueByString(Name).getRawString() == LipSync) {
-        num = refI
+        num = refI.getValueByString(Ids).getVector().getSize();
-          .getValueByString(Ids)
-          .getVector()
-          .getSize();
         break;
       }
     }
@@ -599,10 +606,7 @@ export class CubismModelSettingJson extends ICubismModelSetting {
 
       if (refI.getValueByString(Name).getRawString() == LipSync) {
         return CubismFramework.getIdManager().getId(
-          refI
+          refI.getValueByString(Ids).getValueByIndex(index).getRawString()
-            .getValueByString(Ids)
-            .getValueByIndex(index)
-            .getRawString()
         );
       }
     }

src/effect/cubismeyeblink.ts

@@ -219,7 +219,7 @@ export enum EyeState {
   EyeState_Interval, // まばたきしていない状態
   EyeState_Closing, // まぶたが閉じていく途中の状態
   EyeState_Closed, // まぶたが閉じている状態
-  EyeState_Opening // まぶたが開いていく途中の状態
+  EyeState_Opening, // まぶたが開いていく途中の状態
 }
 
 // Namespace definition for compatibility.

src/effect/cubismpose.ts

@@ -60,7 +60,8 @@ export class CubismPose {
       for (let groupIndex = 0; groupIndex < idCount; ++groupIndex) {
         const partInfo: Value = idListInfo.getValueByIndex(groupIndex);
         const partData: PartData = new PartData();
-        const parameterId: CubismIdHandle = CubismFramework.getIdManager().getId(
+        const parameterId: CubismIdHandle =
+          CubismFramework.getIdManager().getId(
             partInfo.getValueByString(Id).getRawString()
           );
 
@@ -163,10 +164,7 @@ export class CubismPose {
         model.setParameterValueByIndex(paramIndex, j == beginIndex ? 1.0 : 0.0);
 
         for (let k = 0; k < this._partGroups.at(j).link.getSize(); ++k) {
-          this._partGroups
+          this._partGroups.at(j).link.at(k).initialize(model);
-            .at(j)
-            .link.at(k)
-            .initialize(model);
         }
       }
 

src/id/cubismidmanager.ts

@@ -96,12 +96,7 @@ export class CubismIdManager {
    */
   private findId(id: string): CubismId {
     for (let i = 0; i < this._ids.getSize(); ++i) {
-      if (
+      if (this._ids.at(i).getString().isEqual(id)) {
-        this._ids
-          .at(i)
-          .getString()
-          .isEqual(id)
-      ) {
         return this._ids.at(i);
       }
     }

src/live2dcubismframework.ts

@@ -10,7 +10,7 @@ import { CubismRenderer } from './rendering/cubismrenderer';
 import {
   CSM_ASSERT,
   CubismLogInfo,
-  CubismLogWarning
+  CubismLogWarning,
 } from './utils/cubismdebug';
 import { Value } from './utils/cubismjson';
 
@@ -56,7 +56,7 @@ let s_cubismIdManager: CubismIdManager = null;
  */
 export const Constant = Object.freeze<Record<string, number>>({
   vertexOffset: 0, // メッシュ頂点のオフセット値
-  vertexStep: 2 // メッシュ頂点のステップ値
+  vertexStep: 2, // メッシュ頂点のステップ値
 });
 
 export function csmDelete<T>(address: T): void {
@@ -263,7 +263,7 @@ export enum LogLevel {
   LogLevel_Info, // Infoログ
   LogLevel_Warning, // 警告ログ
   LogLevel_Error, // エラーログ
-  LogLevel_Off // ログ出力無効
+  LogLevel_Off, // ログ出力無効
 }
 
 // Namespace definition for compatibility.

src/math/cubismmatrix44.ts

@@ -32,22 +32,8 @@ export class CubismMatrix44 {
     dst: Float32Array
   ): void {
     const c: Float32Array = new Float32Array([
+      0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
       0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0
     ]);
 
     const n = 4;
@@ -70,22 +56,8 @@ export class CubismMatrix44 {
    */
   public loadIdentity(): void {
     const c: Float32Array = new Float32Array([
+      1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0,
       1.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      1.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      1.0,
-      0.0,
-      0.0,
-      0.0,
-      0.0,
-      1.0
     ]);
 
     this.setMatrix(c);
@@ -203,7 +175,7 @@ export class CubismMatrix44 {
       x,
       y,
       0.0,
-      1.0
+      1.0,
     ]);
 
     CubismMatrix44.multiply(tr1, this._tr, this._tr);
@@ -263,7 +235,7 @@ export class CubismMatrix44 {
       0.0,
       0.0,
       0.0,
-      1.0
+      1.0,
     ]);
 
     CubismMatrix44.multiply(tr1, this._tr, this._tr);

src/math/cubismviewmatrix.ts

@@ -72,7 +72,7 @@ export class CubismViewMatrix extends CubismMatrix44 {
       x,
       y,
       0.0,
-      1.0
+      1.0,
     ]);
 
     CubismMatrix44.multiply(tr1, this._tr, this._tr);
@@ -117,7 +117,7 @@ export class CubismViewMatrix extends CubismMatrix44 {
       cx,
       cy,
       0.0,
-      1.0
+      1.0,
     ]);
 
     const tr2: Float32Array = new Float32Array([
@@ -136,7 +136,7 @@ export class CubismViewMatrix extends CubismMatrix44 {
       0.0,
       0.0,
       0.0,
-      1.0
+      1.0,
     ]);
 
     const tr3: Float32Array = new Float32Array([
@@ -155,7 +155,7 @@ export class CubismViewMatrix extends CubismMatrix44 {
       -cx,
       -cy,
       0.0,
-      1.0
+      1.0,
     ]);
 
     CubismMatrix44.multiply(tr3, this._tr, this._tr);

src/model/cubismmoc.ts

@@ -19,9 +19,8 @@ export class CubismMoc {
    */
   public static create(mocBytes: ArrayBuffer): CubismMoc {
     let cubismMoc: CubismMoc = null;
-    const moc: Live2DCubismCore.Moc = Live2DCubismCore.Moc.fromArrayBuffer(
+    const moc: Live2DCubismCore.Moc =
-      mocBytes
+      Live2DCubismCore.Moc.fromArrayBuffer(mocBytes);
-    );
 
     if (moc) {
       cubismMoc = new CubismMoc(moc);

src/model/cubismmodel.ts

@@ -7,11 +7,23 @@
 
 import { CubismIdHandle } from '../id/cubismid';
 import { CubismFramework } from '../live2dcubismframework';
-import { CubismBlendMode } from '../rendering/cubismrenderer';
+import {
+  CubismBlendMode,
+  CubismTextureColor,
+} from '../rendering/cubismrenderer';
 import { csmMap } from '../type/csmmap';
 import { csmVector } from '../type/csmvector';
 import { CSM_ASSERT } from '../utils/cubismdebug';
 
+/**
+ * SDK側から与えられたDrawableの乗算色・スクリーン色上書きフラグと
+ * その色を保持する構造体
+ */
+export class DrawableColorData {
+  isOverwritten = false;
+  Color: CubismTextureColor = new CubismTextureColor();
+}
+
 /**
  * モデル
  *
@@ -70,6 +82,190 @@ export class CubismModel {
     }
   }
 
+  /**
+   * 乗算色を取得する
+   * @param index Drawablesのインデックス
+   * @returns 指定したdrawableの乗算色(RGBA)
+   */
+  public getMultiplyColor(index: number): CubismTextureColor {
+    // Drawableとモデル全体の乗算色上書きフラグがどちらもtrueな場合、モデル全体の上書きフラグが優先される
+    if (
+      this.getOverwriteFlagForModelMultiplyColors() ||
+      this.getOverwriteFlagForDrawableMultiplyColors(index)
+    ) {
+      return this._userMultiplyColors.at(index).Color;
+    }
+
+    const color = this.getDrawableMultiplyColor(index);
+    return color;
+  }
+
+  /**
+   * スクリーン色を取得する
+   * @param index Drawablesのインデックス
+   * @returns 指定したdrawableのスクリーン色(RGBA)
+   */
+  public getScreenColor(index: number): CubismTextureColor {
+    // Drawableとモデル全体のスクリーン色上書きフラグがどちらもtrueな場合、モデル全体の上書きフラグが優先される
+    if (
+      this.getOverwriteFlagForModelScreenColors() ||
+      this.getOverwriteFlagForDrawableScreenColors(index)
+    ) {
+      return this._userScreenColors.at(index).Color;
+    }
+
+    const color = this.getDrawableScreenColor(index);
+    return color;
+  }
+
+  /**
+   * 乗算色をセットする
+   * @param index Drawablesのインデックス
+   * @param color 設定する乗算色(CubismTextureColor)
+   */
+  public setMultiplyColorByTextureColor(
+    index: number,
+    color: CubismTextureColor
+  ) {
+    this.setMultiplyColorByRGBA(index, color.R, color.G, color.B, color.A);
+  }
+
+  /**
+   * 乗算色をセットする
+   * @param index Drawablesのインデックス
+   * @param r 設定する乗算色のR値
+   * @param g 設定する乗算色のG値
+   * @param b 設定する乗算色のB値
+   * @param a 設定する乗算色のA値
+   */
+  public setMultiplyColorByRGBA(
+    index: number,
+    r: number,
+    g: number,
+    b: number,
+    a = 1.0
+  ) {
+    this._userMultiplyColors.at(index).Color.R = r;
+    this._userMultiplyColors.at(index).Color.G = g;
+    this._userMultiplyColors.at(index).Color.B = b;
+    this._userMultiplyColors.at(index).Color.A = a;
+  }
+
+  /**
+   * スクリーン色をセットする
+   * @param index Drawablesのインデックス
+   * @param color 設定するスクリーン色(CubismTextureColor)
+   */
+  public setScreenColorByTextureColor(
+    index: number,
+    color: CubismTextureColor
+  ) {
+    this.setScreenColorByRGBA(index, color.R, color.G, color.B, color.A);
+  }
+
+  /**
+   * スクリーン色をセットする
+   * @param index Drawablesのインデックス
+   * @param r 設定するスクリーン色のR値
+   * @param g 設定するスクリーン色のG値
+   * @param b 設定するスクリーン色のB値
+   * @param a 設定するスクリーン色のA値
+   */
+  public setScreenColorByRGBA(
+    index: number,
+    r: number,
+    g: number,
+    b: number,
+    a = 1.0
+  ) {
+    this._userScreenColors.at(index).Color.R = r;
+    this._userScreenColors.at(index).Color.G = g;
+    this._userScreenColors.at(index).Color.B = b;
+    this._userScreenColors.at(index).Color.A = a;
+  }
+
+  /**
+   * SDKから指定したモデルの乗算色を上書きするか
+   * @returns true -> SDKからの情報を優先する
+   *          false -> モデルに設定されている色情報を使用
+   */
+  public getOverwriteFlagForModelMultiplyColors(): boolean {
+    return this._isOverwrittenModelMultiplyColors;
+  }
+
+  /**
+   * SDKから指定したモデルのスクリーン色を上書きするか
+   * @returns true -> SDKからの情報を優先する
+   *          false -> モデルに設定されている色情報を使用
+   */
+  public getOverwriteFlagForModelScreenColors(): boolean {
+    return this._isOverwrittenModelScreenColors;
+  }
+
+  /**
+   * SDKから指定したモデルの乗算色を上書きするかセットする
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteFlagForModelMultiplyColors(value: boolean) {
+    this._isOverwrittenModelMultiplyColors = value;
+  }
+
+  /**
+   * SDKから指定したモデルのスクリーン色を上書きするかセットする
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteFlagForModelScreenColors(value: boolean) {
+    this._isOverwrittenModelScreenColors = value;
+  }
+
+  /**
+   * SDKから指定したDrawableIndexの乗算色を上書きするか
+   * @returns true -> SDKからの情報を優先する
+   *          false -> モデルに設定されている色情報を使用
+   */
+  public getOverwriteFlagForDrawableMultiplyColors(
+    drawableindex: number
+  ): boolean {
+    return this._userMultiplyColors.at(drawableindex).isOverwritten;
+  }
+
+  /**
+   * SDKから指定したDrawableIndexのスクリーン色を上書きするか
+   * @returns true -> SDKからの情報を優先する
+   *          false -> モデルに設定されている色情報を使用
+   */
+  public getOverwriteFlagForDrawableScreenColors(
+    drawableindex: number
+  ): boolean {
+    return this._userMultiplyColors.at(drawableindex).isOverwritten;
+  }
+
+  /**
+   * SDKから指定したDrawableIndexの乗算色を上書きするかセットする
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteFlagForDrawableMultiplyColors(
+    drawableindex: number,
+    value: boolean
+  ) {
+    this._userMultiplyColors.at(drawableindex).isOverwritten = value;
+  }
+
+  /**
+   * SDKから指定したDrawableIndexのスクリーン色を上書きするかセットする
+   * @param value true -> SDKからの情報を優先する
+   *              false -> モデルに設定されている色情報を使用
+   */
+  public setOverwriteFlagForDrawableScreenColors(
+    drawableindex: number,
+    value: boolean
+  ) {
+    this._userScreenColors.at(drawableindex).isOverwritten = value;
+  }
+
   /**
    * モデルを取得
    */
@@ -546,6 +742,40 @@ export class CubismModel {
     return opacities[drawableIndex];
   }
 
+  /**
+   * Drawableの乗算色の取得
+   * @param drawableIndex Drawableのインデックス
+   * @return drawableの乗算色(RGBA)
+   * スクリーン色はRGBAで取得されるが、Aは必ず0
+   */
+  public getDrawableMultiplyColor(drawableIndex: number): CubismTextureColor {
+    const multiplyColors: Float32Array = this._model.drawables.multiplyColors;
+    const index = drawableIndex * 4;
+    const multiplyColor: CubismTextureColor = new CubismTextureColor();
+    multiplyColor.R = multiplyColors[index];
+    multiplyColor.G = multiplyColors[index + 1];
+    multiplyColor.B = multiplyColors[index + 2];
+    multiplyColor.A = multiplyColors[index + 3];
+    return multiplyColor;
+  }
+
+  /**
+   * Drawableのスクリーン色の取得
+   * @param drawableIndex Drawableのインデックス
+   * @return drawableのスクリーン色(RGBA)
+   * スクリーン色はRGBAで取得されるが、Aは必ず0
+   */
+  public getDrawableScreenColor(drawableIndex: number): CubismTextureColor {
+    const screenColors: Float32Array = this._model.drawables.screenColors;
+    const index = drawableIndex * 4;
+    const screenColor: CubismTextureColor = new CubismTextureColor();
+    screenColor.R = screenColors[index];
+    screenColor.G = screenColors[index + 1];
+    screenColor.B = screenColors[index + 2];
+    screenColor.A = screenColors[index + 3];
+    return screenColor;
+  }
+
   /**
    * Drawableのカリング情報の取得
    * @param drawableIndex Drawableのインデックス
@@ -695,6 +925,24 @@ export class CubismModel {
     );
   }
 
+  /**
+   * Drawableの乗算色・スクリーン色の変化情報の取得
+   *
+   * 直近のCubismModel.update関数でDrawableの乗算色・スクリーン色が変化したかを取得する。
+   *
+   * @param drawableIndex Drawableのインデックス
+   * @return true Drawableの乗算色・スクリーン色が直近のCubismModel.update関数で変化した
+   * @return false Drawableの乗算色・スクリーン色が直近のCubismModel.update関数で変化してない
+   */
+  public getDrawableDynamicFlagBlendColorDidChange(
+    drawableIndex: number
+  ): boolean {
+    const dynamicFlags: Uint8Array = this._model.drawables.dynamicFlags;
+    return Live2DCubismCore.Utils.hasBlendColorDidChangeBit(
+      dynamicFlags[drawableIndex]
+    );
+  }
+
   /**
    * 保存されたパラメータの読み込み
    */
@@ -750,11 +998,25 @@ export class CubismModel {
       const drawableIds: string[] = this._model.drawables.ids;
       const drawableCount: number = this._model.drawables.count;
 
+      this._userMultiplyColors = new csmVector<DrawableColorData>();
+      this._userMultiplyColors.updateSize(
+        drawableCount,
+        DrawableColorData,
+        true
+      );
+
+      this._userScreenColors = new csmVector<DrawableColorData>();
+      this._userScreenColors.updateSize(drawableCount, DrawableColorData, true);
+
       this._drawableIds.prepareCapacity(drawableCount);
       for (let i = 0; i < drawableCount; ++i) {
         this._drawableIds.pushBack(
           CubismFramework.getIdManager().getId(drawableIds[i])
         );
+
+        // shaderに影響しない色で初期化
+        this.setMultiplyColorByRGBA(i, 1.0, 1.0, 1.0, 1.0);
+        this.setScreenColorByRGBA(i, 0.0, 0.0, 0.0, 1.0);
       }
     }
   }
@@ -773,6 +1035,10 @@ export class CubismModel {
     this._parameterIds = new csmVector<CubismIdHandle>();
     this._drawableIds = new csmVector<CubismIdHandle>();
     this._partIds = new csmVector<CubismIdHandle>();
+    this._isOverwrittenModelMultiplyColors = false;
+    this._isOverwrittenModelScreenColors = false;
+    this._userMultiplyColors = null;
+    this._userScreenColors = null;
 
     this._notExistPartId = new csmMap<CubismIdHandle, number>();
     this._notExistParameterId = new csmMap<CubismIdHandle, number>();
@@ -796,6 +1062,11 @@ export class CubismModel {
 
   private _savedParameters: csmVector<number>; // 保存されたパラメータ
 
+  private _isOverwrittenModelMultiplyColors: boolean; // SDK上でモデル全体の乗算色を上書きするか判定するフラグ
+  private _isOverwrittenModelScreenColors: boolean; // SDK上でモデル全体のスクリーン色を上書きするか判定するフラグ
+  private _userMultiplyColors: csmVector<DrawableColorData>; // Drawableごとに設定する乗算色と上書きフラグを管理するリスト
+  private _userScreenColors: csmVector<DrawableColorData>; // Drawableごとに設定するスクリーン色と上書きフラグを管理するリスト
+
   private _model: Live2DCubismCore.Model; // モデル
 
   private _parameterValues: Float32Array; // パラメータの値のリスト

src/motion/cubismexpressionmotion.ts

@@ -174,7 +174,7 @@ export class CubismExpressionMotion extends ACubismMotion {
 export enum ExpressionBlendType {
   ExpressionBlendType_Add = 0, // 加算
   ExpressionBlendType_Multiply = 1, // 乗算
-  ExpressionBlendType_Overwrite = 2 // 上書き
+  ExpressionBlendType_Overwrite = 2, // 上書き
 }
 
 /**

src/motion/cubismmotion.ts

@@ -14,7 +14,7 @@ import { csmVector } from '../type/csmvector';
 import {
   CSM_ASSERT,
   CubismLogDebug,
-  CubismLogWarning
+  CubismLogWarning,
 } from '../utils/cubismdebug';
 import { ACubismMotion, FinishedMotionCallback } from './acubismmotion';
 import {
@@ -24,7 +24,7 @@ import {
   CubismMotionEvent,
   CubismMotionPoint,
   CubismMotionSegment,
-  CubismMotionSegmentType
+  CubismMotionSegmentType,
 } from './cubismmotioninternal';
 import { CubismMotionJson, EvaluationOptionFlag } from './cubismmotionjson';
 import { CubismMotionQueueEntry } from './cubismmotionqueueentry';
@@ -275,15 +275,13 @@ export class CubismMotion extends ACubismMotion {
     motionQueueEntry: CubismMotionQueueEntry
   ): void {
     if (this._modelCurveIdEyeBlink == null) {
-      this._modelCurveIdEyeBlink = CubismFramework.getIdManager().getId(
+      this._modelCurveIdEyeBlink =
-        EffectNameEyeBlink
+        CubismFramework.getIdManager().getId(EffectNameEyeBlink);
-      );
     }
 
     if (this._modelCurveIdLipSync == null) {
-      this._modelCurveIdLipSync = CubismFramework.getIdManager().getId(
+      this._modelCurveIdLipSync =
-        EffectNameLipSync
+        CubismFramework.getIdManager().getId(EffectNameLipSync);
-      );
     }
 
     let timeOffsetSeconds: number =
@@ -381,9 +379,8 @@ export class CubismMotion extends ACubismMotion {
         continue;
       }
 
-      const sourceValue: number = model.getParameterValueByIndex(
+      const sourceValue: number =
-        parameterIndex
+        model.getParameterValueByIndex(parameterIndex);
-      );
 
       // Evaluate curve and apply value.
       value = evaluateCurve(this._motionData, c, time);
@@ -793,22 +790,18 @@ export class CubismMotion extends ACubismMotion {
         );
       }
 
-      this._motionData.curves.at(curveCount).id = json.getMotionCurveId(
+      this._motionData.curves.at(curveCount).id =
-        curveCount
+        json.getMotionCurveId(curveCount);
-      );
 
-      this._motionData.curves.at(
+      this._motionData.curves.at(curveCount).baseSegmentIndex =
-        curveCount
+        totalSegmentCount;
-      ).baseSegmentIndex = totalSegmentCount;
 
-      this._motionData.curves.at(
+      this._motionData.curves.at(curveCount).fadeInTime =
-        curveCount
+        json.isExistMotionCurveFadeInTime(curveCount)
-      ).fadeInTime = json.isExistMotionCurveFadeInTime(curveCount)
           ? json.getMotionCurveFadeInTime(curveCount)
           : -1.0;
-      this._motionData.curves.at(
+      this._motionData.curves.at(curveCount).fadeOutTime =
-        curveCount
+        json.isExistMotionCurveFadeOutTime(curveCount)
-      ).fadeOutTime = json.isExistMotionCurveFadeOutTime(curveCount)
           ? json.getMotionCurveFadeOutTime(curveCount)
           : -1.0;
 
@@ -819,16 +812,13 @@ export class CubismMotion extends ACubismMotion {
 
       ) {
         if (segmentPosition == 0) {
-          this._motionData.segments.at(
+          this._motionData.segments.at(totalSegmentCount).basePointIndex =
-            totalSegmentCount
+            totalPointCount;
-          ).basePointIndex = totalPointCount;
 
-          this._motionData.points.at(
+          this._motionData.points.at(totalPointCount).time =
-            totalPointCount
+            json.getMotionCurveSegment(curveCount, segmentPosition);
-          ).time = json.getMotionCurveSegment(curveCount, segmentPosition);
+          this._motionData.points.at(totalPointCount).value =
-          this._motionData.points.at(
+            json.getMotionCurveSegment(curveCount, segmentPosition + 1);
-            totalPointCount
-          ).value = json.getMotionCurveSegment(curveCount, segmentPosition + 1);
 
           totalPointCount += 1;
           segmentPosition += 2;
@@ -845,22 +835,13 @@ export class CubismMotion extends ACubismMotion {
           case CubismMotionSegmentType.CubismMotionSegmentType_Linear: {
             this._motionData.segments.at(totalSegmentCount).segmentType =
               CubismMotionSegmentType.CubismMotionSegmentType_Linear;
-            this._motionData.segments.at(
+            this._motionData.segments.at(totalSegmentCount).evaluate =
-              totalSegmentCount
+              linearEvaluate;
-            ).evaluate = linearEvaluate;
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount).time =
-              totalPointCount
+              json.getMotionCurveSegment(curveCount, segmentPosition + 1);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 2);
-              segmentPosition + 1
-            );
-            this._motionData.points.at(
-              totalPointCount
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 2
-            );
 
             totalPointCount += 1;
             segmentPosition += 3;
@@ -872,53 +853,27 @@ export class CubismMotion extends ACubismMotion {
               CubismMotionSegmentType.CubismMotionSegmentType_Bezier;
 
             if (areBeziersRestructed || UseOldBeziersCurveMotion) {
-              this._motionData.segments.at(
+              this._motionData.segments.at(totalSegmentCount).evaluate =
-                totalSegmentCount
+                bezierEvaluate;
-              ).evaluate = bezierEvaluate;
             } else {
-              this._motionData.segments.at(
+              this._motionData.segments.at(totalSegmentCount).evaluate =
-                totalSegmentCount
+                bezierEvaluateCardanoInterpretation;
-              ).evaluate = bezierEvaluateCardanoInterpretation;
             }
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount).time =
-              totalPointCount
+              json.getMotionCurveSegment(curveCount, segmentPosition + 1);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 2);
-              segmentPosition + 1
-            );
-            this._motionData.points.at(
-              totalPointCount
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 2
-            );
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount + 1).time =
-              totalPointCount + 1
+              json.getMotionCurveSegment(curveCount, segmentPosition + 3);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount + 1).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 4);
-              segmentPosition + 3
-            );
-            this._motionData.points.at(
-              totalPointCount + 1
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 4
-            );
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount + 2).time =
-              totalPointCount + 2
+              json.getMotionCurveSegment(curveCount, segmentPosition + 5);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount + 2).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 6);
-              segmentPosition + 5
-            );
-            this._motionData.points.at(
-              totalPointCount + 2
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 6
-            );
 
             totalPointCount += 3;
             segmentPosition += 7;
@@ -929,22 +884,13 @@ export class CubismMotion extends ACubismMotion {
           case CubismMotionSegmentType.CubismMotionSegmentType_Stepped: {
             this._motionData.segments.at(totalSegmentCount).segmentType =
               CubismMotionSegmentType.CubismMotionSegmentType_Stepped;
-            this._motionData.segments.at(
+            this._motionData.segments.at(totalSegmentCount).evaluate =
-              totalSegmentCount
+              steppedEvaluate;
-            ).evaluate = steppedEvaluate;
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount).time =
-              totalPointCount
+              json.getMotionCurveSegment(curveCount, segmentPosition + 1);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 2);
-              segmentPosition + 1
-            );
-            this._motionData.points.at(
-              totalPointCount
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 2
-            );
 
             totalPointCount += 1;
             segmentPosition += 3;
@@ -955,22 +901,13 @@ export class CubismMotion extends ACubismMotion {
           case CubismMotionSegmentType.CubismMotionSegmentType_InverseStepped: {
             this._motionData.segments.at(totalSegmentCount).segmentType =
               CubismMotionSegmentType.CubismMotionSegmentType_InverseStepped;
-            this._motionData.segments.at(
+            this._motionData.segments.at(totalSegmentCount).evaluate =
-              totalSegmentCount
+              inverseSteppedEvaluate;
-            ).evaluate = inverseSteppedEvaluate;
 
-            this._motionData.points.at(
+            this._motionData.points.at(totalPointCount).time =
-              totalPointCount
+              json.getMotionCurveSegment(curveCount, segmentPosition + 1);
-            ).time = json.getMotionCurveSegment(
+            this._motionData.points.at(totalPointCount).value =
-              curveCount,
+              json.getMotionCurveSegment(curveCount, segmentPosition + 2);
-              segmentPosition + 1
-            );
-            this._motionData.points.at(
-              totalPointCount
-            ).value = json.getMotionCurveSegment(
-              curveCount,
-              segmentPosition + 2
-            );
 
             totalPointCount += 1;
             segmentPosition += 3;
@@ -993,12 +930,10 @@ export class CubismMotion extends ACubismMotion {
       userdatacount < json.getEventCount();
       ++userdatacount
     ) {
-      this._motionData.events.at(userdatacount).fireTime = json.getEventTime(
+      this._motionData.events.at(userdatacount).fireTime =
-        userdatacount
+        json.getEventTime(userdatacount);
-      );
+      this._motionData.events.at(userdatacount).value =
-      this._motionData.events.at(userdatacount).value = json.getEventValue(
+        json.getEventValue(userdatacount);
-        userdatacount
-      );
     }
 
     json.release();

src/motion/cubismmotioninternal.ts

@@ -17,7 +17,7 @@ import { csmVector } from '../type/csmvector';
 export enum CubismMotionCurveTarget {
   CubismMotionCurveTarget_Model, // モデルに対して
   CubismMotionCurveTarget_Parameter, // パラメータに対して
-  CubismMotionCurveTarget_PartOpacity // パーツの不透明度に対して
+  CubismMotionCurveTarget_PartOpacity, // パーツの不透明度に対して
 }
 
 /**
@@ -29,7 +29,7 @@ export enum CubismMotionSegmentType {
   CubismMotionSegmentType_Linear = 0, // リニア
   CubismMotionSegmentType_Bezier = 1, // ベジェ曲線
   CubismMotionSegmentType_Stepped = 2, // ステップ
-  CubismMotionSegmentType_InverseStepped = 3 // インバースステップ
+  CubismMotionSegmentType_InverseStepped = 3, // インバースステップ
 }
 
 /**
@@ -152,5 +152,6 @@ export namespace Live2DCubismFramework {
   export type CubismMotionSegment = $.CubismMotionSegment;
   export const CubismMotionSegmentType = $.CubismMotionSegmentType;
   export type CubismMotionSegmentType = $.CubismMotionSegmentType;
-  export type csmMotionSegmentEvaluationFunction = $.csmMotionSegmentEvaluationFunction;
+  export type csmMotionSegmentEvaluationFunction =
+    $.csmMotionSegmentEvaluationFunction;
 }

src/motion/cubismmotionjson.ts

@@ -371,7 +371,7 @@ export class CubismMotionJson {
  * @brief ベジェカーブの解釈方法のフラグタイプ
  */
 export enum EvaluationOptionFlag {
-  EvaluationOptionFlag_AreBeziersRistricted = 0 ///< ベジェハンドルの規制状態
+  EvaluationOptionFlag_AreBeziersRistricted = 0, ///< ベジェハンドルの規制状態
 }
 
 // Namespace definition for compatibility.

src/motion/cubismmotionmanager.ts

@@ -9,7 +9,7 @@ import { CubismModel } from '../model/cubismmodel';
 import { ACubismMotion } from './acubismmotion';
 import {
   CubismMotionQueueEntryHandle,
-  CubismMotionQueueManager
+  CubismMotionQueueManager,
 } from './cubismmotionqueuemanager';
 
 /**

src/motion/cubismmotionqueuemanager.ts

@@ -327,7 +327,8 @@ export interface CubismMotionEventFunction {
  * モーションの識別番号の定義
  */
 export declare type CubismMotionQueueEntryHandle = any;
-export const InvalidMotionQueueEntryHandleValue: CubismMotionQueueEntryHandle = -1;
+export const InvalidMotionQueueEntryHandleValue: CubismMotionQueueEntryHandle =
+  -1;
 
 // Namespace definition for compatibility.
 import * as $ from './cubismmotionqueuemanager';

src/physics/cubismphysics.ts

@@ -16,7 +16,7 @@ import {
   CubismPhysicsRig,
   CubismPhysicsSource,
   CubismPhysicsSubRig,
-  CubismPhysicsTargetType
+  CubismPhysicsTargetType,
 } from './cubismphysicsinternal';
 import { CubismPhysicsJson } from './cubismphysicsjson';
 
@@ -294,31 +294,19 @@ export class CubismPhysics {
       particleIndex = 0;
 
     for (let i = 0; i < this._physicsRig.settings.getSize(); ++i) {
-      this._physicsRig.settings.at(
+      this._physicsRig.settings.at(i).normalizationPosition.minimum =
-        i
+        json.getNormalizationPositionMinimumValue(i);
-      ).normalizationPosition.minimum = json.getNormalizationPositionMinimumValue(
+      this._physicsRig.settings.at(i).normalizationPosition.maximum =
-        i
+        json.getNormalizationPositionMaximumValue(i);
-      );
+      this._physicsRig.settings.at(i).normalizationPosition.defalut =
-      this._physicsRig.settings.at(
+        json.getNormalizationPositionDefaultValue(i);
-        i
-      ).normalizationPosition.maximum = json.getNormalizationPositionMaximumValue(
-        i
-      );
-      this._physicsRig.settings.at(
-        i
-      ).normalizationPosition.defalut = json.getNormalizationPositionDefaultValue(
-        i
-      );
 
-      this._physicsRig.settings.at(
+      this._physicsRig.settings.at(i).normalizationAngle.minimum =
-        i
+        json.getNormalizationAngleMinimumValue(i);
-      ).normalizationAngle.minimum = json.getNormalizationAngleMinimumValue(i);
+      this._physicsRig.settings.at(i).normalizationAngle.maximum =
-      this._physicsRig.settings.at(
+        json.getNormalizationAngleMaximumValue(i);
-        i
+      this._physicsRig.settings.at(i).normalizationAngle.defalut =
-      ).normalizationAngle.maximum = json.getNormalizationAngleMaximumValue(i);
+        json.getNormalizationAngleDefaultValue(i);
-      this._physicsRig.settings.at(
-        i
-      ).normalizationAngle.defalut = json.getNormalizationAngleDefaultValue(i);
 
       // Input
       this._physicsRig.settings.at(i).inputCount = json.getInputCount(i);
@@ -330,9 +318,8 @@ export class CubismPhysics {
           i,
           j
         );
-        this._physicsRig.inputs.at(
+        this._physicsRig.inputs.at(inputIndex + j).reflect =
-          inputIndex + j
+          json.getInputReflect(i, j);
-        ).reflect = json.getInputReflect(i, j);
 
         if (json.getInputType(i, j) == PhysicsTypeTagX) {
           this._physicsRig.inputs.at(inputIndex + j).type =
@@ -356,9 +343,8 @@ export class CubismPhysics {
 
         this._physicsRig.inputs.at(inputIndex + j).source.targetType =
           CubismPhysicsTargetType.CubismPhysicsTargetType_Parameter;
-        this._physicsRig.inputs.at(
+        this._physicsRig.inputs.at(inputIndex + j).source.id =
-          inputIndex + j
+          json.getInputSourceId(i, j);
-        ).source.id = json.getInputSourceId(i, j);
       }
       inputIndex += this._physicsRig.settings.at(i).inputCount;
 
@@ -367,57 +353,45 @@ export class CubismPhysics {
       this._physicsRig.settings.at(i).baseOutputIndex = outputIndex;
 
       for (let j = 0; j < this._physicsRig.settings.at(i).outputCount; ++j) {
-        this._physicsRig.outputs.at(
+        this._physicsRig.outputs.at(outputIndex + j).destinationParameterIndex =
-          outputIndex + j
+          -1;
-        ).destinationParameterIndex = -1;
+        this._physicsRig.outputs.at(outputIndex + j).vertexIndex =
-        this._physicsRig.outputs.at(
+          json.getOutputVertexIndex(i, j);
-          outputIndex + j
+        this._physicsRig.outputs.at(outputIndex + j).angleScale =
-        ).vertexIndex = json.getOutputVertexIndex(i, j);
+          json.getOutputAngleScale(i, j);
-        this._physicsRig.outputs.at(
+        this._physicsRig.outputs.at(outputIndex + j).weight =
-          outputIndex + j
+          json.getOutputWeight(i, j);
-        ).angleScale = json.getOutputAngleScale(i, j);
-        this._physicsRig.outputs.at(
-          outputIndex + j
-        ).weight = json.getOutputWeight(i, j);
         this._physicsRig.outputs.at(outputIndex + j).destination.targetType =
           CubismPhysicsTargetType.CubismPhysicsTargetType_Parameter;
 
-        this._physicsRig.outputs.at(
+        this._physicsRig.outputs.at(outputIndex + j).destination.id =
-          outputIndex + j
+          json.getOutputDestinationId(i, j);
-        ).destination.id = json.getOutputDestinationId(i, j);
 
         if (json.getOutputType(i, j) == PhysicsTypeTagX) {
           this._physicsRig.outputs.at(outputIndex + j).type =
             CubismPhysicsSource.CubismPhysicsSource_X;
-          this._physicsRig.outputs.at(
+          this._physicsRig.outputs.at(outputIndex + j).getValue =
-            outputIndex + j
+            getOutputTranslationX;
-          ).getValue = getOutputTranslationX;
+          this._physicsRig.outputs.at(outputIndex + j).getScale =
-          this._physicsRig.outputs.at(
+            getOutputScaleTranslationX;
-            outputIndex + j
-          ).getScale = getOutputScaleTranslationX;
         } else if (json.getOutputType(i, j) == PhysicsTypeTagY) {
           this._physicsRig.outputs.at(outputIndex + j).type =
             CubismPhysicsSource.CubismPhysicsSource_Y;
-          this._physicsRig.outputs.at(
+          this._physicsRig.outputs.at(outputIndex + j).getValue =
-            outputIndex + j
+            getOutputTranslationY;
-          ).getValue = getOutputTranslationY;
+          this._physicsRig.outputs.at(outputIndex + j).getScale =
-          this._physicsRig.outputs.at(
+            getOutputScaleTranslationY;
-            outputIndex + j
-          ).getScale = getOutputScaleTranslationY;
         } else if (json.getOutputType(i, j) == PhysicsTypeTagAngle) {
           this._physicsRig.outputs.at(outputIndex + j).type =
             CubismPhysicsSource.CubismPhysicsSource_Angle;
-          this._physicsRig.outputs.at(
+          this._physicsRig.outputs.at(outputIndex + j).getValue =
-            outputIndex + j
+            getOutputAngle;
-          ).getValue = getOutputAngle;
+          this._physicsRig.outputs.at(outputIndex + j).getScale =
-          this._physicsRig.outputs.at(
+            getOutputScaleAngle;
-            outputIndex + j
-          ).getScale = getOutputScaleAngle;
         }
 
-        this._physicsRig.outputs.at(
+        this._physicsRig.outputs.at(outputIndex + j).reflect =
-          outputIndex + j
+          json.getOutputReflect(i, j);
-        ).reflect = json.getOutputReflect(i, j);
       }
       outputIndex += this._physicsRig.settings.at(i).outputCount;
 
@@ -426,21 +400,16 @@ export class CubismPhysics {
       this._physicsRig.settings.at(i).baseParticleIndex = particleIndex;
 
       for (let j = 0; j < this._physicsRig.settings.at(i).particleCount; ++j) {
-        this._physicsRig.particles.at(
+        this._physicsRig.particles.at(particleIndex + j).mobility =
-          particleIndex + j
+          json.getParticleMobility(i, j);
-        ).mobility = json.getParticleMobility(i, j);
+        this._physicsRig.particles.at(particleIndex + j).delay =
-        this._physicsRig.particles.at(
+          json.getParticleDelay(i, j);
-          particleIndex + j
+        this._physicsRig.particles.at(particleIndex + j).acceleration =
-        ).delay = json.getParticleDelay(i, j);
+          json.getParticleAcceleration(i, j);
-        this._physicsRig.particles.at(
+        this._physicsRig.particles.at(particleIndex + j).radius =
-          particleIndex + j
+          json.getParticleRadius(i, j);
-        ).acceleration = json.getParticleAcceleration(i, j);
+        this._physicsRig.particles.at(particleIndex + j).position =
-        this._physicsRig.particles.at(
+          json.getParticlePosition(i, j);
-          particleIndex + j
-        ).radius = json.getParticleRadius(i, j);
-        this._physicsRig.particles.at(
-          particleIndex + j
-        ).position = json.getParticlePosition(i, j);
       }
 
       particleIndex += this._physicsRig.settings.at(i).particleCount;

src/physics/cubismphysicsinternal.ts

@@ -13,7 +13,7 @@ import { csmVector } from '../type/csmvector';
  * 物理演算の適用先の種類
  */
 export enum CubismPhysicsTargetType {
-  CubismPhysicsTargetType_Parameter // パラメータに対して適用
+  CubismPhysicsTargetType_Parameter, // パラメータに対して適用
 }
 
 /**
@@ -22,7 +22,7 @@ export enum CubismPhysicsTargetType {
 export enum CubismPhysicsSource {
   CubismPhysicsSource_X, // X軸の位置から
   CubismPhysicsSource_Y, // Y軸の位置から
-  CubismPhysicsSource_Angle // 角度から
+  CubismPhysicsSource_Angle, // 角度から
 }
 
 /**
@@ -243,7 +243,8 @@ export namespace Live2DCubismFramework {
   export type CubismPhysicsTargetType = $.CubismPhysicsTargetType;
   export const PhysicsJsonEffectiveForces = $.PhysicsJsonEffectiveForces;
   export type PhysicsJsonEffectiveForces = $.PhysicsJsonEffectiveForces;
-  export type normalizedPhysicsParameterValueGetter = $.normalizedPhysicsParameterValueGetter;
+  export type normalizedPhysicsParameterValueGetter =
+    $.normalizedPhysicsParameterValueGetter;
   export type physicsScaleGetter = $.physicsScaleGetter;
   export type physicsValueGetter = $.physicsValueGetter;
 }

src/rendering/cubismrenderer.ts

@@ -159,7 +159,7 @@ export abstract class CubismRenderer {
    * @param n パラメータの値
    */
   public setAnisotropy(n: number): void {
-    this._anisortopy = n;
+    this._anisotropy = n;
   }
 
   /**
@@ -167,7 +167,7 @@ export abstract class CubismRenderer {
    * @return 異方性フィルタリングのパラメータ
    */
   public getAnisotropy(): number {
-    return this._anisortopy;
+    return this._anisotropy;
   }
 
   /**
@@ -184,7 +184,7 @@ export abstract class CubismRenderer {
   protected constructor() {
     this._isCulling = false;
     this._isPremultipliedAlpha = false;
-    this._anisortopy = 0.0;
+    this._anisotropy = 0.0;
     this._model = null;
     this._modelColor = new CubismTextureColor();
 
@@ -218,6 +218,8 @@ export abstract class CubismRenderer {
     indexArray: Uint16Array,
     vertexArray: Float32Array,
     uvArray: Float32Array,
+    multiplyColor: CubismTextureColor,
+    screenColor: CubismTextureColor,
     opacity: number,
     colorBlendMode: CubismBlendMode,
     invertedMask: boolean
@@ -226,20 +228,20 @@ export abstract class CubismRenderer {
   /**
    * レンダラが保持する静的なリソースを開放する
    */
-  public static staticRelease: Function;
+  public static staticRelease: any;
 
   protected _mvpMatrix4x4: CubismMatrix44; // Model-View-Projection 行列
   protected _modelColor: CubismTextureColor; // モデル自体のカラー（RGBA）
   protected _isCulling: boolean; // カリングが有効ならtrue
   protected _isPremultipliedAlpha: boolean; // 乗算済みαならtrue
-  protected _anisortopy: any; // テクスチャの異方性フィルタリングのパラメータ
+  protected _anisotropy: any; // テクスチャの異方性フィルタリングのパラメータ
   protected _model: CubismModel; // レンダリング対象のモデル
 }
 
 export enum CubismBlendMode {
   CubismBlendMode_Normal = 0, // 通常
   CubismBlendMode_Additive = 1, // 加算
-  CubismBlendMode_Multiplicative = 2 // 乗算
+  CubismBlendMode_Multiplicative = 2, // 乗算
 }
 
 /**

src/rendering/cubismrenderer_webgl.ts

@@ -15,7 +15,7 @@ import { CubismLogError } from '../utils/cubismdebug';
 import {
   CubismBlendMode,
   CubismRenderer,
-  CubismTextureColor
+  CubismTextureColor,
 } from './cubismrenderer';
 
 const ColorChannelCount = 4; // 実験時に1チャンネルの場合は1、RGBだけの場合は3、アルファも含める場合は4
@@ -151,12 +151,10 @@ export class CubismClippingManager_WebGL {
       const drawableIndex: number =
         clippingContext._clippedDrawableIndexList[clippedDrawableIndex];
 
-      const drawableVertexCount: number = model.getDrawableVertexCount(
+      const drawableVertexCount: number =
-        drawableIndex
+        model.getDrawableVertexCount(drawableIndex);
-      );
+      const drawableVertexes: Float32Array =
-      const drawableVertexes: Float32Array = model.getDrawableVertices(
+        model.getDrawableVertices(drawableIndex);
-        drawableIndex
-      );
 
       let minX: number = Number.MAX_VALUE;
       let minY: number = Number.MAX_VALUE;
@@ -368,9 +366,8 @@ export class CubismClippingManager_WebGL {
       clipIndex++
     ) {
       // 1つのクリッピングマスクに関して
-      const cc: CubismClippingContext = this._clippingContextListForMask.at(
+      const cc: CubismClippingContext =
-        clipIndex
+        this._clippingContextListForMask.at(clipIndex);
-      );
 
       // このクリップを利用する描画オブジェクト群全体を囲む矩形を計算
       this.calcClippedDrawTotalBounds(model, cc);
@@ -418,9 +415,8 @@ export class CubismClippingManager_WebGL {
         clipIndex++
       ) {
         // --- 実際に1つのマスクを描く ---
-        const clipContext: CubismClippingContext = this._clippingContextListForMask.at(
+        const clipContext: CubismClippingContext =
-          clipIndex
+          this._clippingContextListForMask.at(clipIndex);
-        );
         const allClipedDrawRect: csmRect = clipContext._allClippedDrawRect; // このマスクを使う、すべての描画オブジェクトの論理座標上の囲み矩形
         const layoutBoundsOnTex01: csmRect = clipContext._layoutBounds; // この中にマスクを収める
 
@@ -512,6 +508,8 @@ export class CubismClippingManager_WebGL {
             model.getDrawableVertexIndices(clipDrawIndex),
             model.getDrawableVertices(clipDrawIndex),
             model.getDrawableVertexUvs(clipDrawIndex),
+            model.getMultiplyColor(clipDrawIndex),
+            model.getScreenColor(clipDrawIndex),
             model.getDrawableOpacity(clipDrawIndex),
             CubismBlendMode.CubismBlendMode_Normal, // クリッピングは通常描画を強制
             false // マスク生成時はクリッピングの反転使用は全く関係がない
@@ -546,9 +544,8 @@ export class CubismClippingManager_WebGL {
   ): CubismClippingContext {
     // 作成済みClippingContextと一致するか確認
     for (let i = 0; i < this._clippingContextListForMask.getSize(); i++) {
-      const clippingContext: CubismClippingContext = this._clippingContextListForMask.at(
+      const clippingContext: CubismClippingContext =
-        i
+        this._clippingContextListForMask.at(i);
-      );
       const count: number = clippingContext._clippingIdCount;
 
       // 個数が違う場合は別物
@@ -609,9 +606,8 @@ export class CubismClippingManager_WebGL {
         // 何もしない
       } else if (layoutCount == 1) {
         // 全てをそのまま使う
-        const clipContext: CubismClippingContext = this._clippingContextListForMask.at(
+        const clipContext: CubismClippingContext =
-          curClipIndex++
+          this._clippingContextListForMask.at(curClipIndex++);
-        );
         clipContext._layoutChannelNo = channelNo;
         clipContext._layoutBounds.x = 0.0;
         clipContext._layoutBounds.y = 0.0;
@@ -674,7 +670,23 @@ export class CubismClippingManager_WebGL {
           cc._layoutBounds.height = 1.0 / 3.0;
         }
       } else {
+        // マスクの制限枚数を超えた場合の処理
         CubismLogError('not supported mask count : {0}', layoutCount);
+
+        // SetupShaderProgramでオーバーアクセスが発生するので仮で数値を入れる
+        // もちろん描画結果は正しいものではなくなる
+        for (let index = 0; index < layoutCount; index++) {
+          const cc: CubismClippingContext = this._clippingContextListForMask.at(
+            curClipIndex++
+          );
+
+          cc._layoutChannelNo = 0;
+
+          cc._layoutBounds.x = 0.0;
+          cc._layoutBounds.y = 0.0;
+          cc._layoutBounds.width = 1.0;
+          cc._layoutBounds.height = 1.0;
+        }
       }
     }
   }
@@ -900,6 +912,8 @@ export class CubismShader_WebGL {
     opacity: number,
     colorBlendMode: CubismBlendMode,
     baseColor: CubismTextureColor,
+    multiplyColor: CubismTextureColor,
+    screenColor: CubismTextureColor,
     isPremultipliedAlpha: boolean,
     matrix4x4: CubismMatrix44,
     invertedMask: boolean
@@ -967,8 +981,8 @@ export class CubismShader_WebGL {
       );
 
       // チャンネル
-      const channelNo: number = renderer.getClippingContextBufferForMask()
+      const channelNo: number =
-        ._layoutChannelNo;
+        renderer.getClippingContextBufferForMask()._layoutChannelNo;
       const colorChannel: CubismTextureColor = renderer
         .getClippingContextBufferForMask()
         .getClippingManager()
@@ -987,8 +1001,8 @@ export class CubismShader_WebGL {
         renderer.getClippingContextBufferForMask()._matrixForMask.getArray()
       );
 
-      const rect: csmRect = renderer.getClippingContextBufferForMask()
+      const rect: csmRect =
-        ._layoutBounds;
+        renderer.getClippingContextBufferForMask()._layoutBounds;
 
       this.gl.uniform4f(
         shaderSet.uniformBaseColorLocation,
@@ -998,6 +1012,22 @@ export class CubismShader_WebGL {
         rect.getBottom() * 2.0 - 1.0
       );
 
+      this.gl.uniform4f(
+        shaderSet.uniformMultiplyColorLocation,
+        multiplyColor.R,
+        multiplyColor.G,
+        multiplyColor.B,
+        multiplyColor.A
+      );
+
+      this.gl.uniform4f(
+        shaderSet.uniformScreenColorLocation,
+        screenColor.R,
+        screenColor.G,
+        screenColor.B,
+        screenColor.A
+      );
+
       SRC_COLOR = this.gl.ZERO;
       DST_COLOR = this.gl.ONE_MINUS_SRC_COLOR;
       SRC_ALPHA = this.gl.ZERO;
@@ -1098,8 +1128,8 @@ export class CubismShader_WebGL {
         );
 
         // 使用するカラーチャンネルを設定
-        const channelNo: number = renderer.getClippingContextBufferForDraw()
+        const channelNo: number =
-          ._layoutChannelNo;
+          renderer.getClippingContextBufferForDraw()._layoutChannelNo;
         const colorChannel: CubismTextureColor = renderer
           .getClippingContextBufferForDraw()
           .getClippingManager()
@@ -1132,6 +1162,22 @@ export class CubismShader_WebGL {
         baseColor.B,
         baseColor.A
       );
+
+      this.gl.uniform4f(
+        shaderSet.uniformMultiplyColorLocation,
+        multiplyColor.R,
+        multiplyColor.G,
+        multiplyColor.B,
+        multiplyColor.A
+      );
+
+      this.gl.uniform4f(
+        shaderSet.uniformScreenColorLocation,
+        screenColor.R,
+        screenColor.G,
+        screenColor.B,
+        screenColor.A
+      );
     }
 
     // IBOを作成し、データを転送
@@ -1198,15 +1244,13 @@ export class CubismShader_WebGL {
     this._shaderSets.at(9).shaderProgram = this._shaderSets.at(3).shaderProgram;
 
     // SetupMask
-    this._shaderSets.at(
+    this._shaderSets.at(0).attributePositionLocation =
-      0
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(0).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(0).attributeTexCoordLocation =
-      0
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(0).shaderProgram,
         'a_texCoord'
       );
@@ -1214,35 +1258,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(0).shaderProgram,
       's_texture0'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(0).uniformClipMatrixLocation =
-      0
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(0).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(0).uniformChannelFlagLocation =
-      0
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(0).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(0).uniformBaseColorLocation =
-      0
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(0).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(0).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(0).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(0).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(0).shaderProgram,
+        'u_screenColor'
+      );
 
     // 通常（PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(1).attributePositionLocation =
-      1
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(1).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(1).attributeTexCoordLocation =
-      1
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(1).shaderProgram,
         'a_texCoord'
       );
@@ -1254,23 +1303,30 @@ export class CubismShader_WebGL {
       this._shaderSets.at(1).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(1).uniformBaseColorLocation =
-      1
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(1).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(1).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(1).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(1).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(1).shaderProgram,
+        'u_screenColor'
+      );
 
     // 通常（クリッピング、PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(2).attributePositionLocation =
-      2
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(2).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(2).attributeTexCoordLocation =
-      2
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(2).shaderProgram,
         'a_texCoord'
       );
@@ -1286,35 +1342,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(2).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(2).uniformClipMatrixLocation =
-      2
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(2).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(2).uniformChannelFlagLocation =
-      2
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(2).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(2).uniformBaseColorLocation =
-      2
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(2).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(2).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(2).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(2).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(2).shaderProgram,
+        'u_screenColor'
+      );
 
     // 通常（クリッピング・反転, PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(3).attributePositionLocation =
-      3
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(3).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(3).attributeTexCoordLocation =
-      3
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(3).shaderProgram,
         'a_texCoord'
       );
@@ -1330,35 +1391,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(3).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(3).uniformClipMatrixLocation =
-      3
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(3).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(3).uniformChannelFlagLocation =
-      3
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(3).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(3).uniformBaseColorLocation =
-      3
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(3).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(3).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(3).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(3).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(3).shaderProgram,
+        'u_screenColor'
+      );
 
     // 加算（PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(4).attributePositionLocation =
-      4
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(4).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(4).attributeTexCoordLocation =
-      4
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(4).shaderProgram,
         'a_texCoord'
       );
@@ -1370,23 +1436,30 @@ export class CubismShader_WebGL {
       this._shaderSets.at(4).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(4).uniformBaseColorLocation =
-      4
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(4).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(4).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(4).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(4).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(4).shaderProgram,
+        'u_screenColor'
+      );
 
     // 加算（クリッピング、PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(5).attributePositionLocation =
-      5
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(5).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(5).attributeTexCoordLocation =
-      5
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(5).shaderProgram,
         'a_texCoord'
       );
@@ -1402,35 +1475,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(5).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(5).uniformClipMatrixLocation =
-      5
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(5).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(5).uniformChannelFlagLocation =
-      5
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(5).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(5).uniformBaseColorLocation =
-      5
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(5).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(5).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(5).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(5).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(5).shaderProgram,
+        'u_screenColor'
+      );
 
     // 加算（クリッピング・反転、PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(6).attributePositionLocation =
-      6
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(6).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(6).attributeTexCoordLocation =
-      6
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(6).shaderProgram,
         'a_texCoord'
       );
@@ -1446,35 +1524,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(6).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(6).uniformClipMatrixLocation =
-      6
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(6).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(6).uniformChannelFlagLocation =
-      6
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(6).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(6).uniformBaseColorLocation =
-      6
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(6).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(6).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(6).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(6).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(6).shaderProgram,
+        'u_screenColor'
+      );
 
     // 乗算（PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(7).attributePositionLocation =
-      7
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(7).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(7).attributeTexCoordLocation =
-      7
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(7).shaderProgram,
         'a_texCoord'
       );
@@ -1486,23 +1569,30 @@ export class CubismShader_WebGL {
       this._shaderSets.at(7).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(7).uniformBaseColorLocation =
-      7
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(7).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(7).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(7).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(7).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(7).shaderProgram,
+        'u_screenColor'
+      );
 
     // 乗算（クリッピング、PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(8).attributePositionLocation =
-      8
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(8).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(8).attributeTexCoordLocation =
-      8
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(8).shaderProgram,
         'a_texCoord'
       );
@@ -1518,35 +1608,40 @@ export class CubismShader_WebGL {
       this._shaderSets.at(8).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(8).uniformClipMatrixLocation =
-      8
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(8).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(8).uniformChannelFlagLocation =
-      8
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(8).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(8).uniformBaseColorLocation =
-      8
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(8).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(8).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(8).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(8).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(8).shaderProgram,
+        'u_screenColor'
+      );
 
     // 乗算（クリッピング・反転、PremultipliedAlpha）
-    this._shaderSets.at(
+    this._shaderSets.at(9).attributePositionLocation =
-      9
+      this.gl.getAttribLocation(
-    ).attributePositionLocation = this.gl.getAttribLocation(
         this._shaderSets.at(9).shaderProgram,
         'a_position'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(9).attributeTexCoordLocation =
-      9
+      this.gl.getAttribLocation(
-    ).attributeTexCoordLocation = this.gl.getAttribLocation(
         this._shaderSets.at(9).shaderProgram,
         'a_texCoord'
       );
@@ -1562,24 +1657,31 @@ export class CubismShader_WebGL {
       this._shaderSets.at(9).shaderProgram,
       'u_matrix'
     );
-    this._shaderSets.at(
+    this._shaderSets.at(9).uniformClipMatrixLocation =
-      9
+      this.gl.getUniformLocation(
-    ).uniformClipMatrixLocation = this.gl.getUniformLocation(
         this._shaderSets.at(9).shaderProgram,
         'u_clipMatrix'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(9).uniformChannelFlagLocation =
-      9
+      this.gl.getUniformLocation(
-    ).uniformChannelFlagLocation = this.gl.getUniformLocation(
         this._shaderSets.at(9).shaderProgram,
         'u_channelFlag'
       );
-    this._shaderSets.at(
+    this._shaderSets.at(9).uniformBaseColorLocation =
-      9
+      this.gl.getUniformLocation(
-    ).uniformBaseColorLocation = this.gl.getUniformLocation(
         this._shaderSets.at(9).shaderProgram,
         'u_baseColor'
       );
+    this._shaderSets.at(9).uniformMultiplyColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(9).shaderProgram,
+        'u_multiplyColor'
+      );
+    this._shaderSets.at(9).uniformScreenColorLocation =
+      this.gl.getUniformLocation(
+        this._shaderSets.at(9).shaderProgram,
+        'u_screenColor'
+      );
   }
 
   /**
@@ -1707,6 +1809,8 @@ export class CubismShaderSet {
   samplerTexture1Location: WebGLUniformLocation; // シェーダープログラムに渡す変数のアドレス（Texture1）
   uniformBaseColorLocation: WebGLUniformLocation; // シェーダープログラムに渡す変数のアドレス（BaseColor）
   uniformChannelFlagLocation: WebGLUniformLocation; // シェーダープログラムに渡す変数のアドレス（ChannelFlag）
+  uniformMultiplyColorLocation: WebGLUniformLocation; // シェーダープログラムに渡す変数のアドレス（MultiplyColor）
+  uniformScreenColorLocation: WebGLUniformLocation; // シェーダープログラムに渡す変数のアドレス（ScreenColor）
 }
 
 export enum ShaderNames {
@@ -1726,7 +1830,7 @@ export enum ShaderNames {
   // Mult
   ShaderNames_MultPremultipliedAlpha,
   ShaderNames_MultMaskedPremultipliedAlpha,
-  ShaderNames_MultMaskedPremultipliedAlphaInverted
+  ShaderNames_MultMaskedPremultipliedAlphaInverted,
 }
 
 export const vertexShaderSrcSetupMask =
@@ -1796,9 +1900,15 @@ export const fragmentShaderSrcPremultipliedAlpha =
   'varying vec2       v_texCoord;' + //v2f.texcoord
   'uniform vec4       u_baseColor;' +
   'uniform sampler2D  s_texture0;' + //_MainTex
+  'uniform vec4       u_multiplyColor;' +
+  'uniform vec4       u_screenColor;' +
   'void main()' +
   '{' +
-  '   gl_FragColor = texture2D(s_texture0 , v_texCoord) * u_baseColor;' +
+  '   vec4 texColor = texture2D(s_texture0, v_texCoord);' +
+  '   texColor.rgb = texColor.rgb * u_multiplyColor.rgb;' +
+  '   texColor.rgb = (texColor.rgb + u_screenColor.rgb * texColor.a) - (texColor.rgb * u_screenColor.rgb);' +
+  '   vec4 color = texColor * u_baseColor;' +
+  '   gl_FragColor = vec4(color.rgb, color.a);' +
   '}';
 
 // Normal （クリッピングされたものの描画用、PremultipliedAlpha兼用）
@@ -1810,9 +1920,14 @@ export const fragmentShaderSrcMaskPremultipliedAlpha =
   'uniform vec4       u_channelFlag;' +
   'uniform sampler2D  s_texture0;' +
   'uniform sampler2D  s_texture1;' +
+  'uniform vec4       u_multiplyColor;' +
+  'uniform vec4       u_screenColor;' +
   'void main()' +
   '{' +
-  '   vec4 col_formask = texture2D(s_texture0 , v_texCoord) * u_baseColor;' +
+  '   vec4 texColor = texture2D(s_texture0, v_texCoord);' +
+  '   texColor.rgb = texColor.rgb * u_multiplyColor.rgb;' +
+  '   texColor.rgb = (texColor.rgb + u_screenColor.rgb * texColor.a) - (texColor.rgb * u_screenColor.rgb);' +
+  '   vec4 col_formask = texColor * u_baseColor;' +
   '   vec4 clipMask = (1.0 - texture2D(s_texture1, v_clipPos.xy / v_clipPos.w)) * u_channelFlag;' +
   '   float maskVal = clipMask.r + clipMask.g + clipMask.b + clipMask.a;' +
   '   col_formask = col_formask * maskVal;' +
@@ -1828,13 +1943,18 @@ export const fragmentShaderSrcMaskInvertedPremultipliedAlpha =
   'uniform sampler2D s_texture1;' +
   'uniform vec4      u_channelFlag;' +
   'uniform vec4      u_baseColor;' +
+  'uniform vec4      u_multiplyColor;' +
+  'uniform vec4      u_screenColor;' +
   'void main()' +
   '{' +
-  'vec4 col_formask = texture2D(s_texture0, v_texCoord) * u_baseColor;' +
+  '   vec4 texColor = texture2D(s_texture0, v_texCoord);' +
-  'vec4 clipMask = (1.0 - texture2D(s_texture1, v_clipPos.xy / v_clipPos.w)) * u_channelFlag;' +
+  '   texColor.rgb = texColor.rgb * u_multiplyColor.rgb;' +
-  'float maskVal = clipMask.r + clipMask.g + clipMask.b + clipMask.a;' +
+  '   texColor.rgb = (texColor.rgb + u_screenColor.rgb * texColor.a) - (texColor.rgb * u_screenColor.rgb);' +
-  'col_formask = col_formask * (1.0 - maskVal);' +
+  '   vec4 col_formask = texColor * u_baseColor;' +
-  'gl_FragColor = col_formask;' +
+  '   vec4 clipMask = (1.0 - texture2D(s_texture1, v_clipPos.xy / v_clipPos.w)) * u_channelFlag;' +
+  '   float maskVal = clipMask.r + clipMask.g + clipMask.b + clipMask.a;' +
+  '   col_formask = col_formask * (1.0 - maskVal);' +
+  '   gl_FragColor = col_formask;' +
   '}';
 
 /**
@@ -1924,9 +2044,9 @@ export class CubismRenderer_WebGL extends CubismRenderer {
     this._textures = new csmMap<number, number>();
     this._sortedDrawableIndexList = new csmVector<number>();
     this._bufferData = {
-      vertex: WebGLBuffer = null,
+      vertex: (WebGLBuffer = null),
-      uv: WebGLBuffer = null,
+      uv: (WebGLBuffer = null),
-      index: WebGLBuffer = null
+      index: (WebGLBuffer = null),
     };
 
     // テクスチャ対応マップの容量を確保しておく
@@ -2001,6 +2121,8 @@ export class CubismRenderer_WebGL extends CubismRenderer {
         this.getModel().getDrawableVertexIndices(drawableIndex),
         this.getModel().getDrawableVertices(drawableIndex),
         this.getModel().getDrawableVertexUvs(drawableIndex),
+        this.getModel().getMultiplyColor(drawableIndex),
+        this.getModel().getScreenColor(drawableIndex),
         this.getModel().getDrawableOpacity(drawableIndex),
         this.getModel().getDrawableBlendMode(drawableIndex),
         this.getModel().getDrawableInvertedMaskBit(drawableIndex)
@@ -2029,6 +2151,8 @@ export class CubismRenderer_WebGL extends CubismRenderer {
     indexArray: Uint16Array,
     vertexArray: Float32Array,
     uvArray: Float32Array,
+    multiplyColor: CubismTextureColor,
+    screenColor: CubismTextureColor,
     opacity: number,
     colorBlendMode: CubismBlendMode,
     invertedMask: boolean
@@ -2075,6 +2199,8 @@ export class CubismRenderer_WebGL extends CubismRenderer {
       opacity,
       colorBlendMode,
       modelColorRGBA,
+      multiplyColor,
+      screenColor,
       this.isPremultipliedAlpha(),
       this.getMvpMatrix(),
       invertedMask
@@ -2119,12 +2245,6 @@ export class CubismRenderer_WebGL extends CubismRenderer {
   public preDraw(): void {
     if (this.firstDraw) {
       this.firstDraw = false;
-
-      // 拡張機能を有効にする
-      this._anisortopy =
-        this.gl.getExtension('EXT_texture_filter_anisotropic') ||
-        this.gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic') ||
-        this.gl.getExtension('MOZ_EXT_texture_filter_anisotropic');
     }
 
     this.gl.disable(this.gl.SCISSOR_TEST);
@@ -2139,6 +2259,18 @@ export class CubismRenderer_WebGL extends CubismRenderer {
 
     this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null); // 前にバッファがバインドされていたら破棄する必要がある
     this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
+
+    // 異方性フィルタリングを適用する
+    if (this.getAnisotropy() > 0.0 && this._extension) {
+      for (let i = 0; i < this._textures.getSize(); ++i) {
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this._textures.getValue(i));
+        this.gl.texParameterf(
+          this.gl.TEXTURE_2D,
+          this._extension.TEXTURE_MAX_ANISOTROPY_EXT,
+          this.getAnisotropy()
+        );
+      }
+    }
   }
 
   /**
@@ -2178,6 +2310,12 @@ export class CubismRenderer_WebGL extends CubismRenderer {
     this.gl = gl;
     this._clippingManager.setGL(gl);
     CubismShader_WebGL.getInstance().setGl(gl);
+
+    // 異方性フィルタリングが使用できるかチェック
+    this._extension =
+      this.gl.getExtension('EXT_texture_filter_anisotropic') ||
+      this.gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic') ||
+      this.gl.getExtension('MOZ_EXT_texture_filter_anisotropic');
   }
 
   _textures: csmMap<number, WebGLTexture>; // モデルが参照するテクスチャとレンダラでバインドしているテクスチャとのマップ
@@ -2191,6 +2329,7 @@ export class CubismRenderer_WebGL extends CubismRenderer {
     uv: WebGLBuffer;
     index: WebGLBuffer;
   }; // 頂点バッファデータ
+  _extension: any; // 拡張機能
   gl: WebGLRenderingContext; // webglコンテキスト
 }
 

src/utils/cubismdebug.ts

@@ -11,7 +11,7 @@ import {
   CSM_LOG_LEVEL_ERROR,
   CSM_LOG_LEVEL_INFO,
   CSM_LOG_LEVEL_VERBOSE,
-  CSM_LOG_LEVEL_WARNING
+  CSM_LOG_LEVEL_WARNING,
 } from '../cubismframeworkconfig';
 import { CubismFramework, LogLevel } from '../live2dcubismframework';
 

src/utils/cubismjson.ts

@@ -307,7 +307,7 @@ export class CubismJson {
    * return false: 失敗
    */
   public parseBytes(buffer: ArrayBuffer, size: number): boolean {
-    const endPos: number[] = new Array(1); // 参照渡しにするため配列
+    const endPos: number[] = new Array<number>(1); // 参照渡しにするため配列
     const decodeBuffer: string = this.arrayBufferToString(buffer);
     this._root = this.parseValue(decodeBuffer, size, 0, endPos);