重要声明

  • 首先这里要声明一下,因为Cubism 3的core文件的特殊性,即Cubism 3的live2dcubismcore文件,不管是TypeScript或者JavaScript文件是无法分发的,所以,不能够将其放在其他分发平台,github这样的平台也不行,下面是一个曾经违反了许可的github仓库的issue:
  • 所以,的确很少能够在个人博客等网页上展示作品;其次是Cubism 3模型和Cubism 2模型的文件结构变化,也导致不能向下兼容;最后,我不允许将我页面里的live2dcubismcore.min.js下载后发布到分发平台,我博客中使用的live2dcubismcore.min.js文件只能在我的博客中使用,如果你需要live2dcubismcore.min.js资源,请从live2d官网: https://live2d.github.io 下载Cubism SDK for Web。如果无法访问,这就要自己想办法了,这个SDK是不允许再分发的。我清楚js文件是可以通过浏览器保存的,所以,请遵照License中的内容,不要保存本页面的live2dcubismcore.min.js ,去官网下载,如果使用了我博客中的live2dcubismcore.min.js,带来的任何后果,我无法负责

准备工作

  • 反向代理工具,或web容器
    这里我推荐使用Nginx或者tomcat,当然,Apache也可以,如果你电脑上木得Java,而且如果是不太懂编程,就是想看看如何实现的话,折腾一下Nginx实现也可以,或者说,以上的工具都不懂,那就看看就好
  • hosts修改
    由于在演示中使用了AJAX发送请求获取模型数据,且pixi.js加载模型数据也是通过AJAX来实现的,所以如果本机调试的话,要自己定义一个地址,那么修改hosts就好了
  • 浏览器开启硬件加速
    这个挺重要的,因为pixi加载模型为了提供更细致化的模型使用了WebGL技术,该技术是基于openGL在网页上的实现,所以,如果不开启引进加速,模型质量会有所下降

开发起因

其实开发这个的开端是我贪玩碧蓝航线,然后无聊上班查资料,翻到别人的blog,发现大佬们的live2d挺好玩的,然后查了很多资料,也根据大佬们提供的材料自己实现过,其实这里就发现大佬们的材料都是直接丢到服务器上页面展示的,本地调试具体的细节没有介绍,所以我上面提到web容器的原因。但是,我想到自己贪玩碧蓝的时候,里面很多live2d模型挺好看的,也想拿出来展示(这里小声一说,都是有版权的,所以这里还是不可避免的打个广告)碧蓝航线:https://game.bilibili.com/blhx/ 欢迎大家去贪玩。
在我使用之前,我也看过相关的博客,比方说"猫与向日葵" : https://imjad.cn/ 写的 "给博客添加能动的看板娘(Live2D)-模型格式v3转v2" https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-03 一文中,把V3转为V2,我也下载过通过下文提到的 "P大" https://github.com/Perfare 的代码转换出来的模型进行向下转换,可惜,也许是不会用软件,也许是,真的碧蓝航线里面的模型太大,导致free版是无法执行导入模型命令的,只能预览。最后我放弃了这个转换的思路,开始了开发过程。

过程

  1. 获取模型数据
    获取Cubism 3的模型的途径很多,不光上面提到的碧蓝航线,还要少女前线等,都有Cubism 3的模型。我是通过"P大"的 AzurLaneLive2DExtract : https://github.com/Perfare/AzurLaneLive2DExtract 工具将碧蓝航线的模型提取出来的。
    得到moc3和json数据后,就可以进行下一步了。
  2. 在WordPress页面上实现
    做到这我也发现,不好实现啊,其实你已经注意到我上面所说的,因为Cubism 2模型和Cubism 3模型的文件结构不同,导致Cubism 3的模型是没法通过现有的Cubism 2的js代码在页面上实现,这就让我之前找到那些代码完全没用了,重新去开发,对我来说不太可能,毕竟,还要上班,晚上又要贪玩碧蓝,这可如何是好?
    我又在github上翻代码,忽然一个标题吸引了我 CubismWordPressPlugin : https://github.com/Live2D/CubismWordPressPlugin ,这不就刚好是我这个blog的框架吗?我好奇的点进去开始了入坑第一步。

CubismWordPressPlugin

  1. CubismWordPressPlugin项目
    这个插件是可以直接丢到WordPress的plugins文件夹下使用的,项目里面包含了2个免费的模型,以及动作,live2D公司在Cubism 3代中重新定义了许可证的内容,这个项目里面就包含了两个重要的许可证
  • Live2D Proprietary Software License
  • Live2D Open Software License
    这两个许可证最重要的一个区别就在于,Live2D Proprietary Software License中提到,不允许对文件进行分发,分发的具体定义,可以google一下,所以,在我翻阅官方的github的时候,就有一些没有仔细看License的用户发布live2d官方的core文件而被官方在issue里面回复要求删除分发文件的。
    而且这两个License都有同一个要求,不能修改。
  1. 项目文件结构
    • live2d.php
      插件本体
    • js/live2dcubismframework.js
      根据文件名,这个就是渲染Cubism 3模型的js文件
    • js/live2dcubismpixi.js
      通过pixi加载Cubism 3模型的js,所以这里需要用到pixi.js
    • js/pixiWordPressPlugin.js
      和插件相支持,加载本地assets文件夹内的模型
    • assets
      模型文件夹
  2. 实现
    这里将项目下live2d文件夹放在WordPress的plugins文件夹下,在后台插件列表里找到

    ,在后头能看到下面的图标

    点击进入
    就看到里面已经预先填好了如下图

    根据提示修改就好,额具体注意的会在我调整的部分详细说明,这里要说明一点,和之前的加载方式不同的是,这个插件的加载是在任意标签下添加一个canvas的节点,所以,下图中attach tag就很重要。

    pixiWordPressPlugin.js中可以看到,获取这个目标标签的代码段为
    var canvas = document.querySelector(attach_tag);
    由于使用了querySelector来获取,所以,传入参数可以是id名,可以是class名。
    最后调整模型位置和比例

    这样就完成了。
  3. 修改实现碧蓝航线模型
    上面刚提到,CubismWordPressPlugin项目下有两个License,我起初没有仔细看就开始修改了,由于有些模型有6个文件路径,CubismWordPressPlugin项目只有3个路径可以修改,所以,只能添加,而pixiWordPressPlugin.js里也定义死了3个模型路径,所以,其实最后的限制是,如果你想只用这个插件就实现,那么你需要的是找一个模型文件小于3个的,就可以了。而对于通用来说,不建议这样实现,因为是死的3个。况且这样会修改pixiWordPressPlugin.js这个文件,这个文件是不允许修改的,所以,我最后删除了这个插件,转而研究如何通用。

