These are chat archives for pixijs/pixi.js

7th
Jul 2016
Stijn Heylen
@izar89
Jul 07 2016 19:22

Hi guys :d
Short question: Is there a way to create a sprite with a webgltexture and can I update it when the webgltexture updates?

Longer version: I tried to combo pixijs and threejs. I started off with 2 seperate canvases/contexts and creating a texture with the texture.fromCanvas method but the updateTexture (uploading the texture everytime) is really expensive with a large canvas (I need a canvas of 1120 x 1120 pixels)(x2 retina support would be nice).
So next I tried just 1 canvas (share context and textures?) and render my 3d scene to a texture and then use that texture in pixijs.
I copied the webgltexture from threejs rendertarget and copied it to a texture of pixijs (in the texturemanager). So far it works but I cant get the sprite texture in pixi to update without reuploading the texture?

Thanks!

Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 20:28
yes
use pixi-v4
and there's pixi-gl-core (PIXI.glCore) which is an abstraction that works with WebGL directly
and pixi.js dev (v4) is better to build from sources
there's retina support, just make your BaseTexture with resolution
@izar89 in any case, I will be able to help you ONLY if you study particular places in sources, I wont do that work for you
Stijn Heylen
@izar89
Jul 07 2016 20:37
Hej! Thanks for the reply. I'm using V4 now and red through the code of pixi-dev and the pixi-gl-core and tried to put some code together(learned a lot about webgl :p still a newbie). Im creating a fiddle now (almost done)so I can share the method I tried :d
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 21:43
:)
i will look at it of course
may be make it into plugin later
I have this thing for plugins: https://github.com/pixijs/pixi-plugin-example
may be you can use some parts of it too, just read through it
it adds "overlay" blendMode for webgl
I think if you already know three.js, you wont have problems with pixi too :)
Stijn Heylen
@izar89
Jul 07 2016 21:45
I found some extra problems with my code(https://jsfiddle.net/izar/753bqzky/9/). I'll be back with a better code example (this was more of a hacky test , see if it is possible :d). Anyway thanks for the tips!
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 21:45
though it has different architecture and optimizations.
renderer3D.setPixelRatio(canvas.pixelRatio);
renderer3D.setSize(canvas.width, canvas.height);
ok
may be it is better to use BaseRenderTexture and RenderTexture?
threejs is rendering into framebuffer, right?
Stijn Heylen
@izar89
Jul 07 2016 21:46
yes
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 21:47
and you can just create RenderTexture that will use that framebuffer
and pass it to Sprite
hm
though your current method is ok too
soo we actually need to bind renderTarget of threejs to BaseRenderTexture of pixi
and it will be ok
Stijn Heylen
@izar89
Jul 07 2016 21:49
hmm I'll try that tomorow. Have to go sleep now :d
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 21:49
yeah, it will be a bit clearer
but right now its ok too :)
Stijn Heylen
@izar89
Jul 07 2016 21:53
Nice! I hope it wil give me some extra frames when it works :d I'll be back ;)
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 21:58
between passing canvas and passing texture is huge difference
so you fixed your main problem
i dont think you can make it better a lot, we need better test and specify a devices for that
Ivan Popelyshev
@ivanpopelyshev
Jul 07 2016 22:42
it doesnt have 3d primitives, but it allows to rotate the sprites :)
though, without z-buffer