Merge pull request #6 from Live2D/4-r.3-beta.1

[RC] Update to Cubism 4 SDK for Web R3

CHANGELOG.md

@@ -5,6 +5,13 @@ 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.3-beta.1] - 2021-05-13
+
+### Added
+
+* Implement a function to get the correct value when the time axis of the Bezier handle cannot be linear.
+
+
 ## [4-r.2] - 2021-03-09
 
 ### Fixed
@@ -43,5 +50,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 * Reformat code using Prettier and ESLint.
 
 
+[4-r.3-beta.1]: https://github.com/Live2D/CubismWebFramework/compare/4-r.2...4-r.3-beta.1
 [4-r.2]: https://github.com/Live2D/CubismWebFramework/compare/4-r.1...4-r.2
 [4-r.1]: https://github.com/Live2D/CubismWebFramework/compare/ce2585a919ac6e99f64dd468933772c6f1abbcc7...4-r.1

LICENSE.md

@@ -6,6 +6,7 @@ Cubism Web Framework is included in Live2D Cubism Components.
 
 Cubism Web Framework は Live2D Cubism Components に含まれます。
 
+Cubism Web Framework 包括在 Live2D Cubism Components 中。
 
 ## Cubism SDK Release License
 
@@ -17,6 +18,9 @@ Cubism Web Framework は Live2D Cubism Components に含まれます。
 
 * [Cubism SDK リリースライセンス](https://www.live2d.com/ja/download/cubism-sdk/release-license/)
 
+如果您的企业在最近一个会计年度的销售额达到或超过1000万日元，您必须得到Cubism SDK的出版授权许可（出版许可协议）。
+
+* [Cubism SDK发行许可证](https://www.live2d.com/zh-CHS/download/cubism-sdk/release-license/)
 
 ## Live2D Open Software License
 
@@ -24,6 +28,7 @@ Live2D Cubism Components is available under Live2D Open Software License.
 
 * [Live2D Open Software License](https://www.live2d.com/eula/live2d-open-software-license-agreement_en.html)
 * [Live2D Open Software 使用許諾契約書](https://www.live2d.com/eula/live2d-open-software-license-agreement_jp.html)
+* [Live2D Open Software 使用授权协议](https://www.live2d.com/eula/live2d-open-software-license-agreement_cn.html)
 
 
 ## Live2D Proprietary Software License
@@ -32,6 +37,7 @@ Live2D Cubism Core is available under Live2D Proprietary Software License.
 
 * [Live2D Proprietary Software License Agreement](https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_en.html)
 * [Live2D Proprietary Software 使用許諾契約書](https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_jp.html)
+* [Live2D Proprietary Software 使用授权协议](https://www.live2d.com/eula/live2d-proprietary-software-license-agreement_cn.html)
 
 
 ---

README.md

@@ -1,4 +1,4 @@
-# Cubism Web Framework
+# \[Beta Version\] Cubism Web Framework
 
 Live2D Cubism 4 Editor で出力したモデルをアプリケーションで利用するためのフレームワークです。
 
@@ -7,6 +7,10 @@ Live2D Cubism 4 Editor で出力したモデルをアプリケーションで利
 
 ビルドを行うことで、ブラウザで利用可能な JavaScript ライブラリとして利用することができます。
 
+**本 SDK は、 Beta バージョンとなります。先行して新機能を取り込んでいるため、不安定な挙動を示す場合がございます。安定した製品をお求めの方は、公式サイトから配布されている正式版のパッケージ又は `develop` `master` ブランチをご利用ください。**
+
+**\[Beta Version\] の SDK の不具合、各種ご意見等に関しましては、 Live2D コミュニティ にてご連絡ください。直接のコードに対する指摘、修正等は、直接 Pull requests としてご投稿ください。**
+
 
 ## ライセンス
 

src/math/cubismmath.ts

@@ -11,6 +11,8 @@ import { CubismVector2 } from './cubismvector2';
  * 数値計算などに使用するユーティリティクラス
  */
 export class CubismMath {
+  static readonly Epsilon: number = 0.00001;
+
   /**
    * 第一引数の値を最小値と最大値の範囲に収めた値を返す
    *
@@ -68,6 +70,33 @@ export class CubismMath {
     return Math.sqrt(x);
   }
 
+  /**
+   * 立方根を求める
+   * @param x -> 立方根を求める値
+   * @return 値の立方根
+   */
+  static cbrt(x: number): number {
+    if (x === 0) {
+      return x;
+    }
+
+    let cx: number = x;
+    const isNegativeNumber: boolean = cx < 0;
+
+    if (isNegativeNumber) {
+      cx = -cx;
+    }
+
+    let ret: number;
+    if (cx === Infinity) {
+      ret = Infinity;
+    } else {
+      ret = Math.exp(Math.log(cx) / 3);
+      ret = (cx / (ret * ret) + 2 * ret) / 3;
+    }
+    return isNegativeNumber ? -ret : ret;
+  }
+
   /**
    * イージング処理されたサインを求める
    * フェードイン・アウト時のイージングに利用できる
@@ -185,6 +214,111 @@ export class CubismMath {
     return ret;
   }
 
+  /**
+   * 三次方程式の三次項の係数が0になったときに補欠的に二次方程式の解をもとめる。
+   * a * x^2 + b * x + c = 0
+   *
+   * @param   a -> 二次項の係数値
+   * @param   b -> 一次項の係数値
+   * @param   c -> 定数項の値
+   * @return  二次方程式の解
+   */
+  static quadraticEquation(a: number, b: number, c: number): number {
+    if (this.abs(a) < CubismMath.Epsilon) {
+      if (this.abs(b) < CubismMath.Epsilon) {
+        return -c;
+      }
+      return -c / b;
+    }
+
+    return -(b + this.sqrt(b * b - 4.0 * a * c)) / (2.0 * a);
+  }
+
+  /**
+   * カルダノの公式によってベジェのt値に該当する３次方程式の解を求める。
+   * 重解になったときには0.0～1.0の値になる解を返す。
+   *
+   * a * x^3 + b * x^2 + c * x + d = 0
+   *
+   * @param   a -> 三次項の係数値
+   * @param   b -> 二次項の係数値
+   * @param   c -> 一次項の係数値
+   * @param   d -> 定数項の値
+   * @return  0.0～1.0の間にある解
+   */
+  static cardanoAlgorithmForBezier(
+    a: number,
+    b: number,
+    c: number,
+    d: number
+  ): number {
+    if (this.sqrt(a) < CubismMath.Epsilon) {
+      return this.range(this.quadraticEquation(b, c, d), 0.0, 1.0);
+    }
+
+    const ba: number = b / a;
+    const ca: number = c / a;
+    const da: number = d / a;
+
+    const p: number = (3.0 * ca - ba * ba) / 3.0;
+    const p3: number = p / 3.0;
+    const q: number = (2.0 * ba * ba * ba - 9.0 * ba * ca + 27.0 * da) / 27.0;
+    const q2: number = q / 2.0;
+    const discriminant: number = q2 * q2 + p3 * p3 * p3;
+
+    const center = 0.5;
+    const threshold: number = center + 0.01;
+
+    if (discriminant < 0.0) {
+      const mp3: number = -p / 3.0;
+      const mp33: number = mp3 * mp3 * mp3;
+      const r: number = this.sqrt(mp33);
+      const t: number = -q / (2.0 * r);
+      const cosphi: number = this.range(t, -1.0, 1.0);
+      const phi: number = Math.acos(cosphi);
+      const crtr: number = this.cbrt(r);
+      const t1: number = 2.0 * crtr;
+
+      const root1: number = t1 * this.cos(phi / 3.0) - ba / 3.0;
+      if (this.abs(root1 - center) < threshold) {
+        return this.range(root1, 0.0, 1.0);
+      }
+
+      const root2: number =
+        t1 * this.cos((phi + 2.0 * Math.PI) / 3.0) - ba / 3.0;
+      if (this.abs(root2 - center) < threshold) {
+        return this.range(root2, 0.0, 1.0);
+      }
+
+      const root3: number =
+        t1 * this.cos((phi + 4.0 * Math.PI) / 3.0) - ba / 3.0;
+      return this.range(root3, 0.0, 1.0);
+    }
+
+    if (discriminant == 0.0) {
+      let u1: number;
+      if (q2 < 0.0) {
+        u1 = this.cbrt(-q2);
+      } else {
+        u1 = -this.cbrt(q2);
+      }
+
+      const root1: number = 2.0 * u1 - ba / 3.0;
+      if (this.abs(root1 - center) < threshold) {
+        return this.range(root1, 0.0, 1.0);
+      }
+
+      const root2: number = -u1 - ba / 3.0;
+      return this.range(root2, 0.0, 1.0);
+    }
+
+    const sd: number = this.sqrt(discriminant);
+    const u1: number = this.cbrt(sd - q2);
+    const v1: number = this.cbrt(sd + q2);
+    const root1: number = u1 - v1 - ba / 3.0;
+    return this.range(root1, 0.0, 1.0);
+  }
+
   /**
    * コンストラクタ
    */

src/motion/cubismmotion.ts

@@ -22,7 +22,7 @@ import {
   CubismMotionSegment,
   CubismMotionSegmentType
 } from './cubismmotioninternal';
-import { CubismMotionJson } from './cubismmotionjson';
+import { CubismMotionJson, EvaluationOptionFlag } from './cubismmotionjson';
 import { CubismMotionQueueEntry } from './cubismmotionqueueentry';
 
 const EffectNameEyeBlink = 'EyeBlink';
@@ -31,6 +31,11 @@ const TargetNameModel = 'Model';
 const TargetNameParameter = 'Parameter';
 const TargetNamePartOpacity = 'PartOpacity';
 
+/**
+ * Cubism SDK R2 以前のモーションを再現させるなら true 、アニメータのモーションを正しく再現するなら false 。
+ */
+const UseOldBeziersCurveMotion = false;
+
 function lerpPoints(
   a: CubismMotionPoint,
   b: CubismMotionPoint,
@@ -71,6 +76,109 @@ function bezierEvaluate(points: CubismMotionPoint[], time: number): number {
   return lerpPoints(p012, p123, t).value;
 }
 
+function bezierEvaluateBinarySearch(
+  points: CubismMotionPoint[],
+  time: number
+): number {
+  const x_error = 0.01;
+
+  const x: number = time;
+  let x1: number = points[0].time;
+  let x2: number = points[3].time;
+  let cx1: number = points[1].time;
+  let cx2: number = points[2].time;
+
+  let ta = 0.0;
+  let tb = 1.0;
+  let t = 0.0;
+  let i = 0;
+
+  for (let var33 = true; i < 20; ++i) {
+    if (x < x1 + x_error) {
+      t = ta;
+      break;
+    }
+
+    if (x2 - x_error < x) {
+      t = tb;
+      break;
+    }
+
+    let centerx: number = (cx1 + cx2) * 0.5;
+    cx1 = (x1 + cx1) * 0.5;
+    cx2 = (x2 + cx2) * 0.5;
+    const ctrlx12: number = (cx1 + centerx) * 0.5;
+    const ctrlx21: number = (cx2 + centerx) * 0.5;
+    centerx = (ctrlx12 + ctrlx21) * 0.5;
+    if (x < centerx) {
+      tb = (ta + tb) * 0.5;
+      if (centerx - x_error < x) {
+        t = tb;
+        break;
+      }
+
+      x2 = centerx;
+      cx2 = ctrlx12;
+    } else {
+      ta = (ta + tb) * 0.5;
+      if (x < centerx + x_error) {
+        t = ta;
+        break;
+      }
+
+      x1 = centerx;
+      cx1 = ctrlx21;
+    }
+  }
+
+  if (i == 20) {
+    t = (ta + tb) * 0.5;
+  }
+
+  if (t < 0.0) {
+    t = 0.0;
+  }
+  if (t > 1.0) {
+    t = 1.0;
+  }
+
+  const p01: CubismMotionPoint = lerpPoints(points[0], points[1], t);
+  const p12: CubismMotionPoint = lerpPoints(points[1], points[2], t);
+  const p23: CubismMotionPoint = lerpPoints(points[2], points[3], t);
+
+  const p012: CubismMotionPoint = lerpPoints(p01, p12, t);
+  const p123: CubismMotionPoint = lerpPoints(p12, p23, t);
+
+  return lerpPoints(p012, p123, t).value;
+}
+
+function bezierEvaluateCardanoInterpretation(
+  points: CubismMotionPoint[],
+  time: number
+): number {
+  const x: number = time;
+  const x1: number = points[0].time;
+  const x2: number = points[3].time;
+  const cx1: number = points[1].time;
+  const cx2: number = points[2].time;
+
+  const a: number = x2 - 3.0 * cx2 + 3.0 * cx1 - x1;
+  const b: number = 3.0 * cx2 - 6.0 * cx1 + 3.0 * x1;
+  const c: number = 3.0 * cx1 - 3.0 * x1;
+  const d: number = x1 - x;
+
+  const t: number = CubismMath.cardanoAlgorithmForBezier(a, b, c, d);
+
+  const p01: CubismMotionPoint = lerpPoints(points[0], points[1], t);
+  const p12: CubismMotionPoint = lerpPoints(points[1], points[2], t);
+  const p23: CubismMotionPoint = lerpPoints(points[2], points[3], t);
+
+  const p012: CubismMotionPoint = lerpPoints(p01, p12, t);
+  const p123: CubismMotionPoint = lerpPoints(p12, p23, t);
+
+  return lerpPoints(p012, p123, t).value;
+}
+
 function steppedEvaluate(points: CubismMotionPoint[], time: number): number {
   return points[0].value;
 }
@@ -616,6 +724,10 @@ export class CubismMotion extends ACubismMotion {
     this._motionData.fps = json.getMotionFps();
     this._motionData.eventCount = json.getEventCount();
 
+    const areBeziersRestructed: boolean = json.getEvaluationOptionFlag(
+      EvaluationOptionFlag.EvaluationOptionFlag_AreBeziersRistricted
+    );
+
     if (json.isExistMotionFadeInTime()) {
       this._fadeInSeconds =
         json.getMotionFadeInTime() < 0.0 ? 1.0 : json.getMotionFadeInTime();
@@ -750,9 +862,16 @@ export class CubismMotion extends ACubismMotion {
           case CubismMotionSegmentType.CubismMotionSegmentType_Bezier: {
             this._motionData.segments.at(totalSegmentCount).segmentType =
               CubismMotionSegmentType.CubismMotionSegmentType_Bezier;
-            this._motionData.segments.at(
+
-              totalSegmentCount
+            if (areBeziersRestructed || UseOldBeziersCurveMotion) {
-            ).evaluate = bezierEvaluate;
+              this._motionData.segments.at(
+                totalSegmentCount
+              ).evaluate = bezierEvaluate;
+            } else {
+              this._motionData.segments.at(
+                totalSegmentCount
+              ).evaluate = bezierEvaluateCardanoInterpretation;
+            }
 
             this._motionData.points.at(
               totalPointCount

src/motion/cubismmotionjson.ts

@@ -14,6 +14,7 @@ import { CubismJson } from '../utils/cubismjson';
 const Meta = 'Meta';
 const Duration = 'Duration';
 const Loop = 'Loop';
+const AreBeziersRestricted = 'AreBeziersRestricted';
 const CurveCount = 'CurveCount';
 const Fps = 'Fps';
 const TotalSegmentCount = 'TotalSegmentCount';
@@ -75,6 +76,20 @@ export class CubismMotionJson {
       .toBoolean();
   }
 
+  public getEvaluationOptionFlag(flagType: number): boolean {
+    if (
+      EvaluationOptionFlag.EvaluationOptionFlag_AreBeziersRistricted == flagType
+    ) {
+      return this._json
+        .getRoot()
+        .getValueByString(Meta)
+        .getValueByString(AreBeziersRestricted)
+        .toBoolean();
+    }
+
+    return false;
+  }
+
   /**
    * モーションカーブの個数の取得
    * @return モーションカーブの個数
@@ -352,6 +367,13 @@ export class CubismMotionJson {
   _json: CubismJson; // motion3.jsonのデータ
 }
 
+/**
+ * @brief ベジェカーブの解釈方法のフラグタイプ
+ */
+export enum EvaluationOptionFlag {
+  EvaluationOptionFlag_AreBeziersRistricted = 0 ///< ベジェハンドルの規制状態
+}
+
 // Namespace definition for compatibility.
 import * as $ from './cubismmotionjson';
 // eslint-disable-next-line @typescript-eslint/no-namespace