These are chat archives for pixijs/pixi.js

13th
Sep 2018
Ashley Hier
@ash-crash
Sep 13 2018 14:17
Hey guys, have a question hopefully someone with knowledge about how the renderer works will be able to answer
I want to create texture dynamically at runtime based on a few layers from different image resources
for example I have these layers in a container:
background
midground
foreground
I add them all into a container and then render that container using a render texture then add to pixi texture cache
I have multiple of these kind of textures with same background, different midground and same foreground
Which solution would be better for rendering performance
rendering individual containers to render textures for each different midground (say max 40 different mid grounds)
or
making one big container, adding all the stacked containers to that parent container, rendering the parent container to render texture
then making textures from the larger rendertexture based on the bounds of the child containers
Ashley Hier
@ash-crash
Sep 13 2018 14:23
In my head, the first approach would effectively create new render textures for every flattened image whereas the second approach would create effectively a sprite sheet at runtime which would give all the flattened images the same 'basetexture' and lead to less gpu draw calls
but I'm not sure if rendertextures work in the same way as the same logic for sprite sheets
Would be grateful for any input :)
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:24
They work the same way
Make sure to make some space between them, if you use LINEAR filtering
the only serious thing you have to care about is destroy
Pixi GC takes care of regular texture
but not renderTexture, because renderTexture cant be restored
Ashley Hier
@ash-crash
Sep 13 2018 14:26
These textures would be persistant for the lifetime off the app for my use case
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:26
GC takes down textures that werent used for a long time.
oh
then do your thing :)
That idea is good
Also, dont use it with TilingSprite, it eats 1 drawcall per object
Ashley Hier
@ash-crash
Sep 13 2018 14:27
so big sprite sheet and make textures from frames is better?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:27
if you want to tile something, better make several sprites or pixi-tilemap
Yep.
Ashley Hier
@ash-crash
Sep 13 2018 14:28
OK because I saw someone who did the same thing after some research
image.png
and theres still tons of drawcalls
even though they have rendered to one 'runtime spritesheet'
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:30
that's strange
new PIXI.Texture(renderTexture, new PIXI.Rectangle(...)) should work
if it doesnt, i can help with debugger
Ashley Hier
@ash-crash
Sep 13 2018 14:46
I made a pseudocode
easiest way to send?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:47
pastebin/
Ashley Hier
@ash-crash
Sep 13 2018 14:47
ty
So there are the two options
so you can see what exactly I'm getting at just to make sure were on the same page
I just made a really long sheet
as an example
would use a better algo to position the sprites and do checks against 2048 and make another etc
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:49
it should work
if you dont exceed 4096 pixels
yeah
or 2048
also one [i] is missing
Ashley Hier
@ash-crash
Sep 13 2018 14:50
ok haha I just wrote it quickly
didnt run
U are certain that approach 2 is better though?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:51
less calls for fragment shader
less pixels drawn
that's always a bottleneck in backgrounds
Ashley Hier
@ash-crash
Sep 13 2018 14:51
ok awesome :)
those flattened images would be constantly moving in my case
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:52
doesnt matter
Ashley Hier
@ash-crash
Sep 13 2018 14:52
:)
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:52
dont forget to make 1pixel or 2pixel gaps between them on renderTexture
Ashley Hier
@ash-crash
Sep 13 2018 14:52
I put 4 px :D
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:52
ok
Ashley Hier
@ash-crash
Sep 13 2018 14:52
You said something about linear
whats that?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:52
yepo
Ashley Hier
@ash-crash
Sep 13 2018 14:53
Linear Filtering?
what you mean?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:53
SCALE_MODES.LINEAR vs SCALE_MODES.NEAREST
Ashley Hier
@ash-crash
Sep 13 2018 14:53
ah right ok
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:53
what happens when x=0.3 :)
Ashley Hier
@ash-crash
Sep 13 2018 14:53
linear is what
1
?
and nearist is 0
?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:53
maybe
Ashley Hier
@ash-crash
Sep 13 2018 14:53
not the const value
i mean
what would 0.3 be
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:53
i mean, it combines two texel colors linearly
Ashley Hier
@ash-crash
Sep 13 2018 14:53
in those cases
oh
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:54
or just taking 0 texel
because its nearest
Ashley Hier
@ash-crash
Sep 13 2018 14:54
I see :)
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 14:54
and that can be a problem when you take linear between a pixel from one rectangle and neighbor pixel from another
colors bleed
Ashley Hier
@ash-crash
Sep 13 2018 14:55
color issues or frame clipping issues
ah I sse
see
Thanks Ivan :)
Hopefully I will have time to make some contributions to PIXI soon, I have been using it long time now
can't wait for offscreencanvas optimisations
if that is the way pixi decide to go
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:00
i still dont understand how to use offscreencanvas properly :)
its like all that stuff is made for several use-cases and not big games
Ashley Hier
@ash-crash
Sep 13 2018 15:03
true, feel like it can just do all the rendering stuff in separate thread and then app calculations can be done in primary thread
seems like a good idea but also don't know enough about it
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:04
try to separate rendering or app calculations into separate thread in one game.
then you'll know it :)
one of problems will be GC
WeakMap in JS isnt enough
Ashley Hier
@ash-crash
Sep 13 2018 15:05
Lol dont destroy anything
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:05
YEAH!
Ashley Hier
@ash-crash
Sep 13 2018 15:05
memory leak > fps drop
as long as you don't have that many textures, for all my games I build everything after load
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:06
suppose you passed a resource to renderer
Ashley Hier
@ash-crash
Sep 13 2018 15:06
and just keep it in memory
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:06
how do you know when its time to release it?
Ashley Hier
@ash-crash
Sep 13 2018 15:06
lol you dont
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:06
in js if you store stuff in regular canvas it gets freed when js variable is destroyed
when there are no paths from GC roots
Ashley Hier
@ash-crash
Sep 13 2018 15:06
yea its mark and sweep isn't it
I understand what u r saying
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:06
here, you dont know whether all numerical "links" in other thread are freed
Ashley Hier
@ash-crash
Sep 13 2018 15:07
so don't get rid of anything
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:07
and you dont have "finalizer" like in java to free external resources
Ashley Hier
@ash-crash
Sep 13 2018 15:07
suited to some apps
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:07
yes
Ashley Hier
@ash-crash
Sep 13 2018 15:07
but big games will struggle :/
java <3
as3 <3
bring back flash
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:08
yeah, and that's when I made a fork of Mozilla Shumway, i got rid of "separated renderer" paradigm
it cant be fully separated, i need links for javascript GC
That's what I'm doing on my main job, bringing back Flash
making new Renderer based on pixi that works with SWF files and stuff
whole year already
Ashley Hier
@ash-crash
Sep 13 2018 15:09
haha whens that coming out for public
wutt
no way
You are doing gods work man
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:09
well , i have some tests
begining of 2019
Ashley Hier
@ash-crash
Sep 13 2018 15:10
repo link?
Ivan Popelyshev
@ivanpopelyshev
Sep 13 2018 15:10
Ashley Hier
@ash-crash
Sep 13 2018 15:10
:O
Ashley Hier
@ash-crash
Sep 13 2018 15:10
What about vectors
render those with pixi graphics api?
yeah, graphics api with some tricks
no, not pixi graphics
just canvas2d
need better graphics for that
its difficult, its still canvas2d-only
im working on webgl port right now
Ashley Hier
@ash-crash
Sep 13 2018 15:14
ye good luck
that webgl port
would be hard
Ashley Hier
@ash-crash
Sep 13 2018 15:21
Love the work ivan
proj looks cool :)