Live2D 1- 如何直接使用 CubismWebFramework 的方法

Cubism SDK for Web (2020/01/30)

如何直接使用 CubismWebFramework 的方法

• Cubism SDK for Web中包含的示例项目使用SDK包的“ / Framework”目录下的处理来处理Cubism模型。

• 在创建处理Cubism模型的项目时，可以基于示例项目使用它，但是在现有应用程序或您自己的引擎中实现它时，您可能希望直接处理Cubism Web Framework的API。

• 但是，由于包中包含的示例项目具有很高的功能，因此仅通过引用就很难理解和隔离该结构。

• 接下来，我们将介绍直接调用Cubism框架并为上述用户处理模型的最小代码段。

CubismFramework的框架周期

• 使用CubismFramework 框架的步骤如下所示：
  • 1、CubismFramework的初始化
  • 2、获得模型文件路径
  • 3、加载模型
  • 4、更新处理
  • 5、模型销毁
  • 6、CubismFramework的结束处理

CubismFramework的初始化

• CubismFrame work的初始化处理如下所示：

  • CubismFrame Work是CubismFramework.startUp（）进行初始化。

  • Cubism SDK for Native在第一参数中采用了Arrocator（ICubism Allocator），但在Cubism SDK for Web中不使用。

    // 日志等选项设置。
    _cubismOption: Csm_Option;
    
    // 消息输出函数。
    public static printMessage(message: string): void
    

  • printMessage() 的内容请参考样品中的同名函数来实现。

    	import {Live2DCubismFramework as live2dcubismframework, Option as Csm_Option, LogLevel} from "../../../../Framework/live2dcubismframework";
    	import Csm_CubismFramework = live2dcubismframework.CubismFramework;    
    	・
    	・
    	・
        // 设置日志输出级别。在Logo Level Verbose的情况下，输出详细日志。
        this._cubismOption.logFunction = printMessage;
        this._cubismOption.loggingLevel = LogLevel.LogLevel_Verbose;
        
        // 设置Cubism NativeFramework初始化所需的参数。
        Csm_CubismFramework.startUp(this._cubismOption);
        
        // CubismFrame work初始化。
        Csm_CubismFramework.initialize();
    

• Tips
  • 在初始化期间仅调用CubismFramework.initialize（）一次，然后跳过后续调用，除非CubismFramework.dispose（）销毁了CubismFramework实例。 - 但是，如果是在一次废弃CubismFrame work实例之后，再次进行初始化的情况下调用CubismFramework.initialize()。

获取模型文件

• 对于Cubism的内置数据集，每个相对路径在model3.json中描述，并且通过引用此字节数据来读取。
  建议解析model3.json以获取模型文件等的路径并读取它。

• 要解析model3.json，请使用CubismFramework的CubismModelSettingJson类。

-也可以直接指定并加载.moc3文件和纹理。如果直接指定并加载它，则需要修改代码。

• 在该示例中，LAppModel.loadAssets（）中使用fetch（）从资源路径中获取文件，读取字节数据，并获取Json的内容。

  fetch(path).then(
      (response) =>
      {
          return response.arrayBuffer();
      }
  ).then(
      (arrayBuffer) =>
      {
          let buffer: ArrayBuffer = arrayBuffer;
          let size = buffer.byteLength;
          // 获取Json中描述的模型数据路径等
          let setting: ICubismModelSetting = new CubismModelSettingJson(buffer, size);
  
          // 保存结果
          this.setupModel(setting);
      }
  );
  

加载模型

• 使用CubismModel接口加载模型。

• CubismModel的实例由CubismNativeFramework中的CubismUserModel._model持有，并使用CubismUserModel.loadModel（）获取并保存模型数据。

• 使用CubismModel时，建议从继承CubismUserModel的类中进行处理。

• 在该示例中，LAppModel类继承自CubismUserModel。

• 另外，可以在外部执行诸如纹理，运动和面部运动的资源管理。

• 在该示例中，LAppModel.setupModel（）中使用fetch（）从ICubismModelSetting中保存的文件路径中读取模型数据。

  // 获取存储在ICubismModelSetting中的模型文件路径
  let path: string = this._modelSetting.getModelFileName();
  path = this._modelHomeDir + path;
  
  fetch(path).then(
      (response) =>
      {
          return response.arrayBuffer();
      }
  ).then(
      (arrayBuffer) =>
      {
          buffer = arrayBuffer;
          // 读取模型数据
          this.loadModel(buffer);
          deleteBuffer(buffer, path);
      }
  );
  this._state = LoadStep.WaitLoadModel;
  

