Layers not drawing in the correct order

flanpowered commented 3 years ago

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/pixi.js@5.3.6/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:

https://user-images.githubusercontent.com/25534800/131248375-036bda59-147c-4fb9-9456-0a45eb1a096f.mp4

Model behaviour on HTML:

https://user-images.githubusercontent.com/25534800/131248577-a52455d1-6288-4c8d-aaaa-bee9d455fae8.mp4

guansss commented 3 years ago

I think the problem belongs to Cubism framework, because the same thing happens when I put this model into the official CubismWebSamples:

Screenshot 2021-09-01 143424

I've actually run into this issue while testing various models in the past, apparently some particular models got their layers processed incorrectly. This seems to be a long-standing bug of Cubism's web framework.

So I'm afraid I can't help you on this.

flanpowered commented 3 years ago

It's okay! Thanks for your answer. I will keep trying to find a solution to this and see if I can adjust the model somehow to make it work.

guansss / pixi-live2d-display

Layers not drawing in the correct order #34