Hi again. Just wanted to thank you for the support of this library.
Wanted to share this demo I've been working on that uses webcam face capture to control Live2D.

On the topic of a potential future release with Live2D 4.0 compatibility, have you had a chance to peer into their new SDK? Was wondering how easy of an update it would be.

I know Live2D 4.0 + PIXI V5 is definitely an in demand combo, especially with the vtube community on the rise. Linking another reference to work being done to make it real.

Wish I was more technically capable to contribute, but I'll fumble around a bit.

I was following #4 and got cubism v2 to work properly. However,

model.internal.eyeBlink.setEyeParams(eyeValue)

and

model.internalModel.coreModel.setParamFloat('PARAM_MOUTH_OPEN_Y', mouthSize);

didn't work - setEyeParams isn't available in eyeBlink and setParamFloat doesn't seem to be available in coreModel. Could you kindly suggest some way out? Thank you!

很抱歉又来打扰您了。

问题描述

• 问题模型：
  -- Ava
  -- Ava.model3.json的CDN
• 模型部件的透明状态不能正常显示，所有部件均以非透明状态显示出来。
• 正常状态：
  
• 实际状态：
  

该模型的测试环境

尝试

阅读官方源码，然而水平有限没找到是哪里的问题。
可能相关的字段：

• CubismBlendMode
• setParameterValueByIndex
• CubismMotionCurveTarget_PartOpacity

原因猜测：

• motion3.json中"Target": "PartOpacity"的Curves未能正常加载

希望

如果可以的话，能让该模型正常显示

A bit of a stupid question. I need to pass the URL value from the button to the asynchronous main function to display this model. How to replace models in view mode?

warning

index.min.js:formatted:142 [MotionManager(jianye_2)] Failed to load motion: motions/idle.motion3.json
 TypeError: Cannot set property 'time' of undefined
    at q.parse (index.min.js:formatted:3383)
    at Function.create (index.min.js:formatted:3203)
    at $.createMotion (index.min.js:formatted:3474)
    at index.min.js:formatted:584

and I try Live2D Viewer Online (WIP),and it's work!

🤔

i don't know how to fix that ,I am not good at ts,so pls help 👏🏼

is it possible to display local .moc or .json files without using the server side?

首先，非常感谢作者提供的Live2D插件，极大的方便了Live2D模型的应用；
其次，个人在应用的过程出现了未能解决的问题，希望能得到大家的回复；
最后，也是希望这款插件越来越完善，被更大范围的应用起来。

➊待机动画不能正常循环
设置开启待机动画-Idel，每次播放完毕后画面都会瞬间倒放到第一帧画面，再开始下一次的播放，不是无缝衔接的循环播放
※数据文件xxx.motion3.json的Loop和xxx.model3.json的FileLoop设为true或false，实际运行中并不生效

➋控制器Controllers的API
如最后一张图➋红框的MouseTracking、AutoBreath，ExtraMotion怎么进行开关呢？
※ 已知AutoBreath的关闭方式model.internalModel.breath = null;

Really glad to see someone working on a Live2D Pixi plugin that might see updates in the near future. Having the character follow a cursor point seems to work well.

I am just getting into Live2D, but is there a way to control the avatar/animations even more precise? For example, if it was hooked up to some webcam facecapture, can the plugin tap into more specific controls like mouth/eye movements?

拉取项目后按照开放文档，进行了项目配置。
我使用执行build 构建的时候一切正常，成功构建了js文件。

但当我执行type指令的时候报错
cubism/src/effect/cubismpose.d.ts(19,30): error TS2503: Cannot find namespace 'CubismSpec'. cubism/src/live2dcubismframework.d.ts(74,18): error TS2503: Cannot find namespace 'Live2DCubismCore'. cubism/src/model/cubismmodel.d.ts(33,17): error TS2503: Cannot find namespace 'Live2DCubismCore'. cubism/src/model/cubismmodel.d.ts(322,24): error TS2503: Cannot find namespace 'Live2DCubismCore'. cubism/src/model/cubismmodeluserdata.d.ts(30,25): error TS2503: Cannot find namespace 'CubismSpec'. cubism/src/model/cubismmodeluserdata.d.ts(43,25): error TS2503: Cannot find namespace 'CubismSpec'.
几乎所有的命名空间都找不到。

我只是想尝试一下，生成一个声明文件。

Just curious if there were any plans to support the latest version of PixiJS or the newly released spec for Live2D.

问题表现

我的模型目前似乎所有的手部都会展示。官方的WebSDK也是如此。

