Update displacement map

Questions
,
1

Hi,

I have a scene with a ground featuring mountains and such.
To outline the elevation, I used a copy of the mesh, translate it up and show only back side.

But to get a good result, I need to translate a lot, and then the camera on the ground is under the reversed mesh.
So I use a displacement map around the camera to lower the reverted mesh.

Works well, but I can’t seam to upload the map.
I know I move the map ( i use the displacement map as a color map to make sure of that ).
I put needsUpdate on the texture, the material, the geometry and the mesh, but it doesn’t work.

Here is a jsfiddle example of the issue:
https://jsfiddle.net/Horsetopus/kpbvm0hb/

Anly clue on what I am missing?
Thanks.

2

Up?
Can’t anybody tell me how to how to get the geometry when I update the elevation map?

3

I’m not sure if I’ve completely understood what you are trying to do, do you want the circular area in the middle to be gone?

In any case, if you want to use a base64 image as a texture, the following should work:

var image = document.createElement( 'img' );

var texture = new THREE.Texture( image ); //use this as your texture

image.onload = function()  {
  texture.needsUpdate = true;
};
image.src = 'data:image/png;base64,XXXXX';
4

Hi, looeee

I tried your way of loading the picture just in case, but as I thought this was unrelated with my issue. My texture was loaded just fine.
I may not have explain my problem well enough, let me give another try:

No, the hole in the middle is actually just the black reversed mesh that is lowered by the displacement map.
Their is still relief, but you can’t see it as it is not outlined.

But as you can see, since I reuse the displacement map as color map, I move the U V of the texture every frame, but the displacement of the geometry is not updated.

So, short version: The “hole” in the middle should move just as the white color does. And it doesn’t.
How do I update it?

Or is it that the displacement map doesn’t coïncider U-V offset parameters?

1 Like
5

Thanks, I understand now.

Yes, it looks like the displacement map doesn’t take into account texture offsets.

It’s defined here: https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/displacementmap_vertex.glsl

#ifdef USE_DISPLACEMENTMAP

	transformed += normal * ( texture2D( displacementMap, uv ).x * displacementScale + displacementBias );

#endif

This would need to be updated to something like:

#ifdef USE_DISPLACEMENTMAP

	transformed += normal * ( texture2D( displacementMap, uv * offsetRepeat.zw + offsetRepeat.xy ).x * displacementScale + displacementBias );

#endif

You should open an issue on github about this: https://github.com/mrdoob/three.js/issues

1 Like
6

Hi looeee, and thank you again.
Your fix works just fine.

I tried adding an issue, but github seams to have issues of its own right now… The post is ready, I’ll try again later.

1 Like