• 如上所述，可以通过model3.json获取要读取的moc3文件的路径，但是也可以从model3.json获取面部表情，物理计算，姿势，眨眼，嘴唇同步，用户数据和动作的路径。

• 在SDK示例中，它们在加载模型的同时加载。

• 每种阅读方法请参考以下内容。

  • 表情
  • 物理计算
  • 姿势
  • 眨眼
  • 唇型同步
  • 用户数据
  • 动作

• Tips

  • 上面的代码段基于一个模型将显示在屏幕上的假设。
  • 如果要同时在屏幕上显示多个模型，请创建与要显示的模型一样多的CubismUserModel派生类的实例。

更新处理

• 通过使用CubismModel的接口CubismModel.setParameterValueById（）将要更新的参数和值传递到目标模型来设置Cubism模型更新过程。

• 调用CubismModel.update（）进行更新。

• 调用CubismModel.update（）时，将在Cubism Core中执行更新过程，并根据到目前为止设置的参数和零件的值来更新顶点信息等。

• 通过将此更新的顶点信息等传递给渲染器，可以在屏幕上绘制立体模型。

• 在下面的代码中，使用_model（CubismModel）在类中直接执行模型的参数运算，并调用Cubism Core的更新过程以应用该运算。

  public update(): void
  {
      // 参数操作
      // 将ParamAngleX移至值value
      this._model.setParameterValueById(CubismFramework.getIdManager().getId("ParamAngleX"), value);
  
      // 不透明度处理
      // 设置 PartArmL的不透明度
      this._model.setPartOpacityById(CubismFramework.getIdManager().getId("PartArmL"), opacity);
  
      // 模型更新
      this._model.update();
  }
  

• 在更新过程中，始终在CubismModel.update（）之前执行视线跟踪，物理计算，运动回放等。

• 在CubismModel.update（）之后操作参数值不会生效。

• 此后，如果再次调用CubismModel.update（），则会反映出来，但是由于负载很高，建议将这一过程组合为一个。

  // 反映在顶点
  _model.setParameterValue(CubismFramework.getIdManager().getId("ParamAngleX"), value1);
  
  // 更新了模型顶点信息
  _model.update();
  
  // 没有反映在顶点
  _model.setParameterValue(CubismFramework.getIdManager().getId("ParamAngleX"), value);
  

• 播放动作CubismMotionManager.updateMotion（）会覆盖用于播放动作的任何ID参数值。

• 因此，即使您在此过程之前操作了参数的值，也将被CubismMotionManager.updateMotion（）覆盖。

• 建议您先执行动作回放处理，然后再执行视距跟踪和物理计算等值操作。

   // 反映模型上正在播放的动作
   _motionManager.updateMotion(_model, deltaTimeSeconds);
  
   // 视线追随等值操作和物理运算处理
  
   // 更新模型的顶点信息
   _model.update();
  

• 另外，如果未将所有参数都用于要播放的动作，或者由于停止了动作播放而未对参数值进行操作，则保留在前一帧中的值操作的结果将会留存。

• 因此，后续的相对参数值操作可能会导致意外的结果。

• 通过在模型中反映运动的过程之前和之后调用CubismModel.loadParameter（）和CubismModel.saveParameter（），可以重置此后执行的相对值操作。

  // 将所有参数的值恢复为保存时的状态
   _modelloadParameters();
  
   // 反映模型上正在播放的动作
   _motionManager.updateMotion(_model, deltaTimeSeconds);
  
   // 保存所有参数的值
   _model.saveParameters();
  
   // 相对值处理
  
   // 更新模型顶点信息
   _model.update();
  

• 请参阅每个文档以了解处理本身，例如视线跟踪，物理计算和运动回放。

  • 表情
  • 物理计算
  • 姿势
  • 眨眼
  • 唇型同步
  • 用户数据
  • 动作

• 通过将此更新的顶点信息等传递给渲染器，可以在屏幕上绘制立体模型。

模型销毁

• 要销毁模型，请销毁CubismUserModel派生类的生成实例。

• 这破坏了该模型从CubismUserModel的析构函数获得的运动，面部，物理计算和其他信息。

   // 舍弃模型数据
   this._model.release();
   this._model = null;
  

CubismFramework的结束处理

• 调用CubismFramework.dispose（）以释放CubismFramework分配的公共部分的资源。

• 在调用CubismFramework.initialize（）之前，请勿调用CubismFramework.dispose（）。

   // CubismFramework 释放
   CubismFramework.dispose();
  

• Tips

  • 由Cubism Framework初始化的数据位于静态区域，并且不依赖于模型数据。
  • 因此，它可以在多个模型之间重用，如果您只想切换模型，则无需调用CubismFramework.dispose（）。