Help with SHADER

[Digital Ronin]

Hello guys! I would like if someone could help me, I'm even willing to pay for such help cos I'm desperate to find solution to this. I'm about create cool website but I'm still learning PIXI in the process. Question is: Can I use shaders as a mask? I alredy have one foreground image and background image, so two containers with different background images, I already created circle mask that follow mouse movement but I want something much cooler and advanced. I would like to use this shader https://www.shadertoy.com/view/MlcGWH as a mask on mouse movement. I know it is not simple task but I would really appreciate help and If anyone able to save me from this, please write me. Thanks in advance.

[ivan.popelyshev]

Hi !

Yes, people ported shadertoy stuff with buffers, you can ask this guy:

 

[Digital Ronin]

37 minutes ago, ivan.popelyshev said:

Hi !

Yes, people ported shadertoy stuff with buffers, you can ask this guy:

 

Thanks. I already asked but he didn't respond. So I hope that I could find some other nice guy to help with

[ivan.popelyshev]

Well you can look at original and how he converted it, and guess how to make it yourself. Just read that topic. I'm personally is very busy, cant code pixi, can only suggest what to do

[Digital Ronin]

11 hours ago, ivan.popelyshev said:

Well you can look at original and how he converted it, and guess how to make it yourself. Just read that topic. I'm personally is very busy, cant code pixi, can only suggest what to do

Thank you for always responding and helping this community, I didn't expect from you to do it, just posted here in hope someone else could be interested. I tried to use his code but without success, I have to try again.

[Digital Ronin]

13 hours ago, ivan.popelyshev said:

Hi !

Yes, people ported shadertoy stuff with buffers, you can ask this guy:

 

Can you give me one advice, btw. I looked for his example and noticed that he is creating RenderTexture from Buffer and he is using 2 RenderTextures one for Buffer one for Image, since that shader has its Buffer A and Image on Shader Toy.

Shader that I want to use has Buffer A, Buffer B and Image, should I than create 3 RenderTextures?

One more question, code he use differs from one from Shader toy just with this two lines for each Buffer he use. Since example I want to use also have iChannel1; I wounder, how should I define them?

uniform vec2 iResolution;

uniform sampler2D iChannel0;

 

[Exca]

You can either do multiple rendertextures or you can create two and recycle them. (or 3 if you need 2 input + 1 output)

Also creating new uniforms is just as simple as writing them. The iChannel0-n is just how shadertoy gives access to them. So writing something like `uniforma sampler2D noise;` for example would be perfectly ok and then you could just pass an texture to that uniform on js side. I had two examples made about shadertoy & pixi (one with mesh and other with filter). Looks like that's still in pr. Might update it to include multiple buffering during this week if I manage to find extra time.

[Digital Ronin]

6 minutes ago, Exca said:

You can either do multiple rendertextures or you can create two and recycle them. (or 3 if you need 2 input + 1 output)

Also creating new uniforms is just as simple as writing them. The iChannel0-n is just how shadertoy gives access to them. So writing something like `uniforma sampler2D noise;` for example would be perfectly ok and then you could just pass an texture to that uniform on js side. I had two examples made about shadertoy & pixi (one with mesh and other with filter). Looks like that's still in pr. Might update it to include multiple buffering during this week if I manage to find extra time.

Thanks a lot. I hope you will be able to upload that and I'm sure a lot of ppl here would have use from that, since there is no much materials how to use ShaderToy with PIXI. I'm giving my best to combine code samples and advices you guys give me to make it work, since I don't have knowledge and experience with Shaders i rely only on pure instinct and luck, so any information and example are more than valuable. 

[ivan.popelyshev]

> there is no much materials how to use ShaderToy with PIXI

We start expansion in that territory not long ago  When people will be able to convert things by instinct and not by knowing everything there - that'll mean we succeeded. 

Writing docs takes time and front is very big.

[Exca]

On 2/24/2020 at 11:43 AM, Digital Ronin said:

Thanks a lot. I hope you will be able to upload that and I'm sure a lot of ppl here would have use from that, since there is no much materials how to use ShaderToy with PIXI. I'm giving my best to combine code samples and advices you guys give me to make it work, since I don't have knowledge and experience with Shaders i rely only on pure instinct and luck, so any information and example are more than valuable. 

Made a pr of an example that uses multiple shaders and combines output from all of those into one. Kept it really simple, for production use you would most likely want to use a texturepool with just enough of textures to keep everything memory efficient.

[ivan.popelyshev]

@Digital Ronin OK, its here: https://pixijs.io/examples/#/mesh-and-shaders/Multipass-shader-generated-mesh.js

@Exca please fix https://github.com/pixijs/examples/pull/79 : 

1. you passed sprite as a uniform , got error in texture bind in pixijs dev version , because we changed it. I told @Mat Groves that one particular change will break all fault filters.

2. you dont use uSampler in that filter, so please use mesh-shader technique instead.

