forked from sunyu/CubismFramework
[Beta version] Update to Cubism 4 SDK for Web R3 Beta1
ito
parent
4b2130bca9
commit
8ac72d40bc
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -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 としてご投稿ください。**
|
||||
|
||||
|
||||
## ライセンス
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
* コンストラクタ
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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
|
||||
).evaluate = bezierEvaluate;
|
||||
|
||||
if (areBeziersRestructed || UseOldBeziersCurveMotion) {
|
||||
this._motionData.segments.at(
|
||||
totalSegmentCount
|
||||
).evaluate = bezierEvaluate;
|
||||
} else {
|
||||
this._motionData.segments.at(
|
||||
totalSegmentCount
|
||||
).evaluate = bezierEvaluateCardanoInterpretation;
|
||||
}
|
||||
|
||||
this._motionData.points.at(
|
||||
totalPointCount
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue