Live2D fix & improve assets loading progress & improve story reader speed

package.json

@@ -43,7 +43,7 @@
     "mui-image": "^1.0.7",
     "notistack": "^2.0.8",
     "p-queue": "^8.1.0",
-    "pixi-live2d-display-mulmotion": "0.5.0-mm-5",
+    "pixi-live2d-display-mulmotion": "0.5.0-mm-6",
     "pixi.js": "^7.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/pixi/Live2dModel.tsx

@@ -1,5 +1,9 @@
 import { PixiComponent } from "@pixi/react";
-import { InternalModel, Live2DModel } from "pixi-live2d-display-mulmotion";
+import {
+  Cubism4InternalModel,
+  InternalModel,
+  Live2DModel,
+} from "pixi-live2d-display-mulmotion";
 import {
   BatchRenderer,
   extensions,
@@ -51,6 +55,10 @@ const Live2dModel = forwardRef<
         autoHitTest: false,
         ticker: Ticker.shared,
       });
+      const internalModel = _model.internalModel;
+      if (internalModel instanceof Cubism4InternalModel) {
+        internalModel.coreModel.setOverwriteFlagForModelCullings(true);
+      }
       setModel(_model);
       if (props.onReady) {
         setTimeout(() => props.onReady!());

src/pages/live2d/Live2D.tsx

@@ -334,7 +334,7 @@ const Live2DView: React.FC<unknown> = () => {
         region,
         resolution: 4,
       });
-      app.renderer.plugins.extract
+      app.renderer.extract
         .image(imageThis, "image/png", 1.0)
         .then((image: HTMLImageElement) => {
           saveAs(

src/pages/storyreader-live2d/StoryReaderLive2DCanvas.tsx

@@ -9,6 +9,7 @@ import { LoadStatus } from "../../utils/Live2DPlayer/types.d";
 import type {
   ILive2DControllerData,
   ILive2DPlayerSettings,
+  ILive2DLoadProgressHandler,
 } from "../../utils/Live2DPlayer/types.d";
 
 import { useAlertSnackbar } from "../../utils";
@@ -39,6 +40,7 @@ const StoryReaderLive2DCanvas: React.FC<{
   const [autoplayWaiting, setAutoplayWaiting] = useState(false);
   const [canClick, setCanClick] = useState(true);
   const [loadStatus, setLoadStatus] = useState<LoadStatus>(LoadStatus.Ready);
+  const [renderProgress, setRenderProgress] = useState<string>("");
 
   /**
    * next step process:
@@ -216,6 +218,15 @@ const StoryReaderLive2DCanvas: React.FC<{
     }
   };
 
+  const handleRenderProgress: ILive2DLoadProgressHandler = (
+    type,
+    count,
+    total,
+    info
+  ) => {
+    setRenderProgress(`${count}/${total} (${info})`);
+  };
+
   return (
     <Stack
       direction="column"
@@ -238,7 +249,7 @@ const StoryReaderLive2DCanvas: React.FC<{
       )}
       {loadStatus === LoadStatus.Loading && (
         <Typography>
-          {t("story_reader_live2d:progress.load_model_to_canvas")}
+          {`${t("story_reader_live2d:progress.load_model_to_canvas")} ${renderProgress}`}
         </Typography>
       )}
       <div ref={wrap} style={{ position: "relative" }}>
@@ -258,6 +269,7 @@ const StoryReaderLive2DCanvas: React.FC<{
               stageSize={stageSize}
               controllerData={controllerData}
               onModelLoad={handleModelLoad}
+              onRenderProgress={handleRenderProgress}
             />
           )}
         </Stage>