前端 AI 必会的 live2D,还支持对口型

作者:微信小助手

发布时间:2025-04-23T17:05:55

随着这几年 AI 数字人的兴起,前端需要通过一些工具来更生动的展示这些虚拟人角色。
live2D 就是先进的二维动画技术,能够在前端网页中实现高度逼真的角色动画效果。
它是日本公司开发的,主要还是动画风格。核心技术是:
基于多层次的2D绘制,通过对角色进行分割并赋予不同部位独立的动作能力,实现角色的自由变形和动态效果。
官方文档:
https://www.live2d.com/zh-CHS/learn/sample/

需要模型文件:
准备一个 Live2D 模型文件,通常是以.moc或.moc3等格式存储的。这些文件包含了角色的图形和骨架信息。
下面就是Live2D 模型文件,具体来说是一个基于 Cubism 4 SDK 的.model3.json文件,描述了 3D 模型的参数、纹理、骨骼绑定等信息。
https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json
{  "Version": 3,  "FileReferences": {    "Moc": "haru_greeter_t03.moc3",    "Textures": [      "haru_greeter_t03.2048/texture_00.png",      "haru_greeter_t03.2048/texture_01.png"    ],    "Physics": "haru_greeter_t03.physics3.json",    "Pose": "haru_greeter_t03.pose3.json",    "DisplayInfo": "haru_greeter_t03.cdi3.json",    "Expressions": [      {        "Name": "f00",        "File": "expressions/F01.exp3.json"      },      {        "Name": "f01",        "File": "expressions/F02.exp3.json"      },      {        "Name": "f02",        "File": "expressions/F03.exp3.json"      },      {        "Name": "f03",        "File": "expressions/F04.exp3.json"      },      {        "Name": "f04",        "File": "expressions/F05.exp3.json"      },      {        "Name": "f05",        "File": "expressions/F06.exp3.json"      },      {        "Name": "f06",        "File": "expressions/F07.exp3.json"      },      {        "Name": "f07",        "File": "expressions/F08.exp3.json"      }    ],    "Motions": {      "Idle": [        {          "File": "motion/haru_g_idle.motion3.json"        },        {          "File": "motion/haru_g_m07.motion3.json"        },        {          "File": "motion/haru_g_m15.motion3.json"        }      ],      "Tap": [        {          "File": "motion/haru_g_m14.motion3.json",          "Sound": "../shizuku/sounds/flickHead_00.mp3"        },        {          "File": "motion/haru_g_m05.motion3.json",          "Sound": "../shizuku/sounds/flickHead_01.mp3"        }      ]    }  },  "Groups": [    {      "Target": "Parameter",      "Name": "EyeBlink",      "Ids": [        "ParamEyeLOpen",        "ParamEyeROpen"      ]    },    {      "Target": "Parameter",      "Name": "LipSync",      "Ids": [        "ParamMouthOpenY"      ]    }  ],  "HitAreas": [    {      "Id": "HitArea",      "Name": "Head"    },    {      "Id": "HitArea2",      "Name": "Body"    }  ]}

下面我们一一解析下:

.model3.json文件通常包含以下关键部分:

    模型版本信息:
    "Version":3
    该模型基于 Cubism 4 SDK 生成。

    文件引用:
    "FileReferences": {    "Moc": "haru_**.moc3",    "Textures": ["haru_**.1024/texture_00.png"]}
    • Moc 指向 .moc3 文件,包含模型的骨骼动画数据
    • Textures 指向纹理图片,用于渲染模型外观

    参数和部件:
    "Parameters": { ... },"Parts": { ... }
    • Parameters  定义模型的变形参数
    • Parts 定义模型的部件结构(头发等)


        物理设置:
    "Physics": { ... }
    • 描述模型的物理特性(如重力)
        
    表达式和动作:
    • Expressions
    • 定义表情数据
    • Motions
    • 定义动作数据



    SDK 的选择:
    pixijs 的版本 
    https://github.com/guansss/pixi-live2d-display

    它有多个版本:
    import { Live2DModel } from 'pixi-live2d-display';// 如果只需要 Cubism 2.1import { Live2DModel } from 'pixi-live2d-display/cubism2';// 如果只需要 Cubism 4import { Live2DModel } from 'pixi-live2d-display/cubism4';

    调用方式:
      </ul>
      <pre class="code-snippet__js" data-lang="javascript"><code><span leaf=""><span class="code-snippet__keyword">import</span>&nbsp;{&nbsp;</span></code><code><span leaf="">&nbsp;&nbsp;<span class="code-snippet__title">Live2DModel</span></span></code><code><span leaf="">}&nbsp;<span class="code-snippet__keyword">from</span><span class="code-snippet__string">'pixi-live2d-display'</span>;</span></code><code><span leaf=""><br></span></code><code><span leaf=""><span class="code-snippet__keyword">const</span>&nbsp;model =&nbsp;<span class="code-snippet__keyword">await</span>&nbsp;<span class="code-snippet__title">Live2DModel</span>.<span class="code-snippet__title">from</span>(<span class="code-snippet__string">'**.model.json'</span>);</span></code></pre>
      
    Live2DModel.from()方法加载模型文件。
    那如何把模型添加到 PixiJS 舞台进行渲染
    import * as PIXI from 'pixi.js';const app = new PIXI.Application({  viewdocument.getElementById('canvas'),});
    app.stage.addChild(model);

    还支持嘴型同步功能
    官方文档:
    https://docs.live2d.com/en/cubism-editor-manual/motion-sync/
    很多简单的方式:通过不同播放中的音频的声调大小来控制口型的开合程度
    比如可以通过 py 的 librosa 这种工具
    相关文档:
    https://github.com/Live2D/CubismWebMotionSyncComponents

    当然也有一些项目可以参考:
    通过一些算法提取音频流的信息,在每一帧中不断的分析,得到设置口型开合的大小以及设置最接近的元音口型
    https://github.com/liyao1520/live2d-motionSync