说明

我尝试了 https://github.com/DenchiSoft/CubismViewerGems 这个unity项目，发现似乎可以调整部件的透明度来隐藏不需要的手部。

请问本项目可以实现吗？ 附上我使用的模型 ↓
object_live2d_002_101.asset.zip

Already set the motionFadingDuration and idleMotionFadingDuration to 0, but it doesn't work like the idle motion interval in Cubism Viewer, which is continuous and would not stop the previous idle animation before the next idle animation play.

I'm trying to use this library in chrome extension. The content script doesn't have html context (thus no <script> tag). We have successfully imported live2d.min.js and it worked for the cubism v2. But we couldn't import live2dcubismcore.min.js. Have tried to use

import * as Live2DCubismCore from 'live2dcubismcore.min.js';
window.Live2DCubismCore = Live2DCubismCore;

but got an error Failed to start up Cubism 4 framework.. Strangely, there's also no retry logs being printed.

Any thoughts how we can properly include this library? Thanks!

Is there a parameter I can use to tune up / down the physics strength? Vtube studio has a physics slider and it can make the character movement smooth like silk. Can we do something similar here too? Thanks!

SyntaxError: The requested module '../web_modules/pixi-live2d-display.js' does not provide an export named 'Live2DModel'

I'm getting around it right now by just importing the whole thing, but thought I'd bring it up.

import Live2D_Display from 'pixi-live2d-display';
const Live2DModel = Live2D_Display.Live2DModel

當我使用Live2DModel.from(xxx) 去生成多於六個live2d model時
就只有最後一個生成的model能夠正常動 其他的都會卡死
model動作做到一半也會停了下來 即使再用motion()等method 也無法動
另外只是在背景生成(一開始沒有加到Container) 在之後再加 也是無法動
但小於或等於六個就很正常

是有呼叫上限什麼的嗎? 還是只是性能問題而有所影響?

As the title says, if these two motions are not conflit with each other. Is it possible now or will be available in the future?

package.json

{
 "dependencies": {
    "pixi-live2d-display": "^0.3.1",
    "pixi.js": "^5.3.7",
    "vue": "^3.0.0",
    "worker-plugin": "^5.0.0"
  }
}

main.ts

import "@/assets/js/live2d.min.js";
// import "@/assets/js/live2dcubismcore.min.js";
import * as PIXI from "pixi.js";
window.PIXI = PIXI;
const Live2DCubismCoreFile = require("@/assets/js/live2dcubismcore.min.js");
window.Live2DCubismCore = Live2DCubismCoreFile();
const { Live2DModel } = require("pixi-live2d-display");
 const app = new (window as any).PIXI.Application({
        view: document.getElementById("live2d-canvas-xiaomai"),
        autoStart: true,
        transparent: true,
        resize: false,
      });

      const model = await Live2DModel.from(
        "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json"
      );

      app.stage.addChild(model);

      // 变换
      model.x = 0;
      model.y = 0;
      model.rotation = Math.PI;
      model.skew.x = Math.PI;
      model.scale.set(2, 2);
      model.anchor.set(0.5, 0.5);

      // 交互
      model.on("hit", (hitAreas: any) => {
        if (hitAreas.includes("body")) {
          model.motion("tap_body");
        }
      });

I got live2dcubismcore.min.js from cubism official website.
result :
index.js:7534 Uncaught (in promise) Error: Failed to start up Cubism 4 framework.
at startUpWithRetry (index.js:7534)

How can i fix it?
run https://github.com/guansss/live2d-viewer-web it has same problem

Hi Everyone!

I struggled to render Live2d models to different canvas elements using pixi.js.

Btw, I follow the guidelines for creating a container using (Live2dModel.from method) for adding a model container to Pixi stage (pixiApplication.stage.addChild() method)
Let's say, I have A dan B models, and want to put A model to the first canvas element, and B to the second canvas element.

The first rendering is fine, but when I did put the B model on the second canvas the A model (on the first canvas) was gone.

Could you give me a simple example to help my issue?

I've been using both beta.1 and beta.2 version atm and it seems you've removed support for DataUrls for uploading models?

File upload error TypeError: The `url` property must be specified in settings JSON

I was getting the browser crashing error when upload a mix of Cubism 2.0 and Cubism 4.0 models until I updated to the beta.2. But now, when uploading an object into Live2DModel.from() with dataurls instead of file paths, the plugin no longer accepts them. Is there a workaround for this?

