Need advice for some project

[trsh]

Hi guys. I want to create a effect in PIXI, that looks like first frames in this video -> http://hubblesite.org/video/513/news_release/2006-01 (stars shooting/flying by). What would more experienced PIXI'oniers advice to achieve such effect? Performance is critical, I want it also to work on mobiles.

For now I'm thinking:

1) Particle container, that's for sure? Maybe with some 1-3 star sprites?

2) Projection plane for start movement? Or just calculate it with some custom simple logic?

 

[ivan.popelyshev]

Assuming that you cant just code critical webgl stuff for your demo, I suggest to stop looking for pure pixi solution and use combined pixi+threejs.

No framebuffer: https://jsfiddle.net/xyL1sv02/2/

extra framebuffer: https://jsfiddle.net/c34p532r/24/

[trsh]

17 minutes ago, ivan.popelyshev said:

Assuming that you cant just code critical webgl stuff for your demo, I suggest to stop looking for pure pixi solution and use combined pixi+threejs.

No framebuffer: https://jsfiddle.net/xyL1sv02/2/

extra framebuffer: https://jsfiddle.net/c34p532r/24/

Hmm, why that?

[trsh]

The image will be static BG, and stars shooting by. Why can't pixi handle this alone at good speed?

Simple as https://jsfiddle.net/obmjcnv7/. I just need to get the projection right.

[ivan.popelyshev]

1. code projections and modify ParticleContainer that it works with them
2. code something simple like you did, sometimes its enough
3. use threejs PointCloud.

or you can wait when I code 3d projections for https://github.com/pixijs/pixi-projection and add support to ParticleContainer. Right now its only 2d projections stuff.

Anyway, simple formulas for projeciton. Im taking it from the head now. Dont think that I'll post complete code with commentaries, I just dont have enough time for that. You have to adjust my solution for your case, dont mind variable names, you can change to what you like it.

Assume that our center of screen is (0,0), focus distance is "d", and "z" is distance from object to focus plane (z=0 is default).

projPosition.x = position.x * d / (z+d);
projScale.x = scale.x * d / (z+d);

Dont forget to cut stars that already behind us, and have z < -d + eps, or their X already is too high.

Same applies to Y.

If you want to change (0,0) just change top container coords, I assume that you know how pixi transformations work.

Please dont use "scale.x+=" or something like that, store 3d position and 2d position in different variables. Also dont forget to sort points by Z.

Sorry, I wont show you my paint mad skillz, just imagine that you have a screen on distance D from you, and point is somewhere at (z+D), and you want to project point on that screen.

 

 

[trsh]

2 hours ago, ivan.popelyshev said:

1. code projections and modify ParticleContainer that it works with them
2. code something simple like you did, sometimes its enough
3. use threejs PointCloud.

or you can wait when I code 3d projections for https://github.com/pixijs/pixi-projection and add support to ParticleContainer. Right now its only 2d projections stuff.

Anyway, simple formulas for projeciton. Im taking it from the head now. Dont think that I'll post complete code with commentaries, I just dont have enough time for that. You have to adjust my solution for your case, dont mind variable names, you can change to what you like it.

Assume that our center of screen is (0,0), focus distance is "d", and "z" is distance from object to focus plane (z=0 is default).

projPosition.x = position.x * d / (z+d);
projScale.x = scale.x * d / (z+d);

Dont forget to cut stars that already behind us, and have z < -d + eps, or their X already is too high.

Same applies to Y.

If you want to change (0,0) just change top container coords, I assume that you know how pixi transformations work.

Please dont use "scale.x+=" or something like that, store 3d position and 2d position in different variables. Also dont forget to sort points by Z.

Sorry, I wont show you my paint mad skillz, just imagine that you have a screen on distance D from you, and point is somewhere at (z+D), and you want to project point on that screen.

 

 

Ok. Cool tnx. But Object that come near do appear bigger, so have can I live without Scale?

[trsh]

But I will work on the idea, tnx.

[ivan.popelyshev]

I just told you to calculate scale and position based on something else that you store, 3d position. Please think some time on it before asking more questions, imagine that we have veeeeery slow internet.

When you give me enough good questions, I'll reply with more answers. Lets batch our discussion like pixi does with sprites

[trsh]

17 minutes ago, ivan.popelyshev said:

I just told you to calculate scale and position based on something else that you store, 3d position. Please think some time on it before asking more questions, imagine that we have veeeeery slow internet.

When you give me enough good questions, I'll reply with more answers. Lets batch our discussion like pixi does with sprites