通用化

方便和waifu-tips.js整合

首先之前通过改文件发现其实这里我需要加载到模型进行渲染就行,而pixiWordPressPlugin.js中恰好就包含了加载和渲染,以及事件绑定。
那接下来就简单了,根据pixiWordPressPlugin.js中的相关方法,改造后就得到我项目中的loadModel.js。
- loadModel.js
这个文件是加载模型渲染模型的js文件,其中很重要的地方

var LIVE2DCUBISMCORE = Live2DCubismCore

这一段的作用,因为live2dcubismcore.js里面使用的对象名为Live2DCubismCore,而live2dcubismframework.jslive2dcubismpixi.js的对象都使用全大写风格,所以,在不修改这些文件的前提下,将core中的对象和其他js文件中的对象统一。
而我发现,其实之前插件是添加canvas节点来渲染页面的,为了能和之前的waifu-tips.js绑定点击等时间作融合,就不能通过增加节点,或许可以将时间绑定到canvas外层的div,但是,这样和之前一个项目 "live2d_demo" : https://github.com/fghrsh/live2d_demo 中的绑定方法不一致,这样耦合性不强,为了解开这种耦合,即出去绑定这种事件也能使用的原则,我研究了一下pixi.js的源码,发现另外一种渲染方式是可以在原有的canvas上实现的即:

@param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional

view字段代表的就是现有的canvas节点,所以,就使用:

var app = new PIXI.Application(modelWidth, modelHight, {transparent: true ,view: view});

这样的改造完成了在canvas存在时进行渲染,从而同步绑定waifu-tips.js里的事件。

多模型加载

在我写完第一版代码后,有位热心的网友Spirit留言说自己在尝试添加多模型出现问题,正好白天可以摸鱼,着手赶快研究了一下,增加随机多模型切换加载,当然可以修改成传参指定切换模型。
重复加载会遇到moc文件重复报错,但其他文件是不会冲突的,所以,就按照Spirit所说,执行

PIXI.loader.reset();

将loader内的内容都清除了,但这样还不够,Spirit说加载到3个会有问题,这个我发现了,其实,是没有执行

PIXI.utils.destroyTextureCache();

这样,就能重复加载新的模型进入了,可是这样直接重复调用loadModel();浏览器会报警告,警告是黄色文字,虽然不影响正常运行,但是,强迫症看着烦,而Spirit说需要app.stage.removeChild()这样会删除DOM节点,其实不用,警告文字是缓冲警告,想了一下是不是因为正在渲染的问题,最后找到解决办法,在全局定义app后,第二次加载,app就不为空了,那么只需要执行

app.stop();

停止渲染就解决了缓冲警告,浏览器不会再报警告,可以多个模型进行加载。

不过要注意的是,现在还没找到好的方法解决其他数组的内存占用,导致如果多次调用加载模型,会造成更多无用的数组加入浏览器内存,导致浏览器性能有所下降,如果在博客里频繁加载,本来博客做得有点炫酷的,内存就占用很高,再加载多次,可能会导致浏览者的浏览体验下降,浏览器滚动卡顿。

先写到这,其实看到这差不多也能够自己实现了,loadMoldel.js里面注释很多,可以参考注释修改参数就行。

我的github项目"live2d_on_website" : https://github.com/Himehane/live2d_on_website 如果打算学习了解,可以去克隆下来看看,前提是要确保你本地有sdk的js文件。

注意事项

注意License中的内容

我之所以再三强调,原因就是因为License中的限制,而我网页中自己使用这个js文件是征求live2d在github上的成员确认后才放在自己的服务器上的,并且我声明了,我不会再分发这个js文件,如果你也想在自己的网页中使用,请征求live2d的同意后再使用,请充分阅读Live2D Proprietary Software LicenseLive2D Open Software License的相关内容。

模型的版权问题

这也是我非常注意的,毕竟现在版权问题很重要,如果使用了他人版权的内容,最好声明其版权信息,如果对方不允许使用,请遵照对方要求,将内容移除,这也是对开发者的尊重。

鸣谢

感谢各位大佬看这篇博客,可能这个博客写的有点乱,我也会在后期阅读的时候不断修改更新

感谢live2d在github上的员工耐心解答对core文件的使用方法

感谢封面作者 : AO凹君@睡眠不足です (https://www.pixiv.net/member.php?id=1248744)的图片:❀(https://www.pixiv.net/member_illust.php?mode=medium&illust_id=72995338)


Never give up!