Bouh

Shader and Filter

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.