Loss of FPS using mask

[WyllisMonteiro]

I'm working on an application which allows to make image processing, so I used Javascript and PixiJS library to make it possible. I wanted to update cursor image when canvas was hovered

first solution I tried to use cursor: url(cursor1.png) 4 12, auto; but I can't resize cursor. The default size is 64px and I can't set another value.

second solution I decided to add into DOM <img src=""> and update x,y position using Javascript but I got latency.

third solution was to integrate cursor inside my canvas.

last solution I tried to split actions into 2 canvas. The first deals with image processing and the second is my cursor.

With all propositions made before I got loss of FPS when canvas is hovered excepted the first one.

Init canvas for cursor update when mouse hover it

function _initMainCanvas(imgData) {
  let newCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  let blurContainer = new PIXI.Container();

  filters.initFilters();

  // ----------------------------------------------------------------------------------------
  //      Normal Sprite
  // ----------------------------------------------------------------------------------------

  let bg = main.createSprite({
    from: imgData.img,
    interactive: true,
    filters: [filters.getFilterSharpen(), filters.getFilterAdjustment()],
    width: imgData.width,
    height: imgData.height
  });
  newCanvas.stage.addChild(bg);

  //$(".blur_cursor").remove();

  // ----------------------------------------------------------------------------------------
  //      Blur Sprite
  // ----------------------------------------------------------------------------------------

  let bgBlured = main.createSprite({
    from: imgData.img,
    interactive: false,
    filters: filters.getFilters(),
    width: imgData.width,
    height: imgData.height
  });
  blurContainer.addChild(bgBlured);
  blurContainer.mask = containers.getBlurs();

  newCanvas.stage.addChild(blurContainer);
  newCanvas.stage.addChild(blurContainer);

  select.initSelectionRect();
  newCanvas.stage.addChild(select.getSelectionRect());

  canvas.addMainCanvas(newCanvas);
  document.getElementById("container").appendChild(newCanvas.view);
}

Init canvas for cursor update when mouse hover it

function _initCursorCanvas(imgData) {
  let cursorCanvas = new PIXI.Application({
    width: imgData.width,
    height: imgData.height,
    transparent: true
  });

  _fillCursorCanvas(cursorCanvas);

  canvas.addCursorCanvas(cursorCanvas);

  document.getElementById("container").appendChild(cursorCanvas.view);
}

function _fillCursorCanvas(cursorCanvas) {
  // emptySprite allows to bind events
  let emptySprite = new PIXI.Sprite();
  emptySprite.interactive = true;
  emptySprite.width = cursorCanvas.screen.width;
  emptySprite.height = cursorCanvas.screen.height;
  cursorCanvas.stage.addChild(emptySprite);

  emptySprite
    .on("pointerdown", canvasEvents.handlerMousedown)
    .on("pointerup", canvasEvents.handlerMouseup)
    .on("pointermove", canvasEvents.handlerMousemove)
    .on("pointerout", canvasEvents.handlerMouseout);

  const scale = W / canvas.getWidth();
  const cursorTexture = new PIXI.Texture.from(
    urlManager.replace("index.php/", "") + "assets/images/cursor_img/50.png"
  );

  let circle = new PIXI.Sprite(cursorTexture);
  circle.width = 50 / scale;
  circle.height = 50 / scale;

  cursorCanvas.stage.addChild(circle);
}

Mousemove event

const x = e.data.global.x;
const y = e.data.global.y;

cursor.updatePosition(x, y, W);

Sorry I can't show you an example like codesandbox because my browser but my browser was not responding. However I can send you github repo if you want. Will anyone know how to optimize FPS on mouse flying, thank you in advance !

[ivan.popelyshev]

Why do you even need second canvas? Add cursor in first one

[WyllisMonteiro]

Thank you for you reply, It was my third solution. So I decided to split to 2 canvas but nothing is better than the other solutions @ivan.popelyshev

When I remove mask operation my canvas is fluid but I need to use mask.

[ivan.popelyshev]

getBlurs() returns sprite or graphics?

Sprite mask is a filter. One fullscreen filter should work fine. If its not, your computer is basically not webgl-capable.

I think that if mask slows everything down - you have a problem with computer. If its apple MBP < 2017, it has slow videocard for those 4k pixels, the only way to fix that is to reduce the resolution of canvas. If its not apple, check update graphics driver.

If you work with image processing, well, you can add a flag whether something on stage or just base container (under mask) was changed , and if it was - re-render it. Read https://github.com/pixijs/pixijs/wiki/v5-Custom-Application-GameLoop if you want to know how to do that. For just container - use renderTexture same size as screen.

Edited May 31, 2021 by ivan.popelyshev

[WyllisMonteiro]

Thank you for details, getBlurs returns graphics.

I will show your link It can be help me to avoid latency. I have a Asus VivoBook-15-ASUS-Laptop-X507UAR with an i5 8th gen, 8Go RAM, and Mesa Intel® UHD Graphics 620 (KBL GT2).

I used this example to build my app. I wanted to add a custom cursor when mouseover. Canvas is set to 3000 * 1500px, is it too wide ? Example provided to the documentation is it compatible with my need ?

[WyllisMonteiro]

Sorry I missed to put the link of the example : https://pixijs.io/examples/#/masks/filter.js

[ivan.popelyshev]

> Thank you for details, getBlurs returns graphics.

That's a stencil mask, its different. Should be faster than sprite mask (filter) but browser vendors sometimes make it wrong.

If filter example works for you at 3000x1500, you can try switch to sprite mask. Basically, you need to render your graphics into renderTexture of size of screen, and use sprite with this texture as a mask.

[WyllisMonteiro]

I will try your previous link but can I have more details about stencil mask and sprite mask because I don't find difference between both. Can you give me links.
I will come back to you once the test is done. Thank's a lot.