How to apply pixi.js animation to the texture of babylon.js

I have a simple pixi.js animation:

var pixiRenderer = new PIXI.WebGLRenderer({context:engine._gl, view:engine.getRenderingCanvas()});
const stage = new PIXI.Container();
const texture = PIXI.Texture.from('');
const man = new PIXI.Sprite(texture);
PIXI.ticker.shared.add(delta => {stage.rotation -= 0.01 * delta;});

And I’m trying to insert this animation in HtmlElementTexture on babylon.js :slight_smile:

var plane = BABYLON.MeshBuilder.CreatePlane("plane", {size: 10});
var material = new BABYLON.StandardMaterial("material", scene);
material.diffuseTexture = new BABYLON.HtmlElementTexture("texture", pixiRenderer.extract.canvas(), {scene:scene, engine:scene.getEngine()});
plane.position = new BABYLON.Vector3(0, 0, 0);
plane.material = material;

But I see the animation on pixi.js separately from the babylon.js plane. How to apply pixi.js animation to the texture of babylon.js ?

All example:

pixi.js is 2D so it is placed as such but you could have pixi render offscreen and use a dynamicTexture from that separate canvas

You don’t want to have them targeting the same canvas.

By offscreen I mean in another canvas element that is hidden with CSS.

1 Like

If I can bind one canvas to HtmlElementTexture texture, than why I can’t bind a canvas with pixi.js?
For example red square this is other canvas:

hi Alex

This one shows it working but showing the with canvas actually showing

While not showing it does some weird smear on pixi canvas

While moving the pixi canvas up and left off the screen works fine

Should get you on your way.

If you use an htmlElementTexture it is because you want to render pixi in a separate canvas like the dynamicTexture.

You then need to upload the external content to babylon every frame with update.

1 Like