How to apply shader to background?

As I known, shader code can apply in shaderMaterial, particleSystem and post-process.
Now, I find good effect in shaderToy, and I want to display it in the background of my scene, just like layer. Can I use shader on a layer?

1 Like

Hello!

you can do it with postprocess applied on a first scene (and then render your current scene in a second one)

2 Likes

bare ex.

ref doc

2 Likes

@Deltakosh @ycw
Why has no effect for time parameter in post-process? PG
Using shaderMaterial is effective! PG

I found the above PG(10 fps) is slower than shaderToy(50 fps) by using similar shader code. Is there anything that can be optimized?

no effect:
must list all uniforms in used in PostProcess constructor
https://www.babylonjs-playground.com/#1XQBR6#3 line#261


slow:
try updating uniforms on material bind instead
https://www.babylonjs-playground.com/#1XQBR6#4 line#281

2 Likes

thank you! :grin: perfect!

Sorry, I want to know what is the difference between the third and fourth parameters of postProcess?
I put refSampler and textureSampler in the uniform parameters, this is correct demo line#180. But I move refSampler and textureSampler to the samplers parameters, The effect disappear in demoline#185.
According to document, texture should to be put in the samplers parameters, but it didn’t seem to work. Did I do it wrong?

textureSampler is reserved in postprocess shader.
Use other idents for your own samplers.

https://www.babylonjs-playground.com/#1XQBR6#7 proved

  1. wrong scene is provided for noise texture … should be sceneBG, not scene.
  2. reserved sampler ident textureSampler is used … renamed them to myTextureSampler
  3. put samplers in 4th param … i.e. ["myTextureSampler", "refSampler"]

ta-da … https://www.babylonjs-playground.com/#1XQBR6#8

1 Like

:scream: Sorry! This is my fault, thank you!!