How to extract the pixels a sprite renders in the stage area, or create a new texture

[Jiiiin]

Detail

I want to implement transitions in the video editor based on gl-transition and pixi js. Usually sprites have transforms and filters.
My solution is based on shader and mesh, create a new sprite, set the two sprite visible in the transition to false, and obtain a picture that is rendered separately on the stage (the same size as the stage, with the stage as the boundary, and the blank area is transparent black), passed to gl-transition as a texture

Solutions I've tried

1.app.renderer.extract.image api, but I found that it seems that the sprite cannot work correctly after it is hidden?
2. Redraw the video using a canvas of the same size as the stage. Adding transform in the process can work normally, but if it is based on adding filters or sprite animation, the cost is a bit high. I am not sure what the correct solution is.
My English is not good. I am not sure whether I expressed my question correctly. Thank you for your help. I can expand on it if it is not clear.

[gabrielliwerant]

Hi, not sure if it answers your exact question, but if you want to take a "snapshot" of the screen rendering and use that as a new texture for a new sprite, you can use the RenderTexture class to accomplish this.

Ex:

  const myRenderTexture = PIXI.RenderTexture.create({
    width : myWidth,
    height: myHeight,
    scaleMode: myScaleMode,
    resolution: myResolution
  });
  
  // Add the stuff to a displayObject that you want rendered as a texture

  app.renderer.render(myDisplayObject, { renderTexture: myRenderTexture });
  
  const spriteMadeWithNewTexture = PIXI.Sprite.from(myRenderTexture);

The above code is untested, so it may need some adjustment. It took me a little while to wrap my head around RenderTexture. I think of it like a container that, instead of holding display objects, flattens everything thrown in it to a bitmap and returns the result for use as a texture. The trick is that you have to "render" it in order for the flattening to take place, and you have to put your display objects into it. as part of the render process. This will "snapshot" it. You can do this offscreen if you want by simply not adding your display objects to the stage.