These are chat archives for pixijs/pixi.js

12th
Jun 2018
Unravl
@Unravl
Jun 12 2018 07:44
Hi guys, just using Pixi. Using WebGL, trying to figure out why having 5k+ Sprite3d objects is not using the GPU and lagging? i have a loop that creates each sprite object and adds them into a container which gets added to the stage
Basically im making floor tiles in a 2.5D projection
my GPU does not even get 1% usage so it cant be struggling, its like its not getting hardware rendered. I started off using the 3D Camera spline layer template, and even that when increasing the sprites lags significantly and GPU seems to not be used?
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 08:49
do you move those sprites every frame?
or camera
every frame it multiplies huge 4x4 matrices for every sprite
that's one of web platform limitations - you cant have many 3d objects because matrix operations are very slow
pixi doesnt have proper camera, so it has to multiply camera projection on everything
if you use several "planes", you can use 2d objects inside each plane, that'll speed it up significantly
pixi-projection was made for 1000 objects, not 5000. Its not that its bad plugin and bad coding, i spent 3 years thinking how to integrate this thing into pixi
Patryk Ziemkowski
@pziemkowski
Jun 12 2018 09:31

Hello,

I'd like to ask about this line in github docs: Axis aligned Rectangle Masks are the fastest (as the use scissor rect).

Is this any different than drawing a non-rotated rectangle with Graphics?

Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 09:32
its exactly non-rotated drawRect
moveTo/lineTo wont be detected as a rectangle
drawRect/fillRect
Patryk Ziemkowski
@pziemkowski
Jun 12 2018 09:32
Great, thanks!
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 09:32
when its detected, it uses scissor instead of stencil
Patryk Ziemkowski
@pziemkowski
Jun 12 2018 09:42
I'd have one more question related to that. I need quite a number of masks, which are all the same. They are all rectangles of a one, fixed size.
I seems I could somehow prepare this mask and reuse it in other places that need it, but I'm not sure that cloning the Graphics object is in any way faster than instantiating a new object (since clone most likely does the same thing underneath). Another option would be baking a texture out of it and using it as a basis of Sprite masks, but I'm not sure it's a right approach. What do you think?
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 09:52
its not important.
just a number of Graphics objects will do fine
Patryk Ziemkowski
@pziemkowski
Jun 12 2018 09:55
@ivanpopelyshev thanks
Unravl
@Unravl
Jun 12 2018 11:19
thank you for getting back to me so fast @ivanpopelyshev
im trying to find a way around this. What if each time my player moves tile, i put the 5k floor sprites into a container, then get a RenderedTexture to get those container graphics, then draw a single sprite to the game from that rendered texture?
is that possible? and if so, how do i go about dumping the container with sprites into a rendered texture?
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:28
what do you mean floor sprites?
Unravl
@Unravl
Jun 12 2018 11:28
like
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:28
tilemap?
Unravl
@Unravl
Jun 12 2018 11:28
my floor tiles are Sprite objects
Sprite3d
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:29
yeah, make a tilemap to generate render texture
that'll be better for Z-sorting too
how you make a tilemap - with chunks or single texture - is not important
its important to not to generate it every tick
Unravl
@Unravl
Jun 12 2018 11:30
oh certainly ill only generate it when needed
what is the tilemap object?
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:30
there's no tiloemap object in pixi. its your job to do it. look at pixi-tilemap for example
however for your case its better to use renderTexture
just dont generate it on every scroll
the idea is that you can move that tilemap too
if big map contains many small tilemaps and they are moving
you need to generate only visible ones and drop invisible ones when they are out of camera for a few seconds
tilemap is a problem on its own.
Unravl
@Unravl
Jun 12 2018 11:31
ok so this? var tilemap = new PIXI.tilemap.CompositeRectTileLayer
and render that onto a render texture?
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:31
and you are asking me how to make it in 3d - well, good luck
no, it doesnt' mean you can just use any solution
you cant use my tilemap in 3d :)
Unravl
@Unravl
Jun 12 2018 11:32
ah right :P
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:32
you chose a difficult task for pixi. its impossible with vanilla.
its difficult to make a tilemap with vanilla too
Unravl
@Unravl
Jun 12 2018 11:32
i couldn't see anything on Phaser about 2.5D / projection stuff
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:33
pixi-projection is a miracle already
because its difficult to make 2.5d/projection stuff in 2d engine.
every time people make it - it screws API hard
Unravl
@Unravl
Jun 12 2018 11:33
pixi-projection is working well for us, we just need to get this floor optimised :P
ah
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:33
yep, do tilemap
Unravl
@Unravl
Jun 12 2018 11:33
appreciate it, will check it out
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:34
however first you need to test your implementation of tilemap in 2d
then add Sprite3d stuff
pixi-tilemap is not suited for this thing, but it shows how tilemaps are actually difficult thing :) dont take it as granted
good luck! :)
Unravl
@Unravl
Jun 12 2018 11:36
thanks!
quick question
earlier i did testing and made a rendertexture from my container with 5k sprites in it
then turned that into 1 sprite and drawed it. but it was very small, maybe even only 1 of those sprites
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:37
did you use particlecontainer?
Unravl
@Unravl
Jun 12 2018 11:37
wondering what the best way to dump a container of sprites into a rendered texture
no i didn't
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:37
ok, dont use it.
best way is to create renderTexture of the size you calculate on your own
suitable for your CHUNK
do you know how chunks work? like in minecraft?
Unravl
@Unravl
Jun 12 2018 11:38
i do yes
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:38
make a several 512x512 textures or so
if tile is shared, well, draw it on both
then use renderer.render(myContainer, myRenderTexture, ...)
Unravl
@Unravl
Jun 12 2018 11:39
i mean in the code, how do i go about making a rendered texture from a container
ah
thank you
Ivan Popelyshev
@ivanpopelyshev
Jun 12 2018 11:39
dont use generateTexture, its not that stable
it calculate bounds for you and can be wrong
also it cant reuse existing texture
prepare to make that thing in several steps
check that each step works
as i said, you are in dangerous terrotory, and the miracle fact that there's 2.5d plugin for pixi doesnt mean its a cakewalk :)
Unravl
@Unravl
Jun 12 2018 11:42
:) i will do. is there any other people doing 2.5d stuff?
if you ever played runescape classic, thats the kind of view im looking for