How to prevent self-transparent twice

Questions
1

I am making a strategy game and trying to implement a Fog of War with this example: https://medium.com/@travnick/fog-of-war-282c8335a355

As it is a 3D terrain with some mountain, I implement as following:

  1. Create a THREE.PlaneBufferGeometry
  2. Adjust the height for each vertex on the Geo for the terrain height
  3. Use alphaMap to display the fog

which is fine for no-transparency, and got this

002
0021049×730 219 KB

However, when I try to create the semi-transparent fog, the self-transparency part got darken.

001
0011235×735 893 KB

In the orange-circle, the fog’s color is double(front and back-side), and it looks darken. Even worse, the yellow-circle seems tripled (front, back, front).

Is there any way to prevent the self-transparency, let’s say just render the closer transparent part. Or, is there other suggestion for implementing a Fog of War?

Thank you so much.

2

I add a simple code to demonstrate my question:
How can make the overlap-square have the same color as it surrounding?

https://jsfiddle.net/samuelwong613/c82xvqnf/43/