Hi again. I've been having some performance issues in the Live2D face tracked web app I'm currently developing. I am currently updating the Live2D parameters as shown below how you've demoed in a pen in the past, but it seems that after a couple of minutes on my iphone/mac, the CPU will start spiking in temp, throttle the frame rate for a couple seconds, and then go back to normal, before eventually forcing a page refresh.

The page still runs fine with both the Live2D model and Tensorflow face tracking running concurrently but stutters when the values are being updated in the update functions.

Any clue on if this is a Live2D inherent issue? or if there's a better way to set these params? Or if inherent animations within Live2D models will cause conflicts with setParamFloat? The output from face capture is fairly noisy, and does update every animationFrame.

    //overwrite blink function
    model.internal.eyeBlink.update = () => {}
    
    //saves original update function
    const updateFn = model.internal.motionManager.update; 

    model.internal.motionManager.update = () => {
      // overwrite the parameter after calling original update function

      updateFn.call(model.internal.motionManager);
      
      model.internal.coreModel.setParamFloat("PARAM_ANGLE_X", $trackedStats.head.x); 
      model.internal.coreModel.setParamFloat("PARAM_ANGLE_Y", $trackedStats.head.y); 
      model.internal.coreModel.setParamFloat("PARAM_ANGLE_Z", $trackedStats.head.z);
      
      model.internal.coreModel.setParamFloat("PARAM_BODY_ANGLE_Z", $trackedStats.head.z*.3);
      model.internal.coreModel.setParamFloat("PARAM_BODY_ANGLE_X", $trackedStats.head.x*.3); 
      
      model.internal.coreModel.setParamFloat("PARAM_MOUTH_OPEN_Y", $trackedStats.mouth.y); 
      model.internal.coreModel.setParamFloat('PARAM_MOUTH_FORM', .2 + .8 * $trackedStats.mouth.x);
    
      model.internal.coreModel.setParamFloat("PARAM_EYE_L_OPEN", $trackedStats.eye.l);
      model.internal.coreModel.setParamFloat("PARAM_EYE_R_OPEN", $trackedStats.eye.r);
      model.internal.coreModel.setParamFloat("PARAM_EYE_BALL_X", $trackedStats.pupil.x); 
      model.internal.coreModel.setParamFloat("PARAM_EYE_BALL_Y", $trackedStats.pupil.y);
      // model.internal.coreModel.setParamFloat("PARAM_EYE_BALL_FORM", 0); //gangimari
            
      // model.internal.coreModel.setParamFloat("PARAM_BROW_L_Y", 0);
      // model.internal.coreModel.setParamFloat("PARAM_BROW_R_Y", 0);
      
      // model.internal.coreModel.setParamFloat("PARAM_CHEEK", 0); //blush
    };

i tried to replace 4 links cdn by this way

but i still got this error,what did i'm wrong here

can support pixi7.0？

Hello @guansss ,
First of all I wanted to thank you for your work. A lot of my small side projects wouldn't have been possible without this library.
I have an issue though with live 2d model version 3.
The getParamFloator setParamFloat on the coreModel don't exist.
The model I have used is available on this link: https://cdn.jsdelivr.net/gh/ElmouradiAmine/kuro-facerig/kuro_ver2.2.1.model3.json
The error stack:

script.js:126 Uncaught TypeError: coreModel.getParamFloat is not a function
    at Z.currentModel.internalModel.motionManager.update (script.js:126)
    at St.update (Cubism4InternalModel.ts:183)
    at f._render (Live2DModel.ts:384)
    at f.e.render (Container.js:503)
    at e.render (Container.js:508)
    at e.render (Renderer.js:367)
    at http://t.To.render (Application.js:97)
    at ze.emit (TickerListener.js:96)
    at Ve.update (Ticker.js:459)
    at Ve._tick (Ticker.js:167)

Thanks again for the work on implementing the Cubism 4.0 support. Super excited to try this new version. I know it's still labeled as beta so might not be quite ready yet, but I couldn't help myself trying the update. Been able to load both 2.0 and 4.0 models so far without a problem!

