I’m seeing a couple problems with GradientMaterial that look like bugs. Here’s a playground showing some objects with GradientMaterial on them:
First, notice that fading from White to Black looks correct, but fading from Red to Blue produces black in the center. My experience with graphic design apps like Photoshop is that you should see purple in between, unless this material is using some unconventional method for blending colors.
Here’s what Photoshop produced:
Second, I’m confused why the large sphere behind the small ones (it’s 1024 units in diameter) looks different than the small ones. I expect that the material would applied in UV space and that the gradient would cover the same relative area of the sphere, regardless of size. But since it doesn’t, it means that I have to produce a unique GradientMaterial for every sphere in my game, and my game requires that I have hundreds of sizes of spheres.
Can we confirm that these are bugs, or am I not understanding how this Material should work?
Hello 
It’s not exactly black, it’s low red, low blue, black green
To me the “normal” behavior is the one from Babylon. Here in your screenshot from Photoshop, there is some green everywhere, which is not a gradient from (1,0,0) to (0,0,1) where the center green (0) should anyway stay at zero. It’s a gradient applied on a white canvas with alpha.
About the size issue : I don’t know if it’s a bug. It appears that the scale factor of the GradientMaterial (by default 1) is in the local coordinates of the mesh. When you create your sphere with the MeshBuilder.CreateSphere giving 1024 as diameter, you end up with a sphere at scale 1,1,1 with indeed vertices at 1024
Another way would be to create your sphere with a diameter of 1 and scale it up to 1024 :
That way the inner local vertices are still at 1 and not 1024 : Playground
Maybe indeed it would be nice to have a parameter to say either or not the gradient of the GradientMaterial is computed in local or global space
++
Tricotou
1 Like
I think that’s what scale / offset are used for. For the big sphere, you should set scale to 1/1024 to get the expected result.
re gradient: I can only help indirectly. But here is where the gradient is created: link
This is stored as a text string here: BABYLON.ShaderStore.ShadersStore["gradientPixelShader"], you can just override: https://playground.babylonjs.com/#2IFRKC#779
Getting the correct gradient algo in there is the difficult part 
It would work for sure, but I advised to play with sphere scaling since I think @HowdyLuda is looking for a solution which works with one single GradientMaterial
2 Likes