Deal! Actually I figure it out and my demo will be ready soon. Tank you.

[ivan.popelyshev]

> Deal! Actually I figure it out and my demo will be ready soon. 

I'm happy when people try simple solutions and math instead of using multiple libs they dont actually need

> Tank you

Sorry for chaning

 

[trsh]

@ivan.popelyshev

https://jsfiddle.net/obmjcnv7/13/

In the line 56 (console.log(sprites.children.length);) I can see abnormal numbers of particles and that's why they disapear sometimes not in right time.

I don't understand is it a bug of PIXI, or in my logic, as when I read from code, as one particle is removed, only then one is added. So it should always stay constant. :/

 

[ivan.popelyshev]

Look at params for ParticleContainer constructor http://pixijs.download/dev/docs/PIXI.particles.ParticleContainer.html , it has maxSize and autoResize . Either set 5000 maxSize, either enable autoResize.

As for abnormal, you use "maggots.splice(i, 1);" while "i" is going upwards and after you remove first time,  maggots becames maggots[i-1]. But if you go down from "length-1" to "0", that'll work better! 

That's the code I commonly use for such cases, it is super-efficient:

let j = 0;
for (let i=0;i<children.length;i++) {
    let child = children[i];
    if (child.dead) {
       //somehow handel the death - fire an event or i dont know what do you want
       // its what we do instead of removeChild
       // this line here is only to make us feel better
        child.parent = null;
    }  else 
    {
      //oh its alive. Move it to alive, in the beginning of array
      // if no one was dead, j=i and it assigns itself, nothing bad ;)
       children[j++] = child;
    }
}
children.length = j;

Take paper and pencil and look at your algo, at fixed version (with backwards "for i") , and at my algorithm. Mine doesnt even require to clone the array.
I love algorithms!

[trsh]

@ivan.popelyshev

But isn't it a bug of pixi? The maggots array has nothing to do with particles container children. It a separate mapper. The order doesn't count there. When one is removed on is added to particle container and something goe's wrong there.

[trsh]

Here is a test case https://jsfiddle.net/obmjcnv7/15/

[ivan.popelyshev]

Yeah, and "for (var i = maggotsClone.length-1; i >=0; i--) {" removes the error, like i said. Also, you actually dont need clone that way.

Its a coding problem, not pixi one.

Take pen and paper, write all three algorithms down and try to emulate it manually.

I also recommend this book: https://www.amazon.com/Introduction-Algorithms-3rd-MIT-Press/dp/0262033844 , its easy to find free copy in internets. Be grateful I dont give advice to read Knuth

[trsh]

31 minutes ago, ivan.popelyshev said:

Yeah, and "for (var i = maggotsClone.length-1; i >=0; i--) {" removes the error, like i said. Also, you actually dont need clone that way.

Its a coding problem, not pixi one.

Take pen and paper, write all three algorithms down and try to emulate it manually.

I also recommend this book: https://www.amazon.com/Introduction-Algorithms-3rd-MIT-Press/dp/0262033844 , its easy to find free copy in internets. Be grateful I dont give advice to read Knuth

Yeah, it does fix the error. I still don't understand the problem with array (it's just array with references to objects) and how is that connected with particles container, but I'll try  later, going line by line with smaller amounts. And will change the logic, so no stars out of screen are not removed, but moved to the beginning again. Thanks again!

[trsh]

No!!!! I got it now!

[trsh]

@ivan.popelyshev

Last question, I promise :). As I use simple random() to place the particles, sometimes the coordinates match so that 2-3 rabbits are in same place, what looks bad. Any advice for that? Some link, article, algorithm?

[ivan.popelyshev]

Generate 2-5 positions instead of one, take the one that is farthest away from other bunnies.

Btw, if you want to use tint that make objects lighter and not darker like pixi default, try https://github.com/gameofbombs/pixi-heaven/ , just include "bin/pixi-heaven.js" and use "sprite.color.setDark".

[trsh]

2 hours ago, ivan.popelyshev said:

Generate 2-5 positions instead of one, take the one that is farthest away from other bunnies.

Btw, if you want to use tint that make objects lighter and not darker like pixi default, try https://github.com/gameofbombs/pixi-heaven/ , just include "bin/pixi-heaven.js" and use "sprite.color.setDark".

No thanks, no Tint. Bunnies will be replaced with star textures. I want it as simple as possible. 

[ivan.popelyshev]

Good. Stars with texture from the same atlas will be the best solution.