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

Questions
1

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('https://i.imgur.com/XYtAXP4.png');
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: https://jsfiddle.net/8L31j9pe/

2

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

https://doc.babylonjs.com/how_to/dynamictexture

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
3

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:
https://jsfiddle.net/8L31j9pe/1/

4

hi Alex

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

https://jsfiddle.net/sleekinteractive/w0yb4dzk/17/

While not showing it does some weird smear on pixi canvas

https://jsfiddle.net/sleekinteractive/w0yb4dzk/19/

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

https://jsfiddle.net/sleekinteractive/w0yb4dzk/21/

Should get you on your way.

5

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.

https://jsfiddle.net/7bjut0k3/1/

1 Like