These are chat archives for pixijs/pixi.js

3rd
Jan 2016
Micheal Winger
@mordof
Jan 03 2016 00:28
never heard of this chat system before now... hm
anyway, i have a dilemma that i'm not sure if it's a pixijs bug or if i'm just doing something wrong: http://jsfiddle.net/51vLv2gk/1/ click run until all the circles look poorly pixellated... Does anyone know why this is happening?
Chad Engler
@englercj
Jan 03 2016 01:00
Wow
that is really weird
I'm honestly not sure
Looks like it only happens with ParticleContainer and not Container. Likely an issue in pixi
I'd open an issue on GitHub
Micheal Winger
@mordof
Jan 03 2016 01:06
@englercj ok, i'll do that. Thanks for checking it out :)
i'll do some digging into particle container addChild, see what it expects.. since it's directly tied to that there may be something i can do.
Chad Engler
@englercj
Jan 03 2016 01:20
Its probably not add child, more likely it trying to render the buffer from generateTexture
It gets a canvas as the texture (one canvas per texture you create) and it has to load and render all those items. Seems like it either 1 is too many textures and the swapping is broken
Oh shit
I know what it is
you can't do that
everything in particle container must share a base texture
which otherwise you get weird stuff like this
and each one is a diff base texture
You can'
You have to use Container
Micheal Winger
@mordof
Jan 03 2016 01:31
@englercj yeah.. before I wandered off I saw another github issue you replied to along the same lines :( you mentioned that pixijs takes care of things by using shaders to deal with the rendering - when i tried to use shaders with threejs for a plane, i was restricted to 1024 variables (even using an array with 1024 items) for information...
so how is pixijs able to handle several hundred thousand items passed into a shader, even using a single texture?
the performance gain of using ParticleContainer is awesome.. if i can find a way to entirely use a shader to render my circles and pass in the x, y, radius, color for each one - i'd just as quickly take that approach
Ivan Popelyshev
@ivanpopelyshev
Jan 03 2016 01:47
pixi-tilemap renders rectangles even more effectively. if you want to render circles, please make your own container, id like to use it too
you can use particlecontainer or pixi-tilemap.js as a base
Chad Engler
@englercj
Jan 03 2016 01:48
We render everything by passing the information into the vertex buffer rather than via uniforms
Yeha you definitely can
what you can do is make 1 circle, and use that as the texture for all the sprites
then you can position and scale the sprites however you want
Micheal Winger
@mordof
Jan 03 2016 01:52
i thought about the single texture possibility for particlecontainer, but in that scenario if it gets resized too much - that would cause odd pixellation since it's a raster texture wouldn't it?
Chad Engler
@englercj
Jan 03 2016 01:52
It could, yes
you can up the number of segments used to draw the circle and draw it a bit big
then mostly downscale it
Micheal Winger
@mordof
Jan 03 2016 01:54
mhmm, always downscaling in that scenario.. i'll give that a shot. @ivanpopelyshev what were you meaning about me making my own container? an alternative to particlecontainer that was meant purely for drawing circles?
Chad Engler
@englercj
Jan 03 2016 01:54
not necessarily always downscaling, but at least for the big scales
Micheal Winger
@mordof
Jan 03 2016 01:55
@englercj passing info into the vertex buffer... i'm saddened that i only kind of understand what that means. I'm fairly new to everything 3D and only just started into shaders
hmm true
Micheal Winger
@mordof
Jan 03 2016 02:18
@englercj any chance you're able to link me to the area in pixijs source where it deals with passing in the info to the vertex buffer? i'm assuming the drawing takes place in the fragment shader - is that correct? hmm.. does that mean there's a varying info about the vertices in the fragment shader?
or am i just horribly misunderstanding.. lol
i tried to find it in the source, but i'm not seeing it (not sure entirely where to look)
Chad Engler
@englercj
Jan 03 2016 02:26
Yeah pretty much
since you are interested in particle container
I'd look at those files:
The first file does the actual gl manipulation, the other files are supporting (the shader, the user API, etc)
Micheal Winger
@mordof
Jan 03 2016 02:27
oooh. nice, thank you
Chad Engler
@englercj
Jan 03 2016 02:27
np!
Micheal Winger
@mordof
Jan 03 2016 02:28
there's the possibility that i may just be able to use a handful of particle containers. the other option is to go ahead and do a full implementation of something that can draw circles of various sizes and (hopefully) colors entirely in the shaders..
but that depends if i can understand how the information is being passed so that there isn't a crazy small limitation on data
Chad Engler
@englercj
Jan 03 2016 03:00
You can do the colors by tinting the sprites
just draw a white circle, and use the .tint property of the sprite to change the color
Micheal Winger
@mordof
Jan 03 2016 03:04
oohh brilliant
Chad Engler
@englercj
Jan 03 2016 03:06
but you can't use tint in particlecontainer
you would have to use a normal container
Generates 1 circle, and only 1 texture
then tints and scales for all the sprites
You could always draw a few different circle shapes in the same graphics object, generate a texture, and use it like a sprite sheet. Picking a random frame for each sprite
and if you needed particle container, you could use that same technique to draw a multitude of different colored ones to a single texture and then just create different frames
(meaning 1 texture per frame, all using the same baseTexture instance that is your drawn sprite sheet)
Micheal Winger
@mordof
Jan 03 2016 03:16
whoa..
@englercj is that a ton faster just because you're using a single texture and tint/scaling it?
Chad Engler
@englercj
Jan 03 2016 03:16
yup
all of them are batched together into a single draw call
you likely don't need particle container
Micheal Winger
@mordof
Jan 03 2016 03:17
! i definitely don't..
Chad Engler
@englercj
Jan 03 2016 03:17
your slowdown was likely from generating so many textures
Micheal Winger
@mordof
Jan 03 2016 03:17
so clearly my way of thinking needs to be shifted more for 2d/3d dev stuff
@englercj so ... since these are inside a container. when i want to 'move my viewport' - should i be shifting the position of my container then since all the circles will be moving the same amount/direction?
or would it be better to move each circle (i'm pretty sure i know the answer to this one, heh)
Chad Engler
@englercj
Jan 03 2016 03:20
nah just move the container
Micheal Winger
@mordof
Jan 03 2016 03:20
ok good
Chad Engler
@englercj
Jan 03 2016 03:20
pixi is a scene graph
parent properties effect children
Micheal Winger
@mordof
Jan 03 2016 03:20
i have no idea what that means, lol
ok - that i understand, so it's ok
Chad Engler
@englercj
Jan 03 2016 03:21
It means that the world position of an object is: its position + parent position + parent parent position + ...
Micheal Winger
@mordof
Jan 03 2016 03:21
gotcha. that's handy
yaaay i'm so excited that it's finally possible with good frame rates!
@englercj thank you so much for your help and explanations ^_^
Chad Engler
@englercj
Jan 03 2016 03:31
Anytime :)
Micheal Winger
@mordof
Jan 03 2016 03:36
@englercj why did you tint random * 16777215 ? what does that int mean
Chad Engler
@englercj
Jan 03 2016 03:37
0xFFFFFF
Micheal Winger
@mordof
Jan 03 2016 03:41
ah wow - alright.
Ivan Popelyshev
@ivanpopelyshev
Jan 03 2016 16:01
https://github.com/pixijs/pixi-tilemap/ - I dont know how to make tilemap even more simple :)
it can use both sync/async loaders, add new layers on fly, sort all tiles automagically and other stuff
Micheal Winger
@mordof
Jan 03 2016 17:27
@ivanpopelyshev are the shadows from the tilemap zoom-in demo part of the textures - or is that shader stuff?
@ivanpopelyshev
woops
@ivanpopelyshev just thinking of random stuff since you seem to be looking for things to add - what about keeping track of traversable tiles? so that when someone is trying to make a character walk around, they can quickly query the tilemap stuff and be like "can a player walk here?"
that may be closer to game-engine type stuff rather than just tilemap responsibilities, not sure
Micheal Winger
@mordof
Jan 03 2016 17:32
either way - those demos look really nice :) i like it
dynamic shadows would be cool - if each tile supplied a heightmap, lol
Ivan Popelyshev
@ivanpopelyshev
Jan 03 2016 18:18
@mordof shadows are graphics actually )
there's graphics layer
as for traversable tiles and actual logic for tilemap - it depends on game. pixi-tilemap is only a renderer
so tilemap is like PIXI.Graphics but for tiles. You can clear it and fill with rectangles again
and there's cache mechanism for canvas, which I took from rpgmaker
Ivan Popelyshev
@ivanpopelyshev
Jan 03 2016 19:52
and that thing will be in production in next update of rpgmaker :)