Can't see the Gradient

Hi !

I can’t see the gradient, it should be red to blue…
https://playground.babylonjs.com/#ZEYPU8#6

Thanks

This is because the gradient is based on the vertex position on y which is constant in your case:

Also you need a light on the bottom to see the bottom color:

https://playground.babylonjs.com/#ZEYPU8#9

Never played with gradients before. So I can show you what is happening but not why and do not know whether this is intended behavior or not. It is to do with your offset value and seems to be applied to a world position rather than the local position of the mesh you apply it to https://playground.babylonjs.com/#ZEYPU8#7

Also BABYLON.Color3.Red() and BABYLON.Color3.Blue() are static and do not need the new. That is you are using an existing object not creating a new one.

This is not true https://playground.babylonjs.com/#ZEYPU8#10

@sebavan is there a method, based perhaps on the bounding box of the mesh, of determining the value of the offset that separates the gradient at the center?

bb.min.y - ((bb.max.y - bb.max) / 2)

Basically min - midY should do ??? like in our case 0 - 6 -> -6 offset

1 Like

Thanks for your answers but the result is not good even with “new”, there is still a “dark side”
https://playground.babylonjs.com/#ZEYPU8#12

it should be like this
https://www.babylonjs-playground.com/#2IFRKC#66
Why it works here ?

It is something to do with

Increasing the size of the plane in https://www.babylonjs-playground.com/#2IFRKC#67 gives the same banding effect. So it appears necessary to reduce the size of your mesh. To ensure the scaling is done before the gradient is applied then this transformation has to be baked into the mesh.

https://playground.babylonjs.com/#ZEYPU8#13

The actual whys and wherefores I know not.

Did not expect this to make any difference to your gradient problem - just pointing out that new was not required with BABYLON.Color3.Red() etc