oh.. actually, is that the same shader? ITs just i dont know what to do with that example, please clarify

Edited February 28, 2020 by ivan.popelyshev

[Exca]

Ah, it was just a version using filter of the same thingie. Basically for situations where you would want to do stuff to your scene instead of a custom shader. Should maybe change the shader to reflect that more. I'll check it tomorrow.

[Digital Ronin]

I just saw response. Awesome! Thanks a lot, I will try to get as much as possible out of it.

[Digital Ronin]

On 2/24/2020 at 5:38 PM, ivan.popelyshev said:

> there is no much materials how to use ShaderToy with PIXI

We start expansion in that territory not long ago  When people will be able to convert things by instinct and not by knowing everything there - that'll mean we succeeded. 

Writing docs takes time and front is very big.

Hey Ivan. I think you succeeded with that. To do this you just need a tiny bit knowledge about Shaders and one example (which one you guys did) and you are ready to go. I as a beginner succeeded to implement shader from ShaderToy to PIXI, so that's prove something. 

I have one more question and it is related to the specific example of shader i linked up above. Now when I managed to use Shader in PIXI, I'm stuck up with idea how to make mask from it. I used before PIXI.Graphics to create mask. I have two containers with content's and my idea was to use that cool Shader mouse movement animation to reveal content of background container.  So I would appreciate any advice with logic behind that.

I don't want to bore you to death guys, but I don't have other place to go and ask for questions. Big thanks for everything!

[Exca]

Masks use a stencil to mask things out, so basic mask wont work with that solution as the whole shader area is a single texture.

You could do the masking in the shader itself by rendering the area below to a rendertexture and passing it to shader as uniform and then using the color from that texture when masking is ok.

Or you could create a filter for that (or one might exist already?) that takes bitmap as input and then calculates what areas should show from default sampler.

[ivan.popelyshev]

2 hours ago, Digital Ronin said:

Hey Ivan. I think you succeeded with that. To do this you just need a tiny bit knowledge about Shaders and one example (which one you guys did) and you are ready to go. I as a beginner succeeded to implement shader from ShaderToy to PIXI, so that's prove something. 

I have one more question and it is related to the specific example of shader i linked up above. Now when I managed to use Shader in PIXI, I'm stuck up with idea how to make mask from it. I used before PIXI.Graphics to create mask. I have two containers with content's and my idea was to use that cool Shader mouse movement animation to reveal content of background container.  So I would appreciate any advice with logic behind that.

That's great idea! I have video on russian where i explain how to convert ANY filter to a mask-filter or lighting filter. I will do it in english later. Its material for advanced users of course, and it requires pixi-layers a bit

The app itself is here: https://codesandbox.io/s/tender-franklin-iycmu

Edited March 16, 2020 by ivan.popelyshev

[Digital Ronin]

6 hours ago, Exca said:

Masks use a stencil to mask things out, so basic mask wont work with that solution as the whole shader area is a single texture.

You could do the masking in the shader itself by rendering the area below to a rendertexture and passing it to shader as uniform and then using the color from that texture when masking is ok.

Or you could create a filter for that (or one might exist already?) that takes bitmap as input and then calculates what areas should show from default sampler.

Thanks a lot guys. You don't have idea how much you helped me already and how much I improved myself. I needed direction, not to wonder around and some examples if that's possible. But you was always there when I needed it. Hope I will become advanced enough to help others beginners in decent time.

[Digital Ronin]

5 hours ago, ivan.popelyshev said:

That's great idea! I have video on russian where i explain how to convert ANY filter to a mask-filter or lighting filter. I will do it in english later. Its material for advanced users of course, and it requires pixi-layers a bit

The app itself is here: https://codesandbox.io/s/tender-franklin-iycmu

Ivan, can you point me to that video on Russian? I started learning it, was couple of times to Russia and I understand most of the things, since I'm Serbian and those languages are similar.. ?

[ivan.popelyshev]

No guarantee that you'll understand that, sometimes i speak too fast  www.youtube.com/watch?v=ucHAZsxENzU

[Digital Ronin]

4 minutes ago, ivan.popelyshev said:

No guarantee that you'll understand that, sometimes i speak too fast  www.youtube.com/watch?v=ucHAZsxENzU

I will give my best  I can always ask girlfriend to help with.... ? More and more people get involved in this project. Hope I can share with you guys how that will look at the end. It is not game, just website, but I wanted to approach it differently and challenge myself, since it is portfolio. Thanks again ?

[Digital Ronin]

Hey guys. I made some progress, I added shader to application and you can take a look like I promised: digitalronin.design

Website is still in progress but this thing is done.  I have one new problem now. How can I preserve aspect ratio of textures? Also I would appreciate any suggestion about the code, you can take a look here:
https://www.pixiplayground.com/#/edit/9oeBm0tsL1ZhOSmMAhgHP