CODEWITHSUNDEEP
three.js
Mat
Mat

Reputation: 961

Tiled Terrain Normals

I am trying to create a terrain solution in ThreeJS and I'm running into some trouble with the generation of the normals. I am approaching the problem by creating a number of mesh objects using the THREE.PlaneGeometry class. Once all of the tiles have been created I go through each and set the UV's so that each tile represents a part of the whole. I also generate a height value of the vertex Y positions to create some hills. I then call the geometry functions 

geometry.computeFaceNormals(); 
geometry.computeVertexNormals();

This is just so that I have some default face and vertex normals for each tile.

I then go through each tile and try to average out the normals on each corner.

The problem is (I think) with the normals, but I don't really know what to call this problem. Each of the normals on the plane's corners point in the same direction as the face when created. This makes the terrain look like a flat shaded object. To prevent this I thought perhaps what I needed to do was make sure each vertext normal (each corner) had the same averaged normal as its immediate neighbours normals. I.E each corner of each tile has the same normal as all the immediate normals around it from the adjacent planes.

figure A enter image description here

Here I am visualising each of the 4 normals on the mesh. You can see that at each corner the normals are the same (On top of eachother)

figure B enter image description here

EDIT figure C enter image description here

EDIT Figure D enter image description here

Except even when the verts all share the same normals it still comes up all blocky <:/

I don't know how to do this... I think my understanding of what needs to be done is incorrect...?

Any help would be greatly appreciated.

Upvotes: 2

Views: 1724

Answers (2)

gaitat
gaitat

Reputation: 12642

Instead of averaging at each vertex / corner the neighborhood normals you should average the four normals that each vertex has (4 tiles meet at each vertex).

Upvotes: 1

theodox
theodox

Reputation: 12218

You're basically right about what should happen. The shading you're getting is not consistent with continuous normals. If each all the vertex-faces at a given location have the same normal you should not see the clear shading discontinuities in your second image. However the image doesn't look like simple face normals either, at least not to my eye.

A couple of things to look at:

1) I note that your quads themselves are not planar. Is it possible your algorithm is assuming that they are? the non-planar quad meshes don't have real 'face normal' to use as a base.

2) Are your normalized normalized after you average them? That is, do they have a vector length of 1?

3) Are you confident that the normal averaging code is actually using the correct normals to average? The shading in this does not look like completely flat shaded image where each vertex-face normal in a quad is the same - if that were the case you'd get consistent shading across each quad although the quads would not be continuous. This it possible your original vertex-face normals are not in fact lined up with the face normals?

4) Try turning off the bump maps to debug. Depending on how the bump is being done in your shader you may have incorrect binormals/bitangents rather than bad vert normals.

Upvotes: 2

Related Questions