What is the recommended way to update individual params like in ver 0.2.2?
I've noted that the old method of saving the original update function and then calling each time on the update function no longer works on 0.3.0

  const updateFn = model.internal.motionManager.update;

  model.internal.motionManager.update = () => {
    updateFn.call(model.internal.motionManager);
    // overwrite the parameter after calling original update function
    model.internal.coreModel.setParamFloat("PARAM_ANGLE_X", mouthValue * 30);
    model.internal.coreModel.setParamFloat("PARAM_ANGLE_Y", mouthValue * 30);
    model.internal.coreModel.setParamFloat("PARAM_ANGLE_Z", mouthValue * 30);

and that internal has now been renamed internalModel?

Thanks for sharing a very useful project!

I have a project here that uses face motion capture to drive a live2d model, which uses the pixi-live2d-display library and AI model calculation, but later found that most of the cpu, GPU, and memory consumption are For pixi to create application objects and add live2d models to the stage, about 25% of the GPU is used, but the AI ​​face feature calculation consumes only 14% of the GPU.

So the question is, is there some way to significantly reduce GPU resource consumption both in terms of creating application objects in pixi and adding live2d models to the stage?

Looking forward to your reply

大佬您好，我在live2d viewer当中play motion时会保留现有的表情（expression），但是本库在唤起model.motion的时候会把表情覆盖为默认然后再播放 motion

package.json

問題

根據document的做法

// if only Cubism 4
import { Live2DModel } from 'pixi-live2d-display/cubism4';

卻無法import模組

对于Live2DViewerEX这款软件，它能够通过读取配置文件*.motion3.json中的HitAreas，实现hitArea与motion的绑定，也能设定与hitArea绑定的motion优先级，以解决hitArea的重叠问题。
例如：

{
...
"HitAreas": [
    {
      "Name": "TouchHead",
      "Id": "TouchHead",
      "Order": 1,
      "Motion": "TapTouchHead"
    },
    {
      "Name": "TouchBody",
      "Id": "TouchBody",
      "Order": 1,
      "Motion": "TapTouchBody"
    },
    {
      "Name": "TouchSpecial",
      "Id": "TouchSpecial",
      "Order": 2,
      "Motion": "TapTouchSpecial"
    },
    {
      "Name": "shu",
      "Id": "shu",
      "Motion": "Tapshu"
    },
    {
      "Name": "paozuo",
      "Id": "paozuo",
      "Order": 1,
      "Motion": "Settings"
    }
...
}

其中Order给定了动作的优先级；Motion绑定了名为Name的hitArea。

然而，翻阅您的文档后，我并未在您的项目中找到类似的接口。在您给的范例中，也是在检测到指定hitArea之后，再指定需要执行的动作，这样是否有点太麻烦了？
不知是否是我看漏了？不知您能否加入与Live2DViewerEx类似的功能？

看了以下您的源码，然而我不熟悉前端。是否可以在以下模块中添加中添加order和motion字段，以实现相应功能？
InternalModel.ts
Cubism2InternalModel.ts
Cubism4InternalModel.ts
Cubism2Spec.d.ts
CubismSpec.d.ts
....

Just want to discuss with you to see if this pixi live2d library supports hand tracking if (1) the uploaded live2d model has hand and/or arm model and (2) real time hand tracking is available (through leap motion js library, or mediapipe). Thanks!

如题，我在代码中看到「TODO: Add lip sync API」，貌似现在并不支持口型同步，而官方SDK的demo里是有这个能力的。
想请教一下这个能力是会补上嘛~

import { HitAreaFrames } from "pixi-live2d-display/extra";
but it`s error,not found, I am very sad...

Was wondering if it's possible to load a Live2D model from a dynamically created js object?
What I'm trying to do is allow a user to upload their own Live2D model. The plan would be to rewrite the model.json file with links that lead to url:blobs of the other uploaded files.

Using the fromModelSettingsJSON method doesn't seem to work.

minimal example

我创建了一个新的vue-cli（vue2）项目。
我按照文档使用import 引入pixi.js时

import * as PIXI from "pixi.js";

在浏览器中运行时报错

Uncaught TypeError: Cannot read properties of undefined (reading '1')
    at InteractionManager.processPointerOverOut (interaction.js?7418:1602:1)
    at InteractionManager.processPointerMove (interaction.js?7418:1552:1)
    at TreeSearch.recursiveFindHit (interaction.js?7418:419:1)
    at TreeSearch.recursiveFindHit (interaction.js?7418:377:1)
    at TreeSearch.findHit (interaction.js?7418:440:1)
    at InteractionManager.processInteractive (interaction.js?7418:1286:1)
    at InteractionManager.onPointerMove (interaction.js?7418:1529:1)

当我使用require引入pixi.js时一切正常

const PIXI = require('pixi.js')

I'm using a Cubism 3.3 model which seems to work fine on the Cubism Viewer when I play the motions. However, after loading it via cdn and play the motions, the layers seem to be drawn in an incorrect order (arms go behind the body when it's not supposed to be like that)

index.html

<body>
    <canvas id=canvas></canvas>
    
    <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/cubism4.min.js"></script>
    
    <script src="index.js"></script>
</body>

index.js

const meguModel =
    "https://cdn.jsdelivr.net/gh/MariolinXD/a@main/models/Megumin%20(No%20Hat%20or%20Cape)/Megumin%20(No%20Hat%20or%20Cape).model3.json";

(async function main() {
    const app = new PIXI.Application({
        view: document.getElementById("canvas"),
        autoStart: true,
        resizeTo: window,
        backgroundColor: 0x333333
    });

    model = await PIXI.live2d.Live2DModel.from(meguModel);

    app.stage.addChild(model);

    model.scale.set(0.25);    

    model.on("click", function(){
        model.motion("Excite");
    })
})();

At this point I don't know if the problem is the model itself, so if you need it to make your own tests I can provide it as well.

Model behaviour on Cubism Viewer:

Model behaviour on HTML:

如题，如果不支持的话，未来有计划补充这个功能吗？

PS：现在用户对于交互的丰富性要求越来高，感觉这类多个动画同时播放的功能会越来越必要，非常希望作者可以优化或者补充这方面的功能

DEMO如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas"></canvas>

    <script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pixi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>

    <script>
        const cubism2Model =
            "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
        const cubism4Model =
            "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";

        (async function main() {
            const app = new PIXI.Application({
                view: document.getElementById("canvas"),
                autoStart: true,
                resizeTo: window
            });

            const model2 = await PIXI.live2d.Live2DModel.from(cubism2Model);
            const model4 = await PIXI.live2d.Live2DModel.from(cubism4Model);

            app.stage.addChild(model2);
            app.stage.addChild(model4);

            model2.scale.set(0.3);
            model4.scale.set(0.25);

            model4.x = 300;
        })();
    </script>
</body>

</html>

在基于 WebkitGtk 的浏览器或者 WebView 中打开时，只会出现以下画面：

此时网络资源都是加载完毕了的，但是没有显示

当尝试改变浏览器窗口大小时（例如最大化/还原、全屏等），控制台会报错：

[Error] WebGL: context lost.

但此时又会正常显示了：

文档中加载模型的示例代码中

此处的 loadJSON 方法属于哪个模块？

大佬您好，
您在Interaction demo中使用了HitAreaFrames。
然而我通过npm安装，却找不到HitAreaFrames如何导入？请问我应该怎么做？

问题表现

同一份expression文件，Cubism Viewer中显示正常（右），使用本仓库展示时瞳孔缩放出现问题（左）

复现代码

model.expression('F06')

问题模型

object_live2d_002_101.asset.zip

问题Expression

/expressions/LIVE2D_002_101_06.exp3.json

I've been starting to build out more features with pixi-live2D-display, though I'm finding some weird bugs when using PIXI.graphics. It appears that some models, like the one you've provided [Shizuku] is overwriting the render of PIXI.graphics. If I switch it to some other models I have in the linked Pen, graphics render normally. Could this be a conflict with the expression or motion managers?

Hi, I love your live2D integrations with pixijs! and I would love using it for my game dev!

the problem is that I use rpg maker MZ and they don't use an import / export syntax (which is a shame)
I was wondering if there's way to include your library without the usage of imports?

Aka can I load it directly to the DOM with the usage of LoadScript? (the old way)
this is how Rpg maker MZ load libraries.

thank you and have a nice day!

使用cnd的js文件加载模型一切正常

<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>

我使用clone的项目自己打包出来的/dist/index.min.js加载出来的模型有东西缺少了

模型地址

https://cdn.jsdelivr.net/gh/journey-ad/blog-img/live2d/Ava/Ava.model3.json

我仔细观察过，在模型第一次加载的时候是正常展示，但是在后续渲染的时候模型的部件就缺少了。

playground脚本中也会遇到相同的情况。
最新版本master分支，与最后一个正式版本0.3.1，我都尝试过，都会出现模型组件缺少的问题。
cdn上的版本难道不是0.3.1打包后的文件吗？

Is it possible to use coreModel.setParameterValueById to control the tongue out motion?

你好，请问要怎样将 canva 的背景设置为透明

model2可以通过model.json中的layout属性来设置初始位置和大小。
model3如何设置呢？

Hello

First, thanks for this framework, it works well. :)

I need a way to get the current coordinates (x, y) of a given part (or hit area) to add some custom PIXI particle effects at this position.
Is there a way to do that? I have been digging a bit the doc and the internal props of the model but I had no luck so far.

Thanks,