0%

Live2D模型初体验

哈喽,大家近来如何?最近在筹划给博客增加一些互动性,考虑结合近期大火的大语言模型。API(可直接调用)都已经准备好了(后期成功部署后也准备与各位分享),正愁采用什么样的交互模式。在浏览博客的时候发现了这个动画,瞬间被吸引住了,而且考虑也是一个交互入口,当下决定带到博客里来。

当然,这个Live2D技术也并不只是在我当下使用的Hexo博客框架才能使用。各位感兴趣可以检索看看,是不是有迁移至你们喜欢平台的方案哈。话不多说,接下来分享给各位小伙伴。Enjoy~

Live2D技术前世今生

Live2D技术是一种2D立体表现技术,它允许2D图像在保持其独特形状和画风的同时,在三维空间中自由移动。这项技术由株式会社Live2D(原名サイバーノイズ,Cybernoids)开发。公司自2006年创立以来,一直专注于Live2D的技术研发。公司成立前9年没有进行任何的合同开发,也曾经历过多次濒临倒闭的境地。

在Live2D技术出现之前,要让2D角色动起来,通常需要通过手绘每一帧或者创建3D多边形模型来实现。这些方法不仅耗时耗力,而且往往会牺牲2D角色的原有风格。Live2D技术的出现解决了这些问题。它能够帮助制作方在不增加绘图量、保留原画艺术风格的基础上制作动态角色,相比采用3D或手绘动画来说,Live2D是一个性价比和制作效率更高的选项。

交互

Live2D技术的第一个产品是Live2D Cubism,它允许角色在左右30度的范围内变化。随后,Live2D Euclid的开发使得角色可以实现360度的立体表现。目前,Live2D技术已经在游戏领域被广泛使用。该项技术的主要缺点在于无法实现大角度视角。结合最近看到的一些生成式人工技术,我想2D到3D投射的技术领域,应该很快也会有所突破。

在Hexo Next主题下的部署

主要分为三个部分:hexo-helper-live2d插件的安装、对应模型的安装(或引入)、Hexo博客yaml配置修改(不要在主题配置里增加)。

插件安装

我采用npm进行安装。

1
npm install --save hexo-helper-live2d

npm和hexo都容易出现版本问题,附我使用版本如下:

1
2
3
4
5
6
PS C:\Users\xxx> npm --version
10.8.2
PS C:\Users\xxx> node --version
v21.7.2
PS C:\Users\xxx> hexo --version
hexo-cli: 4.3.2

关于npm版本问题,建议使用nvm进行版本管理。

模型安装

默认支持的数款模型预览可见:Hexo添加Live2D看板娘+模型预览

个人比较喜欢:

  • live2d-widget-model-hijiki
  • live2d-widget-model-koharu
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo

接下来还是npm安装就好。

1
npm install <live2d-widget-model-xxx>

博客配置修改

在主题里配置可以使用模型,但是模型不能修改,属性也不生效。还是建议直接在博客配置里修改。位置参考如下:

博客配置修改

写在后面

还会关注新的web交互新方式。love & peace。

参考资料

[1] 【Live2D】会社消滅寸前だったとあるベンチャーが、世界初の2D立体表現技術を完成できたワケ。https://type.jp/et/feature/161/。
[2] Live2D的介绍及在Web端的运用。https://tgideas.qq.com/gicp/news/475/8723118.html?form=list。
[3] https://github.com/EYHN/hexo-helper-live2d。