Jump to content

Trying to distort a video textured plane

Alexandre Rangel

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:

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):
PIXI5 (not working):

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"
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 comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...