Background:
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;
group.add(rock);
}
to make those rocks. The rock_num was like 20 per line, as the machine kept working, more lines of rock groups spwaned.
Conflicts:
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:
-
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.
-
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.
-
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.
