Setting a gradient background

[Rajkumar]

Hi All,

I would like to have a  gradient background in my application.

For example: https://github.com/mattdesl/gl-vignette-background

What is the best way to achieve this in babylon js?

Regards

Rajkumar

[Wingnut]

Hi again @Rajkumar, how ya been?  I hope well.  After a quick forum search for 'gradient', I found that our local hero @Temechon introduced us to a gradient shader, and used it in a few demos...  http://www.html5gamedevs.com/topic/8160-gradient-shader

In some of the demos in that thread, the URL to the cloud picture ( http://www.babylonjs.com/Scenes/Clouds/cloud.png )... is failing to load-in.  You might see checkerboard clouds instead.  Not sure why that is happening, and it's not pertinent to the issue.

Another way to background-up, is the use of a background "layer", and texture it with a gradient image. 

http://www.babylonjs-playground.com/#27QHMX#1

Lines 206-208 do the dirty deed... on this exquisite Spherical Harmonics demo by @jerome. 

We may see yet another layering system soon, in the arrival of @Nockawa's new Canvas2D system.  Likely, it has the power to use JS to generate dynamic gradients without shaders, as well as having the power to do TONS more.  But I think it is a GPU-based system, which makes it... umm... shader-related?  I dunno.  I haven't had the enjoyment of experimenting with it, much, yet.

Hope this helps.  Be well!

 

[Rajkumar]

Hi @Wingnut,

I am fine and thank you for the quick reply.  Use of layer worked well for me.

Regards

Rajkumar