JonathanHo16

generateTexture interaction with pixi3d

Recommended Posts

Hi I am trying to create a magnifying glass effect by leveraging the generate texture method of the renderer. I am generating a texture based on on the position of the mouse using the frame parameter. When combining with the pixi3d library the rotating cube it always stuck in the middle of the magnifying glass. The rest if the effect works as intended when there is no pixi3d elements on screen. The cube is a child of the overall scene and the lens effect is added outside of the main scene on a layer in front (using z index). 

updateSpriteTexture() {
    let reigon = new PIXI.Rectangle((this.getGlobalPosition(new PIXI.Point(this.x, this.y)).x -100), (this.getGlobalPosition(new PIXI.Point(this.x, this.y)).y -100), 200, 200);
    this.texture = this.app.renderer.generateTexture(this.targetScene, PIXI.SCALE_MODES.LINEAR, 2, reigon);
   
  }

 

The above the method  is the method that sets the sprite texture of the magnifying glass effect. `this.targetScene` is the container that contains the checkered background, the button and the rotating cube. Is there a step that I am missing? 

 image.thumb.png.5a5ff8af3d35e484f5feb3b377b9327a.png

Share this post


Link to post
Share on other sites

pixi3d overrides projectionMatrix

generateTexture is hacky function that had so many bugs related to transforms .. even latest version of pixi v6-rc has different behaviour from release v5. We are patching it again right now.

I'm sorry, but to make it work you have to be aware of how both things work in deep level. You can also put it in pixijs issues / discussions with actual $$$ bounty, otherwise you probably will wait loooong time

Share this post


Link to post
Share on other sites
On 1/19/2021 at 4:55 PM, JonathanHo16 said:

Hi I am trying to create a magnifying glass effect by leveraging the generate texture method of the renderer. I am generating a texture based on on the position of the mouse using the frame parameter. When combining with the pixi3d library the rotating cube it always stuck in the middle of the magnifying glass. The rest if the effect works as intended when there is no pixi3d elements on screen. The cube is a child of the overall scene and the lens effect is added outside of the main scene on a layer in front (using z index). 


updateSpriteTexture() {
    let reigon = new PIXI.Rectangle((this.getGlobalPosition(new PIXI.Point(this.x, this.y)).x -100), (this.getGlobalPosition(new PIXI.Point(this.x, this.y)).y -100), 200, 200);
    this.texture = this.app.renderer.generateTexture(this.targetScene, PIXI.SCALE_MODES.LINEAR, 2, reigon);
   
  }

 

The above the method  is the method that sets the sprite texture of the magnifying glass effect. `this.targetScene` is the container that contains the checkered background, the button and the rotating cube. Is there a step that I am missing? 

 

Are you mean something like this ? track plan 2d over 3d ? 
i have some demo like this one, but dont play with playground settings, they remove v4 setting, dont know why !? 
if this can help ?
https://www.pixiplayground.com/#/edit/DCn0GFmVgb7yTIHm8HiYz

Edited by jonforum

Share this post


Link to post
Share on other sites

You can try render the 3d scene to a render texture, and then use that texture and render as a regular Pixi sprite.

let renderTexture = PIXI.RenderTexture.create({ width: 512, height: 512 })

let pipeline = PIXI3D.StandardPipeline.from(renderer) // The PIXI renderer
pipeline.materialRenderPass.renderTexture = renderTexture

let sprite = new PIXI.Sprite(renderTexture)

 

Share this post


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.