Loading a model from object

[yeemachine]

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

[guansss]

The second argument of this function should be a string that indicates the path of this Live2D model, so that the app will know where to find the files.

// url is just the variable in that example
PIXI.live2d.Live2DModel.fromModelSettingsJSON(json, url, { autoInteract: false }).then(model => {
//...
})

This path will be used as a base path to resolve the files listed in model settings json, which means you'll probably need to override this behavior (ModelSettings#resolvePath) if you want to load the blob files.

[yeemachine]

I'll have to try that out once I get the multi file blob urls setup. But would overriding the behavior be as simple as passing an empty string? Or would I need to modify the source of pixi-live2d-display?

// set path to an empty value assuming all links in json obj are blob urls. PIXI.live2d.Live2DModel.fromModelSettingsJSON(json, '', { autoInteract: false }).then(model => { //... })

[guansss]

Well I think I missed it, passing an empty string should work too.

[yeemachine]

Hmm, it seems that url.resolve() is taking my blob:https:// urls and removing the second colon and breaking the url which results in this error:

Not allowed to load local resource: blob:https//live2d-facerig.glitch.me/27917eba-5263-4d66-a6dd-c17b06094cbe

I've also tried setting the url param to be blob:https://live2d-facerig.glitch.me/ without much success, still trims off that colon.

Here's the pen with folder upload.

[guansss]

I see, probably it doesn't recognize this kind of protocol. So overriding the behavior would still be a good way:

const resolvePathFn = PIXI.live2d.ModelSettings.prototype.resolvePath;

PIXI.live2d.ModelSettings.prototype.resolvePath = function(path) {
  if(this.path) {
    return resolvePathFn.call(this, path);
  } else {
    return path;
  }
};

Pretty much the previous trick. I'm thinking of emitting some events while loading (beforeLoad, onLoad, etc.) in the future so we won't have to use workarounds ugly like this...

[yeemachine]

Thanks! with a combination of that workaround, and then using base64 images instead of blob urls for the PIXI Loader. It seems to be working now. One thing I did notice is that the Expression Manager gets cranky with the blob urls I'm feeding it. Seems to not recognize that format. If you upload a file with multiple expressions/arm layers like the Shizuku demo asset, it's a nightmare. I wonder if there's another way to feed it files what I imagine are .mtn files.

[ExpressionManager(shizuku)] Unexpected format of expression file "blob:https://cdpn.io/d2f2d824-f69e-466c-a014-90aa2a9073a2"

**edit. I guess just converting everything to base64 works.

[guansss]

Apparently the demo works well now.

[yeemachine]

Yup. works now feeding it data urls