Cannonjs Heightfield from BufferGeometry


i trying to make a HeighField cannonjs from a generated BufferGeometry

does anyone now a Threejs solution for this?

what i found is the babylon createHeighField

right now a generate the heighfield seperate from an heighmap image

the Idea is to generate the visual heightmap from the heightmap png and optimize this, with rtin martini.
this bufferGeometry should be used to generate the Cannonjs heightfield and the martini Geometry should be subdivided and shown as the visual mesh

Hey @arpu
I think I know what you want, I have a solution in my engine. It’s a bit complex, due to abstraction layers. But it’s not very complicated.

Basically, i have a thing to represent 2D textures, it’s called Sampler2D in my engine, it’s just a convenient way to work with textures, and it gives you an interface that’s quite similar with GLSL sampler2d.

So you have a PNG, how do you represent it as a Sampler2D? there’s a utility function for that:

Okay, now we can actually make the geometry, that’s handled by this guy here:

Hope that helps.

1 Like

Hey @Usnul

thx a lot for your detail answer! will looks at the meep code soon! looks awesome

1 Like

ok i think i do not understand the code complete :confused:

at first idea is to have gltf/glb model → BufferGeometry and make a CannonJs compatible matrix

1 Like

Ah, I did not understand that. Then I suggest 2 approaches:

  1. Iterate in a grid pattern, and ray-cast against your loaded GLTF geometry, this way you can “sample” a height-map from it.
  2. Use Blender or something like that to bake your geometry into an actual height-map image, then load that into cannon.js
1 Like

hmm ok so its not possible to use the Vertices Positions from the BufferGeometry to generate the Cannonjs matrix direct?

( like Babylonjs is doing it)

I don’t know cannon.js, but a height field is regular, so every vertex must be at a fixed pre-defined grid location. Arbitrary geometry won’t do. You can make some assumptions about your geometry and generate a grid that way - but you’d have to code that yourself, I think. I don’t know of an existing library that does exactly that for you.

1 Like

i see
what i use for now is this awesome hub component

1 Like