Shader and Filter

[Bouh]

Hello

 

I use PIXI.Shader and PIXI.Filter and pixi v4.8.6 (i know it's old i can't update for now)

Thus, i try to make a color transparent, my shader works with PIXI.Filter, but not with PIXI.Shader.
I think i've miss something in PIXI.Shader but i don't know what.

I hope make this purple transparent with PIXI.Shader instead PIXI.Filter, because shader have better performance, and i use shader already with other thing, so i avoid to create conflict.

Shader: sandbox code (don't works)
Filter: sandbox code (works)

 

For curious i use it for GDevelop5, we use PixiJS, and we have also bounty $115 on an issue with pixi (font text).
I let you take a look on gdevelop repo.

Thank you for reading me.

 

[ivan.popelyshev]

I'm sorry, but that's not how shader works in v4. 

You need custom renderer for it: https://github.com/pixijs/pixi-plugin-example/blob/master/src/PictureRenderer.js , this repo was created to help with that task.

> because shader have better performance

yes, there's no extra framebuffer for it.

> we use PixiJS
Guys, you really should move to v5 already. Really. Better to place bounty on converting gdevelop than fixing stuff for older versions of pixi. There are only a few people who can help you with v4.

 

[4ian]

Quote

Guys, you really should move to v5 already. Really. Better to place bounty on converting gdevelop than fixing stuff for older versions of pixi. There are only a few people who can help you with v4.

We need to do it at some point yes, I've made an issue to track this effort: https://github.com/4ian/GDevelop/issues/1605 :) We'll surely need some help to identify the dependencies to upgrade and what can happen for some that we were thinking of adding like pixi-lights

[ivan.popelyshev]

5 minutes ago, 4ian said:

We need to do it at some point yes, I've made an issue to track this effort: https://github.com/4ian/GDevelop/issues/1605 We'll surely need some help to identify the dependencies to upgrade and what can happen for some that we were thinking of adding like pixi-lights

pixi-lights is no-go , because its experimental and you have to try simple lighting lke https://pixijs.io/examples/#/plugin-layers/lighting.js first. There are only four people who understand how lights work. Even if I port it to v5 - it'll take some time to produce good enough documentation and someone from your side will have to know how it works

First - simple lighting with ADD and MULTIPLY layers, maybe with OVERLAY . then advanced stuff like normal maps which are used in lights.

[4ian]

Thanks for the answer and the advices 
 

17 hours ago, ivan.popelyshev said:

it'll take some time to produce good enough documentation and someone from your side will have to know how it works

Sure! There are Google Summer of Code potential students interested in this, that's why I'm trying to see what would be needed.

 

17 hours ago, ivan.popelyshev said:

then advanced stuff like normal maps which are used in lights

Do you have any recommendation for handling this in Pixi?

[ivan.popelyshev]

2 hours ago, 4ian said:

Do you have any recommendation for handling this in Pixi?

You can make any level of lighting through using many sprites on separate layers with different blendmodes and combining that layers through shaders or filters. For example, you can multiply by one light layer first ,then add second layer.

The thing is, there're no great articles about that. All who learned about layering did it by reading how games were made in other engines, like gamemaker.

To ease the pain, I made a plugin pixi-layers that allows to

1. render element in another container (not its parent)

2. render layers to a texture automatically, then pass that texture to filter or sprite+blendMode.

No other renderer has those features. They have display_lists which are more limited.

Requirements for work with lights:

0. just add pixi-lights to project <---- NO. NO. NO.

1. you have to be proficient in shaders/filters

2. you have to know how to use premultiplied alpha and custom blendmodes, how to enter formulas from https://www.w3.org/TR/compositing-1/#blendingseparable

3. need experience in stage tricks: basic case when your character has shadow and hpbar and they have to be rendered at the same time as other shadows/hpbars. How do you solve it?

then you can safely use normal maps in your app because its just another trick you can use with other things you know  

If you dont have those qualifications, any modification of basic example will become a nightmare.

That's not because PixiJS just cant go in lights - that's because bringing lighting for users less than expert level  requires HUGE amount of work hours of people who 1. know the stuff 2. can write articles.

What you see - lighting in pixi demo - not a heavily modified fork, but just in vanilla pixi with a plugin - its a miracle that was achieved by working my ass off.

Usually those things require total rewrite of renderer APIs,  and original pixi-lights for v3 overrode many things in pixi so it wasnt actually usable for more than demos.

Edited April 1, 2020 by ivan.popelyshev

[ivan.popelyshev]

Demo

 

[ivan.popelyshev]

My slides for talk on russian, but look at  see pictures:

https://docs.google.com/presentation/d/1wX-sXRh8qkmadwMPb1noFpsVAU5jQyg9DBrwcSOYlXA/edit#slide=id.g70b2e5f95b_1_12 

Game is not mine