fix: thorvg canvas resize problem.

[hermet]

The canvas syncs before changing a target buffer.

thorvg/thorvg#2580

[changeset-bot]

⚠️ No Changeset found

Latest commit: b60f668

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[theashraf]

@hermet the resize issue is not fixed yet. please check this recording for thorvg 0.14.x. calling resize causes a rendering issue:

Screen.Recording.2024-07-21.at.6.54.32.PM.mov

but thorvg 0.13.x still renders properly after calling resize:

Screen.Recording.2024-07-21.at.6.59.57.PM.mov

[hermet]

@theashraf Hi, It looks like the target size is not correctly set in width/height. May I ask you to check the return value Tvg_Result of both tvg_swcanvas_set_target() and tvg_canvas_sync() in the problematic resize()?

[theashraf]

@hermet only tvg_canvas_sync returns TVG_RESULT_INSUFFICIENT_CONDITION (2), while tvg_swcanvas_set_target returns TVG_RESULT_SUCCESS (0).

[hermet]

@theashraf Hmm. tvg_swcanvas_set_target() seems working then.

Upon examining the video, it appears that the actual buffer size is larger than the width and height specified by ThorVG. If the reverse were true, it would cause crashes rather than displaying a broken image. It's possible that dotLottie is passing the wrong width and height, which differs from the actual target buffer. Is this a possibility?

One more question: It also resized smaller properly when the panel size is narrowed. How's different when the resize button is clicked?

[hermet]

@theashraf Just in case, could you please double-check that the buffer, width, and height values are properly updated when resize() is called? It's suspicious that it still holds the previous larger buffer and uses it in the web canvas.

[samuelOsborne]

@theashraf I've updated to the most recent release of thorvg( v0.14.5) in this PR:

#216

As well as added @hermet's changes and can't reproduce the bug, could you please check on your end ? You can find the artifacts for that branch already built here:

https://github.com/LottieFiles/dotlottie-rs/actions/runs/10332417019

[hermet]

@samuelOsborne @theashraf fixed?

[theashraf]

@samuelOsborne @theashraf fixed?

@hermet Yes, fixed with your changes + upgrading ThorVG to v0.14.5

[theashraf]

@hermet The issue with dotlottie-rs still persists, even after applying the suggested fix.

I've verified that the frame buffer is being resized correctly and matches the canvas width and height. Below is the relevant code on web. The resize function appears to be working as expected, and the frame buffer size is updated accordingly based on the new canvas dimensions.

function resize() {
  const { width: clientWidth, height: clientHeight } = canvas.getBoundingClientRect();

  const width = Math.floor(clientWidth * (window.devicePixelRatio || 1));
  const height = Math.floor(clientHeight * (window.devicePixelRatio || 1));

  canvas.width = width;
  canvas.height = height;

  dotLottiePlayer.resize(width, height);
}

function render() {
  const rendered = dotLottiePlayer.render();
  if (rendered) {
    const actualFrameBuffer = dotLottiePlayer.buffer();
    const expectedFrameBufferSize = canvas.width * canvas.height * 4;

    if (actualFrameBuffer.length !== expectedFrameBufferSize) {
      // never fails 🤔 
      throw new Error("Frame buffer size mismatch");
    }

    const imageData = ctx.createImageData(canvas.width, canvas.height);
    imageData.data.set(actualFrameBuffer);
    ctx.putImageData(imageData, 0, 0);
  }
}

Despite the frame buffer resizing as expected, the problem persists. Could you provide any further insights into what might be causing this ?

[hermet]

I think it needs a user-side update, as thorvg.viewer has no regressions so far. Could you please review the dotlottie? @tinyjin

2024-08-23-14-14-10.mp4

[tinyjin]

@theashraf Hello, I'm on checking this issue. Have just installed dotlottie-web and run web-example. Although I trigger resize, the issue doesn't appear.

How can I reproduce same situation you're encountering?

CleanShot.2024-08-27.at.17.23.58.mp4

[samuelOsborne]

@tinyjin Please try resize the canvas by modifying its width / height in the inspector, then clicking resize