JonathanHo16 Posted January 19, 2021 Share Posted January 19, 2021 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted January 20, 2021 Share Posted January 20, 2021 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 Quote Link to comment Share on other sites More sharing options...
jonforum Posted January 21, 2021 Share Posted January 21, 2021 (edited) 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 January 21, 2021 by jonforum Quote Link to comment Share on other sites More sharing options...
jnsmalm Posted February 7, 2021 Share Posted February 7, 2021 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) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.