Hello all, I’m new to BabylonJS but an old hand at Pixi.
I’ve an asset management system running in Pixi and I was wondering if there’s any way to use a pre-loaded Pixi texture (which is pulled from a sprite sheet/atlas) and map it onto a plane in BabylonJS?
Thanks in advance!
hi welcome to forum please share any more detail
you can use PG https://www.babylonjs-playground.com for add you PIXI texture and show us the issue
Am I missing something? That PG link doesn’t offer any help to my question…
You should add a playground so we could take a look at your code.
Like this https://www.babylonjs-playground.com/#AQRDKW#0
The thing is I have no code to post, I was just wondering if using a Pixi texture was possible.
Basically I was wondering if I can covert a PIXI.Texture into a BabylonJS texture for use on a material.
basically you can use any canvas picture to any other canvas render engine
just search dynamic material or get canvas texture
This may be of interest How to combine Babylon.js and Pixi.js - Babylon.js Documentation
Hey @digitaloranges, I spent some time trying to get pixi to render to a DynamicTexture in this PG:
https://www.babylonjs-playground.com/#3IR66W#3
Unfortunately, I can’t quite figure out what’s going on with the ordering of the objects in scene, but it seems possible.
@Deltakosh, got any idea why the sphere is getting clipped by the ground mesh?
Can you post code to show what that is?
Reason being… there is probably a way.
Looking at the BABYLON Sprite Texture Packer… it is just a png (for example).
https://doc.babylonjs.com/babylon101/sprites
So, a minimum way to make it work would be to implement one of those PG’s on that page.
Reusing the png.
One way to dig deeper into BJS awesomeness is:
https://doc.babylonjs.com/api/classes/babylon.spritepackedmanager
Probably I’m on a tangent (as usual).
But I see… SpriteJSON and URL. Never used it… someday maybe.
Deeper still… you can SEARCH PLAYGROUND (PG)
GREAT Sprite examples there.
And read source code.
https://github.com/BabylonJS/Babylon.js/blob/master/src/Meshes/mesh.ts#L3256
Welcome to the forum.
The PG is not workin and @sebavan is now our Pixi expert 
Pressing the play button gets the scene to load if it initially fails
You are rendering pixi in the main canvas and not to a texture. A dynamic texture wraps a canvas but usually a different one than the babylon one so either you need to make pixi render to a renderTarget or you need to use it on a separate canvas wrapped into a dynamicTexture.
Found ONE example of PIXI rendering in PG:
https://www.babylonjs-playground.com/#1QJHY3#10
You could use it to fix the ‘PIXI is not defined’ error here…
https://www.babylonjs-playground.com/#3IR66W#4
I think this could be really powerful.
I’ve worked out how to to do using a DynamicMaterial.
I’ve developed a framework in Pixi that handles the loading of assets (textures etc) and wanted to use this asset manager in my Babylon project. I also wanted to use the TexturePacker facility using sheets/atlases.
Firstly, to create a Babylon texture from a Pixi texture, I create a new DynamicMaterial then draw the Pixi source image into it:
function convertPixiTexture(baseTexture: FW.BaseTexture, width: number, height: number, mipMaps = false): BABYLON.BaseTexture
{
// Create Babylon texture
const texture: BABYLON.DynamicTexture = new BABYLON.DynamicTexture("pixi-texture-" + name,
{
width: width,
height: height
}, mainScene, mipMaps);
texture.hasAlpha = true;
const textureContext: CanvasRenderingContext2D = texture.getContext();
// Draw PIXI texture to new texture
textureContext.drawImage(baseTexture.source, 0, 0, width, height, 0, 0, width, height);
texture.update();
return texture;
}
Then I use the TexturePacker frame rectangle info to map that texture onto a plane.
Hi @digitaloranges !
Let see my example in this post, i think them useful for you.