Get this cool effect with shader?

Hi,

Actually, my game looks like this :

I would like my trees to have this shader effect with a gradient as can be seen on the main page of three.js with the example : “Under neon lights”
I have read the source code but it’s too difficult for me :frowning:

So, I have try a basic shader effect with this codepen :

But my problem is that the material shader seems to receive no shadows. How do I set this up and by the way improve the effect of my shader to look more like the example of “Under neon lights?”

Hi!
Seems, you’re looking for something like this: Cheap misty effect

1 Like

Thanks prisoner for this effect. In fact my problem is how to set up shadows with shaders? As you see my cubes dont received shadows. How do you do for that with shaders?

You can try using one of the most under-appreciated utils ever created that’ll allow you to take one of the built-in materials, and modify them (repo.)

Even simple materials are still quite complex, and if you’d like to manually implement effects like shadows, it’d take a bit of time - or at least a lot of reading through shader chunks (:point_left: this is one of the chunks you’d have to use to handle shadows manually.)

Modifying the build-in materials’ shaders is a bit less troublesome, as you can just override the gl_FragColor with your color calculation.

1 Like

I’m just using .onBeforeCompile() on built-in materials, changing the parts I need and keeping the rest of functionality intact.

Thanks both.

I’m a newbie and i don’t success to implement your suggestions.

I have try with this material2 =>

  1. i don’t success to have my gradient color
  2. My shadow are not visible on the cube with material2 (normally the cube above should cast shadows on).

Could you help me to fix that ?

For material2, where and how do you process color1 and color2 uniforms in shaders?

Hi Prisoner849,

Sorry but i don’t understand what you mean…

Could you give me an example code with gradient color and cast shadows because i’m completely loss ?

Here you are: https://jsfiddle.net/prisoner849/gLzhow5u/

3 Likes

Waouw thanks a lot…i read and re-read your code…it’s still difficult for me but i begin to understand it.

1 Like

You’re welcome :beers:
I hope it helps :slight_smile: