Space warp speed effect

[palanolho]

Hi everyone,

 

I looked around but was not able to find anything so I was wondering if anyone knows an "easy" way to make a space warp speed effect with PixiJS, similar to this: https://fdossena.com/?p=warpspeed/i.frag 

Many thanks in advance

[Exca]

The link doesn't open for me, but if you mean something like this

then yeah, such an effect can be made with multiple options.

One option would be to make a shader that generates the starfield.

Another one would be to draw multiple sprites and then scale & rotate them to generate the effect.

 

Shader option would require (in v4) either doing it as a filter or a custom renderer plugin.

Sprite option is easier to do, but it might require some additional filtering depending on what style you're looking for.

[palanolho]

@Exca Do you have an example I could have a look? I never did anything with shaders :S

[Exca]

Here's one shader I found that does it. To get that to work in pixi it would need to be translated into webgl1 shader and changed from shadertoy specific functions to more generic glsl.

https://www.shadertoy.com/view/Xdl3D2

I might be able to make a pixi example during the evening today.

[Exca]

https://pixijs.io/examples/#/demos/star-warp-sprites.js

Here's an example made with sprites.

[palanolho]

Many thanks @esca. You even added it to the pixi demos

The ease method that you mention that should be replaced with something "proper" could use something like this? https://www.createjs.com/docs/tweenjs/classes/Ease.html

[Exca]

Yep, for example using tweenjs it would be something like this: Tween.get(starwarp).to({speed:1}, 1000); and then just remove that speed += -line.

[Edit] Assuming starwarp is an object/classlike structure containing the logic.