Jump to content

Trying to distort a video textured plane


Recommended Posts

Dear Pixi friends,

I'm trying to distort a plane with a video texture on it, and I'm having the following trouble.
( Maybe breaking changes from PIXI.mesh.Plane to PIXI.SimplePlane ? )
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 (https://codepen.io/osublake/pen/8785174690eabaf5ba99f785b9d3b64e) and I've 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?
Thank you!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...