Surface color based on normals not working

Questions
1

Hi everyone,
I am working on terrain created with topographic points but I noticed that it doesn’t change color along with normals.
I should obtain something like this:
https://playground.babylonjs.com/#IFYDRS#0
But I have this instead:

[Album] Normals checked

I used direct, hemisphere and pointlight illumination with no success.
What am I missing?
2

Impossible to tell from an image. Where does your code and the PG code differ? Can you put a simplified version of your code into a PG?

3

Hi JohnK. It is complicated, because I get my data from an API.

I don’t do anything special, really.
I should have the effect just applying a standard material, If I am right.

4

The main difference is the scale of the terrain.

   var light = new BABYLON.HemisphericLight("HemiLight", new BABYLON.Vector3(0, 1, 0), scene);
   light.intensity = 1;
   var dirlight = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(0, -1, 10), scene);
   dirlight.intensity=1;

   var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: Dist, height: Dist, subdivisionsX: StripWidth, subdivisionsY: StripLength,updatable:true}, scene);
   var myMaterial = new BABYLON.StandardMaterial("texture1", scene);
   ground.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
   myMaterial.diffuseTexture = new BABYLON.Texture("texture.png", scene);
   myMaterial.diffuseTexture.uScale = StripWidth;
   myMaterial.diffuseTexture.vScale = StripLength;
   myMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
   ground.material = myMaterial;
5

You can try to lower the light intensities and see if that helps.

If not, if you can’t provide a PG, maybe having your code running somewhere (github for eg) is possible?

6

Thank Evgeni. I’ll try to lower the light.
The project is a little bit complex.
I have a webpage passing a url string with NSEW coordinates of the portion of terrain to a server I built with nodejs.
The server does the actual request to Open Topography API getting back a Geotiff.
Then, the server executes the analysis of the Geotiff extracting elevation data and serves it back to the webpage.
At the moment the project is local and I don’t see an easy way to put it in a PG.
Maybe I can try to save data of a relative small portion of terrain and try to put it in a PG.

7

Hi everybody,
I finally managed to put the terrain on PG.
https://playground.babylonjs.com/#L8PI1V
Adding the shadow I found other strange behaviors, especially with BlurExponentialShadowMap on.
I didn’t find yet a way to light up the terrain in a proper way.

8

You copy the vertex positions of the ground to another object (plane), but you don’t regenerate the normals of this object afterward, so they are all something like (0,1,0). Call createNormals to recreate the normals.

Regarding the shadows, it’s always tough to setup them for a terrain that can cast shadows on itself: you need to tweak the bias / normal bias values. Also, a Cascaded Shadow Generator can help, because it’s a big terrain you have.

https://playground.babylonjs.com/#L8PI1V#1

9

Thank you, Evgeni.
The regeneration of the normals works amazingly in the PG and now it works also locally.
This was the main goal I wanted to achieve.