Pixi v4 and webgl code effect

[mircodj]

Hi,

I wold like to implements one effect that I found in codepen: this is the link of the effects:

codepen

My question is : Is there one way to implements it in pixi.js. I'm new with this framwork, i tried to search somethink on google but I don't found nothink.

 

Thanks in advanced

[Exca]

There are at least few options on how to do that:

- Create a similar effect using particleContainer.
- Create a renderer plugin.
- Render the effect to offscreen texture using renderer.gl context. Then use a sprite with that texture.

Most likely there are other ways how to achieve that effect also.

[ivan.popelyshev]

That demo uses gl.LINES mode, and the only renderer in pixi that can do that is Graphics, however graphics uses static buffer, and there is no dynamic option. You need custom renderer plugin for that thing.

[mircodj]

1 hour ago, ivan.popelyshev said:

That demo uses gl.LINES mode, and the only renderer in pixi that can do that is Graphics, however graphics uses static buffer, and there is no dynamic option. You need custom renderer plugin for that thing.

Ok, thanks a lot for your help but please you can give me a link where I can found an example? I dont know from where I can start...

Thanks in andavanced

 

 

1 hour ago, Exca said:

There are at least few options on how to do that:

- Create a similar effect using particleContainer.
- Create a renderer plugin.
- Render the effect to offscreen texture using renderer.gl context. Then use a sprite with that texture.

Most likely there are other ways how to achieve that effect also.

Render the effect to offscreen texture using renderer.gl context. Then use a sprite with that texture.

I tried yesterday this approach based on this sample three.js & pixi but the effect render was not showed

 

[ivan.popelyshev]

This thread might help you: https://github.com/pixijs/pixi.js/issues/4625

Start from https://github.com/pixijs/pixi-plugin-example/ , then make your way into pixi v4 internals https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/WebGLRenderer.js, and that one dependency: https://github.com/pixijs/pixi-gl-core

Yes, it is difficult. Custom renderers are welcome in pixi only if creator knows both how low-level webgl works and the pixi architecture.