Use GPUComputationRenderer texture for dynamic InstancedMesh objects positions

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 :slight_smile:

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.

2 Likes