Cannonjs Heightfield from BufferGeometry

arpu · October 25, 2019, 3:55pm

Hello

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

BabylonJS/Babylon.js/blob/f55b1cfd5299ad6930c9d7202292059c1b1bf519/src/Physics/Plugins/cannonJSPlugin.ts#L377


            returnValue = new this.BJSCANNON.Particle();

            break;

        case PhysicsImpostor.NoImpostor:

            returnValue = new this.BJSCANNON.Box(new this.BJSCANNON.Vec3(0, 0, 0));

            break;

    }



    return returnValue;

}



private _createHeightmap(object: IPhysicsEnabledObject, pointDepth?: number) {

    var pos = <FloatArray>(object.getVerticesData(VertexBuffer.PositionKind));

    let transform = object.computeWorldMatrix(true);

    // convert rawVerts to object space

    var temp = new Array<number>();

    var index: number;

    for (index = 0; index < pos.length; index += 3) {

        Vector3.TransformCoordinates(Vector3.FromArray(pos, index), transform).toArray(temp, index);

    }

    pos = temp;

    var matrix = new Array<Array<any>>();

right now a generate the heighfield seperate from an heighmap image

arpu · October 26, 2019, 12:14pm

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

Usnul · October 27, 2019, 10:51am

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.

github.com

Usnul/meep/blob/a551bba1fe41748f895af9443f820c346ea49fd4/src/model/graphics/texture/sampler/Sampler2D.js

/**
 * Created by Alex on 11/11/2014.
 */


import Vector2 from '../../../core/geom/Vector2';
import Vector3 from '../../../core/geom/Vector3';
import Vector4 from '../../../core/geom/Vector4';
import { clamp, min2 } from "../../../core/math/MathUtils";
import { mix } from "../../../core/math/MathUtils.js";
import { BlendingType } from "./BlendingType.js";
import { assert } from "../../../core/assert";

function makeVector1() {
    return 0;
}

function makeVector2() {
    return new Vector2();
}

This file has been truncated. show original

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

github.com

Usnul/meep/blob/a551bba1fe41748f895af9443f820c346ea49fd4/src/model/graphics/texture/sampler/loadSampler2D.js

/**
 * Created by Alex on 30/10/2014.
 */
import { Sampler2D } from './Sampler2D';
import { GameAssetType } from "../../../engine/asset/GameAssetType.js";


/**
 *
 * @param {string} url
 * @param {AssetManager} assetManager
 * @returns {Promise<Sampler2D>}
 */
export default function loadSampler2D(url, assetManager) {
    return new Promise(function (resolve, reject) {
        assetManager.get(url, GameAssetType.Image, (asset) => {
            const imageData = asset.create();

            const width = imageData.width;
            const height = imageData.height;

This file has been truncated. show original

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

github.com

Usnul/meep/blob/a551bba1fe41748f895af9443f820c346ea49fd4/src/model/level/terrain/BufferedGeometryArraysBuilder.js

/**
 * Created by Alex on 29/05/2016.
 */


import ComputeNormals from '../../graphics/geometry/buffered/ComputeNormals';

/**
 *
 * @param {Sampler2D} samplerHeight
 * @param {Vector2} position
 * @param {Vector2} size
 * @param {Vector2} scale
 * @param {Vector2} totalSize
 * @param {number} resolution
 * @returns {{indices, vertices: Float32Array, normals: Float32Array, uvs: Float32Array}}
 */
function buildBufferGeometry(samplerHeight, position, size, scale, totalSize, resolution) {

    const width = size.x;

This file has been truncated. show original

Hope that helps.

arpu · October 29, 2019, 10:02am

Hey @Usnul

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

arpu · November 4, 2019, 10:24pm

ok i think i do not understand the code complete

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

Usnul · November 4, 2019, 10:32pm

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

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

arpu · November 11, 2019, 10:10am

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)

Usnul · November 12, 2019, 6:11am

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.

arpu · November 16, 2019, 2:06pm

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

github.com

mozilla/Spoke/blob/74b3ccf2f934b45a4e0a33e3ef535632c8cf0f51/src/editor/heightfield/HeightfieldClient.js

import HeightfieldWorker from "./heightfield.worker";

export default class HeightfieldClient {
  constructor() {
    this.worker = new HeightfieldWorker();
    this.working = false;
  }

  async buildHeightfield(geometry, params, signal) {
    if (this.working) {
      throw new Error("Already building heightfield");
    }

    this.working = true;

    if (geometry.attributes.position.count === 0) {
      this.working = false;
      return null;
    }

This file has been truncated. show original

Topic		Replies	Views
Creating a Cannon.js Heightfield or Trimesh based on a Three.js plane Questions geometry , physics , plane , procedural	0	1418	December 24, 2021
Optimizing the use of a custom Geometry Questions geometry	12	3589	September 19, 2017
Modify indexed BufferGeometry (mouse or input) Resources buffergeometry	3	5866	July 21, 2018
Help width widthSegments, heightSegments, and Height Map size on PlaneGeometry Questions geometry , plane-geometry	1	4037	August 13, 2017
Create a cannon Body with a BufferGeometry from GLTF Model Questions geometry	4	2855	December 2, 2023

Cannonjs Heightfield from BufferGeometry

Related topics