Is Pixi flexible enough to pair with other libraries?

[trusktr]

For example, suppose I already have a Three.js scene. Can I use Pixi's Text renderer to render text inside my Three.js scene? (Assuming Three.js is flexible enough to let that happen as well?). I haven't ever tried anything like that, but it would be cool for awesome open-source libs to be mixable with each other somehow.

[trusktr]

Maybe there's no way using a single canvas, but maybe I can just have an off-screen canvas with Pixi rendering in it, then copy the texture over to the Three.js canvas?

[themoonrat]

http://ds-code.net/?p=1
An example of someone combining PIXI and three :)

[englercj]

It's possible, though combining renderers can often be interesting and complex. Usually you end up rendering twice then compositing.

[GoodBoyDigital]

V4 Pixi is designed to work with three.js but we have not had time to demonstrate / share with the world how :/

Check out this game we made:
http://www.cartoonnetwork.co.uk/games/gumball-toon-cup-2016

this is an example of three and pixi sharing a context and working in harmony*

I have attached the plugins I was working on.
pixi_three.zip

They are unfinished, but worked last time i checked. Theres basically a pixiThreePlugin and threePixiPlugin

The first renderers three.js into pixi and the second renders pixi into three.js (even to three.js textures)

Enjoy!

[ivanpopelyshev]

There was also a discussion in gitter.im pixi channel, few months ago. You can search through chat, we made threejs work with pixi just fine :)

[igordgeorgiev]

@GoodBoyDigital Hello mate, I am trying to achieve just what you have in the example pixi_three.zip, but the problem is that only the pure THREE.js rendering works. Basically, webgl_geometry_cube.html and webgl_pixi_three.html are working and they are with the same code inside. Nothing Pixi related there. Also the pixiThreePlugin and threePixiPlugin are identical. (Checked via WinMerge to be sure). So I tried editing this and that in the pixi_three.html which is supposed to that, but I can seem to run it properly. Could you help me understand how to do it?

[trusktr]

@GoodBoyDigital I finally am checking this out.

As @igordgeorgiev mentioned, the pixiThreePlugin.js and threePixiPlugin.js files are identical. GOt an updated one?

I'm more interested in rendering Pixi in another WebGL context. In my case, I'm not using Three.js, I'm writing 3D WebGL from scratch, and would like to render a Pixi scene as a texture on on a quad inside my 3D WebGL.

The easiest way I can imagine would be to render Pixi in a separate canvas, like normal, then just get that texture into my 3D canvas.

Is there a batter way?

[trusktr]

Ah, looks like that's what RenderTexture/BaseRenderTexture does anyways, is render to another canvas.

Is that the only way to achieve a separate hardware-accelerated texture in the web?

[trusktr]

Looks like RenderTexture is really helpful for bringing outside renderings (from other canvases) or pixi sub-scenes into the main Pixi scene.

For my case though, seems like it's just as simple as follows to bring the Pixi scene into my own WebGL:

function uploadCanvasToTexture() {
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    pixiRenderer.view // RIGHT HERRE, pass the Pixi canvas in.
  );
  gl.generateMipmap(gl.TEXTURE_2D);
} 

// then use the texture in the other WebGL app...

More details here: https://stackoverflow.com/a/37134634/454780

[trusktr]

@GoodBoyDigital Is it possible to use Three.js and Pixi.js together, in the same Canvas, without having to pull textures from one canvas into the main canvas?

In my case, I have a custom WebGL app (no Three.js), and it would be nice to somehow use Pixi.js in the same canvas context, for performance. Is there a way to do this, even if not documented?

[trusktr]

If Pixi generates polygons, maybe it is possible to make my app switch to the Pixi.js shaders and render the polygons? I would assume that something like this might work because in my WebGL app I currently have multiple drawArrays calls per tick (is that okay?) and depth sorting seems to work fine, so I would assume that inserting Pixi.js polygons (with Pixi shaders) will depth sort with all my other stuff.

Is that so? If so, how would you do it?

[ivanpopelyshev]

pixi doesnt use Z component, and there's webgl operation that changes default inear function for Z component, so yes, it is possible. Just enable DEPTH and dont give pixi knowledge about that

[trusktr]

Hmmmm, I'm somewhat new to WebGL. Seems like trying to manipulate Pixi.js polygons in the same 3D space of an existing 3D app might be confusing and or awkward.

F.e., if making a HUD with Pixi.js on top of a 3D game, I might like to animate the Pixi.js HUD drawings separately from the underlying 3D scene, but I still want have both renderings in the same canvas' webgl context.

I think there is a way to do this with framebuffers rather than using separate canvases? Still learning... Any examples would be great!

[trusktr]

Aha! Looks like PIXI.glCore.Framebuffer might be what I need to use. Do I gl.bindTexture the texture I'd like to render in after binding a PIXI.glCore.Framebuffer with gl.bindFramebuffer? And then after a gl.drawArrays call (for example), I can then unbind the any framebuffer, and finally use the texture in my main drawing?

I think I've almost learned enough to try it out...

[trusktr]

Mmmmmmm, @mattdesl is quoted here mentioning a technique that:

allows you to render the UI on top of the 3D scene without any frame buffer switching.

Maybe that's the best strategy for HUDs, but still over my head, but soon won't be! I guess Framebuffers are still needed for rendering onto a mesh.

I'm writing what I learn as I go, maybe this can turn into a tutorial at some point...

Maybe I should move to HTML5GameDevs forum?

[ivanpopelyshev]

And one more forum post: http://www.html5gamedevs.com/topic/31511-drawing-pixijs-into-another-webgl-app/

[trusktr]

Out of curiosity, just so I know, do you guys prefer these types of discussions in here? Or on the forums?

[englercj]

Either is fine, I prefer them here because I find the notification system and tracking to be better than on the forums. But posting on the forums will often get you more responses.

[ivanpopelyshev]

@trusktr here is better. Forums are just gates to real issues.

[GoodBoyDigital]

Hi there! Closing this issue for now due to its inactivity. Feel free to give us a poke if you would like this issue reopened. Thanks 👍

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.