Heightmap Collisions

Questions
, ,
1

Heightmap Collisions

I have been trying to use a heightmap for a game I am currently working on using three.js, and I have the image(s) for it. I got the heightmap working but I don't think it is the best method as I was not able to find any way of detecting the height of a certain area.

My code for the heightmap:

const geometry = new THREE.PlaneGeometry(20, 20, 100, 100);
const material = new THREE.MeshStandardMaterial({
    map: <my texture map>,
    displacementMap: <my greyscale heightmap>,
    displacementScale: 1,
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

I have movement and camera controls relative to an fps game.

It works visually,
but when I tried to raycast (was laggy because of the amount of triangles),
it acted like a flat surface when I added collisions to the raycast.

Are there any easy methods of adding heightmap collisions?

My question might not be very clear to somebody viewing this so please ask questions.
(I don’t have the complete source code of the project right now)

2

displacementMap works only on the GPU, while raycaster works only on the CPU - to raycast against a mesh that’s using a height map, you’d need to apply the heightmap on the CPU for each vertex (mind, this can’t really be done in real-time for extended periods of time, so best to do it once during the loading of the map for example).

Quite a few topics with sample implementations around - example.

2 Likes
3

Thanks for the information but this isn’t very helpful. To clarify, my main question is

Are there any easy methods of adding heightmap collisions?

When I say easy I am talking about easy to implement, I don’t care about the math involved.
Should I store a heightmap in a list? If so, then how would I make it look like a plane?
These are the kind of questions I am asking, but generalized.

4

Height maps are textures tho - wdym by “storing it in a list” ?

As above - all you really need to do is loop through the vertices in your mesh, read corresponding pixels in the heightmap - and offset the vertices by the value read from the texture.

5

I mean generating my own heightmap using an algorithm and store the values in a list.

How do you edit specific vertices in a plane?

6

4910ebaaac4991d8699b62553afb1d9a
4910ebaaac4991d8699b62553afb1d9a1280Ă—870 149 KB

Heighmap is a 2D texture. It has (at least) two dimensions. Can you store it as a list? Sure, go for it. Should you? That I leave to your own judgement - similarly you could argue map of the world can be stored as a 1D list, but probly wouldn’t be crazy readable in that form :smiling_face_with_tear:

1 Like
7

For clearification its this?

plane.vertices[index].y

Where does it start? (top-left? bottom-left?)

8

You can’t assume order in the positions buffer, just assume it’s random and work with x/y/z coordinates - docs.

1 Like
9

Okay, thank you I’ll implement some code and see if it works. I’ll set the solution if it works.

10

I was able to make a solution based on the fact that a plane geometry stores its vertices in an array.

const heightmap = [];

const geometry = new THREE.PlaneGeometry(20, 20, 10, 10);
const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = Math.PI / 180 * -90;
scene.add(plane);

for(let i = 0; i < geometry.attributes.position.array.length / 3; i++) {
    heightmap.push(Math.random() * 5);
};
let index = 0;
for(let i = 2; i < geometry.attributes.position.array.length; i += 3) {
    geometry.attributes.position.array[i] = heightmap[index];
    index++;
};

Furthermore, I was able to add collisions because of the list data I had stored. (I’ll use an algorithm for perlin noise)

1 Like