Need to access the new geometry from the 3d model after transforming the heightmap on it (webGL / threejs), make new Points based on it

I want to access the new geometry from the mesh exactly from the 3d model after converting by help height map to it. In the end, I need a model that can consist of points in the shape of the result obtained after applying the height map to the grid. The difficulty is that the height map is applied not in the material in the displacment map, i.e. not in the fragment shader and not plane or some primitive, need get rezult from 3d mesh. I need to get the geometry in order to work with it as with a physical body in practice. I did make some tests, tryings, but i am just junior

  1. example, way through the vertex shader
    Edit fiddle - JSFiddle - Code Playground - on sphere by shader is applied here and works correctly if you do the same for model 3d as well -
    but need get then array attributes position from webgl to js for make new geometry for clouds point that workin in JS /Three.js whit their`s methods

  2. example way through three.js - in this example, I can apply the height map through three.js without a shader yet, also can access the geometry, I can create points according to the shape that I got as a result of the transformation so well. But it works correctly on a sphere, but not on a 3D model (for example ninja head)

Please help me with either an example from webgl or an example from three.js. If you can give a good example in a any sandbox, where you can get geometry using a height map using a 3D model, i.e. make a point cloud based on it how possible mission.

In the example where the form is obtained using the vertex shader, I need to get the attributes of the points using “transformFeedback” so that I can work with this data already in JS, i.e. create geometry from a point cloud. Could you write a working example on this example how to pass “vec3 newPosition” from “VSHADER_SOURCE” I’m just learning, beginner, sorry.

In the example where I tried to do it using js / three.js, if instead of using the 3D ninja model itself instead of a sphere, then the height map is applied from the profile-side part, and not the front-front part of the head. Those. position attributes by number go first on the right side of the skull, then on the left, which makes it difficult to apply the height map correctly. It can be seen on the sphere that the map is applied along the ‘x’ axis. I’ve tried editing the map itself to look along the ‘y’ axis, but that only works correctly on a sphere. Rotating the mesh itself, or attributes like points or vectors, doesn’t help, nothing changes. Rotating the quartenion and matrix did not help, as well as borrowing attributes from another mesh. I tried slicing, reordering the geometry point array and also the heightmap point array and didn’t help either. Removing uv, and generally uv in this case, does not affect, since an array of heightmaps is created separately from the image, and not when it lies on the model. But if you can make it change the points according to the stretched skin, so that you can then get new geometry from it, like new THREE.Points() - then that would solve the problem too, since this is the main goal, doesn`t matter how you method used.