网页 Live2D 相关记录

概念 ​

Live2D 是什么？

通俗来说，Live2D 是指看板娘、2D 小人，或指实现它所用到的技术。以下援引 Live2D 官方网站的介绍。

Live2D 是一个向插图灌注生命力并能够进行 2D 立体表现的技术。它可以将绘制的原画作为素材实现立体表现。因此，原画所具有的魅力和特点可以原汁原味地传达出来。

Live2D 是备受世界各地创作者喜爱的表现技术、是 2D 实时动画表现的业界标准。它被广泛应用于手机应用程序、家用游戏、虚拟主播(VTuber)、视频制作等各种用途。

Live2D 模型可以使用官方的 Live2D Cubism Editor 工具来制作。

在网页中使用 ​

运作方式 ​

在网页上使用它需要 3 个部分的配合：模型、主要 JS、Live2D SDK JS

首先，是 Live2D 模型文件

├── Pio //Cubism version 2 model
│   ├── model.json //核心文件
│   ├── model.moc
│   ├── motions //动作文件夹
│   │   ├── *.mtn
│   └── textures //皮肤文件夹
│       ├── *.png
├── Senko_Normals //Cubism version 3 model
│   ├── motions //动作文件夹
│   │   ├── *.motion3.json
│   ├── senko.model3.json //核心文件
│   ├── senko.physics3.json
│   ├── senko_normal.4096 //皮肤文件夹
│   │   └── texture_00.png
│   └── senko_normal.moc3

Live2D 模型文件需要通过 Live2D SDK （Cubism）使用。

Cubism 是什么?

Cubism 是 Live2D SDK 的名称，截至目前它及其对应的模型一共存在四个版本：2、3、4、5。Cubism 2 只能驱动版本 2 的模型，而 Cubism 5 兼容除版本 2 以外的所有模型。

然后是 JS，以 stevenjoezhang/live2d-widget 为例，各文件分工如下：

• autoload.js：入口，加载所需文件，传入配置
• waifu-tips.js：创建看板娘，配置对话框，调用模型，生成用于切换模型和皮肤的工具栏
• live2d.min.js：Live2D SDK，负责小人的显示和各种动作
• waifu-tips.json：网页事件的交互话语
• waifu.css：样式

目前呢，已经有很多项目让你可以在 Web 平台使用 Live2D

本站 ​

本站基于 Valaxy ，直接使用 valaxyjs/valaxy-addon-live2d 就好。不过这个插件还很不完善，不支持单个本地模型换肤，咱小改了一下才能用。

咱从别处找了 2 个喜欢的模型：Pio 和仙狐。顺便压缩了一下大小，4K -> 1K，5MB -> 0.5MB，加载更快，省流量！

已知问题 ​

咱使用的这个 valaxyjs/valaxy-addon-live2d 和 oh-my-live2d/oh-my-live2d 都有同一个问题，那就是当看板娘休息的时候，插件仍然在持续消耗性能，在浏览器任务管理器中可以看到不小的 CPU 和 GPU 占用，在控制台中甚至还看到 DOM 在不停地变化。

这种情况导致大量性能浪费，真的很讨厌

其他 ​

看到的一些模型展示网站和模型仓库：

密码是我的 B 站昵称首字母（4 位，小写）

看到的一些原创文章：