在 WebkitGtk 引擎中无法直接显示，导致

Tim-Paik commented 1 year ago

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

webgl error

但此时又会正常显示了：

Tim-Paik commented 1 year ago

测试环境：Archlinux Latest + GNOME 43 + 自带浏览器 webkit2gtk 包版本 2.38.2-1, /usr/lib/libwebkit2gtk-4.0.so.37 tauri v1.2

guansss commented 1 year ago

测试了一下，看起来是引用了 WebGL2 的 API 所以报错了，配置一下 Pixi 即可解决：

PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL_LEGACY;

guansss / pixi-live2d-display

在 WebkitGtk 引擎中无法直接显示，导致 #86