question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Breaking changes from PIXI.mesh.Plane to PIXI.SimplePlane

See original GitHub issue

Dear Pixi friends,

It looks like something has changed when moving from PIXI4 class PIXI.mesh.Plane to PIXI5 class PIXI.SimplePlane that makes it unable to distort some kind of textures. I used this Pen from Blake Bowen https://codepen.io/osublake/pen/8785174690eabaf5ba99f785b9d3b64e and I changed it just enough so it works on PIXI5. And I got it working. The changes are:

- - - Change 1:

Original Code (Pixi 4): var grid = new Grid(rows, cols, width, height, beach.vertices);

Changed Code (Pixi 5):

  const buffer = beach.geometry.getBuffer('aVertexPosition');
  var grid = new Grid(rows, cols, width, height, buffer.data);

- - - Change 2:

Original Code (Pixi 4):

  var tl = new TimelineMax({ 
    repeat: -1,
    onUpdate: grid.update, 
    callbackScope: grid
  });

Changed Code (Pixi 5):

  var tl = new TimelineMax({ 
    repeat: -1,
    onUpdate: ()=>{buffer.update();grid.update();}, 
    callbackScope: grid
  });

And that was enough to get it working: https://codepen.io/is2548-the-selector/pen/JjbWjaG

But, I discovered something strange that prevents the example from working. If you change the texture for PIXI.Texture.WHITE, it works on PIXI4, but stops working on PIXI5:

PIXI4(working): https://codepen.io/is2548-the-selector/pen/eYBvYbq PIXI5(not working): https://codepen.io/is2548-the-selector/pen/JjbWojb

And this does not happen only with this texture. I found out another texture that SimplePlane can’t warp, like this texture:

const video = document.createElement("video");
video.src = "path/to/video.mp4"
document.body.appendChild(video);
const texture = Texture.from(video);

(although this texture works for distorting a video using PIXI.projection.Sprite2s using proj.mapBilinearSprite)

Any clues about how to fix this? Is it a Pixi bug or an error on my side 😃 ?

Thank you! Alexandre Rangel https://www.alexandrerangel.art.br

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:16 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
bigtimebuddycommented, Feb 18, 2021

Adding this line it works:

beach.textureUpdated();

Example: https://jsfiddle.net/bigtimebuddy/9ngx82Ld/

I think the issue is this check:

https://github.com/pixijs/pixi.js/blob/2a47593194043fa86a601cb4282105fa6c3472cc/packages/mesh-extras/src/SimplePlane.ts#L61-L68

Since, MeshMaterial is already using a default texture of PIXI.Texture.WHITE, the texture is not updated. I believe this is a bug (tho, not a critical one). Thanks for finding this one @AlexandreRangel

0reactions
stale[bot]commented, Jun 16, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Breaking changes from PIXI.mesh.Plane to PIXI.SimplePlane
Dear Pixi friends, It looks like something has changed when moving from PIXI4 class PIXI.mesh.Plane to PIXI5 class PIXI.SimplePlane that ...
Read more >
PIXI.SimplePlane - PixiJS API Documentation
Method used for overrides, to do something in case texture frame was changed. Meshes based on plane can override it and change more...
Read more >
PIXI.SimplePlane
Method used for overrides, to do something in case texture frame was changed. Meshes based on plane can override it and change more...
Read more >
mesh Plane and Rope in new Versions - Pixi.js
Hi, I was trying to use Pixi.mesh. ... Plane and Rope and such constructors are not available in new versions ... are there...
Read more >
v5 Migration Guide - zlq4863947/pixi.js-cn GitHub Wiki
If you used custom shaders or generated meshes in v4, you might be impacted by these changes in v5. PIXI.SimpleMesh fields vertices ,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found