Using a group of rocks mesh, make them as texture and displacementmap, then apply to a plane to make fake rocks?


I was asked by my manager to do such a thing:
We have a 3D scene and there are rocks spawned. At the very beginning, we just used:

for(let i = 0; i < rock_num; i++){
       rock = gltfloader.load('url').clone();
       rock.position = // some random ranged of position;
       rock.rotation = // some random ranged rotation;

to make those rocks. The rock_num was like 20 per line, as the machine kept working, more lines of rock groups spwaned.

However, my manager said the performance was not good enough for the project, the FPS should be consistently 60+. So he provided a solution below:

  1. He still want the rock group, but just one line , and do not add them into the scene. Instead, he wanted them to become a WebglRender Target, in other words, a texture which just looks like you are looking at those rocks 90 degrees above. Apply that texture on a plane mesh.

  2. The plane must have a displacement map, so that it will become 3D and exactly same as those rock meshes. Thus, he want use **ShaderMaterial ** to do so. Use vertex shader to get all the rocks’ points position and uv, calculate how high each point is, pass them to fragment shader.

  3. For displacement map, white means high and black means low(height = 0), so fragment shader is about to receive height positions and render color from #000 to #fff, depending on how high the point is.

So far, I got stucked on how to use vertex shader and fragment shader, to do things I mentioned above in step 2.5 and 3. Since I have never ever written anything about shaders, and I do not know how to deal with those Float32 array of positions. Anything I passed into the vertex shader, the error msg pops up.

My confusions:
I have a array(1600) which stores 400 different points’ positions already, what should I do to let shaders work?

I have got one line of rocks and their position attributes, how can I turn those 1600 info into vertex shaders, so that it will know each point’s height, and the fragment shader will apply from black to white?

Love you guys.

Hello, I guess you need this? Like this example:


Thank you my brother, I was just tried to simplify my problem:

I have a line of rocks(mesh), I want them to become a texture (by using webglrendertarget), and I want their position attributes to become a displacementmap(by using vertex and fragment shaders). After that, I apply those two on a plane, so it looks just like a line of rocks.

@xjindf When I started to read the topic about rocks and texture, the first thought I had was exactly about that codepen :slight_smile:

Maybe this example will be helpful:

1 Like

@prisoner849 thx man, I am trying to figure your demo out too. :grin: