I think I managed to solve the problem to apply the heightMap to non square grids.
If you notice something strange please let me know!
I must credit again @prisoner849 , this post by him, Video Texture - how to keep video aspect in new material - #4 by prisoner849, gave me the insight to solve it.
I created a new uniform called ‘aspectRatio’, so if the grid is for example 30 columns by 50 rows then aspectRatio = 30/50;
Also, prior to this I had in the vertex shaders of the mesh material and the customdepthMaterial this:
float h = texture2D(heightMap, instUV).r;
And I changed it to this:
vec2 tInstUV = instUV;
if(aspectRatio <= 1.0){
tInstUV.x *= aspectRatio;
tInstUV.x -= (0.5 - (1. / aspectRatio) * 0.5) * aspectRatio;
}else{
tInstUV.y /= aspectRatio;
tInstUV.y -= (0.5 - (1. * aspectRatio) * 0.5) / aspectRatio;
}
//float h = texture2D(heightMap, tInstUV).r;
That seems to work in the tests I made so far (until I discover an ugly bug…), so I flag this problem SOLVED
Thanks a lot to everybody, I will share a link to a live demo when I’m finished thinkering with the interaction, raycasting, viewport responsiveness, etc.
I also share some images for reference of this last solved issue:
That is what happened before, notice that the height map seems stretched:
Even worse in horizontal viewport in my ultrawide monitor:
With the modifications I mentioned before now we get this:
And this:
The changes make the effect to ‘crop’ the height map texture, somewhat like a CSS background-size: cover…
In very extreme aspect ratios you can notice the circle displacementMap I use to debug being cropped a lot but think I will use the water GPUComputation shader texture I mentioned previously, so I need that the texture maps as best as possible with the instances, even if the texture is ‘cropped’ in x or y axis.